Output with preserve and color function

[Hilzu]

I have CSS like this:

:root {
  --brand: #00bdbd;
  --dark-brand: color(var(--brand) shade(20%));
}

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

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

I'm using the postcss-color-function plugin to transform the color function. I've configured custom-properties to run before the color function plugin as recommended in its readme.

With the new postcss-custom-properties that has the preserve option set to true generates this output that doesn't work in any browser:

:root {
  --brand: #00bdbd;
  --dark-brand: rgb(0, 151, 151);
  --dark-brand: color(var(--brand) shade(20%));
}

.bg-brand {
  background-color: #00bdbd;
  background-color: var(--brand);
}

.bg-dark-brand {
  background-color: rgb(0, 151, 151);
  background-color: var(--dark-brand);
}

Here's a runkit notebook that generates this same output: https://runkit.com/hilzu/postcss-custom-properties-with-preserve-enabled

Is it so that the preserve option can't be used when using color functions with variables?

[jonathantneal]

You are 100% correct. And thank you for providing such thorough details.

PostCSS Color Function does not support Custom Properties. Therefore, it relied on the developer not supporting Custom Properties in their CSS.

You have a few choices:

• Disable preserve in this plugin and do not support Custom Properties in the browser.
• Ask postcss-color-function developers to have the contents of color() find and replace Custom Properties. This is the best option if you don’t want to change your CSS.
• Use color-mod() which supports variables, and replace your instances of color( with color-mod(. FWIW, color-mod is the real name of this highly speculative feature)

[Hilzu]

I see. For now I'll disable the preserve option. Looks like I have to evaluate using the color plugin at some point. I swear the function was called color in the spec at some point and not color-mod. 😅

Thank you for your explanation!

[jonathantneal]

Yes, it was called color() 2 or 3 years ago, but that name is used by another, real color() function which controls colorspace and ships in Safari. I raised this issue in the fall of last year: https://github.com/ianstormtaylor/css-color-function/issues/29