Closed knpwrs closed 12 months ago
The issue is caused here: https://github.com/sveltejs/vite-plugin-svelte/blob/50ce3165f613a15f0ee12c1e68c064e0fc0d0f1f/packages/vite-plugin-svelte/src/preprocess.js#L67
your style block does not have a "lang" attribute and then vitePreprocess skips it entirely. You can work around it with the current version of vite-plugin-svelte by setting lang="css"
.
@bluwy any reason not to fall back to 'css' if lang isn't set?
That works! It's even possible to put custom media queries in a separate file and import it e.g., @import 'media.css';
or @import '$lib/media.css';
.
Thank you! Looking forward to seeing how this is resolved long term.
I think it was to keep it compatible with svelte-preprocess
before, which only preprocesses things with the lang
attribute. The issue is similar to postcss not applying its transform because you don't have lang="postcss"
set.
Technically Vite always run postcss or lightningcss on all CSS files though, so maybe in the next v-p-s major we can change to always run the preprocessing.
great point about this being a breaking change and also mentioning lang="postcss".
Makes sense to have vitePreprocess process all style nodes with supported langs, but this is going to make it more different from svelte-preprocess. I wonder if we need to document those differences to avoid confusion for users.
cc @kaisermann
I'm not sure what the interaction between svelte-check
and vite-plugin-svelte
is, but lang="css"
appears to cause linting issues with custom media:
❯ npm run check
> web-svelte@0.0.1 check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
====================================
Loading svelte-check in workspace: /Users/knpwrs/Workspace/letschurch/lets.church/apps/web-svelte
Getting Svelte diagnostics...
/Users/knpwrs/Workspace/letschurch/lets.church/apps/web-svelte/src/routes/+page.svelte:5:3
Warn: Unknown at rule @custom-media (css)
<style lang="css">
@custom-media --small-viewport (max-width: 30em);
====================================
svelte-check found 0 errors and 1 warning in 1 file
If I set lang="postcss"
that warning does not appear (even though I don't have postcss configured at all, nevermind a custom media plugin for postcss):
❯ npm run check
> web-svelte@0.0.1 check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
====================================
Loading svelte-check in workspace: /Users/knpwrs/Workspace/letschurch/lets.church/apps/web-svelte
Getting Svelte diagnostics...
====================================
svelte-check found 0 errors and 0 warnings
Would this warrant a new issue in this repo or another? Or would a fix here also fix the svelte-check
issue?
This behavior reproduces with the LSP as well:
good question. i assume it still preprocesses the style block with lightningcss if you set lang="postcss" in your code? if yes that would be the workaround for that one.
Maybe we should add lang="lightningcss" too ?
cc @dummdidumm
I hadn't even thought to try that, but yes indeed, that does work and lightningcss still processes the style block.
I think it was to keep it compatible with svelte-preprocess before, which only preprocesses things with the lang attribute. The issue is similar to postcss not applying its transform because you don't have lang="postcss" set.
@bluwy in theory, if postcss
is configured, svelte-preprocess
will run postcss
on style
blocks without the lang
attribute.
Describe the bug
I just spun up a new skeleton sveltekit project which by default uses
vitePreprocess
. I installed lightning css (npm i -D lightningcss
) I have modifiedvite.config.ts
to contain the following:Given the following
+page.svelte
file, I can see thenesting
configuration works:With the configuration set as in my first code block, hovering the
<h1>
turns it red. If I comment out thenesting
configuration, hovering the<h1>
does nothing.However, if I uncomment the custom media, I get a syntax error:
Reproduction URL
https://github.com/knpwrs/sveltekit-lightningcss-custom-media-issue
Reproduction
npm create svelte@latest my-app
cd my-app
npm install -D lightningcss
Logs
logs.txt
System Info