feat: allow removal of original class name (#445)

* feat: allow removal of original class name

* add comment for 1.0.0

* docs: move table

* docs: consistency

Author: joscha

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
 {

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);

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");