PostCSS plugin allows to remove :global identifiers from your stylesheets
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
index.test.js
package.json

README.md

postcss-remove-global Build Status

PostCSS plugin to remove :global identifier from your stylesheet files.

Support three cases

  1. Remove :global as a single selector
:global {
    a { }
}
a { }
  1. Remove :global as part of a selecotr
.root :global .text { margin: 0 6px; }
.root .text { margin: 0 6px; }
  1. Remove :global as part of params of @keyframe
@keyframes :global(zoomIn) { }
@keyframes zoomIn { }

Usage

Use with PostCSS API

const postcss = require('postcss')
const removeGlobal = require('postcss-remove-global')

const css = postcss()
  .use(removeGlobal())
  .process(':global { a {color: gray(85); background-color: gray(10%, .25)}}')
  .css
console.log('css = ', css)
//= 'a {color: gray(85); background-color: gray(10%, .25)}'

const css2 = postcss([removeGlobal])
  .process('.root :global .text { margin: 0 6px; }')
  .css
console.log('css2 = ', css2)
//= '.root .text { margin: 0 6px; }'

const css3 = postcss([removeGlobal])
  .process('@keyframes :global(zoomIn) { }')
  .css
console.log('css3 = ', css3)
//= '@keyframes zoomIn { }'

Reference:https://github.com/princetoad/try-postcss/blob/master/src/Plugin/plugin-remove-global.js

Use gulp task runner

gulp.task('global', () => {
  return gulp.src('assets/*.css')
    .pipe(postcss([removeGlobal]))
    .pipe(gulp.dest('build/'))
})

Reference:https://github.com/princetoad/try-postcss/blob/master/gulpfile.js