Make .svelte files style tag compatible with useVitePreprocess (not only svelte-preprocess)

[felixsanz]

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

[felixsanz]

Just related to #1259 or 100% duplication?

[pevey]

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:

+page.svelte

<h1 class="text-3xl font-bold underline">
	Hello world!
 </h1>
 
<style lang="postcss">
	:global(html) {
	  background-color: theme(colors.gray.100);
	}
 </style>

It works fine, but the plugin show a red line under 'colors' along with this info:

"")" is expected

If you expect this syntax to work, here are some suggestions: 
If you use less/SCSS with `svelte-preprocess`, did you add `lang="scss"`/`lang="less"` to your `style` tag? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`. 
Did you setup a `svelte.config.js`? 
See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.svelte(css-syntax-error)

The config is set up to use vitePrepocess():

svelte.config.js

import adapter from '@sveltejs/adapter-cloudflare'
import { vitePreprocess } from '@sveltejs/kit/vite'

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter()
	},
	preprocess: vitePreprocess()
}

export default config

[SDAravind]

<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 colors.gray.100

Follow tailwindcss for sveltekit and no other cofiguration is required.