fix: improve virtual css module path (fixes #14)

dominikg · web-flow · commit 18647aa92286 · 2021-04-05T19:07:07.000+02:00
* improve handling of virtual css module paths (fixes #14)
diff --git a/.changeset/long-foxes-agree.md b/.changeset/long-foxes-agree.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+improve virtual css module path (fixes #14)
diff --git a/package.json b/package.json
@@ -27,22 +27,22 @@
     "release": "pnpm run build && pnpx changeset publish"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.14.1",
+    "@changesets/cli": "^2.15.0",
     "@microsoft/api-extractor": "^7.13.2",
-    "@types/fs-extra": "^9.0.8",
-    "@types/jest": "^26.0.21",
-    "@types/node": "^14.14.35",
+    "@types/fs-extra": "^9.0.10",
+    "@types/jest": "^26.0.22",
+    "@types/node": "^14.14.37",
     "@types/semver": "^7.3.4",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
+    "@typescript-eslint/eslint-plugin": "^4.20.0",
+    "@typescript-eslint/parser": "^4.20.0",
     "chalk": "^4.1.0",
     "cross-env": "^7.0.3",
     "enquirer": "^2.3.6",
-    "esbuild": "^0.9.5",
-    "eslint": "^7.22.0",
+    "esbuild": "~0.9.7",
+    "eslint": "^7.23.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-html": "^6.1.2",
-    "eslint-plugin-jest": "^24.3.2",
+    "eslint-plugin-jest": "^24.3.3",
     "eslint-plugin-markdown": "^2.0.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.3.1",
@@ -58,21 +58,21 @@
     "node-fetch": "^2.6.1",
     "npm-check-updates": "^11.3.0",
     "npm-run-all": "^4.1.5",
-    "playwright-core": "^1.9.2",
-    "pnpm": "^5.18.7",
+    "playwright-core": "^1.10.0",
+    "pnpm": "^5.18.9",
     "prettier": "^2.2.1",
     "prettier-plugin-svelte": "^2.2.0",
     "rimraf": "^3.0.2",
-    "semver": "^7.3.4",
+    "semver": "^7.3.5",
     "sirv": "^1.0.11",
     "slash": "^3.0.0",
     "stylelint": "^13.12.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-recommended": "^4.0.0",
-    "svelte": "^3.35.0",
+    "svelte": "^3.37.0",
     "ts-jest": "^26.5.4",
     "typescript": "^4.2.3",
-    "vite": "^2.1.2"
+    "vite": "^2.1.5"
   },
   "husky": {
     "hooks": {
diff --git a/packages/playground/autoprefixer-browerslist/.browserslistrc b/packages/playground/autoprefixer-browerslist/.browserslistrc
@@ -0,0 +1 @@
+safari 12
diff --git a/packages/playground/autoprefixer-browerslist/.gitignore b/packages/playground/autoprefixer-browerslist/.gitignore
@@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store
diff --git a/packages/playground/autoprefixer-browerslist/README.md b/packages/playground/autoprefixer-browerslist/README.md
@@ -0,0 +1,10 @@
+# default svelte app template
+
+Created with `npx degit sveltejs/template`
+
+adapted to vite by moving index.html to root and replacing rollup config with vite
+
+use pnpm
+
+`pnpm dev` starts dev server
+`pnpm build` builds for production
diff --git a/packages/playground/autoprefixer-browerslist/__tests__/autoprefixer-browerslist.spec.ts b/packages/playground/autoprefixer-browerslist/__tests__/autoprefixer-browerslist.spec.ts
@@ -0,0 +1,34 @@
+import { isBuild, findAssetFile } from '../../testUtils';
+
+test('should prefix position: sticky for code in source tree', async () => {
+	const stickyStyle = isBuild
+		? await getStyleFromDist('sticky')
+		: await getStyleFromPage(page, 'sticky');
+	expect(stickyStyle).toBe('position:-webkit-sticky;position:sticky');
+});
+
+/* unfortunately this test fails. the dependency has a different absolute path and .browerslist is not picked up
+test('should prefix position: sticky for imported dependency', async () => {
+	const stickyStyle = isBuild
+		? await getStyleFromDist('sticky-dep')
+		: await getStyleFromPage(page,'sticky-dep');
+	expect(stickyStyle).toBe('position:-webkit-sticky;position:sticky')
+});
+*/
+
+async function getStyleFromPage(page, cssClass: string) {
+	const styleNodes = await page.$$('head style');
+	const styles: string[] = await Promise.all(styleNodes.map((e) => e.textContent()));
+	const css = styles.find((s) => s.includes(`.${cssClass}.`));
+	return extractStyleContent(css, cssClass);
+}
+
+async function getStyleFromDist(cssClass: string) {
+	const css = await findAssetFile(/index.*\.css/);
+	return extractStyleContent(css, cssClass);
+}
+
+function extractStyleContent(css: string, cssClass: string) {
+	const match = css.match(new RegExp(`\\.${cssClass}\\.[^\\{]*\\{([^\\}]*)\\}`));
+	return match[1];
+}
diff --git a/packages/playground/autoprefixer-browerslist/index.html b/packages/playground/autoprefixer-browerslist/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/playground/autoprefixer-browerslist/package.json b/packages/playground/autoprefixer-browerslist/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "playground-autoprefixer-browserslist",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+	"dependencies": {
+		"playground-hmr-test-dependency": "workspace:*"
+	},
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "workspace:*",
+    "autoprefixer": "^10.2.5",
+    "postcss": "^8.2.9",
+    "postcss-load-config": "^3.0.1",
+    "svelte": "^3.37.0",
+    "svelte-hmr": "^0.14.0",
+    "svelte-preprocess": "^4.7.0",
+    "vite": "^2.1.5"
+  }
+}
diff --git a/packages/playground/autoprefixer-browerslist/postcss.config.js b/packages/playground/autoprefixer-browerslist/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: [
+		// expected to pick up on .browserslistrc:
+		require('autoprefixer')()
+	]
+};
diff --git a/packages/playground/autoprefixer-browerslist/src/App.svelte b/packages/playground/autoprefixer-browerslist/src/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Dependency from 'playground-hmr-test-dependency';
+</script>
+
+<div class="sticky" id="#sticky">sticky-div</div>
+<Dependency />
+
+<style>
+	.sticky {
+		position: sticky;
+	}
+</style>
diff --git a/packages/playground/autoprefixer-browerslist/src/main.js b/packages/playground/autoprefixer-browerslist/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/playground/autoprefixer-browerslist/svelte.config.js b/packages/playground/autoprefixer-browerslist/svelte.config.js
@@ -0,0 +1,10 @@
+const sveltePreprocess = require('svelte-preprocess');
+const path = require('path');
+module.exports = {
+	preprocess: sveltePreprocess({
+		postcss: {
+			// tests are run on project root and postcss-load-config uses cwd as default so force correct path here
+			configFilePath: path.join(__dirname, 'postcss.config.js')
+		}
+	})
+};
diff --git a/packages/playground/autoprefixer-browerslist/vite.config.js b/packages/playground/autoprefixer-browerslist/vite.config.js
@@ -0,0 +1,12 @@
+const svelte = require('@sveltejs/vite-plugin-svelte');
+const { defineConfig } = require('vite');
+
+module.exports = defineConfig(({ command, mode }) => {
+	const isProduction = mode === 'production';
+	return {
+		plugins: [svelte()],
+		build: {
+			minify: isProduction
+		}
+	};
+});
diff --git a/packages/playground/big/package.json b/packages/playground/big/package.json
@@ -11,8 +11,8 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
-    "svelte": "^3.35.0",
-    "svelte-hmr": "^0.13.0",
-    "vite": "^2.1.2"
+    "svelte": "^3.37.0",
+    "svelte-hmr": "^0.14.0",
+    "vite": "^2.1.5"
   }
 }
