NaNoWriMo Promotes Manuscription

    postcss-prefix-selector

    1.10.0 • Public • Published

    postcss-prefix-selector

    NPM version Build status Test coverage Dependency Status License Downloads Gitpod ready-to-code

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

    Table of Contents

    Install

    $ 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;
        }
      }
    })).process(css).css

    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).

    module: {
      rules: [{
        test: /\.css$/,
        use: [
          require.resolve('style-loader'),
          require.resolve('css-loader'),
          {
            loader: require.resolve('postcss-loader'),
            options: {
              postcssOptions: {
                plugins: {
                  "postcss-prefix-selector": {
                    prefix: '.my-prefix',
                    transform(prefix, selector, prefixedSelector) {
                      if (selector.match(/^(html|body)/)) {
                        return selector.replace(/^([^\s]*)/, `$1 ${prefix}`);
                      }
                      return prefixedSelector;
                    },
                  },
                  autoprefixer: {
                    browsers: ['last 4 versions']
                  }
                }
              }
            }
          }
        ]
      }]
    }

    Options

    • 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.
    • ignoreFiles - List of ignored files for processing.
    • includeFiles - List of included files for processing.

    Maintainer

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

    Contribute

    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.

    License

    MIT © 2015-2021 Jonathan Ong.

    Install

    npm i postcss-prefix-selector

    DownloadsWeekly Downloads

    171,633

    Version

    1.10.0

    License

    MIT

    Unpacked Size

    9.44 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar