postcss-prefix-selector

What is postcss-prefix-selector?

The postcss-prefix-selector npm package is a PostCSS plugin that allows you to add a prefix to all CSS selectors. This can be useful for scoping styles to a specific part of a page, avoiding conflicts with other styles, or applying styles conditionally.

What are postcss-prefix-selector's main functionalities?

Prefixing all selectors

This feature allows you to add a prefix to all CSS selectors. In this example, the selector '.foo' is prefixed with '.my-prefix', resulting in '.my-prefix .foo'.

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

const css = '.foo { color: red; }';

postcss([prefixer({ prefix: '.my-prefix' })])
  .process(css)
  .then(result => {
    console.log(result.css);
  });
// Output: .my-prefix .foo { color: red; }

Excluding specific selectors

This feature allows you to exclude specific selectors from being prefixed. In this example, the selector '.bar' is excluded from being prefixed, so only '.foo' is prefixed.

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

const css = '.foo { color: red; } .bar { color: blue; }';

postcss([prefixer({ prefix: '.my-prefix', exclude: ['.bar'] })])
  .process(css)
  .then(result => {
    console.log(result.css);
  });
// Output: .my-prefix .foo { color: red; } .bar { color: blue; }

Transforming the prefix

This feature allows you to transform the prefix in a custom way. In this example, the prefix is transformed to include '--' between the prefix and the selector.

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

const css = '.foo { color: red; }';

postcss([prefixer({ prefix: '.my-prefix', transform: (prefix, selector, prefixedSelector) => `${prefix}--${selector}` })])
  .process(css)
  .then(result => {
    console.log(result.css);
  });
// Output: .my-prefix--.foo { color: red; }

Other packages similar to postcss-prefix-selector

postcss-nested

The postcss-nested package allows you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. While it doesn't add prefixes, it helps in organizing and scoping styles in a nested manner, which can be an alternative approach to managing CSS scope.

postcss-namespace

The postcss-namespace package is another PostCSS plugin that helps in scoping CSS by adding a namespace to your selectors. It is similar to postcss-prefix-selector but focuses on adding a namespace rather than a simple prefix.

postcss-scopify

The postcss-scopify package allows you to scope your CSS by adding a specific scope to your selectors. It is similar to postcss-prefix-selector but offers more flexibility in defining the scope.

README

postcss-prefix-selector

Prefix every rule with a selector.

Installation

$ npm install postcss-prefix-selector

Usage

var prefix = require('postcss-prefix-selector')

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

var out = postcss().use(prefix({
  prefix: '.some-selector ', // <--- notice the traililng space!
  exclude: ['.c']
})).process(css).css

Using this input.css:

.a, .b {
  color: aqua;
}

.c {
  color: coral;
}

you will get:

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

.c {
  color: coral;
}

Options

It's possible to avoid prefixing some selectors by using the exclude option which takes an array of selectors as a parameter.