fix: remove svelte css transform (#280)

Author: bluwy

.changeset/slow-buses-tap.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+Remove transforming svelte css

packages/e2e-tests/_test_dependencies/vite-plugins/index.js

@@ -0,0 +1,41 @@
+/**
+ * Ensure transform flow is not interrupted
+ * @returns {import('vite').Plugin[]}
+ */
+function transformValidation() {
+	return [
+		{
+			name: 'transform-validation:1',
+			enforce: 'pre',
+			transform(code, id) {
+				if (id.endsWith('.svelte')) {
+					return code.replace('__JS_TRANSFORM_1__', '__JS_TRANSFORM_2__');
+				} else if (id.endsWith('.css')) {
+					return code.replace('__CSS_TRANSFORM_1__', '__CSS_TRANSFORM_2__');
+				}
+			}
+		},
+		{
+			name: 'transform-validation:2',
+			transform(code, id) {
+				if (id.endsWith('.svelte')) {
+					return code.replace('__JS_TRANSFORM_2__', '__JS_TRANSFORM_3__');
+				} else if (id.endsWith('.css')) {
+					return code.replace('__CSS_TRANSFORM_2__', 'red');
+				}
+			}
+		},
+		{
+			name: 'transform-validation:3',
+			enforce: 'post',
+			transform(code, id) {
+				if (id.endsWith('.svelte')) {
+					return code.replace('__JS_TRANSFORM_3__', 'Hello world');
+				}
+				// can't handle css here as in build, it would be `export default {}`
+			}
+		}
+	];
+}
+
+module.exports.transformValidation = transformValidation;

packages/e2e-tests/_test_dependencies/vite-plugins/package.json

@@ -0,0 +1,9 @@
+{
+  "version": "1.0.0",
+  "private": true,
+  "name": "e2e-test-dep-vite-plugins",
+  "main": "./index.js",
+  "files": [
+    "index.js"
+  ]
+}

packages/e2e-tests/hmr/__tests__/hmr.spec.ts

@@ -39,6 +39,11 @@ test('should not have failed requests', async () => {
 	});
 });
 
