Add Stylus Support

README.md

@@ -10,7 +10,7 @@
 - Auto-generated [Service Workers] for offline caching powered by [sw-precache]
 - [PRPL](https://developers.google.com/web/fundamentals/performance/prpl-pattern/) pattern support for efficient loading
 - Zero-configuration pre-rendering / server-side rendering hydration
-- Support for CSS Modules, LESS & autoprefixer
+- Support for CSS Modules, LESS, Sass, Stylus; with Autoprefixer
 - Monitor your bundle/chunk sizes with built-in tracking
 - Automatic app mounting, debug helpers & Hot Module Replacement
 - In just **4.5kb** you get a productive environment:
@@ -56,6 +56,7 @@ $ preact create
               [Options: "default", "root", "simple", "empty"]     [default: "default"]
   --less      Pre-install LESS support.                [boolean]  [default: false]
   --sass      Pre-install SASS/SCSS support.           [boolean]  [default: false]
+  --stylus    Pre-install STYLUS support               [boolean]  [default: false]
   --git       Initialize version control using git.    [boolean]  [default: true]
 
 $ preact build

package.json

@@ -94,6 +94,8 @@
     "ncp": "^2.0.0",
     "node-sass": "^4.5.3",
     "sass-loader": "^6.0.6",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
     "uuid": "^3.0.1"
   },
   "dependencies": {

src/commands/create.js

@@ -49,6 +49,11 @@ export default asyncCommand({
 			type: 'boolean',
 			default: false
 		},
+		stylus: {
+			description: 'Pre-install STYLUS support',
+			type: 'boolean',
+			default: false
+		},
 		git: {
 			description: 'Initialize version control using git',
 			type: 'boolean',
@@ -141,6 +146,12 @@ export default asyncCommand({
 				...(argv.less ? [
 					'less',
 					'less-loader'
+				] : []),
+
+				// install stylus if --stylus
+				...(argv.stylus ? [
+					'stylus',
+					'stylus-loader'
 				] : [])
 			].filter(Boolean));
 

src/lib/webpack/webpack-base-config.js

@@ -60,7 +60,7 @@ export default (env) => {
 					'node_modules',
 					resolve(__dirname, '../../../node_modules')
 				],
-				extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.less', '.scss', '.sass', '.css'],
+				extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.less', '.scss', '.sass', '.styl','.css'],
 				alias: {
 					'preact-cli-entrypoint': src('index.js'),
 					style: src('style'),
@@ -97,7 +97,7 @@ export default (env) => {
 			}
 		}),
 
-		// LESS, SASS & CSS
+		// LESS, SASS & CSS, STYLUS
 		customConfig({
 			module: {
 				loaders: [
@@ -136,7 +136,24 @@ export default (env) => {
 						]
 					},
 					{
-						test: /\.(css|less|s[ac]ss)$/,
+						enforce: 'pre',
+						test: /\.styl$/,
+						use: [
+							{
+								loader: resolve(__dirname, './npm-install-loader'),
+								options: {
+									modules: ['stylus', 'stylus-loader'],
+									save: true
+								}
+							},
+							{
+								loader: 'stylus-loader',
+								options: { sourceMap: true }
+							}
+						]
+					},
+					{
+						test: /\.(css|less|s[ac]ss|styl)$/,
 						include: [
 							src('components'),
 							src('routes')
@@ -150,7 +167,7 @@ export default (env) => {
 						})
 					},
 					{
-						test: /\.(css|less|s[ac]ss)$/,
+						test: /\.(css|less|s[ac]ss|styl)$/,
 						exclude: [
 							src('components'),
 							src('routes')