feat(webpack, cli): improve usages

postcss, cssnext, pretty output, css-modules, clean before bundle

example/fixture.css

@@ -1,14 +1,18 @@
+:root {
+	--hey: #ccc;
+}
 html {
-	body {
+	& body {
 		margin: 320px;
 		opacity: .4;
 		font-size: responsive;
 		display: flex;
+		color: var(--hey);
 	}
-	button {
+	& button {
 		padding: 100px;
 	}
-	.logo {
+	& .logo {
 		height: 60px;
 		width: 200px;
 		background-size: cover;

lib/webpack.config.base.js

@@ -4,12 +4,13 @@
  * Module dependencies
  */
 const Path = require('path')
-const objectString = require('object-string')
 const webpack = require('webpack')
+const deepAssign = require('deep-assign')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const NpmInstallPlugin = require('npm-install-webpack-plugin')
+const $ = require('shelljs')
 const loadToolingConfig = require('./loadToolingConfig')
 
 /**
@@ -26,11 +27,6 @@ function dir(fp) {
 	return Path.join(__dirname, '../', fp)
 }
 
-/**
- * Loading tooling config from package.json in cwd
- */
-const toolingConfig = loadToolingConfig()
-
 /**
  * Return a basic webpack config
  *
@@ -39,11 +35,19 @@ const toolingConfig = loadToolingConfig()
  * @returns {Object} webpack config
  */
 module.exports = function (type, options) {
+	/**
+	 * Loading tooling config from package.json in cwd
+	 */
+	const toolingConfig = loadToolingConfig()
+	options = deepAssign(toolingConfig, options)
+
+	const outputPath = cwd(options.dest || 'build')
+
 	const config = {
 		devtool: type === 'watch' ? 'cheap-module-eval-source-map' : 'source-map',
-		entry: options.entry ? objectString(options.entry) : 'src/index',
+		entry: options.entry || 'src/index',
 		output: {
-			path: cwd(options.dest || 'build'),
+			path: outputPath,
 			filename: 'bundle.js',
 			publicPath: './'
 		},
@@ -87,18 +91,27 @@ module.exports = function (type, options) {
 			presets: [require('babel-preset-es2015'), require('babel-preset-stage-0')],
 			plugins: [require('babel-plugin-transform-runtime')]
 		},
-		postcss: [
+		plugins: []
+	}
+	// for both watch and build
+	if (options.cssnext) {
+		config.postcss = [
+			require('postcss-cssnext')(options.cssnext)
+		]
+	} else {
+		config.postcss = [
 			require('precss'),
 			require('rucksack-css')({
 				autoprefixer: {
-					browers: ['last 2 version', 'ie > 7']
+					browers: options.browsers
 				},
-				fallbacks: true
+				fallbacks: options.fallbacks === undefined ? true : options.fallbacks
 			})
-		],
-		plugins: []
+		]
 	}
-	// for both watch and build
+	const postcssLoader = options.cssmodules
+		? 'css-loader?modules&importLoaders=1!postcss-loader'
+		: 'css-loader!postcss-loader'
 	// set format
 	if (options.umd) {
 		config.output.libraryTarget = 'umd'
@@ -117,7 +130,7 @@ module.exports = function (type, options) {
 				title: options.title || 'Tooling',
 				template: dir('lib/index.jade'),
 				inject: false
-			}, toolingConfig.index))
+			}, options.index))
 		)
 	}
 
@@ -139,7 +152,7 @@ module.exports = function (type, options) {
 		config.module.loaders.push(
 			{
 				test: /\.css$/,
-				loaders: ['style', 'css', 'postcss']
+				loader: `style-loader!${postcssLoader}`
 			}
 		)
 		// add plugins
@@ -167,14 +180,17 @@ module.exports = function (type, options) {
 			}))
 		}
 	} else if (type === 'build') {
+		if (options.clean) {
+			$.rm('-r', outputPath)
+		}
 		// add hash to bundled filename
 		// so that it supports long term caching
 		config.output.filename = options.filename || 'bundle.[chunkhash].js'
 		// exteact css into a single file
 		config.module.loaders.push(
 			{
 				test: /\.css$/,
-				loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
+				loader: ExtractTextPlugin.extract('style-loader', postcssLoader)
 			}
 		)
 		config.plugins = config.plugins.concat([
@@ -187,14 +203,16 @@ module.exports = function (type, options) {
 				}
 			}),
 			/*eslint-enable */
-			new webpack.optimize.UglifyJsPlugin({
+			new ExtractTextPlugin('styles.[contenthash].css')
+		])
+		if (!options.pretty) {
+			config.plugins.push(new webpack.optimize.UglifyJsPlugin({
 				compressor: {
 					warnings: false
 				},
 				comments: false
-			}),
-			new ExtractTextPlugin('styles.[contenthash].css')
-		])
+			}))
+		}
 	}
 	return config
 }

