Skip to content

Commit aaee8f7

Browse files
committed
camelCase (#90)
additional options for `camelCase`.
1 parent b8df916 commit aaee8f7

File tree

12 files changed

+214
-69
lines changed

12 files changed

+214
-69
lines changed

.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,13 @@ charset = utf-8
88
trim_trailing_whitespace = true
99
insert_final_newline = true
1010

11+
[GNUmakefile]
12+
indent_style = tab
13+
14+
[Makefile]
15+
indent_style = tab
16+
17+
[makefile]
18+
indent_style = tab
19+
1120
# cheat sheet: http://EditorConfig.org

.gitignore

Lines changed: 5 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,5 @@
1-
# Logs
2-
logs
3-
*.log
4-
5-
# Runtime data
6-
pids
7-
*.pid
8-
*.seed
9-
10-
# Directory for instrumented libs generated by jscoverage/JSCover
11-
lib-cov
12-
13-
# Coverage directory used by tools like istanbul
14-
coverage
15-
16-
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17-
.grunt
18-
19-
# node-waf configuration
20-
.lock-wscript
21-
22-
# Compiled binary addons (http://nodejs.org/api/addons.html)
23-
build/Release
24-
25-
# Dependency directory
26-
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27-
node_modules/*
28-
29-
# added automatically by precommit-hook as defaults
30-
.jshint*
1+
.DS_Store
2+
.npm
3+
node_modules
4+
npm-debug.log*
5+
yarn.lock

.travis.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
language: node_js
22
node_js:
3-
- "4.3"
3+
- "4"
4+
- "6"

README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,10 +206,12 @@ hook({
206206
});
207207
```
208208

209-
### `camelCase boolean`
209+
### `camelCase boolean|string`
210210

211211
Camelizes exported class names. Similar to [css-loader?camelCase](https://github.com/webpack/css-loader#camel-case).
212212

213+
Available options: `true`, `dashes`, `only`, `dashesOnly`.
214+
213215
### `append` array
214216

215217
Appends custom plugins to the end of the PostCSS pipeline. Since the `require` function is synchronous, you should provide synchronous plugins only.

lib/attachHook.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use strict';
2+
13
/**
24
* @param {function} compile
35
* @param {string} extension

lib/index.js

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
const assign = require('lodash').assign;
1+
'use strict';
2+
3+
const {assign, identity, negate, camelCase: camelCaseFunc, mapKeys} = require('lodash');
4+
const {dirname, relative, resolve} = require('path');
5+
const {readFileSync} = require('fs');
6+
const {transformTokens} = require('./transformTokens');
7+
28
const attachHook = require('./attachHook');
3-
const dirname = require('path').dirname;
49
const genericNames = require('generic-names');
510
const globToRegex = require('glob-to-regexp');
6-
const identity = require('lodash').identity;
7-
const negate = require('lodash').negate;
8-
const camelCaseFunc = require('lodash').camelCase;
9-
const mapKeys = require('lodash').mapKeys;
10-
const readFileSync = require('fs').readFileSync;
11-
const relative = require('path').relative;
12-
const resolve = require('path').resolve;
1311
const validate = require('./validate');
1412

1513
const postcss = require('postcss');
@@ -23,13 +21,13 @@ const debugFetch = require('debug')('css-modules:fetch');
2321
const debugSetup = require('debug')('css-modules:setup');
2422

2523
module.exports = function setupHook({
24+
camelCase,
2625
devMode,
2726
extensions = '.css',
2827
ignore,
2928
preprocessCss = identity,
3029
processCss,
3130
processorOpts,
32-
camelCase,
3331
append = [],
3432
prepend = [],
3533
createImportedName,
@@ -89,7 +87,6 @@ module.exports = function setupHook({
8987
? require.resolve(_to)
9088
: resolve(dirname(from), _to);
9189

92-
9390
// checking cache
9491
let tokens = tokensByFile[filename];
9592
if (tokens) {
@@ -107,10 +104,6 @@ module.exports = function setupHook({
107104

108105
tokens = lazyResult.root.tokens;
109106

110-
if (camelCase) {
111-
tokens = assign(mapKeys(tokens, (value, key) => camelCaseFunc(key)), tokens);
112-
}
113-
114107
if (!debugMode) {
115108
// updating cache
116109
tokensByFile[filename] = tokens;
@@ -132,8 +125,13 @@ module.exports = function setupHook({
132125
const exts = toArray(extensions);
133126
const isException = buildExceptionChecker(ignore);
134127

128+
const hook = filename => {
129+
const tokens = fetch(filename, filename);
130+
return camelCase ? transformTokens(tokens, camelCase) : tokens;
131+
};
132+
135133
// @todo add possibility to specify particular config for each extension
136-
exts.forEach(extension => attachHook(filename => fetch(filename, filename), extension, isException));
134+
exts.forEach(extension => attachHook(hook, extension, isException));
137135
};
138136

139137
/**

lib/transformTokens.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
'use strict';
2+
3+
const {assign, camelCase, reduce} = require('lodash');
4+
5+
const camelizeKeys = (acc, value, key) => {
6+
const camelizedKey = camelCase(key);
7+
if (camelizedKey !== key) acc[camelizedKey] = value;
8+
return acc;
9+
};
10+
11+
const camelizeDashedKeys = (acc, value, key) => {
12+
const camelizedKey = camelizeDashes(key);
13+
if (camelizedKey !== key) acc[camelizedKey] = value;
14+
return acc;
15+
};
16+
17+
const camelizeOnlyKeys = (acc, value, key) => {
18+
const camelizedKey = camelCase(key);
19+
if (camelizedKey !== key) acc[camelizedKey] = value
20+
else acc[key] = value;
21+
return acc;
22+
};
23+
24+
const camelizeOnlyDashedKeys = (acc, value, key) => {
25+
const camelizedKey = camelizeDashes(key);
26+
if (camelizedKey !== key) acc[camelizedKey] = value
27+
else acc[key] = value;
28+
return acc;
29+
};
30+
31+
exports.camelizeDashes = camelizeDashes;
32+
exports.transformTokens = transformTokens;
33+
34+
/**
35+
* @param {string} str
36+
* @return {string}
37+
*/
38+
function camelizeDashes(str) {
39+
return str.replace(/-(\w)/g, (m, letter) => letter.toUpperCase());
40+
}
41+
42+
/**
43+
* @param {object} tokens
44+
* @param {boolean|string} camelCase 'dashes|dashesOnly|only'
45+
* @return {object}
46+
*/
47+
function transformTokens(tokens, camelCase) {
48+
switch (camelCase) {
49+
case true:
50+
return reduce(tokens, camelizeKeys, assign({}, tokens));
51+
52+
case 'dashes':
53+
return reduce(tokens, camelizeDashedKeys, assign({}, tokens));
54+
55+
case 'dashesOnly':
56+
return reduce(tokens, camelizeOnlyDashedKeys, {});
57+
58+
case 'only':
59+
return reduce(tokens, camelizeOnlyKeys, {});
60+
}
61+
62+
return tokens;
63+
}

lib/validate.js

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,26 @@
1-
const difference = require('lodash').difference;
2-
const forEach = require('lodash').forEach;
3-
const keys = require('lodash').keys;
1+
'use strict';
2+
3+
const {
4+
difference,
5+
forEach,
6+
isArray,
7+
isBoolean,
8+
isFunction,
9+
isPlainObject,
10+
isRegExp,
11+
isString,
12+
keys,
13+
} = require('lodash');
414

515
const rules = {
616
// hook
17+
camelCase: 'boolean|string',
718
devMode: 'boolean',
819
extensions: 'array|string',
920
ignore: 'function|regex|string',
1021
preprocessCss: 'function',
1122
processCss: 'function',
1223
processorOpts: 'object',
13-
camelCase: 'boolean',
1424
// plugins
1525
append: 'array',
1626
prepend: 'array',
@@ -23,12 +33,12 @@ const rules = {
2333
};
2434

2535
const tests = {
26-
array: require('lodash').isArray,
27-
boolean: require('lodash').isBoolean,
28-
function: require('lodash').isFunction,
29-
object: require('lodash').isPlainObject,
30-
regex: require('lodash').isRegExp,
31-
string: require('lodash').isString,
36+
array: isArray,
37+
boolean: isBoolean,
38+
function: isFunction,
39+
object: isPlainObject,
40+
regex: isRegExp,
41+
string: isString,
3242
};
3343

3444
module.exports = function validate(options) {

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
"test": "npm run test:babel",
1515
"test:babel": "NODE_PATH=$(pwd)/test/tokens/node_modules $npm_package_scripts_test_unit --compilers js:babel-register",
1616
"test:coverage": "NODE_PATH=$(pwd)/test/tokens/node_modules babel-node --presets es2015 `npm bin`/isparta cover --report text --report html `npm bin`/_mocha -- --require test/setup.js --ui tdd test/*/*.js",
17-
"test:node": "NODE_PATH=$(pwd)/test/tokens/node_modules $npm_package_scripts_test_unit --use_strict",
18-
"test:watch": "NODE_PATH=$(pwd)/test/tokens/node_modules $npm_package_scripts_test_unit --watch --use_strict",
17+
"test:node": "NODE_PATH=$(pwd)/test/tokens/node_modules $npm_package_scripts_test_unit",
18+
"test:watch": "NODE_PATH=$(pwd)/test/tokens/node_modules $npm_package_scripts_test_unit --watch",
1919
"test:unit": "mocha --require test/setup.js --ui tdd test/*/*.js"
2020
},
2121
"repository": {

preset.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use strict';
2+
13
const basename = require('path').basename;
24
const debug = require('debug')('css-modules:preset');
35
const dirname = require('path').dirname;

0 commit comments

Comments
 (0)