Merge pull request #72 from tatjsn/camel-case

Add option of adding camelize keys, like css-loader's camelCase

Author: mightyaleksey

lib/index.js

@@ -5,6 +5,7 @@ const genericNames = require('generic-names');
 const globToRegex = require('glob-to-regexp');
 const identity = require('lodash').identity;
 const negate = require('lodash').negate;
+const camelCaseFunc = require('lodash').camelCase;
 const readFileSync = require('fs').readFileSync;
 const relative = require('path').relative;
 const resolve = require('path').resolve;
@@ -27,6 +28,7 @@ module.exports = function setupHook({
   preprocessCss = identity,
   processCss,
   processorOpts,
+  camelCase,
   append = [],
   prepend = [],
   createImportedName,
@@ -103,6 +105,11 @@ module.exports = function setupHook({
 
     tokens = lazyResult.root.tokens;
 
+    if (camelCase) {
+      tokens = Object.assign({}, tokens,
+        ...Object.keys(tokens).map(key => ({ [camelCaseFunc(key)]: tokens[key] })))
+    }
+
     if (!debugMode) {
       // updating cache
       tokensByFile[filename] = tokens;

lib/validate.js

@@ -10,6 +10,7 @@ const rules = {
   preprocessCss:      'function',
   processCss:         'function',
   processorOpts:      'object',
+  camelCase:          'boolean',
   // plugins
   append:             'array',
   prepend:            'array',

test/api/camelCase.js

@@ -0,0 +1,19 @@
+const detachHook = require('../sugar').detachHook;
+const dropCache = require('../sugar').dropCache;
+
+suite('api/camelCase', () => {
+  test('should add camel case keys in token', () => {
+    const tokens = require('./fixture/bem.css');
+    assert.deepEqual(tokens, {
+      blockElementModifier: '_test_api_fixture_bem__block__element--modifier',
+      'block__element--modifier': '_test_api_fixture_bem__block__element--modifier',
+    });
+  });
+
+  setup(() => hook({ camelCase: true }));
+
+  teardown(() => {
+    detachHook('.css');
+    dropCache('./api/fixture/bem.css');
+  });
+});

test/api/fixture/bem.css

@@ -0,0 +1,3 @@
+.block__element--modifier {
+  background: #1e2a35;
+}