Merge pull request #7 from ryoppippi/feature/fix-aliasy

fix: alias resolution for css modules

Author: ryoppippi

src/utils/css-module.ts

@@ -7,6 +7,7 @@ import { parseStaticImport, pathToFileURL, resolvePath } from 'mlly';
 import { stringToUint8Array, uint8ArrayToString } from 'uint8array-extras';
 import { betterr } from 'betterr';
 import type { ResolvedOptions } from '../options';
+import { addSlash } from './alias';
 
 type getCssModuleImportsProps = {
 	imports: StaticImport[];
@@ -37,10 +38,11 @@ export async function getCssModuleImports(
 			throw new Error(`Default import is required for css modules: ${specifier}`);
 		}
 
-		const aliasKey = Object.keys(aliases).find(a => specifier.startsWith(a));
+		const aliasKey = Object.keys(aliases).find(a => specifier.startsWith(addSlash(a)) || specifier === a);
 		if (aliasKey != null) {
+			const alias = aliases[aliasKey];
 			const s = new MagicString(specifier);
-			s.overwrite(0, specifier.length, specifier);
+			s.overwrite(0, aliasKey.length, alias);
 			return { path: s.toString(), defaultImport, imp };
 		}
 

svelte.config.js

@@ -0,0 +1,16 @@
+import path from 'node:path';
+
+/** @param {...string} args */
+function relativePath(...args) {
+	return path.resolve(import.meta.dirname, ...args);
+}
+
+const config = {
+	kit: {
+		alias: {
+			$css: relativePath('./tests/assets'),
+		},
+	},
+};
+
+export default config;

tests/class/Input.svelte

@@ -1,5 +1,6 @@
 <script>
 	import s from '../assets/class.module.css';
+	import s1 from '$css/style.module.css';
 </script>
 
 <div class={s.error}>
@@ -9,3 +10,7 @@
 <div class={s.success}>
 	world
 </div>
+
+<div class={s1.suceessMessage}>
+  foo
+</div>

tests/class/Output.svelte

@@ -1,7 +1,11 @@
 <script>
 	const s = {
-  error: "error_class-module-css-module-test",
-  success: "success_class-module-css-module-test"
+  success: "success_class-module-css-module-test",
+  error: "error_class-module-css-module-test"
+};
+const s1 = {
+  error: "error_style-module-css-module-test",
+  successMessage: "success-message_style-module-css-module-test"
 };
 </script>
 
@@ -13,6 +17,10 @@
 	world
 </div>
 
+<div class={s1.suceessMessage}>
+  foo
+</div>
+
 <style>
 
 
@@ -24,4 +32,18 @@
   color: green;
 }
 
+
+
+section {
+  padding: 10px;
+}
+
+.error_style-module-css-module-test {
+  color: red;
+}
+
+.success-message_style-module-css-module-test {
+  color: green;
+}
+
 </style>