Use Vite styles for your lit components

Plugin to get all the power of Vite styles with lit tagged-template ⚡.

This plugin aims to get work with css lang stylesheet and lit template literals as simply as any other library or front-end framework.

Installation

$ npm install -D vite-plugin-lit-css

# yarn
$ npm install -D vite-plugin-lit-css

# pnpm
$ pnpm add -D vite-plugin-lit-css

Usage

Add vite-plugin-lit-css to your Vite config.

import { defineConfig } from 'vite'
import litCss from 'vite-plugin-lit-css'

export default defineConfig({
  plugins: [litCss({
    // your global and rel="stylesheet" styles must be excluded
    exclude: './src/index.css'
  })],
})

Then, import your stylesheets as any other javascript module in your code.

import { LitElement } from 'lit'
import styles from './styles.css'

export class Element extends LitElement {
  static styles = [styles, queryStyles]

}

Typescript

You can use types definitions inside your vite-env.d.ts. Remember: order is important!

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

Options

This plugin will transform all your css like styles by default into constructible library-specific css styles, but you can take control of this transformation with the include and exclude options.

import { defineConfig } from 'vite'
import litCss from 'vite-plugin-lit-css'

export default defineConfig({
  plugins: [litCss({
    include: /\.scss/, // transform only scss files as lit styles
    exclude: [/global.css/, './src/index.css'] // exclude your global styles
  })],
})

// index.ts

import './styles.global.css' // this file will skipped from this plugin

Your index.html will be transformed. You must include your theme or global css files inside exclude option!!.

Caveats

• Currently, HMR is not supported, and every change made inside your lit imported styles will trigger a full page reload.

• For vite v4 use vite-plugin-lit-css 1.x