+test('should respect transforms', async () => {
+	expect(await getText('#js-transform')).toBe('Hello world');
+	expect(await getColor('#css-transform')).toBe('red');
+});
+
 if (!isBuild) {
 	describe('hmr', () => {
 		const updateHmrTest = editFileAndWaitForHmrComplete.bind(null, 'src/components/HmrTest.svelte');

packages/e2e-tests/hmr/package.json

@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
+    "e2e-test-dep-vite-plugins": "workspace:*",
     "node-fetch": "^2.6.6",
     "svelte": "^3.46.4",
     "vite": "^2.8.4"

packages/e2e-tests/hmr/src/App.svelte

@@ -2,13 +2,18 @@
 	import StaticImport from './components/StaticImport.svelte';
 	import Dependency from 'e2e-test-dep-svelte-simple';
 	import HmrTest from './components/HmrTest.svelte';
+	const jsTransform = '__JS_TRANSFORM_1__';
 	let dynamicImportComponent;
 	function importDynamic() {
 		import('./components/DynamicImport.svelte').then((m) => (dynamicImportComponent = m.default));
 	}
 </script>
 
 <h1 id="app-header">Test-App</h1>
+<!-- to be transformed into "Hello world!" text -->
+<p id="js-transform">{jsTransform}</p>
+<!-- to be transformed into "hello-world" class -->
+<p id="css-transform">Hello world</p>
 <StaticImport />
 <Dependency />
 {#if !dynamicImportComponent}
@@ -24,4 +29,8 @@
 	h1 {
 		color: #111111;
 	}
+
+	:global(#css-transform) {
+		color: __CSS_TRANSFORM_1__;
+	}
 </style>

packages/e2e-tests/hmr/vite.config.js

@@ -1,9 +1,10 @@
 const { defineConfig } = require('vite');
 const { svelte } = require('@sveltejs/vite-plugin-svelte');
+const { transformValidation } = require('e2e-test-dep-vite-plugins');
 
 module.exports = defineConfig(({ command, mode }) => {
 	return {
-		plugins: [svelte()],
+		plugins: [transformValidation(), svelte()],
 		build: {
 			minify: false,
 			target: 'esnext',

packages/e2e-tests/kit-node/__tests__/kit.spec.ts

@@ -82,6 +82,11 @@ describe('kit-node', () => {
 			expect(browserLogs.some((x) => x === 'onMount dynamic imported isSSR: false')).toBe(true);
 		});
 
+		test('should respect transforms', async () => {
+			expect(await getText('#js-transform')).toBe('Hello world');
+			expect(await getColor('#css-transform')).toBe('red');
+		});
+
 		if (isBuild) {
 			it('should not include dynamic import from onmount in ssr output', async () => {
 				const app = readFileContent(path.join('.svelte-kit', 'output', 'server', 'app.js'));

packages/e2e-tests/kit-node/package.json

@@ -11,6 +11,7 @@
     "@sveltejs/adapter-node": "^1.0.0-next.68",
     "@sveltejs/kit": "^1.0.0-next.278",
     "e2e-test-dep-svelte-api-only": "workspace:*",
+    "e2e-test-dep-vite-plugins": "workspace:*",
     "svelte": "^3.46.4",
     "svelte-i18n": "^3.3.13"
   },

packages/e2e-tests/kit-node/src/routes/index.svelte

@@ -25,6 +25,7 @@
 	import Child from '$lib/Child.svelte';
 	import { setSomeContext } from 'e2e-test-dep-svelte-api-only';
 	export let load_status = 'NOT_LOADED';
+	const jsTransform = '__JS_TRANSFORM_1__';
 	let mount_status = 'BEFORE_MOUNT';
 	onMount(async () => {
 		const isSSR = (await import('../client-only-module.js')).default;
@@ -52,6 +53,10 @@
 	<div id="mount">{mount_status}</div>
 	<div id="i18n">{$_('welcome')}</div>
 	<div id="env">{import.meta.env.VITE_FOO}</div>
+	<!-- to be transformed into "Hello world!" text -->
+	<p id="js-transform">{jsTransform}</p>
+	<!-- to be transformed into "hello-world" class -->
+	<p id="css-transform">Hello world</p>
 </main>
 
 <!-- HMR-TEMPLATE-INJECT -->
@@ -83,6 +88,10 @@
 		line-height: 1.35;
 	}
 
+	:global(#css-transform) {
+		color: __CSS_TRANSFORM_1__;
+	}
+
 	@media (min-width: 480px) {
 		h1 {
 			max-width: none;

packages/e2e-tests/kit-node/svelte.config.js

@@ -1,4 +1,5 @@
 import node from '@sveltejs/adapter-node';
+import { transformValidation } from 'e2e-test-dep-vite-plugins';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -16,7 +17,8 @@ const config = {
 					usePolling: true,
 					interval: 100
 				}
-			}
+			},
+			plugins: [transformValidation()]
 		}
 	}
 };

packages/vite-plugin-svelte/src/index.ts

@@ -145,22 +145,9 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 		async transform(code, id, opts) {
 			const ssr = !!opts?.ssr;
 			const svelteRequest = requestParser(id, ssr);
-			if (!svelteRequest) {
+			if (!svelteRequest || svelteRequest.query.svelte) {
 				return;
 			}
-			const { filename, query } = svelteRequest;
-
-			if (query.svelte) {
-				if (query.type === 'style') {
-					const css = cache.getCSS(svelteRequest);
-					if (css) {
-						log.debug(`transform returns css for ${filename}`);
-						return css; // TODO return code arg instead? it's the code from load hook.
-					}
-				}
-				log.error('failed to transform tagged svelte request', svelteRequest);
-				throw new Error(`failed to transform tagged svelte request for id ${id}`);
-			}
 			let compileData;
 			try {
 				compileData = await compileSvelte(svelteRequest, code, options);
@@ -174,7 +161,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 					ensureWatchedFile(options.server!.watcher, d, options.root);
 				});
 			}
-			log.debug(`transform returns compiled js for ${filename}`);
+			log.debug(`transform returns compiled js for ${svelteRequest.filename}`);
 			return compileData.compiled.js;
 		},