Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support Custom Properties

See original GitHub issue

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.

https://github.com/postcss/postcss-custom-properties/issues/99 https://github.com/postcss/postcss-custom-properties/issues/98

Issue Analytics

State:
Created 6 years ago
Reactions:24
Comments:6 (1 by maintainers)

Top GitHub Comments

5reactions

marcofugarocommented, May 29, 2018

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!

0reactions

HolisticPeanutcommented, Jan 7, 2022

Possible workaround: https://github.com/csstools/postcss-color-mod-function/issues/41#issuecomment-1007309849

Top Results From Across the Web

CSS Variables (Custom Properties) | Can I use... Support ...

CSS Variables (Custom Properties). - CR. Permits the declaration and usage of cascading variables in stylesheets. Usage % of. all users, all tracked ......

Using CSS custom properties (variables) - MDN Web Docs

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific ...

A Complete Guide to Custom Properties | CSS-Tricks

Why care about CSS Custom Properties? They help DRY up your CSS. That is “Don't Repeat Yourself.” Custom properties can make code easier...

A Strategy Guide To CSS Custom Properties

Custom properties have the same rules about where they can be used as normal CSS properties. It's far better to think of them...

Browser Compatibility of CSS Variables (Custom Properties)

CSS Variables (Custom Properties) on Chrome is fully supported on 49-106, partially supported on None of the versions, and not supported on 4-48 ......