Merge pull request #17 from DoSomething/allowing-project-based-postcs…

…s-loaders

Removing postcss loader from default configuration.

README.md

@@ -3,7 +3,8 @@
 This is our shared [Webpack](http://webpack.github.io) config used for front-end projects at DoSomething.org. It compiles JavaScript with [Babel](https://babeljs.io), SCSS with [LibSass](http://sass-lang.com/libsass), and CSS with [Autoprefixer](https://github.com/postcss/autoprefixer). It is also configured to add hashes to filenames for easy caching, and inlines images and fonts as Data URIs if small enough.
 
 ### Getting Started
-Install this package and Webpack via NPM: 
+
+Install this package and Webpack via NPM:
 
 ```
 npm install webpack @dosomething/webpack-config --save-dev
@@ -25,24 +26,40 @@ Add some scripts to your `package.json`:
 Create a `webpack.config.js` in your project directory, and set it up like so:
 
 ```js
+// webpack.config.js
+
 var webpack = require('webpack');
 var configure = require('@dosomething/webpack-config');
 
 module.exports = configure({
   entry: {
     // Add your bundles here, so in this case
     // ./src/app.js ==> ./dist/app-[hash].js
-    app: './src/app.js'
-  }
+    app: './src/app.js',
+  },
 
   // Override any other Webpack settings here!
   // see: https://webpack.js.org/configuration/
 });
 ```
 
+This package uses [PostCSS](https://postcss.org/) to post-process your stylesheets, so you will need to create a `postcss.config.js` in your project directory:
+
+```js
+// postcss.config.js
+
+module.exports = {
+  sourceMap: true,
+  plugins: [require('tailwindcss'), require('autoprefixer')],
+};
+```
+
+For example, the above configuration post-processes your CSS with TailwindCSS and Autoprefixer.
+
 Now you can run `npm start` to build with source maps and watch for changes, and `npm run build` to build optimized assets for production! If you need to further customize your build, you can pass any overrides in to the configure function.
 
 ### License
+
 © DoSomething.org. Our Webpack config is free software, and may be redistributed under the
 terms specified in the [LICENSE](https://github.com/DoSomething/webpack-config/blob/master/LICENSE) file. The
 name and logo for DoSomething.org are trademarks of Do Something, Inc and may not be used without permission.

index.js

@@ -1,77 +1,79 @@
 const webpack = require('webpack');
+const merge = require('webpack-merge');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const WebpackAssetsManifest = require('webpack-assets-manifest');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-const merge = require('webpack-merge');
-
-// PostCSS loader w/ options.
-const postcss = {
-    loader: 'postcss-loader',
-    options: {
-        sourceMap: true,
-        plugins: function() {
-            return [
-                // Automatically add vendor prefixes using Autoprefixer.
-                require('autoprefixer')(),
-            ];
-        }
-    }
-
-}
 
 // Default Webpack configuration
 // @see: https://webpack.js.org/configuration/
 const baseConfig = {
-    entry: {
-        // ...
-    },
-
-    output: {
-        filename: '[name]-[chunkhash].js',
-        path: 'dist',
-    },
-
-    module: {
-        rules: [
-            // Bundle JavaScript, and transform to ES5 using Babel.
-            { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] },
-
-            // Bundle static assets, either hashing filename or inlining into bundle if under 8KB
-            { test: /\.(png|jpe?g|eot|gif|woff2?|svg|ttf)$/, use: ['url-loader?limit=8192'] },
-
-            // Bundle CSS stylesheets and process with PostCSS, extract to single CSS file per bundle.
-            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader?sourceMap', postcss] },
-
-            // Bundle SCSS stylesheets (processed with LibSass & PostCSS), extract to single CSS file per bundle.
-            { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader?sourceMap', postcss, 'sass-loader?sourceMap'] }
-        ]
-    },
-
-    plugins: [
-        // Extract all stylesheets referenced in each bundle into a single CSS file.
-        new MiniCssExtractPlugin({
-          filename: "[name]-[chunkhash].css",
-          chunkFilename: "[id].css"
-        }),
-
-        // Create asset manifest (allowing Laravel or other apps to get hashed asset names).
-        new WebpackAssetsManifest({
-          output: 'rev-manifest.json',
-        }),
+  entry: {
+    // ...
+  },
+
+  output: {
+    filename: '[name]-[chunkhash].js',
+    path: 'dist',
+  },
+
+  module: {
+    rules: [
+      // Bundle JavaScript, and transform to ES5 using Babel.
+      { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] },
+
+      // Bundle static assets, either hashing filename or inlining into bundle if under 8KB
+      {
+        test: /\.(png|jpe?g|eot|gif|woff2?|svg|ttf)$/,
+        use: ['url-loader?limit=8192'],
+      },
+
+      // Bundle CSS stylesheets and process with PostCSS, extract to single CSS file per bundle.
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader?sourceMap',
+          'postcss-loader',
+        ],
+      },
+
+      // Bundle SCSS stylesheets (processed with LibSass & PostCSS), extract to single CSS file per bundle.
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader?sourceMap',
+          'postcss-loader',
+          'sass-loader?sourceMap',
+        ],
+      },
     ],
-
-
-    stats: {
-        // Don't print noisy output for extracted CSS children.
-        children: false,
-    },
+  },
+
+  plugins: [
+    // Extract all stylesheets referenced in each bundle into a single CSS file.
+    new MiniCssExtractPlugin({
+      filename: '[name]-[chunkhash].css',
+      chunkFilename: '[id].css',
+    }),
+
+    // Create asset manifest (allowing Laravel or other apps to get hashed asset names).
+    new WebpackAssetsManifest({
+      output: 'rev-manifest.json',
+    }),
+  ],
+
+  stats: {
+    // Don't print noisy output for extracted CSS children.
+    children: false,
+  },
 };
 
 // Options that should only be applied in development builds:
 const developmentConfig = {
   // Set common development options. <goo.gl/3h6o6p>
   mode: 'development',
-  
+
   // Enable source maps for development (inline, with faster rebuilds).
   devtool: 'cheap-module-source-map',
 };
@@ -91,7 +93,7 @@ const productionConfig = {
 module.exports = options => env => {
   const isProduction = env === 'production';
   const environmentConfig = isProduction ? productionConfig : developmentConfig;
-  
+
   // Merge our base config, environment overrides, and per-app overrides.
   const config = merge(baseConfig, environmentConfig, options);
 
@@ -109,4 +111,3 @@ module.exports = options => env => {
 
   return merge(config, extraConfig);
 };
-