Using with lit and astro

[Zizico2]

Using this package doesn't work with lit and Astro. it doesn't recognize the props being used in lit components. I'm using typescript. It recognizes props on .astro files just fine.

[argyleink]

maybe lit isnt passing things through postcss the same way? have a reduced example on stackblitz or anything i can tinker with?

[Zizico2]

I'll upload it and update this comment

StackBlitz reproduction

[argyleink]

looks like the lit css() function doesnt go through PostCSS at all. This would mean that jit-props has no chance to see usage and insert definitions. i tested this by trying postcss-preset-env styles inside the lit component, and also trying styles that need autoprefixed, neither of which transformed styles i put into the lit element css tag.

[Zizico2]

How would we go about fixing this? Should I bring this up to the Lit team? I'm guessing this is something that isn't implemented for a reason. Seems too common of a use-case to be an oversight. I've tried using this package rollup-plugin-postcss-lit, with no success. It's meant to be used with this rollup-plugin-postcss.

[argyleink]

i think to go about fixing this you'd need be running rollup/postcss yourself instead of via vite/astro. then you'll have lower level access to add that postcss-lit plugin that intends to process contents of css() in JS through postcss. for right now tho yeah, the contents of css() are being passed straight to lit's function. maybe you could find a way to call postcss() instead of css()? then you'd be specifically asking for processed styles before giving them to lit?

or, maybe have lit import a file instead of writing the styles in a JS function? perhaps postcss will process it before it gets shared to modules.