bennypowers/lit-css

Please provide a project template for vite

chenxin9482 opened this issue · 1 comments

My project use vite so that I choose rollup-plugin-lit-css。
this is my vite.config.js

import { defineConfig } from "vite";
import litcss from "rollup-plugin-lit-css";

export default defineConfig({
  plugins: [
    litcss({
      include: "/src/components/**/*.css",
      uglify: true,
    }),
  ],
  build: {
    lib: {
      entry: "src/my-element.js",
      formats: ["es"],
    },
    rollupOptions: {
      external: /^lit/,
    },
  },
});

and this is my element code

import { LitElement, css, html } from "lit";
import style from "./index.css";

export class HelloWorld extends LitElement {
  constructor() {
    super();
  }
  render() {
    return html` <div>Hello World</div> `;
  }
  static styles = [style];
}
window.customElements.define("hello-world", HelloWorld);

but vite echo Default and named imports from CSS files are deprecated. Use the ?inline query instead. For example: import style from "./index.css?inline
so the import code transform

import style from "./index.css?inline";

but lit echo Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Failed to convert value to 'CSSStyleSheet'.

so can you provide a project template for vite?

tks

Not super interested in supporting vite. Have you tried web dev server?