feat: support gulp-dumber-css-module

closes #13

Author: 3cp

lib/inject-css.js

@@ -82,11 +82,24 @@ function injectCSS(css, id) {
 // dumber-module-loader plugin ext:css
 function load(name, req, load) {
   req(['text!' + name], function(text) {
-    injectCSS(text, name);
-    load(text);
+    var result = splitCssModuleExports(text);
+    injectCSS(result.css, name);
+    // When css-module is in use, the module exports will be
+    // a map of tokens. Otherwise, export original css string.
+    load(result.exportTokens || result.css);
   });
 }
 
+function splitCssModuleExports(text) {
+  if (!text) return {css: ''};
+  var m = text.match(/\/\*\s*dumber-css-module:\s*(.+)\s*\*\/\s*$/);
+  if (!m) return {css: text};
+  var css = text.slice(0, m.index);
+  var exportTokens = JSON.parse(m[1]);
+  return {css, exportTokens};
+}
+
 exports.fixupCSSUrls = fixupCSSUrls;
 exports.injectCSS = injectCSS;
+exports.splitCssModuleExports = splitCssModuleExports;
 exports.load = load;

test/inject-css.spec.js

@@ -1,5 +1,5 @@
 const test = require('tape');
-const {fixupCSSUrls} = require('../lib/inject-css');
+const {fixupCSSUrls, splitCssModuleExports} = require('../lib/inject-css');
 
 // tests partly copied from
 // https://github.com/webpack-contrib/style-loader/blob/master/test/fixUrls.test.js
@@ -162,3 +162,18 @@ test("fixupCSSUrls doesn't break inline SVG with HTML comment", t => {
   t.equal(fixupCSSUrls('foo/bar', css), css);
   t.end();
 });
+
+test('splitCssModuleExports returns original contents when css-module is not detected', t => {
+  t.deepEqual(splitCssModuleExports(), {css: ''});
+  t.deepEqual(splitCssModuleExports('.a { color: red; }'), {css: '.a { color: red; }'});
+  t.end();
+});
+
+test('splitCssModuleExports splits css-module exports', t => {
+  const css = '._a_1vkqw_1 { color: red; }\n/* dumber-css-module: {"a":"_a_1vkqw_1"} */\n';
+  t.deepEqual(splitCssModuleExports(css), {
+    css: '._a_1vkqw_1 { color: red; }\n',
+    exportTokens: {a: '_a_1vkqw_1'}
+  });
+  t.end();
+});