-
-
Notifications
You must be signed in to change notification settings - Fork 188
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make .svelte files style tag compatible with useVitePreprocess (not only svelte-preprocess) #1479
Comments
Just related to #1259 or 100% duplication? |
…lved sveltejs#1259 sveltejs#1479 sveltejs#1558 This may give false negatives for people who do not use Vite/forgot to create a svelte.config.js when they use rollup or webpack, but that's likely OK since we can think about these diagnostics as being opt-in: you add a preprocessor config when you want the Svelte warnings, too. Most people who have this problem also likely use TypeScript or a CSS preprocessor. When using TS, errors are caught through the TS intellisense. When using a CSS preprocessor, the only warning they'll miss is the unused CSS warning, which is apparent anyway since those styles are not visible in the browser.
…lved (#1569) #1259 #1479 #1558 This may give false negatives for people who do not use Vite/forgot to create a svelte.config.js when they use rollup or webpack, but that's likely OK since we can think about these diagnostics as being opt-in: you add a preprocessor config when you want the Svelte warnings, too. Most people who have this problem also likely use TypeScript or a CSS preprocessor. When using TS, errors are caught through the TS intellisense. When using a CSS preprocessor, the only warning they'll miss is the unused CSS warning, which is apparent anyway since those styles are not visible in the browser.
When following the instructions at https://tailwindcss.com/docs/guides/sveltekit, the plugin highlights an "error." I think it may be related to this issue. The hello world test page in the instructions use this style block:
It works fine, but the plugin show a red line under 'colors' along with this info:
The config is set up to use vitePrepocess():
|
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
<style lang="postcss">
:global(html) {
background-color: theme('colors.gray.100');
}
</style> add single quote around Follow tailwindcss for sveltekit and no other cofiguration is required. |
Description
I'm currently using useVitePreprocess and it works wonderful. It's faster because of esbuild, you can use $aliases inside style tags and everything is awesome. Unused CSS also gets removed and classes contains the scoped random symbols. In fact, it produces the same CSS as svelte-preprocess.
The issue is... the vscode extension doesn't handle
<style lang="postcss">
when using useVitePreprocess. It breaks on things like nesting.I know useVitePreprocess is experimental, but can we get this working please?
Describe the proposed solution
Proposed solution
useVitePreprocess able to work with .svelte files
Alternatives
I can use svelte-preprocess but it duplicates CSS in dev mode. Also.. why use another tool when we are already using vite?
Additional Information, eg. Screenshots
No response
The text was updated successfully, but these errors were encountered: