Gulp/webpack css 特异性去除器

Question

嘿，我们有一大堆用 sass 构建的 6 年前的旧 CSS。

不幸的是，这一年来人们对这一切都有些发疯了，现在我们有了具有 15 个特异性级别的 sass。这意味着我们编译的压缩 CSS 非常庞大。

由于我们即将在 redux 中完全重建我们的网站，管理层不想花费资源来清理我们的 CSS，这是可以理解的。

我想作为一个快速解决方案，是否有一个 gulp/webpack 插件可以以编程方式清理构建管道中不需要的特定性？

Answer 1

我写了一些可以帮助解决这个问题的东西:]。 https://github.com/felixmosh/postcss-decrease-specificity

这个 postcss 插件减少了嵌套超过 options.depth（默认为 3）的体面类选择器的数量。

此插件支持多种场景：

• .a .b .c .d -> .b .c .d
• tag .a .b .c .d -> tag .b .c .d
• #id .a .b .c .d -> #id .b .c .d
• .a .b > .c -> .a .b > .c
• .a .b .c .d .e > .f -> .c .d .e > .f

如需更多支持的案例，请查看tests。

我知道这个插件并没有涵盖所有的情况，也不是很完美，但是有了PR我们可以让它更适合。

⚠️ 谨慎使用此插件，它可能会破坏您的设计。