Implementation

Author: mrginglymus

src/plugin/generate-esm.ts

@@ -1,5 +1,5 @@
 import { makeLegalIdentifier } from '@rollup/pluginutils';
-import type { ExportMode } from './types.js';
+import type { ComposedClassesMode, ExportMode } from './types.js';
 
 type ImportSpecifiers = Record<string /* exportName */, string /* importAs */>;
 export type Imports = Map<string /* filePath */, ImportSpecifiers>;
@@ -44,6 +44,7 @@ const importsToCode = (
 const exportsToCode = (
 	exports: Exports,
 	exportMode: ExportMode,
+	composedClassesMode: ComposedClassesMode,
 	allowArbitraryNamedExports = false,
 ) => {
 	let code = '';
@@ -52,7 +53,12 @@ const exportsToCode = (
 	const exportedVariables = Object.entries(exports).flatMap(
 		([exportName, { exportAs, code: value }]) => {
 			const jsVariable = makeLegalIdentifier(exportName);
-			variables.add(`const ${jsVariable} = \`${value}\`;`);
+
+			if (composedClassesMode === 'string' || (composedClassesMode === 'array' && !value.includes(' '))) {
+				variables.add(`const ${jsVariable} = \`${value}\`;`);
+			} else {
+				variables.add(`const ${jsVariable} = [${value.split(' ').map(v => `\`${v}\``).join(', ')}];`);
+			}
 
 			return Array.from(exportAs).map((exportAsName) => {
 				const exportNameSafe = makeLegalIdentifier(exportAsName);
@@ -116,10 +122,11 @@ export const generateEsm = (
 	imports: Imports,
 	exports: Exports,
 	exportMode: ExportMode,
+	composedClassesMode: ComposedClassesMode,
 	allowArbitraryNamedExports = false,
 ) => (
 	importsToCode(imports, exportMode, allowArbitraryNamedExports)
-	+ exportsToCode(exports, exportMode, allowArbitraryNamedExports)
+	+ exportsToCode(exports, exportMode, composedClassesMode, allowArbitraryNamedExports)
 );
 
 const dtsComment = `

src/plugin/index.ts

@@ -68,7 +68,7 @@ export type PatchConfig = {
 	 * - 'array': composed classes as arrays of strings
 	 * - 'all-array': all classes as arrays of strings
 	 */
-	composedClasses?: ComposedClassesMode;
+	composedClassesMode?: ComposedClassesMode;
 };
 
 // This plugin is designed to be used by Vite internally
@@ -97,6 +97,7 @@ export const cssModules = (
 	);
 
 	const exportMode = patchConfig?.exportMode ?? 'both';
+	const composedClassesMode = patchConfig?.composedClassesMode ?? 'string';
 
 	return {
 		name: pluginName,
@@ -283,6 +284,7 @@ export const cssModules = (
 				imports,
 				exports,
 				exportMode,
+				composedClassesMode,
 				allowArbitraryNamedExports,
 			);
 

tests/specs/patched/postcss.spec.ts

@@ -551,7 +551,7 @@ export default testSuite(({ describe }) => {
 				await using fixture = await createFixture(fixtures.composedAndFlat);
 
 				const { js } = await viteBuild(fixture.path, {
-					plugins: [patchCssModules({ composedClasses: 'string' })],
+					plugins: [patchCssModules({ composedClassesMode: 'string' })],
 					build: {
 						target: 'es2022',
 					},
@@ -569,7 +569,7 @@ export default testSuite(({ describe }) => {
 				await using fixture = await createFixture(fixtures.composedAndFlat);
 
 				const { js } = await viteBuild(fixture.path, {
-					plugins: [patchCssModules({ composedClasses: 'array' })],
+					plugins: [patchCssModules({ composedClassesMode: 'array' })],
 					build: {
 						target: 'es2022',
 					},
@@ -587,7 +587,7 @@ export default testSuite(({ describe }) => {
 				await using fixture = await createFixture(fixtures.composedAndFlat);
 
 				const { js } = await viteBuild(fixture.path, {
-					plugins: [patchCssModules({ composedClasses: 'all-array' })],
+					plugins: [patchCssModules({ composedClassesMode: 'all-array' })],
 					build: {
 						target: 'es2022',
 					},