🐞 `font-color:$(variable)` not working with scoped variables about css HOT 5 CLOSED

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

Generated CSS

JIT in console

from css.

@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?

from css.

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:

from css.

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.

from css.

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

from css.