Basic usage question

[Amit]

I'm still learning the set of technologies here (e.g. lit, typescript, tailwind, and postcss) and I'm having trouble using this postcss plugin.

I checked in my sample code here - https://github.com/pathofleastresistor/postcss-lit-example.

I was expecting npm run build1 from my package.json to be what's needed to get your example working, but my main.js doesn't include the transformed css.

Did I miss something?

[James Garbutt]

sorry this took me so long to get to, i've been away a lot this month and last.

this will be because the build output (main.js) actually ends up with different symbol names than in your source.

for example:

// source
css`.foo {}`;

// build output
(0, lit_1.css)`.foo {}`;

its a tough one to solve. you could either:

• use a bundler so you can transform this code on the fly rather than as an intermediary step
• copy your typescript sources to some build directory, run postcss against them, run typescript afterwards (against the postcss output)

postcss-lit could only really get around this by supporting mangled/minified names, which feels like a bit of a rabbit hole