Skip to content

Commit 5703260

Browse files
mrmckebmrmckeb
authored
Merge pull request #3 from mrmckeb/feature/hyphenated-classes
Add support for hyphenated classes
2 parents 25a1ed4 + ad6a458 commit 5703260

16 files changed

Lines changed: 277 additions & 32 deletions

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/.vscode
2-
/lib
32
/node_modules
3+
/coverage
4+
/lib
45
npm-debug.log
56
yarn-error.log

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/.vscode
22
/node_modules
33
/src
4+
/lib/**/__tests__
45
.editorconfig
56
npm-debug.log
67
tsconfig.json

‎README.md‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ A [TypeScript language service plugin](https://github.com/Microsoft/TypeScript/w
44
for [CSS Modules](https://github.com/css-modules/css-modules).
55

66
This project was inspired by this [`create-react-app` issue](https://github.com/facebook/create-react-app/issues/5677)
7-
and is heavily based on [`css-module-types`](https://github.com/timothykang/css-module-types).
7+
and is based on [`css-module-types`](https://github.com/timothykang/css-module-types).
88

99
## Usage
1010

@@ -30,7 +30,14 @@ Once installed, add this plugin to your `tsconfig.json`:
3030
}
3131
```
3232

33-
You can also pass in your own file extension matcher (the default matcher is shown as an example):
33+
### Options
34+
35+
| Option | Default value | Description |
36+
| --------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
37+
| `customMatcher` | `"\\.module\\.(sa\|sc\|c)ss$"` | Change the file extensions that this plugin works with. |
38+
| `camelCase` | `false` | Implements the behaviour of the [`camelCase` CSS Loader option](https://github.com/webpack-contrib/css-loader#camelcase) (accepting the same values). |
39+
40+
The below is an example that only matches "\*.m.css" files, and [camel-cases dashes](https://github.com/webpack-contrib/css-loader#camelcase).
3441

3542
```json
3643
{
@@ -39,20 +46,40 @@ You can also pass in your own file extension matcher (the default matcher is sho
3946
{
4047
"name": "typescript-plugin-css-modules",
4148
"options": {
42-
"customMatcher": "\\.module\\.(sa|sc|c)ss$"
49+
"customMatcher": "\\.m\\.css$",
50+
"camelCase": "dashes"
4351
}
4452
}
4553
]
4654
}
4755
}
4856
```
4957

58+
### Visual Studio Code
59+
60+
By default, VSCode will use it's own version of TypeScript. To make it work with this plugin, you have two options:
61+
62+
1. Add this plugin to `"typescript.tsserver.pluginPaths"` in settings. Note that this method doesn't currently support
63+
plugin options.
64+
65+
```json
66+
{
67+
"typescript.tsserver.pluginPaths": ["typescript-plugin-css-modules"]
68+
}
69+
```
70+
71+
2. Use your workspace's version of TypeScript, which will load the plugins from your `tsconfig.json` file.
72+
([instructions](https://code.visualstudio.com/docs/languages/typescript#_using-the-workspace-version-of-typescript)).
73+
5074
### Custom definitions
5175

52-
Depending on your project configuration, you may also need to declare modules. Where you store this is up to you. An
53-
example might look like: `src/@types/custom.d.ts`.
76+
_Note: Create React App users can skip this section if you're using `react-scripts@2.1.x` or higher._
77+
78+
If your project doesn't already have global declarations for CSS Modules, you will need to add these to help TypeScript understand the general shape of the imported CSS.
79+
80+
Where you store global declarations is up to you. An example might look like: `src/custom.d.ts`.
5481

55-
The below is an example that you can modify if you use a `customMatcher`.
82+
The below is an example that you can copy, or modify if you use a `customMatcher`.
5683

5784
```ts
5885
declare module '*.module.css' {

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"scripts": {
1818
"build": "rm -rf ./lib && tsc",
1919
"prepublish": "yarn build",
20-
"test": "jest"
20+
"test": "jest ./src"
2121
},
2222
"husky": {
2323
"hooks": {
@@ -26,6 +26,9 @@
2626
}
2727
},
2828
"jest": {
29+
"collectCoverageFrom": [
30+
"src/**/*.{ts}"
31+
],
2932
"preset": "ts-jest",
3033
"testEnvironment": "node"
3134
},
@@ -35,7 +38,9 @@
3538
"trailingComma": "all"
3639
},
3740
"dependencies": {
41+
"@types/lodash": "^4.14.118",
3842
"icss-utils": "^4.0.0",
43+
"lodash": "^4.17.11",
3944
"postcss": "^7.0.5",
4045
"postcss-icss-selectors": "^2.0.3"
4146
},

‎src/@types/global.d.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
declare interface IOptions {
2+
camelCase?: CamelCaseOptions;
3+
customMatcher?: string;
4+
}
5+
6+
declare type CamelCaseOptions =
7+
| true
8+
| 'dashes'
9+
| 'dashesOnly'
10+
| 'only'
11+
| undefined;

src/@types/icss-utils.d.ts renamed to src/@types/icss-utils/index.d.ts

File renamed without changes.

src/@types/postcss-icss-selectors.d.ts renamed to src/@types/postcss-icss-selectors/index.d.ts

File renamed without changes.

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`utils / classTransforms should not transform classes when no option is set 1`] = `
4+
Array [
5+
Array [
6+
"class-name-a",
7+
],
8+
Array [
9+
"classNameB",
10+
],
11+
Array [
12+
"class-Name-C",
13+
],
14+
Array [
15+
"__class_nAmeD--",
16+
],
17+
]
18+
`;
19+
20+
exports[`utils / classTransforms should transform classes correctly when \`camelCase\` set to \`dashes\` 1`] = `
21+
Array [
22+
Array [
23+
"class-name-a",
24+
"classNameA",
25+
],
26+
Array [
27+
"classNameB",
28+
],
29+
Array [
30+
"class-Name-C",
31+
"classNameC",
32+
],
33+
Array [
34+
"__class_nAmeD--",
35+
],
36+
]
37+
`;
38+
39+
exports[`utils / classTransforms should transform classes correctly when \`camelCase\` set to \`dashesOnly\` 1`] = `
40+
Array [
41+
Array [
42+
"classNameA",
43+
],
44+
Array [
45+
"classNameB",
46+
],
47+
Array [
48+
"classNameC",
49+
],
50+
Array [
51+
"__class_nAmeD--",
52+
],
53+
]
54+
`;
55+
56+
exports[`utils / classTransforms should transform classes correctly when \`camelCase\` set to \`only\` 1`] = `
57+
Array [
58+
Array [
59+
"classNameA",
60+
],
61+
Array [
62+
"classNameB",
63+
],
64+
Array [
65+
"classNameC",
66+
],
67+
Array [
68+
"classNAmeD",
69+
],
70+
]
71+
`;
72+
73+
exports[`utils / classTransforms should transform classes correctly when \`camelCase\` set to \`true\` 1`] = `
74+
Array [
75+
Array [
76+
"class-name-a",
77+
"classNameA",
78+
],
79+
Array [
80+
"classNameB",
81+
],
82+
Array [
83+
"class-Name-C",
84+
"classNameC",
85+
],
86+
Array [
87+
"__class_nAmeD--",
88+
"classNAmeD",
89+
],
90+
]
91+
`;

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`utils / cssSnapshots createExports should create an exports file 1`] = `
4+
"declare const classes: {
5+
'classA': string;
6+
'ClassB': string;
7+
'class-c': string;
8+
'parent': string;
9+
'childA': string;
10+
'childB': string;
11+
'nestedChild': string;
12+
};
13+
export default classes;
14+
"
15+
`;
16+
17+
exports[`utils / cssSnapshots createExports should create an exports file 2`] = `
18+
"declare const classes: {
19+
'local-class-inside-global': string;
20+
'local-class': string;
21+
'local-class-2': string;
22+
'local-class-inside-local': string;
23+
};
24+
export default classes;
25+
"
26+
`;

‎src/helpers/__tests__/classTransforms.test.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { transformClasses } from '../classTransforms';
2+
3+
describe('utils / classTransforms', () => {
4+
const classNames = [
5+
'class-name-a',
6+
'classNameB',
7+
'class-Name-C',
8+
'__class_nAmeD--',
9+
];
10+
const tests: CamelCaseOptions[] = [true, 'dashes', 'dashesOnly', 'only'];
11+
12+
it(`should not transform classes when no option is set`, () => {
13+
const transformer = transformClasses();
14+
const transformedClasses = classNames.map(transformer);
15+
expect(transformedClasses).toMatchSnapshot();
16+
});
17+
18+
tests.forEach((option) => {
19+
it(`should transform classes correctly when \`camelCase\` set to \`${option}\``, () => {
20+
const transformer = transformClasses(option);
21+
const transformedClasses = classNames.map(transformer);
22+
expect(transformedClasses).toMatchSnapshot();
23+
});
24+
});
25+
});

0 commit comments

Comments
 (0)