postcss-remove-global: 从代码中移除 :global 的 PostCSS 插件

postcss-remove-global

发布一个 PostCSS 插件，用来移除样式中的 :global 标识符。
* github 链接：https://github.com/princetoad/postcss-remove-global
* npm 链接：https://www.npmjs.com/package/postcss-remove-global

目前支持三种场景，第一种是 :global 作为一个单独的选择器，第二种是 :global 作为选择器的一部分，第三种是 :global 作为 @keyframe 属性的一部分。分别对应下面的三个示例。

示例

  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 { }

如何使用

使用 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 { }'

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

结合 gulp

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

参见：https://github.com/princetoad/try-postcss/blob/master/gulpfile.js

回复