fix: use new values for compilerOptions.css with svelte 3.53+ (#490)

dominikg · web-flow · commit ac82e006acf4 · 2022-11-12T00:22:04.000+08:00
diff --git a/.changeset/popular-oranges-warn.md b/.changeset/popular-oranges-warn.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+support string values of compilerOptions.css added in svelte 3.53.0
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.8.0",
     "rimraf": "^3.0.2",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "typescript": "^4.8.4",
     "vite": "^3.2.3",
     "vitest": "^0.25.0"
diff --git a/packages/e2e-tests/_test_dependencies/svelte-api-only/package.json b/packages/e2e-tests/_test_dependencies/svelte-api-only/package.json
@@ -8,14 +8,14 @@
     "package.json",
     "index.js"
   ],
-  "exports":{
+  "exports": {
     ".": {
       "import": "./index.js"
     },
     "./package.json": "./package.json"
   },
   "type": "module",
   "dependencies": {
-    "svelte": "^3.52.0"
+    "svelte": "3.53.1"
   }
 }
diff --git a/packages/e2e-tests/autoprefixer-browerslist/package.json b/packages/e2e-tests/autoprefixer-browerslist/package.json
@@ -15,7 +15,7 @@
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.18",
     "postcss-load-config": "^4.0.1",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "svelte-preprocess": "^4.10.7",
     "vite": "^3.2.3"
   },
diff --git a/packages/e2e-tests/configfile-custom/package.json b/packages/e2e-tests/configfile-custom/package.json
@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "vite": "^3.2.3"
   },
   "type": "module"
diff --git a/packages/e2e-tests/configfile-esm/package.json b/packages/e2e-tests/configfile-esm/package.json
@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "svelte-preprocess": "^4.10.7",
     "vite": "^3.2.3"
   },
diff --git a/packages/e2e-tests/css-none/__tests__/css-none.spec.ts b/packages/e2e-tests/css-none/__tests__/css-none.spec.ts
@@ -0,0 +1,19 @@
+import { browserLogs, findAssetFile, getColor, getText, isBuild } from '~utils';
+
+test('should not have failed requests', async () => {
+	browserLogs.forEach((msg) => {
+		expect(msg).not.toMatch('404');
+	});
+});
+
+test('should not apply component css', async () => {
+	expect(await getText('#test')).toBe('not red');
+	expect(await getColor('#test')).not.toBe('red');
+});
+
+if (isBuild) {
+	test('should not output css', async () => {
+		const css = await findAssetFile(/index.*\.css/);
+		expect(css).toBe(''); // findAssetFile returns empty for not found
+	});
+}
diff --git a/packages/e2e-tests/css-none/index.html b/packages/e2e-tests/css-none/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width,initial-scale=1" />
+
+		<title>Svelte app</title>
+
+		<script type="module" src="/src/main.js"></script>
+	</head>
+
+	<body></body>
+</html>
diff --git a/packages/e2e-tests/css-none/package.json b/packages/e2e-tests/css-none/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "e2e-tests-css-none",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "workspace:*",
+    "svelte": "3.53.1",
+    "vite": "^3.2.3"
+  }
+}
diff --git a/packages/e2e-tests/css-none/src/App.svelte b/packages/e2e-tests/css-none/src/App.svelte
@@ -0,0 +1,7 @@
+<div id="test">not red</div>
+
+<style>
+	#test {
+		color: red;
+	}
+</style>
diff --git a/packages/e2e-tests/css-none/src/main.js b/packages/e2e-tests/css-none/src/main.js
@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body
+});
+
+export default app;
diff --git a/packages/e2e-tests/css-none/src/vite-env.d.ts b/packages/e2e-tests/css-none/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/packages/e2e-tests/css-none/vite.config.js b/packages/e2e-tests/css-none/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [svelte({ compilerOptions: { css: 'none' } })]
+});
diff --git a/packages/e2e-tests/custom-extensions/package.json b/packages/e2e-tests/custom-extensions/package.json
@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "vite": "^3.2.3"
   },
   "type": "module"
diff --git a/packages/e2e-tests/env/package.json b/packages/e2e-tests/env/package.json
@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "vite": "^3.2.3"
   },
   "type": "module"
diff --git a/packages/e2e-tests/hmr/package.json b/packages/e2e-tests/hmr/package.json
@@ -14,7 +14,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "e2e-test-dep-vite-plugins": "file:../_test_dependencies/vite-plugins",
     "node-fetch": "^3.2.10",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "vite": "^3.2.3"
   },
   "type": "module"
diff --git a/packages/e2e-tests/inspector-kit/package.json b/packages/e2e-tests/inspector-kit/package.json
@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@sveltejs/kit": "^1.0.0-next.538",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "vite": "^3.2.3"
   },
   "type": "module"
diff --git a/packages/e2e-tests/inspector-vite/package.json b/packages/e2e-tests/inspector-vite/package.json
@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "vite": "^3.2.3"
   }
 }
diff --git a/packages/e2e-tests/kit-node/package.json b/packages/e2e-tests/kit-node/package.json
@@ -15,7 +15,7 @@
     "@sveltejs/kit": "^1.0.0-next.538",
     "e2e-test-dep-svelte-api-only": "file:../_test_dependencies/svelte-api-only",
     "e2e-test-dep-vite-plugins": "file:../_test_dependencies/vite-plugins",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "svelte-check": "^2.9.2",
     "svelte-i18n": "^3.4.0",
     "tiny-glob": "^0.2.9",
