diff --git a/README.md b/README.md index a79df9a39..b2de86a4e 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 11ad8a75a..5359fd609 100644 --- a/package.json +++ b/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": { diff --git a/src/commands/create.js b/src/commands/create.js index c93e69ad0..b1d12033f 100644 --- a/src/commands/create.js +++ b/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)); diff --git a/src/lib/webpack/webpack-base-config.js b/src/lib/webpack/webpack-base-config.js index c21e900ed..ee62a33f3 100644 --- a/src/lib/webpack/webpack-base-config.js +++ b/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')