Vite

[JosefJezek]

Could you help me with Vite build?

https://stackblitz.com/edit/vitejs-vite-nw1aqw?file=vite.config.js

Uncaught TypeError: styleInject is not a function

[43081j]

this'll be because of rollup-plugin-postcss. by default it tries to inject the CSS into the head tag (see here).

im not too sure what the solution to this is. we want the css transformed in-place, we don't want a css file created from it... but this plugin seems to assume thats the only thing consumers want. even if you set extract: true, it expects to store it in a css file.

[snicol-icanbwell]

I am running into this same issue. would love to figure out how to get this to work. Any luck @43081j ?

[43081j]

Anidetrix/rollup-plugin-styles#200 is what we need fixing before its possible.

basically rollup-plugin-styles and rollup-plugin-postcss are both hard-coded to assume the input is a CSS file. this means neither of them can support custom postcss syntaxes right now.

if there's no activity over there, i may try fix it myself and open a PR for them.

[snicol-icanbwell]

@43081j I've been mulling over any resources I can find online to try and get a working lit+tailwind working and honestly everything seems to run into a dead end. This postcss-lit library seems to be the most feasible option out there, however your blog doesn't even provide a working github repo for me to reference. I can't seem to get this to work. Do you have a working lit+tailwind repo I can pull down and just seen the configuration in action, because I'm at a loss getting this stuff to work together. Initially I wanted to use Vite, but based on the conversation above this doesn't seem to be a viable option ... so what is my viable option?

[43081j]

vite falls over because it uses rollup internally, which uses rollup-plugin-postcss. That plugin doesn't yet support css-in-js properly via postcss' new features, i'll bump the issue over there to try get it sorted.

meanwhile, if you just want a working project with lit and tailwind, you can just use postcss-cli.

Off the top of my head, something like:

npm i -D postcss postcss-cli postcss-lit tailwindcss

Then follow these instructions: https://github.com/43081j/postcss-lit#usage-with-tailwind

then you can process your sources with postcss' cli:

npx postcss -d lib src/my-element.js

This should output lib/my-element.js which will be the transformed code, containing the right styles etc.

in a production project, this'd be part of the build step or you'd run it as part of an existing bundler setup.

[snicol-icanbwell]

Thanks for the quick response! super excited to see this come to fruition. i'll see if I can get something working again using some of the steps you've outlined

[herrKlein]

Also very interested in this. We are using NX which also uses rollup as its library bundler. Also storybook, which uses Webpack but could not yet get this too work. If I get this to work in Storybook I wil post the configuration here

[tomahl]

What's your take about this @43081j, will rollup-plugin-styles ever make this possible?

[43081j]

@tomahl unfortunately it seems like it is stuck/stale.

i do wonder if we should be moving more towards css imports going forward, but it does mean we'd lose the ability to interpolate values.

in such a future, we'd have to do this:

import {styles} from './styles.css' with {type: "css"};

class MyElement extends LitElement {
  static styles = [
    // this wouldn't be dealt with by postcss or anything anymore if we stopped using postcss-lit
    css`
      :host {
        --some-var: ${someValue};
      }
    `,
    // this would've already been transformed by normal postcss, i.e. against the vanilla css file
    styles
  ];
}

where styles.css would make use of --some-var to work around the lack of interpolation.

the code needed for postcss-lit and similar syntaxes is very fiddly and complex. it'd make life a lot easier if we could use existing css tooling to just deal with css files as-is, then import those

ofc that's a big jump from what people currently have though i think

[ajbrun]

this would've already been transformed by normal postcss

@43081j - is what you suggest here possible now or was this just a possible direction to take the project in? I've tried this (although using rollup-plugin-postcss-lit), but I've not seen any postcss improvements. When running via the CLI as you suggest above however I do get expected results, although this isn't as integrated as I'd prefer.

import styles from "./component.css?inline";

@customElement("my-component")
export class Component extends LitElement {
  static override styles = [ styles ];
}

Made a related stackoverflow post. Has no responses, so I'm assuming what I'm aiming to achieve simply isn't possible at the moment? https://stackoverflow.com/questions/77282183/how-to-run-postcss-on-lit-web-components-styles

[43081j]

@ajbrun indeed it should be possible these days through import attributes

i no longer recommend processing embedded styles in my own projects and my own team because of this. so i think i need to figure out what to do about this repo.

there's still a need for embedded styles (i.e. css-in-js) but it should be the minority of use cases now that we have import attributes.

i now do this:

import styles from './styles.css' with {type: 'css'};

class Foo extends LitElement {
  static styles = styles;
}

using build tooling to resolve the css imports and output them alongside the bundled JS (or include them in the JS itself).

that way, we use normal CSS tooling to process our styles.

this and all other css-in-js syntaxes of postcss will be forever playing catch up i feel, since there are an endless number of edge cases and differences between the various flavours.

i have an example of my recommended setup here: https://github.com/43081j/tailwind-lit-example