diff --git a/packages/e2e-tests/package-json-svelte-field/package.json b/packages/e2e-tests/package-json-svelte-field/package.json
@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "vite": "^3.2.3"
   },
   "type": "module"
diff --git a/packages/e2e-tests/prebundle-svelte-deps/package.json b/packages/e2e-tests/prebundle-svelte-deps/package.json
@@ -17,7 +17,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "sass": "^1.56.0",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "svelte-preprocess": "^4.10.7",
     "vite": "^3.2.3"
   }
diff --git a/packages/e2e-tests/preprocess-with-vite/package.json b/packages/e2e-tests/preprocess-with-vite/package.json
@@ -11,7 +11,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "sass": "^1.56.0",
     "stylus": "^0.59.0",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "vite": "^3.2.3"
   },
   "type": "commonjs"
diff --git a/packages/e2e-tests/svelte-preprocess/package.json b/packages/e2e-tests/svelte-preprocess/package.json
@@ -10,7 +10,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "sass": "^1.56.0",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "svelte-preprocess": "^4.10.7",
     "typescript": "^4.8.4",
     "vite": "^3.2.3"
diff --git a/packages/e2e-tests/ts-type-import/package.json b/packages/e2e-tests/ts-type-import/package.json
@@ -11,7 +11,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "@tsconfig/svelte": "^3.0.0",
     "@types/node": "^18.11.9",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "svelte-preprocess": "^4.10.7",
     "vite": "^3.2.3"
   },
diff --git a/packages/e2e-tests/vite-ssr-esm/package.json b/packages/e2e-tests/vite-ssr-esm/package.json
@@ -20,7 +20,7 @@
     "express": "^4.18.2",
     "npm-run-all": "^4.1.5",
     "serve-static": "^1.15.0",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "vite": "^3.2.3"
   }
 }
diff --git a/packages/e2e-tests/vite-ssr/package.json b/packages/e2e-tests/vite-ssr/package.json
@@ -17,7 +17,7 @@
     "e2e-test-dep-esm-only": "file:../_test_dependencies/esm-only",
     "express": "^4.18.2",
     "serve-static": "^1.15.0",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "vite": "^3.2.3"
   }
 }
diff --git a/packages/playground/big-component-library/package.json b/packages/playground/big-component-library/package.json
@@ -11,8 +11,8 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "carbon-components-svelte": "^0.70.12",
-		"carbon-icons-svelte": "^11.4.0",
-    "svelte": "^3.52.0",
+    "carbon-icons-svelte": "^11.4.0",
+    "svelte": "3.53.1",
     "vite": "^3.2.3"
   },
   "dependencies": {
diff --git a/packages/playground/big/package.json b/packages/playground/big/package.json
@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "vite": "^3.2.3"
   }
 }
diff --git a/packages/playground/kit-demo-app/package.json b/packages/playground/kit-demo-app/package.json
@@ -15,7 +15,7 @@
 		"@sveltejs/adapter-auto": "^1.0.0-next.87",
 		"@sveltejs/kit": "^1.0.0-next.538",
 		"@types/cookie": "^0.5.1",
-		"svelte": "^3.52.0",
+		"svelte": "3.53.1",
 		"svelte-check": "^2.9.2",
 		"typescript": "^4.8.4",
 		"vite": "^3.2.3"
diff --git a/packages/playground/optimizedeps-include/package.json b/packages/playground/optimizedeps-include/package.json
@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "tinro": "^0.6.12",
     "vite": "^3.2.3"
   }
diff --git a/packages/playground/windicss/package.json b/packages/playground/windicss/package.json
@@ -13,7 +13,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "diff-match-patch": "^1.0.5",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "vite": "^3.2.3",
     "vite-plugin-windicss": "^1.8.8"
   }
diff --git a/packages/vite-plugin-svelte/package.json b/packages/vite-plugin-svelte/package.json
@@ -69,7 +69,7 @@
     "diff-match-patch": "^1.0.5",
     "esbuild": "^0.15.13",
     "rollup": "^2.79.1",
-    "svelte": "^3.52.0",
+    "svelte": "3.53.1",
     "tsup": "^6.4.0",
     "vite": "^3.2.3"
   }
diff --git a/packages/vite-plugin-svelte/src/utils/__tests__/svelte-version.spec.ts b/packages/vite-plugin-svelte/src/utils/__tests__/svelte-version.spec.ts
diff --git a/packages/vite-plugin-svelte/src/utils/compile.ts b/packages/vite-plugin-svelte/src/utils/compile.ts
diff --git a/packages/vite-plugin-svelte/src/utils/esbuild.ts b/packages/vite-plugin-svelte/src/utils/esbuild.ts
diff --git a/packages/vite-plugin-svelte/src/utils/options.ts b/packages/vite-plugin-svelte/src/utils/options.ts
diff --git a/packages/vite-plugin-svelte/src/utils/svelte-version.ts b/packages/vite-plugin-svelte/src/utils/svelte-version.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@sveltejs/vite-plugin-svelte': minor
 +---
++
 +support string values of compilerOptions.css added in svelte 3.53.0