Skip to content
Prefix all CSS rules with a selector
Branch: master
Clone or download
greenkeeper and RadValentin Update mocha to the latest version 🚀 (#72)
* chore(package): update mocha to version 7.0.1

* chore(package): update lockfile yarn.lock

* Update pre-commit trigger to new husky reccomendation

Co-authored-by: Valentin Radulescu <>
Latest commit 52ffd9f Feb 5, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
test Update mocha to the latest version 🚀 (#72) Feb 5, 2020
.travis.yml Edit the top-level documentation (#38) Sep 9, 2017
LICENSE bump copyrights year (#68) Oct 1, 2019
index.js Vendor keyframes not ignored (#61) May 3, 2019
package.json Update mocha to the latest version 🚀 (#72) Feb 5, 2020


Greenkeeper badge NPM version Build status Test coverage Dependency Status License Downloads

Prefix every CSS selector with a custom namespace .a => .prefix .a

Table of Contents


$ npm install postcss-prefix-selector

Usage with PostCSS

const prefixer = require('postcss-prefix-selector')

// css to be processed
const css = fs.readFileSync("input.css", "utf8")

const out = postcss().use(prefixer({
  prefix: '.some-selector',
  exclude: ['.c'],

  // Optional transform callback for case-by-case overrides
  transform: function (prefix, selector, prefixedSelector) {
    if (selector === 'body') {
      return 'body' + prefix;
    } else {
      return prefixedSelector;

Using the options above and the CSS below...

body {
  background: red;

.a, .b {
  color: aqua;

.c {
  color: coral;

You will get the following output

body.some-selector {
  background: red;

.some-selector .a, .some-selector .b {
  color: aqua;

.c {
  color: coral;

Usage with webpack

Use it like you'd use any other PostCSS plugin. If you also have autoprefixer in your webpack config then make sure that postcss-prefix-selector is called first. This is needed to avoid running the prefixer twice on both standard selectors and vendor specific ones (ex: @keyframes and @webkit-keyframes).

const prefixer = require('postcss-prefix-selector');

module: {
  rules: [{
    test: /\.css$/,
    use: [
        loader: require.resolve('postcss-loader'),
        options: {
          plugins: () => [
              prefix: '.my-prefix'
              browsers: ['last 4 versions']


  • prefix - This string is added before every CSS selector.
  • exclude - It's possible to avoid prefixing some selectors by passing an array of selectors (strings or regular expressions).
  • transform - In cases where you may want to use the prefix differently for different selectors, it is possible to pass in a custom transform method.


This project was originally created by @jongleberry and is being maintained by @RadValentin. If you have any questions, feel free to ping the latter.


Please contribute! If you have any questions or bugs, open an issue. Or, open a pull request with a fix.

This project uses Mocha. If you submit a PR, please add appropriate tests and make sure that everything is green for your branch.


MIT © 2015-2019 Jonathan Ong.

You can’t perform that action at this time.