diff --git a/package.json b/package.json index f64131d..00ff202 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "typescript-plugin-css-modules", - "version": "4.2.2", + "version": "4.2.3", "main": "dist/index.js", "author": "Brody McKee ", "license": "MIT", @@ -54,6 +54,7 @@ "lodash.camelcase": "^4.3.0", "postcss": "^8.4.21", "postcss-load-config": "^3.1.4", + "postcss-modules-extract-imports": "^3.0.0", "postcss-modules-local-by-default": "^4.0.0", "postcss-modules-scope": "^3.0.0", "reserved-words": "^0.1.2", @@ -68,6 +69,7 @@ "@types/less": "^3.0.3", "@types/lodash.camelcase": "^4.3.7", "@types/node": "^18.14.0", + "@types/postcss-modules-extract-imports": "^3.0.2", "@types/reserved-words": "^0.1.0", "@types/sass": "^1.43.1", "@types/stylus": "^0.48.38", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9bcd6d0..12a0a25 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,6 +6,7 @@ specifiers: '@types/less': ^3.0.3 '@types/lodash.camelcase': ^4.3.7 '@types/node': ^18.14.0 + '@types/postcss-modules-extract-imports': ^3.0.2 '@types/postcss-modules-local-by-default': ^4.0.0 '@types/postcss-modules-scope': ^3.0.1 '@types/reserved-words': ^0.1.0 @@ -27,6 +28,7 @@ specifiers: postcss: ^8.4.21 postcss-import-sync2: ^1.2.0 postcss-load-config: ^3.1.4 + postcss-modules-extract-imports: ^3.0.0 postcss-modules-local-by-default: ^4.0.0 postcss-modules-scope: ^3.0.0 postcss-nested: ^4.2.3 @@ -50,6 +52,7 @@ dependencies: lodash.camelcase: 4.3.0 postcss: 8.4.21 postcss-load-config: 3.1.4_postcss@8.4.21 + postcss-modules-extract-imports: 3.0.0_postcss@8.4.21 postcss-modules-local-by-default: 4.0.0_postcss@8.4.21 postcss-modules-scope: 3.0.0_postcss@8.4.21 reserved-words: 0.1.2 @@ -64,6 +67,7 @@ devDependencies: '@types/less': 3.0.3 '@types/lodash.camelcase': 4.3.7 '@types/node': 18.14.0 + '@types/postcss-modules-extract-imports': 3.0.2 '@types/reserved-words': 0.1.0 '@types/sass': 1.43.1 '@types/stylus': 0.48.38 @@ -1136,6 +1140,12 @@ packages: resolution: {integrity: sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A==} dev: true + /@types/postcss-modules-extract-imports/3.0.2: + resolution: {integrity: sha512-w9WrPL5+Re98Jw7Bbtm4oprmp0wFbtCJBfEAjpEE9XX8gs10pLH4AdrYqAzzPL7oSjZUoNTaW9WOFYojejN+FA==} + dependencies: + postcss: 8.4.21 + dev: true + /@types/postcss-modules-local-by-default/4.0.0: resolution: {integrity: sha512-0VLab/pcLTLcfbxi6THSIMVYcw9hEUBGvjwwaGpW77mMgRXfGF+a76t7BxTGyLh1y68tBvrffp8UWnqvm76+yg==} dependencies: @@ -3693,6 +3703,15 @@ packages: postcss: 8.4.21 dev: true + /postcss-modules-extract-imports/3.0.0_postcss@8.4.21: + resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==} + engines: {node: ^10 || ^12 || >= 14} + peerDependencies: + postcss: ^8.1.0 + dependencies: + postcss: 8.4.21 + dev: false + /postcss-modules-local-by-default/4.0.0_postcss@8.4.21: resolution: {integrity: sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==} engines: {node: ^10 || ^12 || >= 14} diff --git a/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap b/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap index adefb78..f902313 100644 --- a/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap +++ b/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap @@ -10,7 +10,7 @@ exports[`helpers / cssSnapshots with a custom renderer should process a file and `; exports[`helpers / cssSnapshots with allowUnknownClassnames enabled should return a dts file that allows any string value 1`] = ` -"declare let classes: { +"declare let _classes: { 'localClassInsideGlobal': string; 'localClass': string; 'localClass2': string; @@ -36,7 +36,7 @@ exports[`helpers / cssSnapshots with allowUnknownClassnames enabled should retur 'myAnimation': string; [key: string]: string; }; -export default classes; +export default _classes; export let localClassInsideGlobal: string; export let localClass: string; export let localClass2: string; @@ -70,10 +70,10 @@ exports[`helpers / cssSnapshots with baseUrl and paths in compilerOptions sass s `; exports[`helpers / cssSnapshots with file 'empty.module.less' createExports should create an exports file 1`] = ` -"declare let classes: { +"declare let _classes: { }; -export default classes; +export default _classes; " `; @@ -81,20 +81,20 @@ exports[`helpers / cssSnapshots with file 'empty.module.less' getCssExports shou exports[`helpers / cssSnapshots with file 'empty.module.less' with a custom template should transform the generated dts 1`] = ` "/* eslint-disable */ -declare let classes: { +declare let _classes: { }; -export default classes; +export default _classes; export const __cssModule: true; export type AllClassNames = '';" `; exports[`helpers / cssSnapshots with file 'empty.module.sass' createExports should create an exports file 1`] = ` -"declare let classes: { +"declare let _classes: { }; -export default classes; +export default _classes; " `; @@ -102,20 +102,20 @@ exports[`helpers / cssSnapshots with file 'empty.module.sass' getCssExports shou exports[`helpers / cssSnapshots with file 'empty.module.sass' with a custom template should transform the generated dts 1`] = ` "/* eslint-disable */ -declare let classes: { +declare let _classes: { }; -export default classes; +export default _classes; export const __cssModule: true; export type AllClassNames = '';" `; exports[`helpers / cssSnapshots with file 'empty.module.scss' createExports should create an exports file 1`] = ` -"declare let classes: { +"declare let _classes: { }; -export default classes; +export default _classes; " `; @@ -123,20 +123,20 @@ exports[`helpers / cssSnapshots with file 'empty.module.scss' getCssExports shou exports[`helpers / cssSnapshots with file 'empty.module.scss' with a custom template should transform the generated dts 1`] = ` "/* eslint-disable */ -declare let classes: { +declare let _classes: { }; -export default classes; +export default _classes; export const __cssModule: true; export type AllClassNames = '';" `; exports[`helpers / cssSnapshots with file 'empty.module.styl' createExports should create an exports file 1`] = ` -"declare let classes: { +"declare let _classes: { }; -export default classes; +export default _classes; " `; @@ -144,17 +144,17 @@ exports[`helpers / cssSnapshots with file 'empty.module.styl' getCssExports shou exports[`helpers / cssSnapshots with file 'empty.module.styl' with a custom template should transform the generated dts 1`] = ` "/* eslint-disable */ -declare let classes: { +declare let _classes: { }; -export default classes; +export default _classes; export const __cssModule: true; export type AllClassNames = '';" `; exports[`helpers / cssSnapshots with file 'import.module.css' createExports should create an exports file 1`] = ` -"declare let classes: { +"declare let _classes: { 'classA': string; 'ClassB': string; 'class-c': string; @@ -163,9 +163,11 @@ exports[`helpers / cssSnapshots with file 'import.module.css' createExports shou 'childA': string; 'childB': string; 'nestedChild': string; + 'composed': string; + 'composed-from-other-file': string; 'fadeIn': string; }; -export default classes; +export default _classes; export let classA: string; export let ClassB: string; export let class_d: string; @@ -173,6 +175,7 @@ export let parent: string; export let childA: string; export let childB: string; export let nestedChild: string; +export let composed: string; export let fadeIn: string; " `; @@ -185,6 +188,8 @@ exports[`helpers / cssSnapshots with file 'import.module.css' getCssExports shou "class-c": "class-c", "classA": "classA", "class_d": "class_d", + "composed": "composed classA", + "composed-from-other-file": "composed-from-other-file i__imported_className_1", "fadeIn": "fadeIn", "nestedChild": "nestedChild", "parent": "parent", @@ -193,7 +198,7 @@ exports[`helpers / cssSnapshots with file 'import.module.css' getCssExports shou exports[`helpers / cssSnapshots with file 'import.module.css' with a custom template should transform the generated dts 1`] = ` "/* eslint-disable */ -declare let classes: { +declare let _classes: { 'classA': string; 'ClassB': string; 'class-c': string; @@ -202,9 +207,11 @@ declare let classes: { 'childA': string; 'childB': string; 'nestedChild': string; + 'composed': string; + 'composed-from-other-file': string; 'fadeIn': string; }; -export default classes; +export default _classes; export let classA: string; export let ClassB: string; export let class_d: string; @@ -212,14 +219,15 @@ export let parent: string; export let childA: string; export let childB: string; export let nestedChild: string; +export let composed: string; export let fadeIn: string; export const __cssModule: true; -export type AllClassNames = 'classA' | 'ClassB' | 'class-c' | 'class_d' | 'parent' | 'childA' | 'childB' | 'nestedChild' | 'fadeIn';" +export type AllClassNames = 'classA' | 'ClassB' | 'class-c' | 'class_d' | 'parent' | 'childA' | 'childB' | 'nestedChild' | 'composed' | 'composed-from-other-file' | 'fadeIn';" `; exports[`helpers / cssSnapshots with file 'import.module.less' createExports should create an exports file 1`] = ` -"declare let classes: { +"declare let _classes: { 'nested-class-parent': string; 'child-class': string; 'selector-blue': string; @@ -231,7 +239,7 @@ exports[`helpers / cssSnapshots with file 'import.module.less' createExports sho 'column-4': string; 'color-set': string; }; -export default classes; +export default _classes; " `; @@ -252,7 +260,7 @@ exports[`helpers / cssSnapshots with file 'import.module.less' getCssExports sho exports[`helpers / cssSnapshots with file 'import.module.less' with a custom template should transform the generated dts 1`] = ` "/* eslint-disable */ -declare let classes: { +declare let _classes: { 'nested-class-parent': string; 'child-class': string; 'selector-blue': string; @@ -264,14 +272,14 @@ declare let classes: { 'column-4': string; 'color-set': string; }; -export default classes; +export default _classes; export const __cssModule: true; export type AllClassNames = 'nested-class-parent' | 'child-class' | 'selector-blue' | 'selector-green' | 'selector-red' | 'column-1' | 'column-2' | 'column-3' | 'column-4' | 'color-set';" `; exports[`helpers / cssSnapshots with file 'import.module.styl' createExports should create an exports file 1`] = ` -"declare let classes: { +"declare let _classes: { 'foo': string; 'bar': string; 'baz': string; @@ -283,7 +291,7 @@ exports[`helpers / cssSnapshots with file 'import.module.styl' createExports sho 'inside-1-name-2': string; 'inside-2-name-1': string; }; -export default classes; +export default _classes; export let foo: string; export let bar: string; export let baz: string; @@ -307,7 +315,7 @@ exports[`helpers / cssSnapshots with file 'import.module.styl' getCssExports sho exports[`helpers / cssSnapshots with file 'import.module.styl' with a custom template should transform the generated dts 1`] = ` "/* eslint-disable */ -declare let classes: { +declare let _classes: { 'foo': string; 'bar': string; 'baz': string; @@ -319,7 +327,7 @@ declare let classes: { 'inside-1-name-2': string; 'inside-2-name-1': string; }; -export default classes; +export default _classes; export let foo: string; export let bar: string; export let baz: string; @@ -329,7 +337,7 @@ export type AllClassNames = 'foo' | 'bar' | 'baz' | 'col-1' | 'col-2' | 'col-3' `; exports[`helpers / cssSnapshots with file 'postcss.module.css' createExports should create an exports file 1`] = ` -"declare let classes: { +"declare let _classes: { 'classA': string; 'nestedA': string; 'nested_B': string; @@ -337,7 +345,7 @@ exports[`helpers / cssSnapshots with file 'postcss.module.css' createExports sho 'nested-c': string; 'parent': string; }; -export default classes; +export default _classes; export let classA: string; export let nestedA: string; export let nested_B: string; @@ -359,7 +367,7 @@ exports[`helpers / cssSnapshots with file 'postcss.module.css' getCssExports sho exports[`helpers / cssSnapshots with file 'postcss.module.css' with a custom template should transform the generated dts 1`] = ` "/* eslint-disable */ -declare let classes: { +declare let _classes: { 'classA': string; 'nestedA': string; 'nested_B': string; @@ -367,7 +375,7 @@ declare let classes: { 'nested-c': string; 'parent': string; }; -export default classes; +export default _classes; export let classA: string; export let nestedA: string; export let nested_B: string; @@ -379,7 +387,7 @@ export type AllClassNames = 'classA' | 'nestedA' | 'nested_B' | 'deeplyNested' | `; exports[`helpers / cssSnapshots with file 'test.module.css' createExports should create an exports file 1`] = ` -"declare let classes: { +"declare let _classes: { 'classA': string; 'ClassB': string; 'class-c': string; @@ -388,9 +396,11 @@ exports[`helpers / cssSnapshots with file 'test.module.css' createExports should 'childA': string; 'childB': string; 'nestedChild': string; + 'composed': string; + 'composed-from-other-file': string; 'fadeIn': string; }; -export default classes; +export default _classes; export let classA: string; export let ClassB: string; export let class_d: string; @@ -398,6 +408,7 @@ export let parent: string; export let childA: string; export let childB: string; export let nestedChild: string; +export let composed: string; export let fadeIn: string; " `; @@ -410,6 +421,8 @@ exports[`helpers / cssSnapshots with file 'test.module.css' getCssExports should "class-c": "class-c", "classA": "classA", "class_d": "class_d", + "composed": "composed classA", + "composed-from-other-file": "composed-from-other-file i__imported_className_2", "fadeIn": "fadeIn", "nestedChild": "nestedChild", "parent": "parent", @@ -418,7 +431,7 @@ exports[`helpers / cssSnapshots with file 'test.module.css' getCssExports should exports[`helpers / cssSnapshots with file 'test.module.css' with a custom template should transform the generated dts 1`] = ` "/* eslint-disable */ -declare let classes: { +declare let _classes: { 'classA': string; 'ClassB': string; 'class-c': string; @@ -427,9 +440,11 @@ declare let classes: { 'childA': string; 'childB': string; 'nestedChild': string; + 'composed': string; + 'composed-from-other-file': string; 'fadeIn': string; }; -export default classes; +export default _classes; export let classA: string; export let ClassB: string; export let class_d: string; @@ -437,14 +452,15 @@ export let parent: string; export let childA: string; export let childB: string; export let nestedChild: string; +export let composed: string; export let fadeIn: string; export const __cssModule: true; -export type AllClassNames = 'classA' | 'ClassB' | 'class-c' | 'class_d' | 'parent' | 'childA' | 'childB' | 'nestedChild' | 'fadeIn';" +export type AllClassNames = 'classA' | 'ClassB' | 'class-c' | 'class_d' | 'parent' | 'childA' | 'childB' | 'nestedChild' | 'composed' | 'composed-from-other-file' | 'fadeIn';" `; exports[`helpers / cssSnapshots with file 'test.module.less' createExports should create an exports file 1`] = ` -"declare let classes: { +"declare let _classes: { 'nested-class-parent': string; 'child-class': string; 'selector-blue': string; @@ -456,7 +472,7 @@ exports[`helpers / cssSnapshots with file 'test.module.less' createExports shoul 'column-4': string; 'color-set': string; }; -export default classes; +export default _classes; " `; @@ -477,7 +493,7 @@ exports[`helpers / cssSnapshots with file 'test.module.less' getCssExports shoul exports[`helpers / cssSnapshots with file 'test.module.less' with a custom template should transform the generated dts 1`] = ` "/* eslint-disable */ -declare let classes: { +declare let _classes: { 'nested-class-parent': string; 'child-class': string; 'selector-blue': string; @@ -489,14 +505,14 @@ declare let classes: { 'column-4': string; 'color-set': string; }; -export default classes; +export default _classes; export const __cssModule: true; export type AllClassNames = 'nested-class-parent' | 'child-class' | 'selector-blue' | 'selector-green' | 'selector-red' | 'column-1' | 'column-2' | 'column-3' | 'column-4' | 'color-set';" `; exports[`helpers / cssSnapshots with file 'test.module.sass' createExports should create an exports file 1`] = ` -"declare let classes: { +"declare let _classes: { 'local-class-inside-global': string; 'local-class': string; 'local-class-2': string; @@ -518,7 +534,7 @@ exports[`helpers / cssSnapshots with file 'test.module.sass' createExports shoul 'section-9': string; 'class-with-mixin': string; }; -export default classes; +export default _classes; " `; @@ -549,7 +565,7 @@ exports[`helpers / cssSnapshots with file 'test.module.sass' getCssExports shoul exports[`helpers / cssSnapshots with file 'test.module.sass' with a custom template should transform the generated dts 1`] = ` "/* eslint-disable */ -declare let classes: { +declare let _classes: { 'local-class-inside-global': string; 'local-class': string; 'local-class-2': string; @@ -571,14 +587,14 @@ declare let classes: { 'section-9': string; 'class-with-mixin': string; }; -export default classes; +export default _classes; export const __cssModule: true; export type AllClassNames = 'local-class-inside-global' | 'local-class' | 'local-class-2' | 'local-class-inside-local' | 'reserved-words' | 'default' | 'const' | 'nested-class-parent' | 'child-class' | 'nested-class-parent--extended' | 'section-1' | 'section-2' | 'section-3' | 'section-4' | 'section-5' | 'section-6' | 'section-7' | 'section-8' | 'section-9' | 'class-with-mixin';" `; exports[`helpers / cssSnapshots with file 'test.module.scss' createExports should create an exports file 1`] = ` -"declare let classes: { +"declare let _classes: { 'local-class-inside-global': string; 'local-class': string; 'local-class-2': string; @@ -603,7 +619,7 @@ exports[`helpers / cssSnapshots with file 'test.module.scss' createExports shoul 'App-logo': string; 'my-animation': string; }; -export default classes; +export default _classes; export let App_logo: string; " `; @@ -638,7 +654,7 @@ exports[`helpers / cssSnapshots with file 'test.module.scss' getCssExports shoul exports[`helpers / cssSnapshots with file 'test.module.scss' with a custom template should transform the generated dts 1`] = ` "/* eslint-disable */ -declare let classes: { +declare let _classes: { 'local-class-inside-global': string; 'local-class': string; 'local-class-2': string; @@ -663,7 +679,7 @@ declare let classes: { 'App-logo': string; 'my-animation': string; }; -export default classes; +export default _classes; export let App_logo: string; export const __cssModule: true; @@ -671,7 +687,7 @@ export type AllClassNames = 'local-class-inside-global' | 'local-class' | 'local `; exports[`helpers / cssSnapshots with file 'test.module.styl' createExports should create an exports file 1`] = ` -"declare let classes: { +"declare let _classes: { 'foo': string; 'bar': string; 'baz': string; @@ -683,7 +699,7 @@ exports[`helpers / cssSnapshots with file 'test.module.styl' createExports shoul 'inside-1-name-2': string; 'inside-2-name-1': string; }; -export default classes; +export default _classes; export let foo: string; export let bar: string; export let baz: string; @@ -707,7 +723,7 @@ exports[`helpers / cssSnapshots with file 'test.module.styl' getCssExports shoul exports[`helpers / cssSnapshots with file 'test.module.styl' with a custom template should transform the generated dts 1`] = ` "/* eslint-disable */ -declare let classes: { +declare let _classes: { 'foo': string; 'bar': string; 'baz': string; @@ -719,7 +735,7 @@ declare let classes: { 'inside-1-name-2': string; 'inside-2-name-1': string; }; -export default classes; +export default _classes; export let foo: string; export let bar: string; export let baz: string; @@ -729,7 +745,7 @@ export type AllClassNames = 'foo' | 'bar' | 'baz' | 'col-1' | 'col-2' | 'col-3' `; exports[`helpers / cssSnapshots with goToDefinition enabled with CSS should return a line-accurate dts file 1`] = ` -"export let classA: string; +"export let classA: string;export let composed: string;export let composedFromOtherFile: string; @@ -763,6 +779,27 @@ export let fadeIn: string; + + + + + + + +declare let _classes: { + 'classA': string; + 'classB': string; + 'classC': string; + 'classD': string; + 'parent': string; + 'childA': string; + 'childB': string; + 'nestedChild': string; + 'composed': string; + 'composedFromOtherFile': string; + 'fadeIn': string; +}; +export default _classes; " `; @@ -775,6 +812,8 @@ exports[`helpers / cssSnapshots with goToDefinition enabled with CSS should retu "class-c": "class-c", "classA": "classA", "class_d": "class_d", + "composed": "composed classA", + "composed-from-other-file": "composed-from-other-file i__imported_className_0", "fadeIn": "fadeIn", "nestedChild": "nestedChild", "parent": "parent", @@ -813,10 +852,17 @@ exports[`helpers / cssSnapshots with goToDefinition enabled with CSS should retu } } +.composed { + display: block; +} + +.composed-from-other-file { +} + /*# sourceMappingURL=src/helpers/__tests__/fixtures/test.module.css.map */", "sourceMap": { "file": "src/helpers/__tests__/fixtures/test.module.css", - "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", + "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", "names": [], "sources": [ "src/helpers/__tests__/fixtures/test.module.css", @@ -858,6 +904,15 @@ exports[`helpers / cssSnapshots with goToDefinition enabled with CSS should retu opacity: 1; } } + +.composed { + composes: classA; + display: block; +} + +.composed-from-other-file { + composes: className from './_composed.css'; +} ", ], "version": 3, @@ -899,6 +954,19 @@ export let colorSet: string; +declare let _classes: { + 'nestedClassParent': string; + 'childClass': string; + 'selectorBlue': string; + 'selectorGreen': string; + 'selectorRed': string; + 'column1': string; + 'column2': string; + 'column3': string; + 'column4': string; + 'colorSet': string; +}; +export default _classes; " `; @@ -1051,6 +1119,32 @@ export let myAnimation: string; +declare let _classes: { + 'localClassInsideGlobal': string; + 'localClass': string; + 'localClass2': string; + 'localClassInsideLocal': string; + 'reservedWords': string; + 'default': string; + 'const': string; + 'nestedClassParent': string; + 'childClass': string; + 'nestedClassParentExtended': string; + 'section1': string; + 'section2': string; + 'section3': string; + 'section4': string; + 'section5': string; + 'section6': string; + 'section7': string; + 'section8': string; + 'section9': string; + 'classWithMixin': string; + 'appLogo': string; + 'appLogo': string; + 'myAnimation': string; +}; +export default _classes; " `; @@ -1198,7 +1292,7 @@ exports[`helpers / cssSnapshots with loadPaths in stylus options should find ext `; exports[`helpers / cssSnapshots with noUncheckedIndexedAccess enabled should return a dts file with only possibly undefined strings 1`] = ` -"declare let classes: { +"declare let _classes: { 'localClassInsideGlobal'?: string; 'localClass'?: string; 'localClass2'?: string; @@ -1223,7 +1317,7 @@ exports[`helpers / cssSnapshots with noUncheckedIndexedAccess enabled should ret 'appLogo'?: string; 'myAnimation'?: string; }; -export default classes; +export default _classes; export let localClassInsideGlobal: string | undefined; export let localClass: string | undefined; export let localClass2: string | undefined; diff --git a/src/helpers/__tests__/fixtures/_composed.css b/src/helpers/__tests__/fixtures/_composed.css new file mode 100644 index 0000000..d178ad8 --- /dev/null +++ b/src/helpers/__tests__/fixtures/_composed.css @@ -0,0 +1,3 @@ +.className { + width: 100%; +} diff --git a/src/helpers/__tests__/fixtures/test.module.css b/src/helpers/__tests__/fixtures/test.module.css index 8aa5bb0..c73d65e 100644 --- a/src/helpers/__tests__/fixtures/test.module.css +++ b/src/helpers/__tests__/fixtures/test.module.css @@ -34,3 +34,12 @@ opacity: 1; } } + +.composed { + composes: classA; + display: block; +} + +.composed-from-other-file { + composes: className from './_composed.css'; +} diff --git a/src/helpers/createDtsExports.ts b/src/helpers/createDtsExports.ts index faddecc..23b5ffa 100644 --- a/src/helpers/createDtsExports.ts +++ b/src/helpers/createDtsExports.ts @@ -42,18 +42,7 @@ export const createDtsExports = ({ .filter(isValidVariable) .map(classnameToNamedExport); - let dts = `\ -declare let classes: { - ${processedClasses.map(classnameToProperty).join('\n ')}${ - options.allowUnknownClassnames ? '\n [key: string]: string;' : '' - } -}; -export default classes; -`; - - if (options.namedExports !== false && filteredClasses.length) { - dts += filteredClasses.join('\n') + '\n'; - } + let dts = ''; if (options.goToDefinition && cssExports.sourceMap) { // Create a new source map consumer. @@ -109,6 +98,23 @@ export default classes; dts = dtsLines.join('\n'); } + dts += `\ +declare let _classes: { + ${processedClasses.map(classnameToProperty).join('\n ')}${ + options.allowUnknownClassnames ? '\n [key: string]: string;' : '' + } +}; +export default _classes; +`; + + if ( + !options.goToDefinition && + options.namedExports !== false && + filteredClasses.length + ) { + dts += filteredClasses.join('\n') + '\n'; + } + if (options.customTemplate) { // eslint-disable-next-line @typescript-eslint/no-var-requires const customTemplate = require(options.customTemplate) as CustomTemplate; diff --git a/src/helpers/getProcessor.ts b/src/helpers/getProcessor.ts index 2e2c960..4e37eba 100644 --- a/src/helpers/getProcessor.ts +++ b/src/helpers/getProcessor.ts @@ -2,6 +2,7 @@ import postcss, { AcceptedPlugin } from 'postcss'; import Processor from 'postcss/lib/processor'; import postcssLocalByDefault from 'postcss-modules-local-by-default'; import postcssModulesScope from 'postcss-modules-scope'; +import postcssModulesExtractImports from 'postcss-modules-extract-imports'; export const getProcessor = ( additionalPlugins: AcceptedPlugin[] = [], @@ -9,6 +10,7 @@ export const getProcessor = ( postcss([ ...additionalPlugins, postcssLocalByDefault(), + postcssModulesExtractImports(), postcssModulesScope({ generateScopedName: (name) => name, }),