[css-minifier] colors in CSS custom properties are not compressed

[yisibl]

Input

:root {
    --primary-dark: lightblue;
    --white: white;
    --foo: #FFFFFF;
}

.bg {
    background-color: var(--primary-dark);
}

Output

:root{--primary-dark:lightblue;--white:white;--foo:#fff}.bg{background-color:var(--primary-dark)}

[devongovett]

Named colors are not compressed in custom properties, but other types of colors are. This is because named colors are identifiers, which could conflict with other identifiers (i.e. may not actually be interpreted as colors). For example, if you had a font family named "thistle", this could conflict with the color of the same name:

:root {
  --font: thistle;
}

.foo {
  font-family: var(--font);
}

[yisibl]

I think it is possible to detect if the variable is referenced by a color related property and it can be safely compressed.

[devongovett]

Not if it's in a different CSS file, or referenced from JS.

[yisibl]

Not if it's in a different CSS file, or referenced from JS.

This situation is indeed not safe.

Thinking further, what if it was defined by @property?

@property --primary-dark {
  syntax: "<color>";
  inherits: false;
  initial-value: #000;
}

[devongovett]

Theoretically yes, assuming it's defined in the same file (or we are bundling).