🐞 `font-color:$(variable)` not working with scoped variables

[gammx]

Description

I want to use a CSS variable defined outside :root, eg:

:root {
    --gyan-100: #00FF75;
}

.theme-dark {
    --text-tertiary: #8B98AC;
}

It works if I use a global variable:

<p className="font-color:$(gyan-100)">...</p>

But not with this one:

<p className="font-color:$(text-tertiary)">...</p> // Fail!

.theme-dark is correctly applied btw, and changing the value through developer tools returns the expected color.

Any ideas of what is happening? (:

Reproduction

No response

System Informations

Browser: Microsoft Edge (Chromium) 103.0.1264.51 OS: Zorin OS (x64) Node.js: 18.5.0 Package Manager: npm 8.12.1

[1aron]

@gammx What's your Master CSS version now? It works for me.

Generated CSS

JIT in console

[gammx]

@1Aron I'm using the latest version, I'm also using the manual/hybrid rendering setup with Next.js (https://docs.master.co/css/setup/nextjs#hybrid-rendering), Here are some things I've noticed:

• If I use Next.js with SCSS and declare the scoped variable in a .scss file it doesn't work, but it works with a .css file
• If I refresh the page, the class is generated but it's using the color as variable --#F9F9F9:

<style id="master-css">
    .font-color\:\$\(text-primary\){color:var(--#F9F9F9)}
</style>

• If I remove the manual initialization/hybrid rendering declared in my _document.tsx file, it works with both .scss and .css but it's weird because the style tag gets empty:

<style id="master-css"></style>

So I guess it's something with the Next.js setup... maybe?

[gammx]

Ok I managed to get it working removing some conflicts with other classes, but it works only if I remove hybrid rendering, I get this with the https://docs.master.co/css/setup/nextjs#hybrid-rendering setup:

<style id="master-css">
    .font-color\:\$\(text-primary\){color:var(--#F9F9F9)} /*instead of var(--text-primary)*/
</style>

And it works if I remove the hybrid rendering code, but the style tag gets empty:

[1aron]

If it is JIT, Master CSS will use the native style.sheet API to manipulate CSS rules. You can't see it through inspect, but you can use console.log.

[gammx]

Nice, well, I removed the hybrid rendering setup to stop getting the color:var(--#F9F9F9) thing, thanks:)