Merge pull request #36 from css-modules/json-manifest

Generate a manifest json of export tokens

Author: joshwnj

README.md

@@ -48,8 +48,18 @@ 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)
+- `output`: path to write the generated css.
+- `jsonOutput`: optional path to write a json manifest of classnames.
+- `use`: optional array of postcss plugins (by default we use the css-modules core plugins).
+
+## Using CSS Modules on the backend
+
+If you want to use CSS Modules in server-generated templates there are a couple of options:
+
+- Option A (nodejs only): register the [require-hook](https://github.com/css-modules/css-modules-require-hook) so that `var styles = require('./foo.css')` operates the same way as on the frontend. Make sure that the `rootDir` option matches to guarantee that the classnames are the same.
+
+- Option B: configure the `jsonOutput` option with a file path and `css-modulesify` will generate a JSON manifest of classnames.
+
 
 ## PostCSS Plugins
 
@@ -70,11 +80,8 @@ In addition you may also wish to configure defined PostCSS plugins by passing `-
 An example of this would be:
 
 ```
-browserify -p [css-modulesify -u postcss-modules-local-by-default \
-  -u postcss-modules-extract-imports \
-  -u postcss-modules-scope \
-  -u postcss-color-rebeccapurple \
-  -u autoprefixer --autoprefixer.browsers '> 5%' \
+browserify -p [css-modulesify \
+  --after autoprefixer --autoprefixer.browsers '> 5%' \
   -o dist/main.css] -o dist/index.js src/index.js
 ```
 

index.js

@@ -18,17 +18,40 @@ function createScopedNameFunc (plugin) {
   }
 };
 
+/*
+
+  Normalize the manifest paths so that they are always relative
+  to the project root directory.
+
+*/
+function normalizeManifestPaths (tokensByFile, rootDir) {
+  var output = {};
+  var rootDirLength = rootDir.length + 1;
+
+  Object.keys(tokensByFile).forEach(function (filename) {
+    var normalizedFilename = filename.substr(rootDirLength);
+    output[normalizedFilename] = tokensByFile[filename];
+  });
+
+  return output;
+}
+
 var cssExt = /\.css$/;
 module.exports = function (browserify, options) {
   options = options || {};
 
-  var rootDir = options.rootDir || options.d || '/';
+  // if no root directory is specified, assume the cwd
+  var rootDir = options.rootDir || options.d;
+  if (rootDir) { rootDir = path.resolve(rootDir); }
+  if (!rootDir) { rootDir = process.cwd(); }
 
   var cssOutFilename = options.output || options.o;
   if (!cssOutFilename) {
     throw new Error('css-modulesify needs the --output / -o option (path to output css file)');
   }
 
+  var jsonOutFilename = options.json || options.jsonOutput;
+
   // PostCSS plugins passed to FileSystemLoader
   var plugins = options.use || options.u;
   if (!plugins) {
@@ -131,6 +154,15 @@ module.exports = function (browserify, options) {
           browserify.emit('error', err);
         }
       });
+
+      // write the classname manifest
+      if (jsonOutFilename) {
+        fs.writeFile(jsonOutFilename, JSON.stringify(normalizeManifestPaths(tokensByFile, rootDir)), function (err) {
+          if (err) {
+            browserify.emit('error', err);
+          }
+        });
+      }
     });
   });