Merge pull request #2 from ryoppippi/feature/test

feat:test

Author: ryoppippi

package.json

@@ -22,6 +22,7 @@
 		"magic-string": "^0.30.11",
 		"mlly": "^1.7.1",
 		"svelte": "5.0.0-next.210",
+		"svelte-parse-markup": "^0.1.5",
 		"uint8array-extras": "^1.4.0",
 		"unconfig": "^0.5.5",
 		"zimmerframe": "^1.1.2"

pnpm-lock.yaml

@@ -1,7 +1,8 @@
 import MagicString from 'magic-string';
 import type { PreprocessorGroup } from 'svelte/compiler';
+import { parse } from 'svelte-parse-markup';
 import { findStaticImports } from 'mlly';
-import { genObjectFromRaw } from 'knitwork';
+import { genObjectFromValues } from 'knitwork';
 import { loadAliases } from './utils/alias';
 import type { CssModule } from './utils/css-module';
 import { getCssModule, getCssModuleImports } from './utils/css-module';
@@ -11,6 +12,22 @@ import { getCssModule, getCssModuleImports } from './utils/css-module';
 export function cssModules(): PreprocessorGroup {
 	const cssModuleCache = new Map<string, CssModule[]>();
 	return {
+		markup({ content, filename }) {
+			const ast = parse(content);
+
+			/* if css is empty, add style tag */
+			if (ast.css == null) {
+				const s = new MagicString(content);
+				s.append('\n<style>\n</style>\n');
+				return {
+					code: s.toString(),
+					map: s.generateMap({
+						source: filename,
+						includeContent: true,
+					}),
+				};
+			}
+		},
 		async script({ content, filename }) {
 			const aliases = await loadAliases();
 			const s = new MagicString(content);
@@ -21,7 +38,7 @@ export function cssModules(): PreprocessorGroup {
 			);
 
 			/* find css/scss module imports */
-			const cssModuleImpots
+			const cssModuleImports
 				= await getCssModuleImports({
 					imports,
 					aliases,
@@ -30,13 +47,13 @@ export function cssModules(): PreprocessorGroup {
 
 			/* transform css/scss modules */
 			const cssModules = [];
-			for (const cmi of cssModuleImpots) {
+			for (const cmi of cssModuleImports) {
 				const cssModule = await getCssModule(cmi);
 				cssModules.push(cssModule);
 
 				/* generate css module exports */
-				const obj = genObjectFromRaw(cssModule.exports);
-				const gen = `const ${cmi.defaultImport} = ${obj};`;
+				const obj = genObjectFromValues(cssModule.exports);
+				const gen = `const ${cmi.defaultImport} = ${obj};\n`;
 				s.overwrite(cmi.imp.start, cmi.imp.end, gen);
 			}
 			if (filename != null) {

src/index.ts

@@ -4,7 +4,7 @@ import to from 'await-to-js';
 import { transform } from 'lightningcss';
 import MagicString from 'magic-string';
 import type { StaticImport } from 'mlly';
-import { parseStaticImport, resolvePath } from 'mlly';
+import { parseStaticImport, pathToFileURL, resolvePath } from 'mlly';
 import { stringToUint8Array, uint8ArrayToString } from 'uint8array-extras';
 
 type getCssModuleImportsProps = {
@@ -37,16 +37,18 @@ export async function getCssModuleImports(
 		}
 
 		const aliasKey = Object.keys(aliases).find(a => specifier.startsWith(a));
-		if (aliasKey == null) {
+		if (aliasKey != null) {
 			const s = new MagicString(specifier);
 			s.overwrite(0, specifier.length, specifier);
 			return { path: s.toString(), defaultImport, imp };
 		}
 
-		const [err, resolved] = await to(resolvePath(specifier, { url: filename }));
+		const [err, resolved] = await to(resolvePath(specifier, {
+			url: filename == null ? undefined : pathToFileURL(filename),
+		}));
 
 		if (err != null) {
-			console.error(`Failed to resolve path: ${specifier}`);
+			console.error(err.message);
 			return undefined;
 		}
 

src/utils/css-module.ts

@@ -0,0 +1,6 @@
+.error {
+	color: red;
+}
+.success {
+	color: green;
+}

src/utils/css.ts

@@ -0,0 +1,9 @@
+section {
+	padding: 10px;
+}
+.error {
+	color: red;
+}
+.success-message {
+	color: green;
+}

tests/assets/class.module.css

@@ -0,0 +1,11 @@
+<script>
+	import s from '../assets/class.module.css';
+</script>
+
+<div class={s.error}>
+	hello
+</div>
+
+<div class={s.success}>
+	world
+</div>

tests/assets/style.module.css

@@ -0,0 +1,27 @@
+<script>
+	const s = {
+		error: 's-Lwza_error',
+		success: 's-Lwza_success',
+	};
+</script>
+
+<div class={s.error}>
+	hello
+</div>
+
+<div class={s.success}>
+	world
+</div>
+
+<style>
+
+/* /Users/ryoppippi/ghq/github.com/ryoppippi/svelte-preprocess-css-modules/tests/assets/class.module.css */
+.s-Lwza_error {
+  color: red;
+}
+
+.s-Lwza_success {
+  color: green;
+}
+
+</style>

tests/class/Input.svelte

@@ -0,0 +1,21 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { expect, it } from 'vitest';
+import { compiler } from '../compiler';
+
+export function resolve(file: string) {
+	return path.resolve(__dirname, file);
+}
+
+it('load css module for class', async () => {
+	const filename = resolve('Input.svelte');
+
+	const source = await fs.readFile(filename, 'utf-8');
+
+	const code = await compiler({
+		source,
+		preprocessOptions: { filename },
+	});
+
+	await expect(code).toMatchFileSnapshot('./Output.svelte');
+});