From 206ba328ff5c9f4aa2a5a399c592281c26f1c284 Mon Sep 17 00:00:00 2001 From: Brody McKee Date: Sat, 11 Mar 2023 16:06:01 +1100 Subject: [PATCH] fix: add and test support for CSS modules `composes` --- package.json | 2 + pnpm-lock.yaml | 19 +++++++ .../__snapshots__/getDtsSnapshot.test.ts.snap | 51 +++++++++++++++++-- src/helpers/__tests__/fixtures/_composed.css | 3 ++ .../__tests__/fixtures/test.module.css | 9 ++++ src/helpers/getProcessor.ts | 2 + 6 files changed, 82 insertions(+), 4 deletions(-) create mode 100644 src/helpers/__tests__/fixtures/_composed.css diff --git a/package.json b/package.json index f64131d..60f49bb 100644 --- a/package.json +++ b/package.json @@ -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 0e7a462..f902313 100644 --- a/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap +++ b/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap @@ -163,6 +163,8 @@ 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; @@ -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", @@ -202,6 +207,8 @@ declare let _classes: { 'childA': string; 'childB': string; 'nestedChild': string; + 'composed': string; + 'composed-from-other-file': string; 'fadeIn': string; }; export default _classes; @@ -212,10 +219,11 @@ 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`] = ` @@ -388,6 +396,8 @@ 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; @@ -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", @@ -427,6 +440,8 @@ declare let _classes: { 'childA': string; 'childB': string; 'nestedChild': string; + 'composed': string; + 'composed-from-other-file': string; 'fadeIn': string; }; export default _classes; @@ -437,10 +452,11 @@ 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`] = ` @@ -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,13 @@ export let fadeIn: string; + + + + + + + declare let _classes: { 'classA': string; 'classB': string; @@ -772,6 +795,8 @@ declare let _classes: { 'childA': string; 'childB': string; 'nestedChild': string; + 'composed': string; + 'composedFromOtherFile': string; 'fadeIn': string; }; export default _classes; @@ -787,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", @@ -825,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", @@ -870,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, 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/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, }),