Importing styles in lit webcomponent fails with Vite

Description of the bug

Giving a lit based webcomponent that imports CSS with an import directive, when the element is rendered an errors occurs preventing the component to be shown.

css-tag.ts:143 Uncaught TypeError: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Failed to convert value to 'CSSStyleSheet'.
    at adoptStyles (css-tag.ts:143:32)
    at HelloWorldView.createRenderRoot (reactive-element.ts:1000:5)
    at HelloWorldView.createRenderRoot (lit-element.ts:139:30)
    at HelloWorldView.connectedCallback (reactive-element.ts:1019:27)
    at HelloWorldView.connectedCallback (lit-element.ts:189:11)
    at Router.__addAppearingContent (router.js:815:23)
    at router.js:498:16

The client side view is defined as following

import '@vaadin/vaadin-text-field';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import styles from './hello-world-view.css';

@customElement('hello-world-view')
export class HelloWorldView extends LitElement {
  name: string = '';

  static styles = [styles];

  render() {
    return html`
      <vaadin-text-field label="Your name" @value-changed="${this.nameChanged}"></vaadin-text-field>
    `;
  }
  nameChanged(e: CustomEvent) {
    this.name = e.detail.value;
  }
}

the css file

:host {
  display: block;
  padding: 1em;
  background-color: orange;
}

index.ts

// import Vaadin client-router to handle client-side and server-side navigation
import { Router } from '@vaadin/router';

// import Flow module to enable navigation to Vaadin server-side views
import { Flow } from '@vaadin/flow-frontend/Flow';

const { serverSideRoutes } = new Flow({
  imports: () => import('../target/frontend/generated-flow-imports')
});

const routes = [
  // for client-side, place routes below (more info https://vaadin.com/docs/v15/flow/typescript/creating-routes.html)
    {
        path: 'hello',
        component: 'hello-world-view',
        action: async () => {
            await import('./hello/hello-world-view');
        },
    },

  // for server-side, the next magic line sends all unmatched routes:
  ...serverSideRoutes // IMPORTANT: this must be the last entry in the array
];

// Vaadin router needs an outlet in the index.html page to display views
const router = new Router(document.querySelector('#outlet'));
router.setRoutes(routes);

Minimal reproducible example

• Create new application from start.vaadin.com with Vite enabled
• Add the the client-side view and css in frontend/hello folder
• Create the custom index.ts in fronted directory
• start the application with mvn
• Open browser at http://localhost:8080/hello

Expected behavior

CSS rules are applied to the custom web component

Actual behavior

The component is not rendered and the previously reported error is visible in the console

Versions:

- Vaadin / Flow version: 23.1
- Java version: 11
- Development mode
- Project from start.vaadin.com

[web-padawan]

One option worth trying would be to use another plugin rollup-plugin-postcss-lit (latest version is 2.0.0):

import postcssLit from 'rollup-plugin-postcss-lit';

  // in Vite config
  plugins: [
    postcssLit()
  ]

See https://github.com/umbopepato/rollup-plugin-postcss-lit#usage-with-vite

[vaadin-bot]

This ticket/PR has been released with Vaadin 23.2.0.beta1 and is also targeting the upcoming stable 23.2.0 version.