Support Custom Properties

[jonathantneal]

If a developer wants to use Custom Properties with this plugin, could this plugin lookup the variables for them? Even if it’s just on :root?

Currently, this plugin relies on PostCSS Custom Properties to remove var() usage, but 1. that’s not very future-leaning, and 2. the new major release of PostCSS Custom Properties preserves var() usage by default.

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

becomes

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

Unfortunately, it seems this plugin was never tested against Custom Properties with the preserve option enabled.

postcss/postcss-custom-properties#99
postcss/postcss-custom-properties#98

[rvergara92]

I have the same issue, do you find a way to do that?

[marcofugaro]

Yes, I don't use postcss-custom-properties anymore because of browser support and would love to use this plugin.

[marcofugaro]

The solution was using color-mod() instead, which is more spec-compliant and supports :root css custom properties out of the box!

Thank you @jonathantneal it worked flawlessy!

[ar53n]

add PR
or we can use postcss-color-function-remover
You can use chain postcss plugins, like a

module.exports = {
  plugins: {
    'postcss-css-variables': { // or 'postcss-custom-properties'
      preserve: true,
    },
    'postcss-color-function': {
      preserveCustomProps: false // delete color function with custom properties
    },
  },
};

[blowsie]

I think it would be great for this plugin to support custom properties, its flawed without.

[HolisticPeanut]

Possible workaround: csstools/postcss-color-mod-function#41 (comment)