Skip to content

Commit 045fc08

Browse files
mrmckebmrmckeb
authored
fix: add support for composes in CSS modules (#210)
1 parent 644c448 commit 045fc08

File tree

6 files changed

+82
-4
lines changed

6 files changed

+82
-4
lines changed

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"lodash.camelcase": "^4.3.0",
5555
"postcss": "^8.4.21",
5656
"postcss-load-config": "^3.1.4",
57+
"postcss-modules-extract-imports": "^3.0.0",
5758
"postcss-modules-local-by-default": "^4.0.0",
5859
"postcss-modules-scope": "^3.0.0",
5960
"reserved-words": "^0.1.2",
@@ -68,6 +69,7 @@
6869
"@types/less": "^3.0.3",
6970
"@types/lodash.camelcase": "^4.3.7",
7071
"@types/node": "^18.14.0",
72+
"@types/postcss-modules-extract-imports": "^3.0.2",
7173
"@types/reserved-words": "^0.1.0",
7274
"@types/sass": "^1.43.1",
7375
"@types/stylus": "^0.48.38",

‎pnpm-lock.yaml

+19
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap

+47-4
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,8 @@ exports[`helpers / cssSnapshots with file 'import.module.css' createExports shou
163163
'childA': string;
164164
'childB': string;
165165
'nestedChild': string;
166+
'composed': string;
167+
'composed-from-other-file': string;
166168
'fadeIn': string;
167169
};
168170
export default _classes;
@@ -173,6 +175,7 @@ export let parent: string;
173175
export let childA: string;
174176
export let childB: string;
175177
export let nestedChild: string;
178+
export let composed: string;
176179
export let fadeIn: string;
177180
"
178181
`;
@@ -185,6 +188,8 @@ exports[`helpers / cssSnapshots with file 'import.module.css' getCssExports shou
185188
"class-c": "class-c",
186189
"classA": "classA",
187190
"class_d": "class_d",
191+
"composed": "composed classA",
192+
"composed-from-other-file": "composed-from-other-file i__imported_className_1",
188193
"fadeIn": "fadeIn",
189194
"nestedChild": "nestedChild",
190195
"parent": "parent",
@@ -202,6 +207,8 @@ declare let _classes: {
202207
'childA': string;
203208
'childB': string;
204209
'nestedChild': string;
210+
'composed': string;
211+
'composed-from-other-file': string;
205212
'fadeIn': string;
206213
};
207214
export default _classes;
@@ -212,10 +219,11 @@ export let parent: string;
212219
export let childA: string;
213220
export let childB: string;
214221
export let nestedChild: string;
222+
export let composed: string;
215223
export let fadeIn: string;
216224
217225
export const __cssModule: true;
218-
export type AllClassNames = 'classA' | 'ClassB' | 'class-c' | 'class_d' | 'parent' | 'childA' | 'childB' | 'nestedChild' | 'fadeIn';"
226+
export type AllClassNames = 'classA' | 'ClassB' | 'class-c' | 'class_d' | 'parent' | 'childA' | 'childB' | 'nestedChild' | 'composed' | 'composed-from-other-file' | 'fadeIn';"
219227
`;
220228

221229
exports[`helpers / cssSnapshots with file 'import.module.less' createExports should create an exports file 1`] = `
@@ -388,6 +396,8 @@ exports[`helpers / cssSnapshots with file 'test.module.css' createExports should
388396
'childA': string;
389397
'childB': string;
390398
'nestedChild': string;
399+
'composed': string;
400+
'composed-from-other-file': string;
391401
'fadeIn': string;
392402
};
393403
export default _classes;
@@ -398,6 +408,7 @@ export let parent: string;
398408
export let childA: string;
399409
export let childB: string;
400410
export let nestedChild: string;
411+
export let composed: string;
401412
export let fadeIn: string;
402413
"
403414
`;
@@ -410,6 +421,8 @@ exports[`helpers / cssSnapshots with file 'test.module.css' getCssExports should
410421
"class-c": "class-c",
411422
"classA": "classA",
412423
"class_d": "class_d",
424+
"composed": "composed classA",
425+
"composed-from-other-file": "composed-from-other-file i__imported_className_2",
413426
"fadeIn": "fadeIn",
414427
"nestedChild": "nestedChild",
415428
"parent": "parent",
@@ -427,6 +440,8 @@ declare let _classes: {
427440
'childA': string;
428441
'childB': string;
429442
'nestedChild': string;
443+
'composed': string;
444+
'composed-from-other-file': string;
430445
'fadeIn': string;
431446
};
432447
export default _classes;
@@ -437,10 +452,11 @@ export let parent: string;
437452
export let childA: string;
438453
export let childB: string;
439454
export let nestedChild: string;
455+
export let composed: string;
440456
export let fadeIn: string;
441457
442458
export const __cssModule: true;
443-
export type AllClassNames = 'classA' | 'ClassB' | 'class-c' | 'class_d' | 'parent' | 'childA' | 'childB' | 'nestedChild' | 'fadeIn';"
459+
export type AllClassNames = 'classA' | 'ClassB' | 'class-c' | 'class_d' | 'parent' | 'childA' | 'childB' | 'nestedChild' | 'composed' | 'composed-from-other-file' | 'fadeIn';"
444460
`;
445461

446462
exports[`helpers / cssSnapshots with file 'test.module.less' createExports should create an exports file 1`] = `
@@ -729,7 +745,7 @@ export type AllClassNames = 'foo' | 'bar' | 'baz' | 'col-1' | 'col-2' | 'col-3'
729745
`;
730746

731747
exports[`helpers / cssSnapshots with goToDefinition enabled with CSS should return a line-accurate dts file 1`] = `
732-
"export let classA: string;
748+
"export let classA: string;export let composed: string;export let composedFromOtherFile: string;
733749
734750
735751
@@ -763,6 +779,13 @@ export let fadeIn: string;
763779
764780
765781
782+
783+
784+
785+
786+
787+
788+
766789
declare let _classes: {
767790
'classA': string;
768791
'classB': string;
@@ -772,6 +795,8 @@ declare let _classes: {
772795
'childA': string;
773796
'childB': string;
774797
'nestedChild': string;
798+
'composed': string;
799+
'composedFromOtherFile': string;
775800
'fadeIn': string;
776801
};
777802
export default _classes;
@@ -787,6 +812,8 @@ exports[`helpers / cssSnapshots with goToDefinition enabled with CSS should retu
787812
"class-c": "class-c",
788813
"classA": "classA",
789814
"class_d": "class_d",
815+
"composed": "composed classA",
816+
"composed-from-other-file": "composed-from-other-file i__imported_className_0",
790817
"fadeIn": "fadeIn",
791818
"nestedChild": "nestedChild",
792819
"parent": "parent",
@@ -825,10 +852,17 @@ exports[`helpers / cssSnapshots with goToDefinition enabled with CSS should retu
825852
}
826853
}
827854
855+
.composed {
856+
display: block;
857+
}
858+
859+
.composed-from-other-file {
860+
}
861+
828862
/*# sourceMappingURL=src/helpers/__tests__/fixtures/test.module.css.map */",
829863
"sourceMap": {
830864
"file": "src/helpers/__tests__/fixtures/test.module.css",
831-
"mappings": "AAAA;EACE,oBAAoB;AACtB;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,oBAAoB;EACpB,oBAAoB;AACtB;;AAGE;IACE,oBAAoB;EACtB;;AAEE;MACE,oBAAoB;IACtB;;AAIJ;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF",
865+
"mappings": "AAAA;EACE,oBAAoB;AACtB;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,oBAAoB;EACpB,oBAAoB;AACtB;;AAGE;IACE,oBAAoB;EACtB;;AAEE;MACE,oBAAoB;IACtB;;AAIJ;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF;;AAEA;EAEE,cAAc;AAChB;;AAEA;AAEA",
832866
"names": [],
833867
"sources": [
834868
"src/helpers/__tests__/fixtures/test.module.css",
@@ -870,6 +904,15 @@ exports[`helpers / cssSnapshots with goToDefinition enabled with CSS should retu
870904
opacity: 1;
871905
}
872906
}
907+
908+
.composed {
909+
composes: classA;
910+
display: block;
911+
}
912+
913+
.composed-from-other-file {
914+
composes: className from './_composed.css';
915+
}
873916
",
874917
],
875918
"version": 3,

‎src/helpers/__tests__/fixtures/_composed.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.className {
2+
width: 100%;
3+
}

‎src/helpers/__tests__/fixtures/test.module.css

+9
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,12 @@
3434
opacity: 1;
3535
}
3636
}
37+
38+
.composed {
39+
composes: classA;
40+
display: block;
41+
}
42+
43+
.composed-from-other-file {
44+
composes: className from './_composed.css';
45+
}

‎src/helpers/getProcessor.ts

+2
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import postcss, { AcceptedPlugin } from 'postcss';
22
import Processor from 'postcss/lib/processor';
33
import postcssLocalByDefault from 'postcss-modules-local-by-default';
44
import postcssModulesScope from 'postcss-modules-scope';
5+
import postcssModulesExtractImports from 'postcss-modules-extract-imports';
56

67
export const getProcessor = (
78
additionalPlugins: AcceptedPlugin[] = [],
89
): Processor =>
910
postcss([
1011
...additionalPlugins,
1112
postcssLocalByDefault(),
13+
postcssModulesExtractImports(),
1214
postcssModulesScope({
1315
generateScopedName: (name) => name,
1416
}),

0 commit comments

Comments
 (0)