Confused about how to best work with external style sheets and get styles updating on save?

[benfrain]

With vite as the build tool, what is the current 'best practice' way to write styles for lit components in an external stylesheet?

The documentation discourages this practice but a tagged literal for CSS is a no go currently; devs want their autocomplete — I want my autocomplete!

In addition we would like to see a file save of the external CSS/Sass file cause the browser to be updated with the changes.

Can this be achieved? Working examples seem hard to come by.

Using lit 2.7.6, vite 4.4.4 with an option to use Sass or vanilla CSS if that makes things easier?

[augustjk]

The lit-plugin VS Code extension does add support for autocompletion for CSS written within the backticks.
https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin#validating-css

Material Web Components authors styles with scss and compiles it to css before using a script to convert to .ts files wrapped with css tag function. I'm not sure what the development experience for this. I think there's internal tooling that handles the style injection and update where component development primarily happens.

The ultimate answer probably is CSS module scripts so you'd be able to directly import css files as modules into your component code and pass it in to static styles but it needs browser support.

Since you're using Vite now, you technically can import css as string with ?inline and pass it in with unsafeCSS like this https://stackblitz.com/edit/vitejs-vite-x6sikq?file=src%2Fmy-element.ts

[benfrain]

Thanks Augustine,
Only a few of the team use VSCode, so until the autocompletion in backticks tooling is more widespread, unfortunately that is not an option.
The Material Web Components approach seems a little involved, maybe something I'll try as a last resort.
CSS module scripts look good, but yes, until they are an actual thing no go there.

I have been using the vite option but it seemed to stop working when I moved from vite 2.x to vite 4.x and the inline was introduced.

I also suspect I have made an error in that my lines look like this:

 static styles = unsafeCSS([reset, styleImport]);

And it looks like I actually need to wrap the unsafeCSS in a backticked css:

 static styles = css`${unsafeCSS([reset, styleImport])}`;

I will amend all my files and see how that goes. Thanks for your help.

[augustjk]

The ?inline import for Vite provides a string as the default export so you'd want to pass that string directly into the unsafeCSS() call. If you do an array, it'll try to turn it into a string which means it'll get joined with a comma separator between them.

So either

static styles = [css`${unsafeCSS(reset)}`, css`${unsafeCSS(styleImport)}`];

or

static styles = css`${unsafeCSS([reset, styleImport].join(''))}`;

would be cleaner, I think.

[benfrain]

Very helpful, thanks Augustine

[redfox-mx]

Or you can try vite-plugin-lit-css!!!
An amazing plugin for work with css like styles into your lit components powered by vite (hahahaha sorry for self-sponsor)

This plugins works for all supported css vite langs (sass, less, stylus and postcss)

note: Please! use the alpha release npm i -D vite-plugin-lit-css@alpha

[benfrain]

Unsure looking at the Readme what this gives me extra? I get the page reloading on Sass changes already

[redfox-mx]

At this point, only the development experience. Under the hood, vite-plugin-lit-css rewrite some import statements to "inline" queries.

For example, you can safely import your styles as default imports and get the correct types and autocompletion from the editor.

// native inline way
import reset from './styles/reset.scss?inline' // this path cannot be resolved by IDE
// code readability: Why do I need to use unsafe if is my css code ?
static styles = [css`${unsafeCSS(reset)}`, css`${unsafeCSS(styleImport)}`];

// vite-plugin-lit-css way
// all references are resolved to source code by IDE, so autocomplete 
// and `go to reference` is enabled
import reset from './styles/reset.scss' 
static styles = [reset, styleImport];

// other cool feature is have css modules so, you can safely use it
import button, { active, normal } from './styles/button.module.scss'
static styles = [button, styleImport];
const template = html`<a class="${active}"></a>`

So, long story short, unther the hod is the same as inline but with DX improved, IDE and css modules support

note: maybe, something not documented is that you can get correct types definition with this vite-env.d.ts

/// <reference types="vite-plugin-lit-css/client" />
/// <reference types="vite/client" />