How to make gulp-clean-css preserve whitespace before !important?

Question

When optimizing the code gulp-clean-css removes the vital whitespace from between css values and the closing !important word, eg. width: 600px !important becomes width: 600px!important

By the way, the level 1 semicolonAfterLastProperty: true setting does not work either!

I have read the documentation here - https://github.com/jakubpawlowicz/clean-css#formatting-options - and tried to use level1 transform: function () {} but it does not work.

.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
     }
     }      
    }))

The only solution so far that worked was to surround critical parts of the code by /* clean-css ignore:start */ .... /* clean-css ignore: end */, but I am looking for some nicer way.

Answer 1

Well, it looks that the gulp-replace plugin is at help:

From gulpfile.js:

const replace = require('gulp-replace');

... CUT ... and: .pipe(replace('!important', ' !important'))