gulp - 如何让 gulp-clean-css 在 !important 之前保留空格？

Question

优化代码时，gulp-clean-css 会从 css 值和结束!important词之间删除重要的空格，例如。width: 600px !important变成width: 600px!important

顺便说一句，1级semicolonAfterLastProperty: true设置也不起作用！

我已阅读此处的文档 - https://github.com/jakubpawlowicz/clean-css#formatting-options - 并尝试使用 level1transform: function () {}但它不起作用。

.pipe(cleanCSS({
        format : 'beautify',
        level: {

   1: {
      transform: function (propertyName, propertyValue, selector ) {
        if (propertyValue.indexOf('!important') > -1) {
          return propertyValue.replace('!important', ' !important');
        }
      },
        semicolonAfterLastProperty: true
    },
    2 : {
        removeDuplicateRules : true
     }
     }      
    }))

到目前为止，唯一可行的解​​决方案是用 包围代码的关键部分 /* clean-css ignore:start */ .... /* clean-css ignore: end */，但我正在寻找一些更好的方法。

Answer 1

好吧，看起来 gulp-replace 插件有帮助：

来自 gulpfile.js：

常量替换 = 要求（'gulp-replace'）;

... CUT ... 和： .pipe(replace('!important', ' !important'))