diff --git a/packages/playground/default-svelte-template-ts/package.json b/packages/playground/default-svelte-template-ts/package.json
@@ -11,11 +11,11 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "@tsconfig/svelte": "^1.0.10",
-    "svelte": "^3.35.0",
-    "svelte-hmr": "^0.13.0",
-    "vite": "^2.1.2",
-    "svelte-check": "^1.2.6",
-    "svelte-preprocess": "^4.6.9",
+    "svelte": "^3.37.0",
+    "svelte-hmr": "^0.14.0",
+    "vite": "^2.1.5",
+    "svelte-check": "^1.3.0",
+    "svelte-preprocess": "^4.7.0",
     "typescript": "^4.2.3",
     "tslib": "^2.1.0"
   }
diff --git a/packages/playground/default-svelte-template/package.json b/packages/playground/default-svelte-template/package.json
@@ -8,8 +8,8 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
-    "svelte": "^3.35.0",
-    "svelte-hmr": "^0.13.0",
-    "vite": "^2.1.2"
+    "svelte": "^3.37.0",
+    "svelte-hmr": "^0.14.0",
+    "vite": "^2.1.5"
   }
 }
diff --git a/packages/playground/hmr-test-dependency/components/Dependency.svelte b/packages/playground/hmr-test-dependency/components/Dependency.svelte
diff --git a/packages/playground/hmr-test-dependency/index.js b/packages/playground/hmr-test-dependency/index.js
@@ -1,2 +1,2 @@
-import Dependency from './components/Dependency.svelte';
+import Dependency from './src/components/Dependency.svelte';
 export default Dependency;
