prg

postcss-remove-global

PostCSS plugin allows to remove :global identifiers from your stylesheets

Showing:

Popularity

Downloads/wk

70

GitHub Stars

1

Maintenance

Last Commit

4yrs ago

Contributors

2

Package

Dependencies

1

Size (min+gzip)

21.0KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100