How to run postcss on Lit web components styles?

246 views Asked by At

I'm having issues running postcss (autoprefixer specifically) on any styles encapsulated within a Lit web component bundled using Vite. I can see that the postcss autoprefixer plugin is working, as it runs as expected on global styles however it doesn't appear to touch any styles within the Lit element's shadow dom. Given this appears to be the primary method of adding styles for Lit components, it's of high importance to have this figured out.

I've created a repo here to show the issue: https://github.com/ajbrun/lit-postcss

You can see after running it (npm run dev) that the global columns property on the body tag has prefixes applied, but the same property in the my-element component's host element does not.

I've tried various Vite plugins, but none appear to transform the web component's styles when being built though the Vite bundler.

Can anyone show me where I'm going wrong?

0

There are 0 answers