postcss-globalize v3.0.0

postcss-globalize

If you are using postcss-modules this plugin will scope all @keyframes, .classes, and #ids as global by adding :global(). It will also scope selectors with animation or animation-name declarations with a :global scope.

Useage

const fs = require('fs');
const postcss = require('postcss');
const globalize = require('postcss-globalize');

/* styles.css

.class {
  margin:0;
  animation: test-keyframe 3s;
}

#id {
  margin:0;
}

@keyframes test-keyframe {}
*/

fs.readFile('styles.css', (err, css) => {
    postcss([globalize()])
      .process(css, { from: 'styles.css', to: 'output.css' })
      .then(result => fs.writeFile('output.css', result.css););
});

/* output.css

:global(.class) :global {
   margin:0;
   animation: test-keyframe 3s;
}

:global(#id) {
  margin:0;
}

 @keyframes :global(test-keyframe) {}
*/