Skip to content

Commit 4e7f901

Browse files
mrmckebmrmckeb
committed
Update camelCase logic
1 parent fdf3f51 commit 4e7f901

File tree

8 files changed

+83
-40
lines changed

8 files changed

+83
-40
lines changed

‎README.md

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -69,14 +69,14 @@ const b = styles['my_other-class'];
6969

7070
Please note that no options are required. However, depending on your configuration, you may need to customise these options.
7171

72-
| Option | Default value | Description |
73-
| ----------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
74-
| `camelCase` | `false` | Implements the behaviour of the [`camelCase` CSS Loader option](https://github.com/webpack-contrib/css-loader#camelcase) (accepting the same values). |
75-
| `customMatcher` | `"\\.module\\.(c\|le\|sa\|sc)ss$"` | Changes the file extensions that this plugin processes. |
76-
| `customRenderer` | `false` | See [`customRenderer`](#customRenderer) below. |
77-
| `dotenvOptions` | `{}` | Provides options for [`dotenv`](https://github.com/motdotla/dotenv#options). |
78-
| `postCssOptions` | `{}` | See [`postCssOptions`](#postCssOptions) below. |
79-
| `rendererOptions` | `{}` | See [`rendererOptions`](#rendererOptions) below. |
72+
| Option | Default value | Description |
73+
| -------------------- | ---------------------------------- | ---------------------------------------------------------------------------- |
74+
| `classnameTransform` | `asIs` | See [`classnameTransform`](#classnameTransform) below. |
75+
| `customMatcher` | `"\\.module\\.(c\|le\|sa\|sc)ss$"` | Changes the file extensions that this plugin processes. |
76+
| `customRenderer` | `false` | See [`customRenderer`](#customRenderer) below. |
77+
| `dotenvOptions` | `{}` | Provides options for [`dotenv`](https://github.com/motdotla/dotenv#options). |
78+
| `postCssOptions` | `{}` | See [`postCssOptions`](#postCssOptions) below. |
79+
| `rendererOptions` | `{}` | See [`rendererOptions`](#rendererOptions) below. |
8080

8181
```json
8282
{
@@ -85,7 +85,7 @@ Please note that no options are required. However, depending on your configurati
8585
{
8686
"name": "typescript-plugin-css-modules",
8787
"options": {
88-
"camelCase": "dashes",
88+
"classnameTransform": "dashes",
8989
"customMatcher": "\\.m\\.css$",
9090
"customRenderer": "./myRenderer.js",
9191
"dotenvOptions": {},
@@ -98,6 +98,12 @@ Please note that no options are required. However, depending on your configurati
9898
}
9999
```
100100

101+
#### `classnameTransform`
102+
103+
Implements the behaviour of the [`localsConvention`](https://github.com/webpack-contrib/css-loader#localsconvention) of `css-loader`.
104+
105+
Options available are: `'asIs'`,, `'camelCase'`, `'camelCaseOnly'`, `'dashes'`, and `'dashesOnly'`.
106+
101107
#### `customRenderer`
102108

103109
The `customRenderer` is an advanced option, letting you provide the CSS renderer.

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
"dotenv": "^8.2.0",
6767
"icss-utils": "^4.1.1",
6868
"less": "^3.9.0",
69-
"lodash": "^4.17.14",
69+
"lodash.camelcase": "^4.3.0",
7070
"postcss": "^7.0.17",
7171
"postcss-filter-plugins": "^3.0.1",
7272
"postcss-icss-selectors": "^2.0.3",
@@ -78,7 +78,7 @@
7878
"@types/icss-utils": "^4.1.0",
7979
"@types/jest": "^24.0.15",
8080
"@types/less": "^3.0.0",
81-
"@types/lodash": "^4.14.136",
81+
"@types/lodash.camelcase": "^4.3.6",
8282
"@types/node": "^12.11.1",
8383
"@types/postcss-load-config": "^2.0.0",
8484
"@types/postcss-nested": "^4.1.0",

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

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,43 +17,44 @@ Array [
1717
]
1818
`;
1919

20-
exports[`utils / classTransforms should transform classes correctly when \`camelCase\` set to \`dashes\` 1`] = `
20+
exports[`utils / classTransforms should transform classes correctly when \`classnameTransform\` set to \`asIs\` 1`] = `
2121
Array [
2222
Array [
2323
"class-name-a",
24-
"classNameA",
2524
],
2625
Array [
2726
"classNameB",
2827
],
2928
Array [
3029
"class-Name-C",
31-
"classNameC",
3230
],
3331
Array [
3432
"__class_nAmeD--",
3533
],
3634
]
3735
`;
3836

39-
exports[`utils / classTransforms should transform classes correctly when \`camelCase\` set to \`dashesOnly\` 1`] = `
37+
exports[`utils / classTransforms should transform classes correctly when \`classnameTransform\` set to \`camelCase\` 1`] = `
4038
Array [
4139
Array [
40+
"class-name-a",
4241
"classNameA",
4342
],
4443
Array [
4544
"classNameB",
4645
],
4746
Array [
47+
"class-Name-C",
4848
"classNameC",
4949
],
5050
Array [
5151
"__class_nAmeD--",
52+
"classNAmeD",
5253
],
5354
]
5455
`;
5556

56-
exports[`utils / classTransforms should transform classes correctly when \`camelCase\` set to \`only\` 1`] = `
57+
exports[`utils / classTransforms should transform classes correctly when \`classnameTransform\` set to \`camelCaseOnly\` 1`] = `
5758
Array [
5859
Array [
5960
"classNameA",
@@ -70,7 +71,7 @@ Array [
7071
]
7172
`;
7273

73-
exports[`utils / classTransforms should transform classes correctly when \`camelCase\` set to \`true\` 1`] = `
74+
exports[`utils / classTransforms should transform classes correctly when \`classnameTransform\` set to \`dashes\` 1`] = `
7475
Array [
7576
Array [
7677
"class-name-a",
@@ -85,7 +86,23 @@ Array [
8586
],
8687
Array [
8788
"__class_nAmeD--",
88-
"classNAmeD",
89+
],
90+
]
91+
`;
92+
93+
exports[`utils / classTransforms should transform classes correctly when \`classnameTransform\` set to \`dashesOnly\` 1`] = `
94+
Array [
95+
Array [
96+
"classNameA",
97+
],
98+
Array [
99+
"classNameB",
100+
],
101+
Array [
102+
"classNameC",
103+
],
104+
Array [
105+
"__class_nAmeD--",
89106
],
90107
]
91108
`;

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { transformClasses } from '../classTransforms';
2-
import { CamelCaseOptions } from '../../options';
2+
import { ClassnameTransformOptions } from '../../options';
33

44
describe('utils / classTransforms', () => {
55
const classNames = [
@@ -8,7 +8,13 @@ describe('utils / classTransforms', () => {
88
'class-Name-C',
99
'__class_nAmeD--',
1010
];
11-
const tests: CamelCaseOptions[] = [true, 'dashes', 'dashesOnly', 'only'];
11+
const tests: ClassnameTransformOptions[] = [
12+
'camelCase',
13+
'camelCaseOnly',
14+
'dashes',
15+
'dashesOnly',
16+
'asIs',
17+
];
1218

1319
it(`should not transform classes when no option is set`, () => {
1420
const transformer = transformClasses();
@@ -17,7 +23,7 @@ describe('utils / classTransforms', () => {
1723
});
1824

1925
tests.forEach((option) => {
20-
it(`should transform classes correctly when \`camelCase\` set to \`${option}\``, () => {
26+
it(`should transform classes correctly when \`classnameTransform\` set to \`${option}\``, () => {
2127
const transformer = transformClasses(option);
2228
const transformedClasses = classNames.map(transformer);
2329
expect(transformedClasses).toMatchSnapshot();

‎src/helpers/classTransforms.ts

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,43 @@
1-
import { camelCase } from 'lodash';
1+
import camelCase from 'lodash.camelcase';
2+
import { ClassnameTransformOptions } from '../options';
23

34
// The below is based on the CSS Modules implementation found here:
45
// https://github.com/webpack-contrib/css-loader/blob/master/lib/compile-exports.js
56

6-
const dashesCamelCase = (className: string) =>
7+
const dashCase = (className: string) =>
78
className.replace(/-+(\w)/g, (match, firstLetter) =>
89
firstLetter.toUpperCase(),
910
);
1011

11-
export const transformClasses = (camelCaseOption?: boolean | string) => (
12-
className: string,
13-
) => {
12+
export const transformClasses = (
13+
camelCaseOption?: ClassnameTransformOptions,
14+
) => (className: string) => {
1415
const entries: string[] = [];
1516

1617
switch (camelCaseOption) {
17-
case true: {
18+
case 'camelCase': {
1819
entries.push(className);
1920
const targetClassName = camelCase(className);
2021
if (targetClassName !== className) {
2122
entries.push(targetClassName);
2223
}
2324
break;
2425
}
26+
case 'camelCaseOnly':
27+
entries.push(camelCase(className));
28+
break;
2529
case 'dashes': {
2630
entries.push(className);
27-
const targetClassName = dashesCamelCase(className);
31+
const targetClassName = dashCase(className);
2832
if (targetClassName !== className) {
2933
entries.push(targetClassName);
3034
}
3135
break;
3236
}
33-
case 'only':
34-
entries.push(camelCase(className));
35-
break;
3637
case 'dashesOnly':
37-
entries.push(dashesCamelCase(className));
38+
entries.push(dashCase(className));
3839
break;
40+
case 'asIs':
3941
default:
4042
entries.push(className);
4143
break;

‎src/helpers/createExports.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const createExports = (classes: CSSExports, options: Options) => {
2020
const isReservedWord = (className: string) => !reserved.check(className);
2121

2222
const processedClasses = Object.keys(classes)
23-
.map(transformClasses(options.camelCase))
23+
.map(transformClasses(options.classnameTransform))
2424
.reduce(flattenClassNames, []);
2525
const camelCasedKeys = processedClasses
2626
.filter(isCamelCase)

‎src/options.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,20 @@ export interface RendererOptions {
1313
}
1414

1515
export interface Options {
16-
camelCase?: CamelCaseOptions;
16+
classnameTransform?: ClassnameTransformOptions;
1717
customMatcher?: string;
1818
customRenderer?: string;
1919
dotenvOptions?: DotenvConfigOptions;
2020
postCssOptions?: PostCssOptions;
2121
rendererOptions?: RendererOptions;
2222
}
2323

24-
export type CamelCaseOptions =
25-
| true
24+
export type ClassnameTransformOptions =
25+
| 'asIs'
26+
| 'camelCase'
27+
| 'camelCaseOnly'
2628
| 'dashes'
27-
| 'dashesOnly'
28-
| 'only'
29-
| undefined;
29+
| 'dashesOnly';
3030

3131
export interface CustomRendererOptions {
3232
fileName: string;

‎yarn.lock

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -423,7 +423,14 @@
423423
resolved "https://registry.yarnpkg.com/@types/less/-/less-3.0.0.tgz#2b76e6a2fecf7108c1c2b701ad846b605d8f2c7e"
424424
integrity sha512-AUO7jdGrDi7x+7w2vYHNCom3NRjkspKSvamYp013Jyd/VYxpm0xtCupRZCdSX2IPx/W9C81Cj7nPXqQUj6MlQQ==
425425

426-
"@types/lodash@^4.14.136":
426+
"@types/lodash.camelcase@^4.3.6":
427+
version "4.3.6"
428+
resolved "https://registry.yarnpkg.com/@types/lodash.camelcase/-/lodash.camelcase-4.3.6.tgz#393c748b70cd926fc629e6502a9d0929f217d5fd"
429+
integrity sha512-hd/TEuPd76Jtf1xEq85CHbCqR+iqvs5IOKyrYbiaOg69BRQgPN9XkvLj8Jl8rBp/dfJ2wQ1AVcP8mZmybq7kIg==
430+
dependencies:
431+
"@types/lodash" "*"
432+
433+
"@types/lodash@*":
427434
version "4.14.144"
428435
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.144.tgz#12e57fc99064bce45e5ab3c8bc4783feb75eab8e"
429436
integrity sha512-ogI4g9W5qIQQUhXAclq6zhqgqNUr7UlFaqDHbch7WLSLeeM/7d3CRaw7GLajxvyFvhJqw4Rpcz5bhoaYtIx6Tg==
@@ -3122,6 +3129,11 @@ locate-path@^5.0.0:
31223129
dependencies:
31233130
p-locate "^4.1.0"
31243131

3132+
lodash.camelcase@^4.3.0:
3133+
version "4.3.0"
3134+
resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
3135+
integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
3136+
31253137
lodash.memoize@4.x:
31263138
version "4.1.2"
31273139
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"

0 commit comments

Comments
 (0)