Release 1.2.0. Thanks @moret 👏

Author: Rick

README.md

@@ -1,16 +1,16 @@
 ![screenshot](https://i.imgur.com/7Pop4SZ.png?1)
 
-# React Inline Css
+# React Inline CSS
 
-Make your React components visually predictable. React Inline Css  allows you to write traditional CSS stylesheets in your components, automatically namespacing them for you.
+Make your React components visually predictable. React Inline CSS allows you to write traditional CSS stylesheets in your components, automatically namespacing them for you.
 
 Inspired by the [SUIT CSS](https://suitcss.github.io/) methodology.
 
-## Demo:
+## Demo
 
 [Mao-mao-mao!](https://edealer.nl/mao)
 
-## Example:
+## Example
 
 You write:
 
@@ -73,46 +73,49 @@ You get namespaced CSS that works on sub-components (comparable to HTML5 `<style
 
 For a cascaded effect, see the `index.html` demo.
 
-## Options
+## Installation
+
+	npm install --save react-inline-css
+
+## Usage
+
+Run `npm run watch` in your terminal and play with `examples.jsx` to get a feel of react-inline-css.
 
-### Component Name
+### SASS / LESS
 
-You can override the `&` as the default selector to the current component. This is useful if you want to require the css from an external file and make any precompilations steps with it. Here's an ES6 example with [SASS loader for Webpack](https://www.npmjs.com/package/sass-loader):
+You can override the `&` as the selector to the current component. This is useful if you want to require precompiled stylesheets from an external file. Here's an example with [SASS loader for Webpack](https://www.npmjs.com/package/sass-loader):
 
-**component.js**
+**UserComponent.js**
 ```javascript
-import React from 'react';
-import InlineCss from 'react-inline-css';
-let css = require('!raw!sass!./component.scss');
-
-class Component extends React.Component {
-  render() {
-  	return (
-  		<InlineCss componentName='base' stylesheet={css}>
-  			<div className='facebook'>Mao is no longer red!</div>
-  			<div className='google'>Mao is no longer red!</div>
-  			<div className='twitter'>Mao is no longer red!</div>
-  		</InlineCss>
-  	);
-  }
-};
+import React from "react";
+import InlineCss from "react-inline-css";
+const stylesheet = require("!raw!sass!./component.scss"); // Precompile SASS
 
-export default Transmit.createContainer(Component);
+class UserComponent extends React.Component {
+	render () {
+		return (
+			<InlineCss componentName="UserComponent" stylesheet={stylesheet}>
+				<div className="facebook">Mao is no longer red!</div>
+				<div className="google">Mao is no longer red!</div>
+				<div className="twitter">Mao is no longer red!</div>
+			</InlineCss>
+		);
+	}
+};
 ```
 
-**component.css**
+**UserComponent.scss**
 ```scss
-base {
+UserComponent {
 	color: red;
-
 	.facebook {
-	  color: blue;
+		color: blue;
 	}
 	.google {
-	  color: blue;
+		color: blue;
 	}
 	.twitter {
-	  color: green;
+		color: green;
 	}
 }
 ```
@@ -121,19 +124,14 @@ base {
 
 ![screenshot](https://i.imgur.com/e3ErqTz.png?1)
 
-
-## Installation
-
-	npm install --save react-inline-css
-
-## Usage
-
-Run `npm run watch` in your terminal and play with `examples.jsx` to get a feel of react-inline-css.
-
 ## Community
 
 Let's start one together! After you ★Star this project, follow me [@Rygu](https://twitter.com/rygu)
-on Twitter.
+on Twitter. 
+
+### Contributors
+
+- [Danilo Moret](https://github.com/moret)
 
 ## License
 

package.json

@@ -1,8 +1,8 @@
 {
   "name": "react-inline-css",
   "description": "Inline CSS in your React components, namespaced automatically.",
-  "version": "1.1.1",
-  "license": "BSD-3",
+  "version": "1.2.0",
+  "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
     "url": "https://github.com/RickWong/react-inline-css.git"

src/example/Profile.js

@@ -6,16 +6,16 @@ import InlineCss from "../react-inline-css";
  */
 const Profile = React.createClass({
 	statics: {
-		css: () => `
+		css: (avatarSize) => `
 			& .card {
 				margin: 15px;
 				padding: 15px;
 				text-align: center;
 				height: 200px;
 			}
 			& .card > img {
-				width: 130px;
-				height: 130px;
+				width: ${avatarSize}px;
+				height: ${avatarSize}px;
 			}
 			& .card > p {
 				margin: 10px;
@@ -24,7 +24,7 @@ const Profile = React.createClass({
 	},
 	render: function () {
 		return (
-			<InlineCss stylesheet={Profile.css()}>
+			<InlineCss stylesheet={Profile.css(130)}>
 				<div className="card">
 					<img src={this.props.image || 'mao.jpg'} />
 					<p>{this.props.name || 'Default Mao'}</p>

src/example.js renamed to src/example/index.js

@@ -1,9 +1,9 @@
 import React from "react";
-import InlineCss from "./react-inline-css"
-import Profile from "./example/Profile";
-import FacebookProfile from "./example/FacebookProfile";
-import GoogleProfile from "./example/GoogleProfile";
-import TwitterProfile from "./example/TwitterProfile";
+import InlineCss from "./../react-inline-css"
+import Profile from "./Profile";
+import FacebookProfile from "./FacebookProfile";
+import GoogleProfile from "./GoogleProfile";
+import TwitterProfile from "./TwitterProfile";
 
 /**
  * @module Main
@@ -36,8 +36,8 @@ const Main = React.createClass({
 						src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
 						alt="Fork me on GitHub" />
 				</a>
-				<h2>React Inline Css</h2>
-				<p>React Inline Css allows you to cascade CSS stylesheets on your components, automatically namespacing them.</p>
+				<h2>React Inline CSS</h2>
+				<p>React Inline CSS allows you to cascade CSS stylesheets on your components, automatically namespacing them.</p>
 				<Profile />
 				<FacebookProfile name="Facebook Mao" image="mao2.png" />
 				<GoogleProfile name="Google Mao" image="mao3.png" />

src/react-inline-css.js

@@ -12,11 +12,11 @@ var InlineCss = React.createClass({
 	displayName: "InlineCss",
 	propTypes: {
 		componentName: React.PropTypes.string,
-		stylesheet: React.PropTypes.string.isRequired,
 		namespace: React.PropTypes.string,
+		stylesheet: React.PropTypes.string.isRequired,
 		wrapper: React.PropTypes.string
 	},
-	_transformSheet: function (stylesheet, namespace, componentName) {
+	_transformSheet: function (stylesheet, componentName, namespace) {
 		return stylesheet.
 			// Prettier output.
 			replace(/}\s*/ig, '\n}\n').
@@ -30,19 +30,17 @@ var InlineCss = React.createClass({
 	},
 	render: function () {
 		var componentName = this.props.componentName || "&";
-		var Wrapper = this.props.wrapper || "div";
-		var namespace = this.props.namespace || "InlineCss-" + refCounter++;
-		var transformedSheet = this._transformSheet(
-			this.props.stylesheet, namespace, componentName
-		);
+		var namespace     = this.props.namespace || "InlineCss-" + refCounter++;
+		var stylesheet    = this._transformSheet(this.props.stylesheet, componentName, namespace);
+		var Wrapper       = this.props.wrapper || "div";
 
 		return React.createElement(
 			Wrapper,
 			{id: namespace},
 			this.props.children,
 			React.createElement("style", {
 				scoped:                  true,
-				dangerouslySetInnerHTML: {__html: transformedSheet}
+				dangerouslySetInnerHTML: {__html: stylesheet}
 			})
 		);
 	}

webpack.client-watch.js

@@ -5,17 +5,12 @@ config.cache = true;
 config.debug = true;
 config.devtool = "eval";
 
-config.entry.unshift(
-	"webpack-dev-server/client?http://localhost:8080",
-	"webpack/hot/only-dev-server"
-);
+config.entry.WDS = "webpack-dev-server/client?http://localhost:8080";
+config.entry.hot = "webpack/hot/only-dev-server";
 
-config.module = {
-	loaders: [
-		{include: /\.json$/, loaders: ["json-loader"]},
-		{include: /\.js$/, loaders: ["react-hot", "babel-loader"], exclude: /node_modules/}
-	]
-};
+config.module.postLoaders = [
+	{test: /\.js$/, loaders: ["react-hot"], exclude: /node_modules/}
+];
 
 config.output.publicPath = "http://localhost:8080/dist/";
 config.output.hotUpdateMainFilename = "update/[hash]/update.json";

webpack.client.js

@@ -9,7 +9,7 @@ module.exports = {
 	entry:   ["./src/example"],
 	output:  {
 		path:          path.join(__dirname, "static/dist"),
-		filename:      "example.js",
+		filename:      "[name].js",
 		chunkFilename: "[name].[id].js",
 		publicPath:    "dist/"
 	},
@@ -21,8 +21,9 @@ module.exports = {
 	],
 	module:  {
 		loaders: [
-			{include: /\.json$/, loaders: ["json-loader"]},
-			{include: /\.js$/, loaders: ["babel-loader"], exclude: /node_modules/}
+			{test: /\.json$/, loaders: ["json-loader"]},
+			{test: /\.js$/, loaders: ["babel-loader"], exclude: /node_modules/},
+			{test: /\.scss$/, loaders: ["raw-loader", "sass-loader"], exclude: /node_modules/}
 		]
 	},
 	resolve: {