postcss-lit icon indicating copy to clipboard operation
postcss-lit copied to clipboard

Basic usage question

Open pathofleastresistor opened this issue 1 year ago • 1 comments

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?

pathofleastresistor avatar Jun 07 '23 01:06 pathofleastresistor

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

43081j avatar Jul 16 '23 10:07 43081j