Optimizing properties of level 2 removes hsla values

[lex111]

For some unknown reason, when using 2 level, color values specified in hsla format are removed.

Environment

• clean-css version - npm ls clean-css: 5.1.0
• node.js version - node -v: 12.13.0
• operating system: Ubuntu 20.04

Configuration options

var CleanCSS = require('clean-css');
new CleanCSS({
  inline: false,
  level: {
    1: {
      all: false,
    },
    2: {
      all: true,
      restructureRules: true,
      removeUnusedAtRules: false,
    },
  },
})

Input CSS

.test {
  border: 1px solid hsla(0, 0%, 65.5%, 0.2);
}

Actual output CSS

.test {
  border: 1px solid;
}

Expected output CSS

.test {
  border: 1px solid hsla(0, 0%, 65.5%, 0.2);
}

[lex111]

I also get the same result in the playground with 2 level rules completely disabled.

[lex111]

So, after a little research, I figured out that this is due to the "optimizing properties", because if I specify the border property in the skipProperties field, the hsla value will not be removed (as it should).

@jakubpawlowicz could you please suggest what kind of optimization of properties are carried out, in addition to the existing rules? In my opinion, it is strange that as a result of this, valid values are completely removed.

[jakubpawlowicz]

Hey @lex111 - it looks like validator thinks it's an invalid CSS color value, but this is not true. Let me check why.

Since level 2 optimizations also check if certain values are valid CSS so in addition to those level 2 optimizations a certain property can be dropped if it's invalid. You are right, we should surface it somewhere. Maybe as warnings?

[lex111]

@jakubpawlowicz that would be great, but why is the hsla value determined as invalid in this case, it is strange. Would it take a long time to fix this?

[jakubpawlowicz]

Let me take a look later today.

[jakubpawlowicz]

And btw sorry for this causing you trouble!

[jakubpawlowicz]

It's fixed in 5.1.1.

[lex111]

@jakubpawlowicz wow how quickly, many thanks!

[jakubpawlowicz]

Cheers!