Some stylesheet imports get excluded in vite build

[troyvassalotti]

We have a vite project that uses this plugin in conjunction with Storybook and their vite builder. This plugin worked great out of the box when running the Storybook development server, but the plugin was not working when we built the static Storybook pages for publishing.

After opening an issue in the vite builder repo, the maintainer provided a fix that has to do with this plugin's default include setting. The link to his solution is here and I've copied it below for quick reference:

So, it seems that the default include from this plugin (*/.{css,sss,pcss,styl,stylus,sass,scss,less}) is breaking with vite, because vite is adding query params to the id. So, for example, the stylesheet in this PR is becoming builder-vite/examples/lit-ts/stories/simplegreeting.scss?used, which is filtered out. I verified that updating the config as shown below fixes the issue:

// prettier-ignore
plugins: [postcssLit({ include: ['**/*.scss', '**/*.scss\?*'] })],

I can confirm that the above edits fixed our issue. Is this something worth adjusting the default include for?

[umbopepato]

Hey @troyvassalotti, thank you so much for reporting this! When Vite released the ?inline functionality I updated the readme but I didn't think to mention that the filter would have to be updated in order to work properly. Anyway I think including the query parameters suffix to the default filters would be a good idea. I'll take a look at #50 and your PR and see what I can do. Thanks again for your help 🙂

[troyvassalotti]

Thanks @umbopepato! Yeah #50 is a weird one because it seems to involve this plugin & Storybook & Vite all together so it's hard to pinpoint the underlying issue, but I appreciate whatever time you have!

[umbopepato]

I updated the default include glob so this should be solved. Feel free to reopen if the problem still exists