How to use with NextJS and CSS modules?

[argyleink]

the :root scope is "not pure" so the output doesn't work. could be solved if #1 was completed and :global could be specified.

[argyleink]

now that :global can be specified, it's still not good enough to work with NextJS CSS Modules. might need to devise a strategy that builds to a separate file that's imported globally. then the jit-props plugin can see the usages and populate a file and fill :root with definitions, allowing a nextjs site to load those props as a file and avoid creating impure selectors.

[olafurns7]

@argyleink did give up on this adventure or is there a solution?

[argyleink]

i've given up jit-props integration with next yeah, it's a micro-optimization that can easily be ignored for larger fish to fry.

[SalahAdDin]

i've given up jit-props integration with next yeah, it's a micro-optimization that can easily be ignored for larger fish to fry.

If you are not using jit, what are you using then?

[argyleink]

loading the props into :global and not worrying about shaking or pruning unused props.

if you are worried, you can do individual imports to reduce filesize, aka pick each prop set you need. not loading all the colors is a great place to start, just import the palettes you intend to use.

[SalahAdDin]

loading the props into :global and not worrying about shaking or pruning unused props.

if you are worried, you can do individual imports to reduce filesize, aka pick each prop set you need. not loading all the colors is a great place to start, just import the palettes you intend to use.

I wonder, how is your setup?

[argyleink]

https://stackblitz.com/edit/nextjs-openprops?file=styles%2Fglobals.css