-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vite #23
Comments
this'll be because of rollup-plugin-postcss. by default it tries to inject the CSS into the 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 |
I am running into this same issue. would love to figure out how to get this to work. Any luck @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. |
@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? |
vite falls over because it uses rollup internally, which uses 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: then you can process your sources with postcss' cli: npx postcss -d lib src/my-element.js This should output in a production project, this'd be part of the build step or you'd run it as part of an existing bundler setup. |
|
Also very interested in this. We are using NX which also uses rollup as its library bundler. |
What's your take about this @43081j, will rollup-plugin-styles ever make this possible? |
@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 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 |
@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 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? |
@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: |
Could you help me with Vite build?
https://stackblitz.com/edit/vitejs-vite-nw1aqw?file=vite.config.js
The text was updated successfully, but these errors were encountered: