diff --git a/README.md b/README.md index 9cb0ac29..f36ed5ff 100644 --- a/README.md +++ b/README.md @@ -398,6 +398,15 @@ You can also disable or enforce minification with the `minimize` query parameter By default, the exported JSON keys mirror the class names. If you want to camelize class names (useful in JS), pass the query parameter `camelCase` to css-loader. +#### Possible Options + +|Option|Description| +|:----:|:--------| +|**`true`**|Class names will be camelized| +|**`'dashes'`**|Only dashes in class names will be camelized| +|**`'only'`** |Class names will be camelized, the original class name will be removed from the locals| +|**`'dashesOnly'`**|Dashes in class names will be camelized, the original class name will be removed from the locals| + **webpack.config.js** ```js { diff --git a/lib/compile-exports.js b/lib/compile-exports.js index 318743ce..04f97b0d 100644 --- a/lib/compile-exports.js +++ b/lib/compile-exports.js @@ -17,15 +17,17 @@ module.exports = function compileExports(result, importItemMatcher, camelCaseKey function addEntry(k) { res.push("\t" + JSON.stringify(k) + ": " + valueAsString); } - addEntry(key); + if (camelCaseKeys !== 'only' && camelCaseKeys !== 'dashesOnly') { + addEntry(key); + } var targetKey; - if (camelCaseKeys === true) { + if (camelCaseKeys === true || camelCaseKeys === 'only') { targetKey = camelCase(key); if (targetKey !== key) { addEntry(targetKey); } - } else if (camelCaseKeys === 'dashes') { + } else if (camelCaseKeys === 'dashes' || camelCaseKeys === 'dashesOnly') { targetKey = dashesCamelCase(key); if (targetKey !== key) { addEntry(targetKey); diff --git a/test/camelCaseTest.js b/test/camelCaseTest.js index c8be53b3..5c669e84 100644 --- a/test/camelCaseTest.js +++ b/test/camelCaseTest.js @@ -14,14 +14,26 @@ describe("camelCase", function() { ], dashes: [ [1, "._1L-rnCOXCE_7H94L5XT4uB { color: blue; }", ""] + ], + withoutOnly: [ + [1, "._1L-rnCOXCE_7H94L5XT4uB { color: blue; }", ""] + ], + dashesOnly: [ + [1, "._1L-rnCOXCE_7H94L5XT4uB { color: blue; }", ""] ] }; exports.with.locals = {'btn-info_is-disabled': '_1L-rnCOXCE_7H94L5XT4uB'}; exports.without.locals = {btnInfoIsDisabled: '_1L-rnCOXCE_7H94L5XT4uB', 'btn-info_is-disabled': '_1L-rnCOXCE_7H94L5XT4uB'}; exports.dashes.locals = {btnInfo_isDisabled: '_1L-rnCOXCE_7H94L5XT4uB', 'btn-info_is-disabled': '_1L-rnCOXCE_7H94L5XT4uB'}; + exports.withoutOnly.locals = {btnInfoIsDisabled: '_1L-rnCOXCE_7H94L5XT4uB'}; + exports.dashesOnly.locals = {btnInfo_isDisabled: '_1L-rnCOXCE_7H94L5XT4uB'}; test("with", css, exports.with, "?modules"); test("without", css, exports.without, "?modules&camelCase"); test("dashes", css, exports.dashes, "?modules&camelCase=dashes"); + // Remove this option in v1.0.0 and make the removal of the original classname the default behaviour. See #440. + test("withoutOnly", css, exports.withoutOnly, "?modules&camelCase=only"); + // Remove this option in v1.0.0 and make the removal of the original classname the default behaviour. See #440. + test("dashesOnly", css, exports.dashesOnly, "?modules&camelCase=dashesOnly"); testRaw("withoutRaw", '.a {}', 'exports.locals = {\n\t"a": "_1buUQJccBRS2-2i27LCoDf"\n};', "?modules&camelCase"); testRaw("dashesRaw", '.a {}', 'exports.locals = {\n\t"a": "_1buUQJccBRS2-2i27LCoDf"\n};', "?modules&camelCase=dashes");