Merge pull request #3 from ryoppippi/fix-test

feat: Add options for cssModules preprocessor

Author: ryoppippi

eslint.config.js

@@ -2,6 +2,7 @@ import { ryoppippi } from '@ryoppippi/eslint-config';
 
 export default ryoppippi({
 	svelte: true,
+	ignores: ['tests/**/*.svelte'],
 	typescript: {
 		tsconfigPath: './tsconfig.json',
 	},

package.json

@@ -23,6 +23,7 @@
 		"mlly": "^1.7.1",
 		"svelte": "5.0.0-next.210",
 		"svelte-parse-markup": "^0.1.5",
+		"type-fest": "^4.23.0",
 		"uint8array-extras": "^1.4.0",
 		"unconfig": "^0.5.5",
 		"zimmerframe": "^1.1.2"

pnpm-lock.yaml

@@ -6,10 +6,13 @@ import { genObjectFromValues } from 'knitwork';
 import { loadAliases } from './utils/alias';
 import type { CssModule } from './utils/css-module';
 import { getCssModule, getCssModuleImports } from './utils/css-module';
+import { type Options, resolveOptions } from './options';
 
 // TODO: improve tree-shaking for production build
 
-export function cssModules(): PreprocessorGroup {
+export function cssModules(_options: Options = {}): PreprocessorGroup {
+	const options = resolveOptions(_options);
+
 	const cssModuleCache = new Map<string, CssModule[]>();
 	return {
 		markup({ content, filename }) {
@@ -48,7 +51,7 @@ export function cssModules(): PreprocessorGroup {
 			/* transform css/scss modules */
 			const cssModules = [];
 			for (const cmi of cssModuleImports) {
-				const cssModule = await getCssModule(cmi);
+				const cssModule = await getCssModule(cmi, options);
 				cssModules.push(cssModule);
 
 				/* generate css module exports */
@@ -81,7 +84,7 @@ export function cssModules(): PreprocessorGroup {
 			/* append css module styles */
 			for (const cssModule of cssModules) {
 				const code = `
-/* ${cssModule.path} */
+${options.includeOriginalPath === false ? '' : `/*${cssModule.path}*/`}
 ${cssModule.css}
 `;
 				s.append(code);

src/index.ts

@@ -0,0 +1,27 @@
+import type { SetRequired } from 'type-fest';
+
+/**
+ * Options for the cssModules preprocessor
+ */
+export type Options = {
+	/*
+	* The pattern to use for module naming
+	* @see https://lightningcss.dev/css-modules.html
+	*/
+	moduleNameingPattern?: string;
+
+	/*
+	* Whether to include the original path in the css module
+	* @default true
+	*/
+	includeOriginalPath?: boolean;
+};
+
+export type ResolvedOptions = SetRequired<Options, 'includeOriginalPath'>;
+
+export function resolveOptions(options: Options): ResolvedOptions {
+	return {
+		moduleNameingPattern: options.moduleNameingPattern,
+		includeOriginalPath: options.includeOriginalPath ?? true,
+	};
+}

src/options.ts

@@ -6,6 +6,7 @@ import MagicString from 'magic-string';
 import type { StaticImport } from 'mlly';
 import { parseStaticImport, pathToFileURL, resolvePath } from 'mlly';
 import { stringToUint8Array, uint8ArrayToString } from 'uint8array-extras';
+import type { ResolvedOptions } from '../options';
 
 type getCssModuleImportsProps = {
 	imports: StaticImport[];
@@ -63,7 +64,8 @@ export type CssModule = {
 	exports: Record<string, string>;
 } & ResolvedModuleImport;
 
-export async function getCssModule({ path, ...rest }: ResolvedModuleImport): Promise<CssModule> {
+export async function getCssModule({ path, ...rest }: ResolvedModuleImport, options: ResolvedOptions): Promise<CssModule> {
+	const { moduleNameingPattern: pattern } = options;
 	const [err, code] = await to(readFile(path, { encoding: 'utf-8' }));
 
 	if (err != null) {
@@ -73,7 +75,7 @@ export async function getCssModule({ path, ...rest }: ResolvedModuleImport): Pro
 
 	const { code: _css, exports: _exports } = transform({
 		code: stringToUint8Array(code),
-		cssModules: true,
+		cssModules: pattern != null ? { pattern } : true,
 		minify: false,
 		sourceMap: false,
 		filename: path,

src/utils/css-module.ts

@@ -1,8 +1,8 @@
 <script>
 	const s = {
-		error: 's-Lwza_error',
-		success: 's-Lwza_success',
-	};
+  error: "error_class-module-css-module-test",
+  success: "success_class-module-css-module-test"
+};
 </script>
 
 <div class={s.error}>
@@ -15,12 +15,12 @@
 
 <style>
 
-/* /Users/ryoppippi/ghq/github.com/ryoppippi/svelte-preprocess-css-modules/tests/assets/class.module.css */
-.s-Lwza_error {
+
+.error_class-module-css-module-test {
   color: red;
 }
 
-.s-Lwza_success {
+.success_class-module-css-module-test {
   color: green;
 }
 

tests/class/Output.svelte

@@ -7,7 +7,7 @@ export function resolve(file: string) {
 	return path.resolve(__dirname, file);
 }
 
-it('load css module for class', async () => {
+it('load css module for class', { retry: 5 }, async () => {
 	const filename = resolve('Input.svelte');
 
 	const source = await fs.readFile(filename, 'utf-8');

tests/class/class.spec.ts

@@ -12,7 +12,10 @@ export async function compiler({
 }: Params) {
 	const { code } = await preprocess(
 		source,
-		[cssModules()],
+		[cssModules({
+			moduleNameingPattern: '[local]_[name]-css-module-test',
+			includeOriginalPath: false,
+		})],
 		preprocessOptions,
 	);