diff --git a/packages/playground/hmr-test-dependency/src/components/Dependency.svelte b/packages/playground/hmr-test-dependency/src/components/Dependency.svelte
@@ -0,0 +1,15 @@
+<script>
+	const label = 'dependency-import';
+</script>
+
+<div id="dependency-import"><span class="label">{label}</span></div>
+<div id="sticky-dep" class="sticky-dep">sticky-dep</div>
+
+<style>
+	.label {
+		color: green;
+	}
+	.sticky-dep {
+		position: sticky;
+	}
+</style>
diff --git a/packages/playground/hmr-test-dependency/svelte.js b/packages/playground/hmr-test-dependency/svelte.js
@@ -0,0 +1,2 @@
+import Dependency from './src/components/Dependency.svelte';
+export default Dependency;
diff --git a/packages/playground/hmr/package.json b/packages/playground/hmr/package.json
@@ -11,9 +11,9 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
-    "svelte": "^3.35.0",
-    "svelte-hmr": "^0.13.0",
-    "vite": "^2.1.2",
+    "svelte": "^3.37.0",
+    "svelte-hmr": "^0.14.0",
+    "vite": "^2.1.5",
     "node-fetch": "^2.6.1"
   }
 }
diff --git a/packages/playground/preprocess-with-vite/package.json b/packages/playground/preprocess-with-vite/package.json
@@ -11,8 +11,8 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "sass": "^1.32.8",
     "stylus": "^0.54.8",
-    "svelte": "^3.35.0",
-    "svelte-hmr": "^0.13.0",
-    "vite": "^2.1.2"
+    "svelte": "^3.37.0",
+    "svelte-hmr": "^0.14.0",
+    "vite": "^2.1.5"
   }
 }
diff --git a/packages/playground/vite-ssr/package.json b/packages/playground/vite-ssr/package.json
@@ -19,8 +19,8 @@
     "cross-env": "^7.0.3",
     "express": "^4.17.1",
     "serve-static": "^1.14.1",
-    "svelte": "^3.35.0",
-    "svelte-hmr": "^0.13.0",
-    "vite": "^2.1.2"
+    "svelte": "^3.37.0",
+    "svelte-hmr": "^0.14.0",
+    "vite": "^2.1.5"
   }
 }
diff --git a/packages/playground/windicss/package.json b/packages/playground/windicss/package.json
@@ -8,13 +8,13 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "windicss": "^2.5.4"
+    "windicss": "^2.5.9"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
-    "svelte": "^3.35.0",
+    "svelte": "^3.37.0",
     "svelte-hmr": "^0.14.0",
-    "vite": "^2.1.2",
-    "vite-plugin-windicss": "^0.9.9"
+    "vite": "^2.1.5",
+    "vite-plugin-windicss": "^0.12.2"
   }
 }
diff --git a/packages/vite-plugin-svelte/package.json b/packages/vite-plugin-svelte/package.json
@@ -39,23 +39,23 @@
     "require-relative": "^0.8.7",
     "slash": "^3.0.0",
     "source-map": "^0.7.3",
-    "svelte-hmr": "^0.13.3"
+    "svelte-hmr": "^0.14.0"
   },
   "peerDependencies": {
-    "svelte": "^3.35.0",
-    "vite": "^2.1.2"
+    "svelte": "^3.37.0",
+    "vite": "^2.1.5"
   },
   "devDependencies": {
     "@types/debug": "^4.1.5",
     "@types/es-module-lexer": "^0.3.0",
-    "@types/estree": "^0.0.46",
+    "@types/estree": "^0.0.47",
     "@types/hash-sum": "^1.0.0",
-    "@windicss/plugin-utils": "^0.9.4",
-    "esbuild": "^0.9.5",
+    "@windicss/plugin-utils": "^0.12.2",
+    "esbuild": "~0.9.7",
     "locate-character": "^2.0.5",
     "magic-string": "^0.25.7",
-    "rollup": "^2.42.0",
-    "svelte": "^3.35.0",
-    "vite": "^2.1.2"
+    "rollup": "^2.44.0",
+    "svelte": "^3.37.0",
+    "vite": "^2.1.5"
   }
 }
diff --git a/packages/vite-plugin-svelte/src/index.ts b/packages/vite-plugin-svelte/src/index.ts
@@ -124,10 +124,16 @@ export default function vitePluginSvelte(inlineOptions?: Partial<Options>): Plug
 			}
 		},
 
-		async resolveId(importee, importer, options, ssr) {
+		async resolveId(importee, importer, customOptions, ssr) {
 			const svelteRequest = requestParser(importee, !!ssr);
 			log.debug('resolveId', svelteRequest || importee);
 			if (svelteRequest?.query.svelte) {
+				if (svelteRequest.query.type === 'style') {
+					// return cssId with root prefix so postcss pipeline of vite finds the directory correctly
+					// see https://github.com/sveltejs/vite-plugin-svelte/issues/14
+					log.debug(`resolveId resolved virtual css module ${svelteRequest.cssId}`);
+					return svelteRequest.cssId;
+				}
 				log.debug(`resolveId resolved ${importee}`);
 				return importee; // query with svelte tag, an id we generated, no need for further analysis
 			}
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/id.ts b/packages/vite-plugin-svelte/src/utils/id.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': patch
 +---
++
 +improve virtual css module path (fixes #14)