[Bug] Rollup plugin working locally but not on static build

Describe the bug

We use Storybook with Lit. In our Lit components, we import SCSS files.

import { html, LitElement } from "lit";
import style from "./quote-block.scss";

@customElement("component-name")
export class ComponentName extends LitElement {
  static get styles() {
    return [ style ];
  }
}
...

To import SCSS and not need to wrap all our imported styles in the unsafeCSS() function from Lit, we use a plugin in our Vite config - rollup-plugin-postcss-lit. I’ve also added this plugin to main.js in Storybook.

Components render as expected with start-storybook, but the components do not render when using build-storybook and viewing the resulting static pages. We are met with console errors:

Environment

• Node.js version: [e.g. v14.19.1]
• NPM version: [e.g. 6.14.16]

Additional context

Because the plugin works with a dev server, and after not finding an answer in other repos, I am hoping someone here can provide some insight into why this would be happening, thank you.

[troyvassalotti]

Hey @IanVS! Thanks for the quick response. I can clarify a bit on this:

1. We went from webpack to vite - both with Lit - and it was working prior because we used lit-scss-loader. The rollup plugin we want to use has a similar goal.
2. Everything else with our build works as intended. The start-storybook preview shows our expected results; it is only the build-storybook result that doesn’t seem to take the plugin into account.
3. Neither adding framework: "@storybook/web-components" or ?inline address the issue.

I got a very simple local branch example that gives the same result (sans the console error it seems, but the lack of styles does continue) and I would be happy to submit a PR for it in a few.

[IanVS]

Thanks @troyvassalotti! I left a comment in the PR, but for anyone following along here, this is an issue with an incompatibility between the default include picomatch of the plugin, vs the filenames that vite generates (which can include a query param). I’m going to close this issue since there’s a workaround, and the main issue is not in this package, but I’m glad you stopped by, and I’m excited to have a lit example in our repo.