Merge pull request #25 from css-modules/compose-node-module

Composing from a node_module

Author: joshgillies

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules/*
+!node_modules/cool-styles

README.md

@@ -14,7 +14,7 @@ Normally you need to use a strict naming convention like BEM to ensure that one
 
 Read Mark Dalgleish's excellent ["End of Global CSS"](https://medium.com/seek-ui-engineering/the-end-of-global-css-90d2a4a06284) and check out [css-modules](https://github.com/css-modules/css-modules) for more context.
 
-## Usage
+## Getting started
 
 First install the package: `npm install --save css-modulesify`
 
@@ -31,7 +31,27 @@ var div = `<div class="${styles.inner}">...</div>`;
 
 The generated css will contain locally-scoped versions of any css you have `require`'d, and will be written out to the file you specify in the `--output` or `-o` option.
 
-### PostCSS Plugins
+## API Usage
+
+```js
+var b = require('browserify')();
+
+b.add('./main.js');
+b.plugin(require('css-modulesify'), {
+  rootDir: __dirname,
+  output: './path/to/my.css'
+});
+
+b.bundle();
+```
+
+### Options:
+
+- `rootDir`: absolute path to your project's root directory. This is optional but providing it will result in better generated classnames.
+- `output`: path to write the generated css
+- `use`: optional array of postcss plugins (by default we use the css-modules core plugins)
+
+## PostCSS Plugins
 
 The following PostCSS plugins are enabled by default:
 

index.js

@@ -22,6 +22,8 @@ var cssExt = /\.css$/;
 module.exports = function (browserify, options) {
   options = options || {};
 
+  var rootDir = options.rootDir || options.d || '/';
+
   var cssOutFilename = options.output || options.o;
   if (!cssOutFilename) {
     throw new Error('css-modulesify needs the --output / -o option (path to output css file)');
@@ -84,13 +86,12 @@ module.exports = function (browserify, options) {
 
     return through(function noop () {}, function end () {
       var self = this;
-
-      var loader = new FileSystemLoader(path.dirname(filename), plugins);
+      var loader = new FileSystemLoader(rootDir, plugins);
 
       // pre-populate the loader's tokensByFile
       loader.tokensByFile = tokensByFile;
 
-      loader.fetch(path.basename(filename), '/').then(function (tokens) {
+      loader.fetch(path.relative(rootDir, filename), '/').then(function (tokens) {
         var output = "module.exports = " + JSON.stringify(tokens);
 
         assign(tokensByFile, loader.tokensByFile);
@@ -101,7 +102,7 @@ module.exports = function (browserify, options) {
         self.queue(output);
         self.queue(null);
       }, function (err) {
-        console.error(err);
+        console.error('loader err', err);
       });
     });
   }

tests/cases/import-node-module/node_modules/cool-styles/styles.css renamed to node_modules/cool-styles/styles.css

@@ -4,7 +4,7 @@
   "description": "A browserify transform to load CSS Modules",
   "main": "index.js",
   "dependencies": {
-    "css-modules-loader-core": "0.0.11",
+    "css-modules-loader-core": "0.0.12",
     "object-assign": "^3.0.0",
     "string-hash": "^1.1.0",
     "through": "^2.3.7"

package.json

@@ -0,0 +1,6 @@
+._cool_styles_styles__foo {
+  color: #F00;
+}
+._styles__foo {
+  background: black;
+}

tests/.gitignore

@@ -0,0 +1 @@
+var styles = require('./styles.css');

tests/cases/compose-node-module/expected.css

@@ -0,0 +1,4 @@
+.foo {
+  composes: foo from "cool-styles/styles.css";
+  background: black;
+}

tests/cases/compose-node-module/main.js

@@ -1,3 +1,3 @@
-._styles__foo {
+._node_modules_cool_styles_styles__foo {
   color: #F00;
 }