From ab98751f9097c7b9fdf7d0206ab9f0dd82f6d3a2 Mon Sep 17 00:00:00 2001
From: ColCh <colouredchalkmelky@gmail.com>
Date: Sun, 2 Nov 2014 16:08:48 +0300
Subject: [PATCH] Use styles within templates

---
 templates/common/_package.json           |  5 ++++-
 templates/common/_webpack.config.js      | 11 ++++++++++-
 templates/common/_webpack.dist.config.js | 11 ++++++++++-
 templates/javascript/Component.jsx       |  5 ++++-
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/templates/common/_package.json b/templates/common/_package.json
index 3b8c387..d17a184 100644
--- a/templates/common/_package.json
+++ b/templates/common/_package.json
@@ -35,7 +35,10 @@
     "grunt-open": "~0.2.3",
     "jshint-loader": "~0.8.0",
     "grunt-contrib-copy": "~0.5.0",
-    "grunt-contrib-clean": "~0.6.0",
+    "grunt-contrib-clean": "~0.6.0",<% if (stylesLanguage === 'sass') { %>
+    "sass-loader": "^0.2.0",<% } %><% if (stylesLanguage === 'less') { %>
+    "less-loader": "^0.7.7",<% } %><% if (stylesLanguage === 'stylus') { %>
+    "stylus-loader": "^0.4.0",<% } %>
     "react-hot-loader": "^0.4.5"
   }
 }
diff --git a/templates/common/_webpack.config.js b/templates/common/_webpack.config.js
index d66ea2b..76e5f35 100644
--- a/templates/common/_webpack.config.js
+++ b/templates/common/_webpack.config.js
@@ -41,7 +41,16 @@ module.exports = {
     loaders: [{
       test: /\.jsx$/,
       loader: 'react-hot!jsx-loader?harmony'
-    }, {
+    },<% if (stylesLanguage === 'sass') { %> {
+      test: /\.sass/,
+      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
+    },<% } %><% if (stylesLanguage === 'less') { %> {
+      test: /\.less/,
+      loader: 'style-loader!css-loader!less-loader'
+    },<% } %><% if (stylesLanguage === 'stylus') { %> {
+      test: /\.styl/,
+      loader: 'style-loader!css-loader!stylus-loader'
+    },<% } %> {
       test: /\.css$/,
       loader: 'style-loader!css-loader'
     }, {
diff --git a/templates/common/_webpack.dist.config.js b/templates/common/_webpack.dist.config.js
index 287c0be..45ef333 100644
--- a/templates/common/_webpack.dist.config.js
+++ b/templates/common/_webpack.dist.config.js
@@ -49,7 +49,16 @@ module.exports = {
     }, {
       test: /\.css$/,
       loader: 'style-loader!css-loader'
-    }, {
+    },<% if (stylesLanguage === 'sass') { %> {
+      test: /\.sass/,
+      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
+    },<% } %><% if (stylesLanguage === 'less') { %> {
+      test: /\.less/,
+      loader: 'style-loader!css-loader!less-loader'
+    },<% } %><% if (stylesLanguage === 'stylus') { %> {
+      test: /\.styl/,
+      loader: 'style-loader!stylus-loader!less-loader'
+    },<% } %> {
       test: /\.(png|jpg)$/,
       loader: 'url-loader?limit=8192'
     }]
diff --git a/templates/javascript/Component.jsx b/templates/javascript/Component.jsx
index 7ce6a48..ae0869a 100644
--- a/templates/javascript/Component.jsx
+++ b/templates/javascript/Component.jsx
@@ -5,7 +5,10 @@
 'use strict';
 
 var React = require('react/addons');
-require('../../styles/<%= classedName %>.css');
+<% if (stylesLanguage === 'css') { %>require('../../styles/<%= classedName %>.css');<% } %>
+<% if (stylesLanguage === 'sass') { %>require('../../styles/<%= classedName %>.sass');<% } %>
+<% if (stylesLanguage === 'less') { %>require('../../styles/<%= classedName %>.less');<% } %>
+<% if (stylesLanguage === 'stylus') { %>require('../../styles/<%= classedName %>.styl');<% } %>
 
 var <%= classedName %> = React.createClass({
   render: function () {