custom properties `:root` class support

[movie4]

What would you want to propose?

Hello! We encountered the fact that the type construction is not supported

:root.ClassName {
    --custom-props: value
}

Suggested solution

In source code we found that the package does not process the class of the :root element no

https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-custom-properties/src/get-custom-properties-from-root.ts

export const ROOT_SELECTOR_REGEX = /^:root$/i;

```need to modify the regular expression to support the className``

Additional context

No response

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[romainmenke]

Hi @movie4,

Thank you for making this request.

Unfortunately this plugin is purely a fallback for very old browser versions that do not support custom properties.

Within the scope of the plugin it would be incorrect to provide automatic fallback for anything other than :root, html, ....

Providing fallbacks for :root.some-class would be incorrect.

---

Are you trying to inject specific variables into multiple output/bundle files?

[movie4]

Thanks for the quick reply!

We want to change variables by class.

We solved this situation using the :root:where(.className) — it works

[romainmenke]

it works

Do you mean: "this issue can be closed" or "this selector works"?

---

This plugin doesn't support changing variables by classnames.
It only supports :root, html, ... and this is by design.

We can not change this :)

[movie4]

:root:where(.className)

this selector works as we need it

[romainmenke]

Yeah, we can't change the behavior of the plugin :)

You have several options:

• don't try to inline all variable values, browsers support var()
• fork the plugin and change the behavior
• use another tool to inline variables

Maybe this tool can help?
https://www.npmjs.com/package/@csstools/postcss-global-data