a-x-/postcss-global-nested

Wrap styles into a :global like postcss-nested does it for usual selectors

postcss-global-nested

Wrap styles into a :global like postcss-nested does it for usual selectors.

You should use :global as rare as you can.

usage

test.css:

:global {
  .foo {}
  .bar {}
}

Use it with postcss, postcss-nested and webpack

{
  loader: 'postcss-loader',
  options: {
    plugins: [
      require('autoprefixer')({
        browsers: ['last 2 version'],
      }),
      require('postcss-nested')({}),
      require('postcss-global-nested')({}),
    ],
  },
}

Use it w/ vanilla postcss and postcss-nested

import pcss from 'postcss';
import nested from 'postcss-nested';
import globalNested from 'postcss-global-nested';

(async () => {
  const css = await util.promisify(fs.readFile)('test.css', 'utf8');
  const result = await pcss([nested, globalNested]).process(css);
  result.css // -> ':global(.foo) {} :global(.bar) {}'
 })();