Skip to content

Commit 81f3619

Browse files
mrmckebmrmckeb
committed
Merge branch 'release/2.2.0'
2 parents 468b6a1 + 34fc8f7 commit 81f3619

11 files changed

+1529
-1557
lines changed

‎README.md

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ Please note that no options are required. However, depending on your configurati
7474
| `classnameTransform` | `asIs` | See [`classnameTransform`](#classnameTransform) below. |
7575
| `customMatcher` | `"\\.module\\.(c\|le\|sa\|sc)ss$"` | Changes the file extensions that this plugin processes. |
7676
| `customRenderer` | `false` | See [`customRenderer`](#customRenderer) below. |
77+
| `customTemplate` | `false` | See [`customTemplate`](#customTemplate) below. |
7778
| `dotenvOptions` | `{}` | Provides options for [`dotenv`](https://github.com/motdotla/dotenv#options). |
7879
| `postCssOptions` | `{}` | See [`postCssOptions`](#postCssOptions) below. |
7980
| `rendererOptions` | `{}` | See [`rendererOptions`](#rendererOptions) below. |
@@ -112,12 +113,12 @@ When a custom renderer is provided, not other renderers will be used.
112113

113114
The path to the `customRenderer` must be relative to the project root (i.e. `./myRenderer.js`).
114115

115-
The custom renderer itself should be a JavaScript file. The function will be called with two arguments: a `css` string, and an `options` object (see [`options.ts`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/options.ts#L36-L39)). It must be synchronous, and must return valid CSS.
116+
The custom renderer itself should be a JavaScript file. The function will be called with two arguments: a `css` string, and an `options` object (see [`options.ts`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/options.ts#L33-L41)). It must be synchronous, and must return valid CSS.
116117

117118
```js
118119
module.exports = (css, { fileName, logger }) => {
119120
try {
120-
// ...process css here
121+
// ...process your css here.
121122
return renderedCss;
122123
} catch (error) {
123124
logger.error(error.message);
@@ -129,6 +130,33 @@ You can find an example custom renderer in our test fixtures ([`customRenderer.j
129130

130131
The [internal `logger`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/helpers/logger.ts) is provided for [debugging](#troubleshooting).
131132

133+
#### `customTemplate`
134+
135+
The `customTemplate` is an advanced option, letting you provide a template for the generated TypeScript declarations.
136+
137+
When a custom template is provided, its output is used as the virtual declaration (`*.d.ts`) file.
138+
139+
The path to the `customTemplate` must be relative to the project root (i.e. `./customTemplate.js`).
140+
141+
The custom renderer itself should be a JavaScript file. The function will be called with two arguments: a `dts` string, and an `options` object (see [`options.ts`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/options.ts#L43-L52)). It must be synchronous, and must return a valid TypeScript declaration (as found in a `.d.ts` file).
142+
143+
```js
144+
module.exports = (dts, { classes, fileName, logger }) => {
145+
try {
146+
// ...generate your template here.
147+
return customTemplate;
148+
} catch (error) {
149+
logger.error(error.message);
150+
}
151+
};
152+
```
153+
154+
You can find an example custom template in our test fixtures ([`customTemplate.js`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/helpers/__tests__/fixtures/customTemplate.js)).
155+
156+
The [internal `logger`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/helpers/logger.ts) is provided for [debugging](#troubleshooting).
157+
158+
The `classes` object represents all the classnames extracted from the CSS Module. They are available if you want to add a custom representation of the CSS classes.
159+
132160
#### `postCssOptions`
133161

134162
| Option | Default value | Description |
@@ -171,7 +199,7 @@ If your project doesn't already have global declarations for CSS Modules, you wi
171199

172200
Where you store global declarations is up to you. An example might look like: `./src/custom.d.ts`.
173201

174-
The below is an example that you can copy or modify. If you use a [`customMatcher`], you'll need to modify this.
202+
The below is an example that you can copy or modify. If you use a `customMatcher`, you'll need to modify this.
175203

176204
```ts
177205
declare module '*.module.css' {

‎package.json

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "typescript-plugin-css-modules",
3-
"version": "2.1.2",
3+
"version": "2.2.0",
44
"main": "lib/index.js",
55
"author": "Brody McKee <[email protected]>",
66
"license": "MIT",
@@ -25,7 +25,7 @@
2525
],
2626
"scripts": {
2727
"build": "rm -rf ./lib && tsc",
28-
"lint": "eslint './src/**/*.ts' --max-warnings 0 && yarn prettier './**/*.{json,md,ts,yml}' -c",
28+
"lint": "eslint './src/**/*.{js,ts}' --max-warnings 0 && yarn prettier './**/*.{json,md,js,ts,yml}' -c",
2929
"prepublishOnly": "yarn build",
3030
"test": "jest ./src"
3131
},
@@ -50,12 +50,10 @@
5050
"lint-staged": {
5151
"./src/**/*.ts": [
5252
"eslint --fix",
53-
"prettier --write",
54-
"git add"
53+
"prettier --write"
5554
],
5655
"./**/*.{json,md,yml}": [
57-
"prettier --write",
58-
"git add"
56+
"prettier --write"
5957
]
6058
},
6159
"prettier": {
@@ -64,42 +62,42 @@
6462
"trailingComma": "all"
6563
},
6664
"resolutions": {
67-
"postcss": "7.0.23"
65+
"postcss": "7.0.27"
6866
},
6967
"dependencies": {
7068
"dotenv": "^8.2.0",
7169
"icss-utils": "^4.1.1",
72-
"less": "^3.9.0",
70+
"less": "^3.11.1",
7371
"lodash.camelcase": "^4.3.0",
74-
"postcss": "^7.0.23",
72+
"postcss": "^7.0.27",
7573
"postcss-filter-plugins": "^3.0.1",
7674
"postcss-icss-selectors": "^2.0.3",
7775
"postcss-load-config": "^2.1.0",
7876
"reserved-words": "^0.1.2",
79-
"sass": "^1.23.7"
77+
"sass": "^1.26.1"
8078
},
8179
"devDependencies": {
8280
"@types/icss-utils": "^4.1.0",
83-
"@types/jest": "^24.0.23",
81+
"@types/jest": "^25.1.3",
8482
"@types/less": "^3.0.1",
8583
"@types/lodash.camelcase": "^4.3.6",
8684
"@types/node": "^12.12.17",
8785
"@types/postcss-load-config": "^2.0.1",
8886
"@types/postcss-nested": "^4.1.0",
8987
"@types/reserved-words": "^0.1.0",
9088
"@types/sass": "^1.16.0",
91-
"@typescript-eslint/eslint-plugin": "^2.11.0",
92-
"@typescript-eslint/parser": "^2.11.0",
89+
"@typescript-eslint/eslint-plugin": "^2.21.0",
90+
"@typescript-eslint/parser": "^2.21.0",
9391
"bootstrap": "4.4.1",
94-
"eslint": "^6.7.2",
95-
"eslint-config-prettier": "^6.7.0",
96-
"husky": "^3.1.0",
97-
"jest": "^24.8.0",
98-
"lint-staged": "^9.5.0",
92+
"eslint": "^6.8.0",
93+
"eslint-config-prettier": "^6.10.0",
94+
"husky": "^4.2.3",
95+
"jest": "^25.1.0",
96+
"lint-staged": "^10.0.8",
9997
"postcss-import-sync2": "^1.1.0",
10098
"prettier": "^1.19.1",
101-
"ts-jest": "^24.2.0",
102-
"typescript": "^3.7.3"
99+
"ts-jest": "^25.2.1",
100+
"typescript": "^3.8.2"
103101
},
104102
"peerDependencies": {
105103
"typescript": "^3.0.0"

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

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,17 @@ export default classes;
1919

2020
exports[`utils / cssSnapshots with file 'empty.module.less' getClasses should return an object matching expected CSS 1`] = `Object {}`;
2121

22+
exports[`utils / cssSnapshots with file 'empty.module.less' with a custom template should transform the generated dts 1`] = `
23+
"/* eslint-disable */
24+
declare const classes: {
25+
26+
};
27+
export default classes;
28+
29+
export const __cssModule: true;
30+
export type AllClassNames = '';"
31+
`;
32+
2233
exports[`utils / cssSnapshots with file 'empty.module.sass' createExports should create an exports file 1`] = `
2334
"declare const classes: {
2435
@@ -29,6 +40,17 @@ export default classes;
2940

3041
exports[`utils / cssSnapshots with file 'empty.module.sass' getClasses should return an object matching expected CSS 1`] = `Object {}`;
3142

43+
exports[`utils / cssSnapshots with file 'empty.module.sass' with a custom template should transform the generated dts 1`] = `
44+
"/* eslint-disable */
45+
declare const classes: {
46+
47+
};
48+
export default classes;
49+
50+
export const __cssModule: true;
51+
export type AllClassNames = '';"
52+
`;
53+
3254
exports[`utils / cssSnapshots with file 'empty.module.scss' createExports should create an exports file 1`] = `
3355
"declare const classes: {
3456
@@ -39,6 +61,17 @@ export default classes;
3961

4062
exports[`utils / cssSnapshots with file 'empty.module.scss' getClasses should return an object matching expected CSS 1`] = `Object {}`;
4163

64+
exports[`utils / cssSnapshots with file 'empty.module.scss' with a custom template should transform the generated dts 1`] = `
65+
"/* eslint-disable */
66+
declare const classes: {
67+
68+
};
69+
export default classes;
70+
71+
export const __cssModule: true;
72+
export type AllClassNames = '';"
73+
`;
74+
4275
exports[`utils / cssSnapshots with file 'import.module.css' createExports should create an exports file 1`] = `
4376
"declare const classes: {
4477
'classA': string;
@@ -73,6 +106,30 @@ Object {
73106
}
74107
`;
75108

109+
exports[`utils / cssSnapshots with file 'import.module.css' with a custom template should transform the generated dts 1`] = `
110+
"/* eslint-disable */
111+
declare const classes: {
112+
'classA': string;
113+
'ClassB': string;
114+
'class-c': string;
115+
'class_d': string;
116+
'parent': string;
117+
'childA': string;
118+
'childB': string;
119+
'nestedChild': string;
120+
};
121+
export default classes;
122+
export const classA: string;
123+
export const ClassB: string;
124+
export const parent: string;
125+
export const childA: string;
126+
export const childB: string;
127+
export const nestedChild: string;
128+
129+
export const __cssModule: true;
130+
export type AllClassNames = 'classA' | 'ClassB' | 'class-c' | 'class_d' | 'parent' | 'childA' | 'childB' | 'nestedChild';"
131+
`;
132+
76133
exports[`utils / cssSnapshots with file 'import.module.less' createExports should create an exports file 1`] = `
77134
"declare const classes: {
78135
'nested-class-parent': string;
@@ -105,6 +162,26 @@ Object {
105162
}
106163
`;
107164

165+
exports[`utils / cssSnapshots with file 'import.module.less' with a custom template should transform the generated dts 1`] = `
166+
"/* eslint-disable */
167+
declare const classes: {
168+
'nested-class-parent': string;
169+
'child-class': string;
170+
'selector-blue': string;
171+
'selector-green': string;
172+
'selector-red': string;
173+
'column-1': string;
174+
'column-2': string;
175+
'column-3': string;
176+
'column-4': string;
177+
'color-set': string;
178+
};
179+
export default classes;
180+
181+
export const __cssModule: true;
182+
export type AllClassNames = 'nested-class-parent' | 'child-class' | 'selector-blue' | 'selector-green' | 'selector-red' | 'column-1' | 'column-2' | 'column-3' | 'column-4' | 'color-set';"
183+
`;
184+
108185
exports[`utils / cssSnapshots with file 'test.module.css' createExports should create an exports file 1`] = `
109186
"declare const classes: {
110187
'classA': string;
@@ -139,6 +216,30 @@ Object {
139216
}
140217
`;
141218

219+
exports[`utils / cssSnapshots with file 'test.module.css' with a custom template should transform the generated dts 1`] = `
220+
"/* eslint-disable */
221+
declare const classes: {
222+
'classA': string;
223+
'ClassB': string;
224+
'class-c': string;
225+
'class_d': string;
226+
'parent': string;
227+
'childA': string;
228+
'childB': string;
229+
'nestedChild': string;
230+
};
231+
export default classes;
232+
export const classA: string;
233+
export const ClassB: string;
234+
export const parent: string;
235+
export const childA: string;
236+
export const childB: string;
237+
export const nestedChild: string;
238+
239+
export const __cssModule: true;
240+
export type AllClassNames = 'classA' | 'ClassB' | 'class-c' | 'class_d' | 'parent' | 'childA' | 'childB' | 'nestedChild';"
241+
`;
242+
142243
exports[`utils / cssSnapshots with file 'test.module.less' createExports should create an exports file 1`] = `
143244
"declare const classes: {
144245
'nested-class-parent': string;
@@ -171,6 +272,26 @@ Object {
171272
}
172273
`;
173274

275+
exports[`utils / cssSnapshots with file 'test.module.less' with a custom template should transform the generated dts 1`] = `
276+
"/* eslint-disable */
277+
declare const classes: {
278+
'nested-class-parent': string;
279+
'child-class': string;
280+
'selector-blue': string;
281+
'selector-green': string;
282+
'selector-red': string;
283+
'column-1': string;
284+
'column-2': string;
285+
'column-3': string;
286+
'column-4': string;
287+
'color-set': string;
288+
};
289+
export default classes;
290+
291+
export const __cssModule: true;
292+
export type AllClassNames = 'nested-class-parent' | 'child-class' | 'selector-blue' | 'selector-green' | 'selector-red' | 'column-1' | 'column-2' | 'column-3' | 'column-4' | 'color-set';"
293+
`;
294+
174295
exports[`utils / cssSnapshots with file 'test.module.sass' createExports should create an exports file 1`] = `
175296
"declare const classes: {
176297
'local-class-inside-global': string;
@@ -223,6 +344,36 @@ Object {
223344
}
224345
`;
225346

347+
exports[`utils / cssSnapshots with file 'test.module.sass' with a custom template should transform the generated dts 1`] = `
348+
"/* eslint-disable */
349+
declare const classes: {
350+
'local-class-inside-global': string;
351+
'local-class': string;
352+
'local-class-2': string;
353+
'local-class-inside-local': string;
354+
'reserved-words': string;
355+
'default': string;
356+
'const': string;
357+
'nested-class-parent': string;
358+
'child-class': string;
359+
'nested-class-parent--extended': string;
360+
'section-1': string;
361+
'section-2': string;
362+
'section-3': string;
363+
'section-4': string;
364+
'section-5': string;
365+
'section-6': string;
366+
'section-7': string;
367+
'section-8': string;
368+
'section-9': string;
369+
'class-with-mixin': string;
370+
};
371+
export default classes;
372+
373+
export const __cssModule: true;
374+
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';"
375+
`;
376+
226377
exports[`utils / cssSnapshots with file 'test.module.scss' createExports should create an exports file 1`] = `
227378
"declare const classes: {
228379
'local-class-inside-global': string;
@@ -275,6 +426,36 @@ Object {
275426
}
276427
`;
277428

429+
exports[`utils / cssSnapshots with file 'test.module.scss' with a custom template should transform the generated dts 1`] = `
430+
"/* eslint-disable */
431+
declare const classes: {
432+
'local-class-inside-global': string;
433+
'local-class': string;
434+
'local-class-2': string;
435+
'local-class-inside-local': string;
436+
'reserved-words': string;
437+
'default': string;
438+
'const': string;
439+
'nested-class-parent': string;
440+
'child-class': string;
441+
'nested-class-parent--extended': string;
442+
'section-1': string;
443+
'section-2': string;
444+
'section-3': string;
445+
'section-4': string;
446+
'section-5': string;
447+
'section-6': string;
448+
'section-7': string;
449+
'section-8': string;
450+
'section-9': string;
451+
'class-with-mixin': string;
452+
};
453+
export default classes;
454+
455+
export const __cssModule: true;
456+
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';"
457+
`;
458+
278459
exports[`utils / cssSnapshots with includePaths in sass options should find external file from includePaths 1`] = `
279460
Object {
280461
"big-font": "include-path-module__big-font---Td7hY",

0 commit comments

Comments
 (0)