postcss-custom-properties: removing duplicate rules

[cossssmin]

Hi there, I have a question about duplicate values.

As the docs say:

:root {
  --text-color: var(--color-pink);
}

div {
  color: var(--text-color);
}

/* becomes */

:root {
  --text-color: var(--color-pink);
}

div {
  color: rgb(255, 192, 211);
  color: var(--text-color);
}

How can I remove color: var(--text-color) so the result is actually this:

:root {
  --text-color: var(--color-pink);
}

div {
  color: rgb(255, 192, 211);
}

I need to inline that CSS and because the rule with the CSS variable is last, I get this:

<div style="color: var(--text-color)">

When in fact I need it to use the value that was resolved:

<div style="color: rgb(255, 192, 211)">

Thanks!

[romainmenke]

Hi @cossssmin,

postcss-custom-properties is not built for this purpose.
It was created to add fallbacks in very old browsers that do not support variables.

It is not intended to "resolve" all variables.

Maybe a tool like Sass is a better fit for this?

---

There is the preserve: false plugin option, but that does not guarantee that all variables will be resolved and will be last.

[cossssmin]

Hi Romain, thanks for the quick response!

Yeah, the 'old browser' in my case are email clients - I'm trying to use postcss-custom-properties together with postcss-calc to reduce the use of CSS variables and calc(), both of which have poor support in HTML emails.

So I have it working up to a point with this:

import calc from 'postcss-calc'
import postcssCustomProperties from 'postcss-custom-properties'

let { root } = postcss([
  postcssCustomProperties(),
  calc(),
])
  .process(`<style>....</style>`, { from: undefined })

For a Tailwind CSS rule like this inside <style>:

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(4px * var(--tw-space-y-reverse));
}

... that gets me almost there, I get this:

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: 4px;
  margin-top: calc(4px*(1 - var(--tw-space-y-reverse)));
  margin-bottom: 0px;
  margin-bottom: calc(4px*var(--tw-space-y-reverse))
}

So just need to remove the second prop i.e. margin-top: calc(4px*(1 - var(--tw-space-y-reverse)));.

Tried adding a custom plugin but I guess plugin execution order isn't guaranteed so something like this doesn't work, it removes them before they're parsed by one of the other two plugins:

postcss([
  postcssCustomProperties(),
  calc(),
+  myCustomPropertiesRemovalPlugin(),
])

If you know of any plugin or way of doing that I'd very much appreciate it, otherwise I'll keep looking. Thanks again! :)

[romainmenke]

You setup has too many other parts that are not maintained by us for us to help you with this :)

But I can say :

• try preserve: false : postcssCustomProperties({ preserve: false }),
• check this list of maintained PostCSS plugins : https://csstools.github.io/postcss-plugins-directory/
• try to have you CSS inliner output more than just the last declaration in case of duplicates

[cossssmin]

Thanks, I'll find another way :)

[cossssmin]

Btw ended up using @csstools/css-calc as you suggested on Twitter instead. The inliner already resolves CSS variables so all that was needed was to replace calc() with static values.

I'm getting all elements targeted by selectors in CSS, traversing them, getting their style="" attribute value, parsing it into a [prop, value] array and modifying the value like this:

import { calc } from '@csstools/css-calc'

// ...

if (value && options.resolveCalc) {
  value = value.includes('calc') ? calc(value) : value
}

Going to have to manually resolve CSS variables for CSS that doesn't get inlined though, but think this will work.

Thanks again 👍

[romainmenke]

Awesome!
Really nice to hear that this package is helpful to your setup :)