Add initial browserify transform.

No test runner yet, but "npm test" output in test/browserify is expected to match expected.out.

Author: jareware

.gitignore

@@ -1 +1,2 @@
 .idea
+node_modules

browserify.js

@@ -0,0 +1,12 @@
+var transformTools = require('browserify-transform-tools');
+
+var CLASSNAME_SEARCH = /\b([a-z][a-zA-Z_-]*)/g;
+
+// @see https://github.com/benbria/browserify-transform-tools#creating-a-falafel-transform
+module.exports = transformTools.makeFalafelTransform('component-css-ns', {}, function(node, transformOptions, done) {
+  if (node.type === 'Property' && node.key.name === 'className') {
+    var componentNs = transformOptions.file.replace(/.*\/(\w+).*/, '$1');
+    node.value.update(node.value.source() + '.replace(' + CLASSNAME_SEARCH.toString() + ', "' + componentNs + '-$1")');
+  }
+  done();
+});

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "component-css-ns",
+  "version": "0.0.1",
+  "description": "",
+  "dependencies": {
+    "browserify-transform-tools": "1.3.3"
+  },
+  "devDependencies": {
+    "browserify": "9.0.8",
+    "classnames": "1.2.1",
+    "react": "0.13.2",
+    "reactify": "1.1.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Jarno Rantanen <jarno@jrw.fi>",
+  "license": "MIT"
+}

test/browserify/MyComponent.jsx

@@ -0,0 +1,18 @@
+var React = require('react');
+var cx = require('classnames');
+var SubComponent = require('./SubComponent.jsx');
+
+module.exports = React.createClass({
+
+  render: function() {
+
+    return (
+      <div className="foo bar-x baz_y lib-herp">
+        <span className={cx({ derp: true })} />
+        <SubComponent />
+      </div>
+    );
+
+  }
+
+});

test/browserify/MyComponent.scss

@@ -0,0 +1,9 @@
+.foo {
+  .bar-x {
+    .baz_y {
+      color: red;
+    }
+  }
+}
+
+@import 'SubComponent';

test/browserify/SubComponent.jsx

@@ -0,0 +1,13 @@
+var React = require('react');
+
+module.exports = React.createClass({
+
+  render: function() {
+
+    return (
+      <div className="something" />
+    );
+
+  }
+
+});

test/browserify/SubComponent.scss

@@ -0,0 +1,3 @@
+.something {
+  color: blue;
+}

test/browserify/expected.out

@@ -0,0 +1,38 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+var React = require('react');
+var cx = require('classnames');
+var SubComponent = require('./SubComponent.jsx');
+
+module.exports = React.createClass({displayName: "exports",
+
+  render: function() {
+
+    return (
+      React.createElement("div", {className: "foo bar-x baz_y lib-herp".replace(/\b([a-z][a-zA-Z_-]*)/g, "MyComponent-$1")}, 
+        React.createElement("span", {className: cx({ derp: true }).replace(/\b([a-z][a-zA-Z_-]*)/g, "MyComponent-$1")}), 
+        React.createElement(SubComponent, null)
+      )
+    );
+
+  }
+
+});
+
+
+},{"./SubComponent.jsx":2,"classnames":undefined,"react":undefined}],2:[function(require,module,exports){
+var React = require('react');
+
+module.exports = React.createClass({displayName: "exports",
+
+  render: function() {
+
+    return (
+      React.createElement("div", {className: "something".replace(/\b([a-z][a-zA-Z_-]*)/g, "SubComponent-$1")})
+    );
+
+  }
+
+});
+
+
+},{"react":undefined}]},{},[1]);

test/browserify/node_modules/.bin

@@ -0,0 +1,5 @@
+{
+  "scripts": {
+    "test": "browserify --no-bundle-external -t [ reactify --es6 ] -t component-css-ns/browserify MyComponent.jsx"
+  }
+}