package.json

@@ -48,22 +48,24 @@
     "browser-sync-webpack-plugin": "^1.0.1",
     "commander": "^2.9.0",
     "css-loader": "^0.23.1",
+    "deep-assign": "^2.0.0",
     "extract-text-webpack-plugin": "^0.9.1",
     "file-loader": "^0.8.5",
     "html-webpack-plugin": "^2.8.1",
     "jade": "^1.11.0",
     "jade-loader": "^0.8.0",
     "json-loader": "^0.5.4",
     "npm-install-webpack-plugin": "^2.0.0",
-    "object-string": "0.0.1",
     "open": "0.0.5",
     "path-exists": "^2.1.0",
+    "postcss-cssnext": "^2.4.0",
     "postcss-loader": "^0.8.0",
     "precss": "^1.3.0",
     "raw-loader": "^0.5.1",
     "react": "^0.14.5",
     "react-dom": "^0.14.5",
     "rucksack-css": "^0.8.5",
+    "shelljs": "^0.6.0",
     "style-loader": "^0.13.0",
     "update-notifier": "^0.6.0",
     "url-loader": "^0.5.7",
@@ -98,6 +100,10 @@
     ]
   },
   "testen": {
-    "node": ["4.0.0", "4.2.4", "5.6.0"]
+    "node": [
+      "4.0.0",
+      "4.2.4",
+      "5.6.0"
+    ]
   }
 }

readme.md

@@ -14,8 +14,6 @@
 	<a href="https://github.com/semantic-release/semantic-release"><img src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg" alt="semantic-release" style="max-width:100%;"></a>
 </p>
 
-**NOTICE:** Tooling 1.0 is currently under heavily development on [next branch](https://github.com/egoist/tooling/tree/next), cli usage may change a lot when 1.0 lands.
-
 ## Purpose
 
 You always need to configure webpack for each of your projects, drop `webpack.config.dev.js` `webpack.config.prod.js` for development and production envs. Install tons of common modules like loaders and frameworks. Tooling is just an apporach to skip that verbose procedure.
@@ -55,9 +53,12 @@ Build a project in production mode:
 tooling build --entry [entry]
 
 # multi entry support
---entry example # => example[.ext] or example/index[.ext]
---entry app.js,app.css # => ['app.js', 'app.css']
---entry js:app.js,css:app.css # => {js: 'app.js', css: 'app.css'}
+# configure this is `package.json`
+{
+	"tooling": {
+		"entry": whatever...
+	}
+}
 ```
 
 Run dev server with hot reloading:
@@ -72,7 +73,7 @@ Run `tooling -h` `tooling watch -h` `tooling build -h` to see more usages.
 
 **Set up custom index.html in `package.json`**. see usage at [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin)
 
-```
+```json
 {
 	"name": "My tooling app",
 	"tooling": {
@@ -84,6 +85,8 @@ Run `tooling -h` `tooling watch -h` `tooling build -h` to see more usages.
 }
 ```
 
+If it's complex to configure via CLI arguments (like multi entry), feel free to set in `package.json`.
+
 For advanced usage: [Wiki](https://github.com/egoist/tooling/wiki)
 
 ## API

tooling

@@ -24,6 +24,8 @@ program
 	.option('--umd <libraryName>', 'UMD format')
 	.option('--cjs', 'CommonJS format')
 	.option('-t, --target [webpackTarget]', 'Set webpack target')
+	.option('--cssnext', 'Use cssnext')
+	.option('--cssmodules', 'Use css-modules')
 	.action(watch)
 
 program
@@ -38,6 +40,10 @@ program
 	.option('-d, --dest [bundleDestDir]', 'Set bundled file dest directory')
 	.option('--filename <bundleFileName>', 'Set bundled filename')
 	.option('--disable-html', 'Do not include html-webpack-plugin')
+	.option('--cssnext', 'Use cssnext')
+	.option('--pretty', 'Do not compress bundled files')
+	.option('--clean', 'Clean output path before bundle')
+	.option('--cssmodules', 'Use css-modules')
 	.action(build)
 
 program.parse(process.argv)