Skip to content

fix: add and test support for composes in CSS modules #210

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 11, 2023
Merged

fix: add and test support for composes in CSS modules #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
19 changes: 19 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

51 changes: 47 additions & 4 deletions src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
"
`;
Expand All @@ -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",
Expand All @@ -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;
Expand All @@ -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`] = `
Expand Down Expand Up @@ -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;
Expand All @@ -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;
"
`;
Expand All @@ -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",
Expand All @@ -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;
Expand All @@ -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`] = `
Expand Down Expand Up @@ -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;



Expand Down Expand Up @@ -763,6 +779,13 @@ export let fadeIn: string;










declare let _classes: {
'classA': string;
'classB': string;
Expand All @@ -772,6 +795,8 @@ declare let _classes: {
'childA': string;
'childB': string;
'nestedChild': string;
'composed': string;
'composedFromOtherFile': string;
'fadeIn': string;
};
export default _classes;
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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,
Expand Down
3 changes: 3 additions & 0 deletions src/helpers/__tests__/fixtures/_composed.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.className {
width: 100%;
}
9 changes: 9 additions & 0 deletions src/helpers/__tests__/fixtures/test.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,12 @@
opacity: 1;
}
}

.composed {
composes: classA;
display: block;
}

.composed-from-other-file {
composes: className from './_composed.css';
}
2 changes: 2 additions & 0 deletions src/helpers/getProcessor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@ 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[] = [],
): Processor =>
postcss([
...additionalPlugins,
postcssLocalByDefault(),
postcssModulesExtractImports(),
postcssModulesScope({
generateScopedName: (name) => name,
}),
Expand Down