search

GoogleChromeLabs / postcss-jit-props

A CSS custom property helper based on PostCSS. Supply a pool of variables and this plugin will add them to the stylesheet as they are used.
https://stackblitz.com/edit/jit-open-props?file=postcss.config.js
Apache License 2.0
210 stars 9 forks source link

How to use with NextJS and CSS modules? #7

Open argyleink opened 2 years ago

argyleink commented 2 years ago

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 commented 2 years ago

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 commented 11 months ago

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

argyleink commented 11 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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