feat: Add options for cssModules preprocessor

This commit introduces new options for the cssModules preprocessor.
These options include 'moduleNameingPattern' for module naming and
'includeOriginalPath' to decide whether to include the original path
in the css module. The default value for 'includeOriginalPath' is true.

Author: ryoppippi

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,