Add supporting of Stylus

Author: A-gambit

.env

@@ -2,4 +2,5 @@ OPEN_BROWSER=false
 
 REACT_APP_SASS=true
 REACT_APP_LESS=true
-REACT_APP_CSS_MODULES=true
+REACT_APP_STYLUS=true
+REACT_APP_CSS_MODULES=true

README.md

@@ -26,6 +26,7 @@ The generated project comes with SASS, LESS, and CSS modules support by default,
 #### Styling
 - ```REACT_APP_SASS=true``` - enable SASS support
 - ```REACT_APP_LESS=true``` - enable LESS support
+- ```REACT_APP_STYLUS=true``` - enable Stylus support
 - ```REACT_APP_CSS_MODULES``` - enable CSS modules
 
 #### Babel
@@ -60,4 +61,4 @@ I just added support for extra environment variables that actually turn on certa
 
 ### Future plans
 
-I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions.
+I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions.

packages/react-scripts/README.md

@@ -10,6 +10,7 @@ The reason for this fork's existence is explained better in [this Medium article
 * babel-preset-stage-0
 * LESS
 * SASS
+* Stylus
 * CSS modules
 
 **the features are optional and can be turned on/off individually*
@@ -26,6 +27,7 @@ The generated project comes with SASS, LESS, and CSS modules support by default,
 #### Styling
 - ```REACT_APP_SASS=true``` - enable SASS support
 - ```REACT_APP_LESS=true``` - enable LESS support
+- ```REACT_APP_STYLUS=true``` - enable Stylus support
 - ```REACT_APP_CSS_MODULES``` - enable CSS modules
 
 #### Babel
@@ -60,4 +62,4 @@ I just added support for extra environment variables that actually turn on certa
 
 ### Future plans
 
-I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions.
+I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions.

packages/react-scripts/bin/CUSTOM_README.md

@@ -26,6 +26,7 @@ The generated project comes with SASS, LESS, and CSS modules support by default,
 #### Styling
 - ```REACT_APP_SASS=true``` - enable SASS support
 - ```REACT_APP_LESS=true``` - enable LESS support
+- ```REACT_APP_STYLUS=true``` - enable Stylus support
 - ```REACT_APP_CSS_MODULES``` - enable CSS modules
 
 #### Babel
@@ -60,4 +61,4 @@ I just added support for extra environment variables that actually turn on certa
 
 ### Future plans
 
-I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions.
+I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions.

packages/react-scripts/config/customizers.js

@@ -43,10 +43,25 @@ module.exports = {
       }
     }
   },
+  'STYLUS': {
+    toArray: 'loaders',
+    getDev: function () {
+      return {
+        test: /\.styl/,
+        loader: 'style!css!postcss!stylus'
+      }
+    },
+    getProd: function () {
+      return {
+        test: /\.styl/,
+        loader: ExtractTextPlugin.extract('style', 'css!postcss!stylus')
+      }
+    }
+  },
   'CSS_MODULES': {
     config: {
       dev: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss',
       prod: 'style!css?modules&-autoprefixer&importLoaders=1!postcss'
     }
   }
-}
+}

packages/react-scripts/package.json

@@ -68,6 +68,7 @@
     "rimraf": "2.5.4",
     "strip-ansi": "3.0.1",
     "style-loader": "0.13.1",
+    "stylus-loader": "2.3.1",
     "url-loader": "0.5.7",
     "webpack": "1.13.2",
     "webpack-dev-server": "1.16.1",

packages/react-scripts/template/.env

@@ -1,3 +1,4 @@
 REACT_APP_SASS=true
 REACT_APP_LESS=true
-REACT_APP_CSS_MODULES=true
+REACT_APP_STYLUS=true
+REACT_APP_CSS_MODULES=true

packages/react-scripts/template/src/App.js

@@ -4,6 +4,7 @@ import logo from './logo.svg';
 //styles
 import './App.less';
 import './App.scss';
+import './App.styl';
 import styles from './Modules.css';
 
 class App extends Component {
@@ -37,6 +38,10 @@ class App extends Component {
               <code>REACT_APP_LESS=true</code>
               <span>- Enable LESS</span>
             </li>
+            <li>
+              <code>REACT_APP_STYLUS=true</code>
+              <span>- Enable Stylus</span>
+            </li>
             <li>
               <code>REACT_APP_CSS_MODULES=true</code>
               <span>- Enable CSS modules </span>

packages/react-scripts/template/src/App.styl

@@ -0,0 +1,21 @@
+.App
+  text-align center
+
+.App-logo
+  animation App-logo-spin infinite 20s linear
+  height 80px
+
+.App-header
+  background-color #222
+  height 150px
+  padding 20px
+  color white
+
+.App-intro
+  font-size large
+
+@keyframes App-logo-spin
+  from
+    transform rotate(0deg)
+  to
+    transform rotate(360deg)