Add support for exteranal nested compose

Author: mrginglymus

src/plugin/generate-esm.ts

@@ -57,7 +57,7 @@ const exportsToCode = (
 			if (composedClassesMode === 'string' || (composedClassesMode === 'array' && !value.includes(' '))) {
 				variables.add(`const ${jsVariable} = \`${value}\`;`);
 			} else {
-				variables.add(`const ${jsVariable} = [${value.split(' ').map(v => `\`${v}\``).join(', ')}];`);
+				variables.add(`const ${jsVariable} = [${value.split(' ').map(v => (v.search(/^\$\{.*\}$/) === 0 ? v.slice(2, -1) : `\`${v}\``)).join(', ')}].flat();`);
 			}
 
 			return Array.from(exportAs).map((exportAsName) => {

tests/fixtures.ts

@@ -142,6 +142,22 @@ export const composedAndFlat = Object.freeze({
       composes: plain;
       color: blue;
     }
+
+    .nested {
+       composes: extra from './utils.css';
+       color: green;
+    }
+	`,
+
+	'utils.css': outdent`
+	.base {
+	  color: red;
+	}
+
+	.extra {
+	  composes: base;
+	  color: blue;
+	}
 	`,
 
 	'postcss.config.js': postcssConfig,

tests/specs/patched/postcss.spec.ts

@@ -583,11 +583,13 @@ export default testSuite(({ describe }) => {
 					style: {
 						plain: expect.stringMatching(/_plain_\w+/),
 						composed: expect.stringMatching(/_composed_\w+ _plain_\w+/),
+						nested: expect.stringMatching(/_nested_\w+ _extra_\w+ _base_\w+/),
 					},
 				});
 				const dts = await fixture.readFile('style.module.css.d.ts', 'utf8');
 				expect(dts).toMatch('const plain: string;');
 				expect(dts).toMatch('const composed: string;');
+				expect(dts).toMatch('const nested: string;');
 			});
 
 			test('array', async () => {
@@ -607,11 +609,13 @@ export default testSuite(({ describe }) => {
 					style: {
 						plain: expect.stringMatching(/_plain_\w+/),
 						composed: [expect.stringMatching(/_composed_\w+/), expect.stringMatching(/_plain_\w+/)],
+						nested: [expect.stringMatching(/_nested_\w+/), expect.stringMatching(/_extra_\w+/), expect.stringMatching(/_base_\w+/)],
 					},
 				});
 				const dts = await fixture.readFile('style.module.css.d.ts', 'utf8');
 				expect(dts).toMatch('const plain: string;');
 				expect(dts).toMatch('const composed: string[];');
+				expect(dts).toMatch('const nested: string[];');
 			});
 
 			test('all-array', async () => {
@@ -631,11 +635,13 @@ export default testSuite(({ describe }) => {
 					style: {
 						plain: [expect.stringMatching(/_plain_\w+/)],
 						composed: [expect.stringMatching(/_composed_\w+/), expect.stringMatching(/_plain_\w+/)],
+						nested: [expect.stringMatching(/_nested_\w+/), expect.stringMatching(/_extra_\w+/), expect.stringMatching(/_base_\w+/)],
 					},
 				});
 				const dts = await fixture.readFile('style.module.css.d.ts', 'utf8');
 				expect(dts).toMatch('const plain: string[];');
 				expect(dts).toMatch('const composed: string[];');
+				expect(dts).toMatch('const nested: string[];');
 			});
 		});