fix: alias resolution for css modules

This commit introduces the ability to use aliases when importing css
modules. The alias configuration is defined in the svelte.config.js file.
The changes include an update to the getCssModuleImports function to
handle aliases and a new test case to verify the functionality.

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>