PostCSS Add Root Selector

PostCSS Plugin adds root selector to all other rules.

Input:

.foo {
  color: red;
}

a.foo,
section {
  color: red;
}

@media (max-width: 700px) {
  #some-id {
    color: red;
  }
}

/* html and body selectors will be popped up */
html,
body.desktop {
  font-family: sans-serif;
}

body.desktop .bar {
  font-weight: bold;
}

/* self-applied declarations of html and body selectors will be not touched */
/* mixed selectors will be properly split */
html,
body,
.some-root-selector {
  margin: 0;
  color: red !important;
}

/* ads root itself to * (all) rules */
*,
*:before,
*:after {
  box-sizing: border-box;
}

Output

.some-root-selector .foo {
  color: red;
}

.some-root-selector a.foo,
.some-root-selector section {
  color: red;
}

@media (max-width: 700px) {
  .some-root-selector #some-id {
    color: red;
  }
}

/* html and body selectors is popped up */
html .some-root-selector,
body.desktop .some-root-selector {
  font-family: sans-serif;
}

body.desktop .some-root-selector .bar {
  font-weight: bold;
}

/* self-applied declarations of html and body selectors will be not touched */
/* mixed selectors will be properly split */
.some-root .some-root-selector {
  margin: 0;
  color: red !important;
}

html .some-root-selector,
body .some-root-selector {
  color: red !important;
}

html,
body {
  margin: 0;
}

/* ads root itself to * (all) selectors list */
.some-root-selector,
.some-root-selector *,
.some-root-selector *:before,
.some-root-selector *:after {
  box-sizing: border-box;
}

Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-add-root-selector

Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-add-root-selector'),
    require('autoprefixer')
  ]
}

Gulp

In Gulp you can use gulp-postcss with postcss-add-root-selector npm package.

gulp.task('postcss-add-root-selector', () => {
  const addRootSelector = require('postcss-add-root-selector')
  const sourcemaps = require('gulp-sourcemaps')
  const postcss = require('gulp-postcss')

  return gulp.src('./src/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([ addRootSelector({ rootSelector: '.some-root' }) ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dest'))
})

With gulp-postcss you also can combine Postcss Add Root Selector plugin with other PostCSS plugins.

Webpack

In webpack you can use postcss-loader with postcss-add-root-selector and other PostCSS plugins.

module.exports = {
  module: {
    rules: [
      {
        test: /library\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      include: ['some-style-lib.css'],
                      rootSelector: '.some-root',
                    }
                  ]
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

Or you can add loader to specific import

import 'postcss-loader?postcssOptions.plugins=postcss-preset-env?postcssOptions.plugins.rootSelector=.some-root!./library.css'

And create a postcss.config.js with:

module.exports = {
  plugins: [
    require('postcss-add-root-selector')({
      include: ['some-style-lib.css'],
      rootSelector: '.my-root',
    })
  ]
}

Options

Function addRootSelector(options) returns a new PostCSS plugin. See [PostCSS API] for plugin usage documentation.

addRootSelector({ rootSelector: '.some-root' })

Available options are:

rootSelector (string): root selector (required).
include (Array<string | RegExp>): file masks to be included.
exclude (Array<string | RegExp>): file masks to be excluded.

Plugin provides incorrect parent link when assigns nodes to cloned rule

Hello there, Mr. Ivan.
I have discovered one problem with your generously provided plugin.

Example:
We have 3 plugins in use at .postcssrc.js:

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-add-root-selector')({
      include: [/quasar\.scss$/],
      rootSelector: '.brand-root',
    }),
    require('postcss-rtlcss')({}),
  ],
}

The problem is that plugin makes next plugin (postcss-rtlcss) to throw error on build:

 error  in ./src/styles/quasar.scss

Syntax Error: HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot set properties of undefined (setting 'parent')
    at Array.forEach (<anonymous>)

-- inner error --
Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot set properties of undefined (setting 'parent')
    at Array.forEach (<anonymous>)
Generated code for /root/node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!/root/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!/root/node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!/root/node_modules/vue-cli-plugin-quasar/lib/loader.scss.js!/root/src/styles/quasar.scss

1 | throw new Error("Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot set properties of undefined (setting 'parent')
    at Rule.removeChild (/root/node_modules/postcss/lib/container.js:219:38)
    at Declaration.remove (/root/node_modules/postcss/lib/node.js:78:19)
    at /root/node_modules/postcss-rtlcss/index.js:1:17904
    at Array.forEach (<anonymous>)
    at ue (/root/node_modules/postcss-rtlcss/index.js:1:17874)
    at /root/node_modules/postcss-rtlcss/index.js:1:18788
    at /root/node_modules/postcss-rtlcss/index.js:1:5334
    at Root.each (/root/node_modules/postcss/lib/container.js:41:16)
    at $ (/root/node_modules/postcss-rtlcss/index.js:1:5221)
    at pe (/root/node_modules/postcss-rtlcss/index.js:1:18289)");

trailskr / postcss-add-root-selector Goto Github PK