using css-modules-loader-core, now supports :extends!

Author: joshwnj

example/borders.css

@@ -0,0 +1,3 @@
+.dottyBorder {
+  border: 1px dotted #000;
+}

example/box1.css

@@ -1,6 +1,6 @@
 .box {
+  extends: dottyBorder from "./borders.css";
   padding: 10px;
-  border: 1px dotted #000;
 }
 
 .text {

example/index.js

@@ -12,12 +12,12 @@ insertCss(box2);
 var content = h('div', [
   h('p', 'This is a demonstration of using generic classnames in css files like `.box` and `.text`, without any danger of name collisions between components'),
 
-  h('div', { className: box1['.box'] }, [
-    h('p', { className: box1['.text'] }, 'Box 1')
+  h('div', { className: box1.box }, [
+    h('p', { className: box1.text }, 'Box 1')
   ]),
 
-  h('div', { className: box2['.box'] }, [
-    h('p', { className: box2['.text'] }, 'Box 2')
+  h('div', { className: box2.box }, [
+    h('p', { className: box2.text }, 'Box 2')
   ])
 ]);
 

lib/local-css.js

@@ -4,26 +4,7 @@ var postcss = require('postcss');
 var autoprefixer = require('autoprefixer-core');
 var shasum = require('shasum');
 var prefixSelector = require('./prefix-selector');
-
-function localizeCss (basename, raw, cb) {
-  var hash = shasum(raw).substr(0, 5);
-
-  postcss([ autoprefixer ]).process(raw).then(function (result) {
-    result.warnings().forEach(function (warn) {
-      console.warn(warn.toString());
-    });
-
-    // prefix all class selectors to make them globally unique
-    var classMap = {};
-    result.root.eachRule(function (rule) {
-      var uniqueSelector = prefixSelector(basename, hash, rule);
-      classMap[rule.selector] = uniqueSelector.replace(/^./, '');
-      rule.selector = uniqueSelector;
-    });
-
-    return cb(null, classMap, result.root);
-  });
-}
+var FileSystemLoader = require('css-modules-loader-core/lib/file-system-loader');
 
 var cssExt = /\.css$/;
 module.exports = function (filename) {
@@ -37,17 +18,20 @@ module.exports = function (filename) {
     data.push(chunk);
   }, function end () {
     var raw = data.join('');
-    var basename = path.basename(filename, '.css');
     var self = this;
 
-    localizeCss(basename, raw, function (err, classMap, stylesheet) {
-      if (err) { throw err; }
-
-      var output = "module.exports = " + JSON.stringify(classMap) +
-        "\nmodule.exports.toString = function () { return " + JSON.stringify(stylesheet.toString()) + "; }";
+    var loader = new FileSystemLoader(path.dirname(filename));
+    loader.fetch(path.basename(filename), '/').then(function (tokens) {
+      var sources = Object.keys(loader.sources).map(function (key) {
+        return loader.sources[key];
+      });
+      var output = "module.exports = " + JSON.stringify(tokens) +
+          "\nmodule.exports.toString = function () { return " + JSON.stringify(sources.join('\n')) + "; }";
 
       self.queue(output);
       self.queue(null);
+    }, function (err) {
+      console.error(err);
     });
   });
 };

package.json

@@ -1,10 +1,11 @@
 {
   "name": "local-css",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A browserify transform allowing you to `require('styles.css')` and get back locally scoped classnames.",
   "main": "index.js",
   "dependencies": {
     "autoprefixer-core": "^5.2.0",
+    "css-modules-loader-core": "0.0.3",
     "css-selector-tokenizer": "^0.3.1",
     "postcss": "^4.1.11",
     "shasum": "^1.0.1",