feat!: preprocess style tags by default (#756)

Author: bluwy

.changeset/lovely-tables-scream.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+Preprocess style tags by default with vitePreprocess

docs/preprocess.md

@@ -14,12 +14,13 @@ However, `svelte-preprocess` does provide extra functionalities not available wi
   A Svelte preprocessor that supports transforming TypeScript, PostCSS, SCSS, Less, Stylus, and SugarSS. These are transformed when the script or style tags have the respective `lang` attribute.
 
   - TypeScript: `<script lang="ts">`
-  - PostCSS: `<style lang="postcss">`
   - SCSS: `<style lang="scss">`
   - Less: `<style lang="less">`
   - Stylus: `<style lang="stylus">`
   - SugarSS: `<style lang="sss">`
 
+  By default, PostCSS or LightningCSS ([if configured in Vite](https://vitejs.dev/config/shared-options.html#css-transformer)) is applied to all `<style>` tags.
+
   If required, you can turn script or style transforming off by setting the `script` or `style` option to `false`. The `style` option also accepts Vite's `InlineConfig` and `ResolvedConfig` types for advanced usage.
 
   **Example:**

packages/vite-plugin-svelte/__tests__/fixtures/preprocess/foo.css

@@ -0,0 +1,3 @@
+.foo {
+	color: green;
+}

packages/vite-plugin-svelte/__tests__/preprocess.spec.js

@@ -17,6 +17,25 @@ describe('vitePreprocess', () => {
 	});
 
 	describe('style', async () => {
+		it('preprocess with postcss if no lang', async () => {
+			const preprocessorGroup = vitePreprocess({ style: {} });
+			const style = /**@type {import('svelte/types/compiler/preprocess').Preprocessor} */ (
+				preprocessorGroup.style
+			);
+			expect(style).toBeDefined();
+
+			const pcss = "@import './foo';";
+			const processed = await style({
+				content: pcss,
+				attributes: {},
+				markup: '', // not read by vitePreprocess
+				filename: `${fixtureDir}/File.svelte`
+			});
+
+			expect(processed).toBeDefined();
+			expect(processed.code).not.toContain('@import');
+		});
+
 		it('produces sourcemap with relative filename', async () => {
 			const preprocessorGroup = vitePreprocess({ style: { css: { devSourcemap: true } } });
 			const style = /**@type {import('svelte/types/compiler/preprocess').Preprocessor} */ (

packages/vite-plugin-svelte/__tests__/sourcemaps.spec.js

@@ -12,7 +12,7 @@ const filename = 'File.svelte';
 
 describe('removeLangSuffix', () => {
 	it('removes suffix', () => {
-		const suffix = `${lang_sep}scss`;
+		const suffix = `${lang_sep}.scss`;
 		const map = {
 			file: `${fixtureDir}/${filename}${suffix}`,
 			sources: ['foo.scss', `${fixtureDir}/${filename}${suffix}`],

packages/vite-plugin-svelte/src/preprocess.js

@@ -1,14 +1,13 @@
-import { preprocessCSS, resolveConfig, transformWithEsbuild } from 'vite';
+import { isCSSRequest, preprocessCSS, resolveConfig, transformWithEsbuild } from 'vite';
 import { mapToRelative, removeLangSuffix } from './utils/sourcemaps.js';
 
 /**
  * @typedef {(code: string, filename: string) => Promise<{ code: string; map?: any; deps?: Set<string> }>} CssTransform
  */
 
-const supportedStyleLangs = ['css', 'less', 'sass', 'scss', 'styl', 'stylus', 'postcss', 'sss'];
 const supportedScriptLangs = ['ts'];
 
-export const lang_sep = '.vite-preprocess.';
+export const lang_sep = '.vite-preprocess';
 
 /** @type {import('./index.d.ts').vitePreprocess} */
 export function vitePreprocess(opts) {
@@ -63,8 +62,8 @@ function viteStyle(config = {}) {
 	let transform;
 	/** @type {import('svelte/types/compiler/preprocess').Preprocessor} */
 	const style = async ({ attributes, content, filename = '' }) => {
-		const lang = /** @type {string} */ (attributes.lang);
-		if (!supportedStyleLangs.includes(lang)) return;
+		const ext = attributes.lang ? `.${attributes.lang}` : '.css';
+		if (attributes.lang && !isCSSRequest(ext)) return;
 		if (!transform) {
 			/** @type {import('vite').ResolvedConfig} */
 			let resolvedConfig;
@@ -82,7 +81,7 @@ function viteStyle(config = {}) {
 			}
 			transform = getCssTransformFn(resolvedConfig);
 		}
-		const suffix = `${lang_sep}${lang}`;
+		const suffix = `${lang_sep}${ext}`;
 		const moduleId = `${filename}${suffix}`;
 		const { code, map, deps } = await transform(content, moduleId);
 		removeLangSuffix(map, suffix);