Border optimization with clean css removes color when using !important

[MohammedSaberMohammed]

IMPORTANT: clean-css is now in a maintenance mode. PRs are still welcome, and I will try do an occasional bugfix relase.

Precheck

I've an issue with border when I use !important, the generated css is fine but the minified version using clean-css removes the border color

Environment

• clean-css version - [email protected]:
• node.js version - v14.19.0:
• operating system: windows 10

Configuration options

const { src, dest, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');
const autoprefixer = require('gulp-autoprefixer');
const rename = require("gulp-rename")
const flatten = require('gulp-flatten');
var gulpIgnore = require('gulp-ignore');

function minify() {
  return src(paths.styles)
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(cleanCSS({
      level: {
        "2": {
          all: false,
          removeDuplicateRules: true,
          restructureRules: true,
          mergeSemantically: true
        }
      },
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(flatten())
    .pipe(dest(file => {
      const srcFullPath = file.history[2];
      const destPath = srcFullPath.replace(file.basename, '');

      return destPath
    }))
}

exports.styles = minify;

Input CSS

  &:hover {
    border: 1px solid var(--#{$root-vars-prefix}primary-bg-color) if($enable-important-utilities, !important, null);
  }

Actual output CSS

.n-btn.n-btn--primary:hover {
  border: 1px solid var(--layout-primary-dark-color) !important;
}

Actual output Minified CSS

.n-btn.n-btn--primary:hover{border:1px solid!important}

Expected output CSS

.n-btn.n-btn--primary:hover{border:1px solid **var(--layout-primary-dark-color)** !important}