CSS imports in LitElements

Flow
1

We just finished upgrading our project to Vaadin 24 and while everything went smoothly we’re currently struggling a bit with how to correctly deal with CSS imports in our LitElements.
Before we injected our style sheets into the shadow dom of our lit elements like this:

import style from './some-component.css';
...
class SomeComponent extends LitElement {
  static get styles() {
    return [style]
  }
}

Now we had to upgrade our imports to
import style from './some-component.css?inline'
to be compatible with Vite, but now we are confronted with https://github.com/vaadin/flow/issues/16731

What is the correct way to import stylesheets into the shadow dom of lit elements in Vaadin 24+? Documentation on this seems hard to find

2

Hello @capable-lemur , thanks for the question. Unfortunately I couldn’t replicate it with Vaadin 24.1.0 nor 24.0.7. I left a comment in the ticket you mentioned https://github.com/vaadin/flow/issues/16731.

3

Basically I followed these tutorial https://vaadin.com/docs/latest/create-ui/templates/styling-templates and https://vaadin.com/docs/latest/styling/styling-components/parts-and-states/#shadow-parts and added them into the default starter downloaded from start.vaadin.com. Could you please download and test my example project which I attached to the ticket?