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
219 stars 9 forks source link

Breaks when the source file only contains @at rules. #40

Open flmng0 opened 1 year ago

flmng0 commented 1 year ago

Hello!

When processing a source file which only contains at-rules, the plugin breaks.

From my error code and brief skim, it seems to occur from Line 123 of index.js.

The error reported reads as: Cannot read properties of undefined (reading 'source').

The problem file in question is a file from open-props: open-props/media.css.

I will do a workaround and create a pull request once I get home.

Thanks

argyleink commented 7 months ago

this still happening? i'd love a stackblitz or recreatable env for me to test, poke and prod for how to guard or fix the issue 👍🏻

NazCodeland commented 1 week ago

Hey @argyleink when you get a chance can you please take a look at this repo: https://github.com/NazCodeland/viewport-screenshot-website

I've been trying to get postcss-jit-props to work with open-props but I keep running into the following error: Cannot read properties of undefined (reading 'source')

Thank you @joshnuss for helping me debug and finding this issue.

argyleink commented 1 week ago

Hey @argyleink when you get a chance can you please take a look at this repo: https://github.com/NazCodeland/viewport-screenshot-website

I've taken a look, tried some things, and feel pretty confident that Svelte 5 isn't sending any CSS to the plugin. The error reported "reading source", is that the CSS source the plugin expects is undefined, aka there's nothing to postcss-jit-prop.

I'm feeling like this is a Svelte5 configuration thing, and I'm not up to date enough to figure out what to do there.

I can however offer an alternative path, and a hot tip about postcss-jit-props and CSS modules:

  1. CSS modules, which is what svelte does, will pass each components CSS to postcss-jit-props (at least that's what usually happens). Jit props will find the props used and back fill them. all good. BUT, add a 2nd component, the process repeats, and the props are backfilled. The problem is that each component individually invokes PostCSS, meaning none of the back filled props know about each other, leading to duplication. This also happens in NextJS. Aka, I think this may be an optimization that you can skip, as it's tough to solve with css modules.
  2. if you're worried about importing too many props and it feeling bulky, you can use the individual imports that open props offers: grab the grays, grab the sizes, grab the font sizes, etc. just grab what you need, and leave the rest behind. It's not as precise as jit-props can do (if it can be globally invoked), but it can cut the amount of props you import in half or more.
NazCodeland commented 1 week ago

Thank you, I’ll follow the suggected alternative if size becomes an issue.