postcss-loader, postcss-easy-import, normalize.css and autoprefixer (#1352)

Author: orlin

examples/with-global-stylesheet/README.md

@@ -37,10 +37,13 @@ Another babel plugin [module-resolver](https://github.com/tleunen/babel-plugin-m
 
 The `sass-loader` is configured with `includePaths: ['styles', 'node_modules']` so that your scss can `@import` from those places, again without relative paths, for maximum convenience and ability to use npm-published libraries.  Furthermore, `glob` paths are also supported, so one could for example add `'node_modules/@material/*'` to the `includePaths`, which would make [material-components-web](https://github.com/material-components/material-components-web) (if you'd like) even easier to work with.
 
+Furthermore, PostCSS is used to [pre-process](https://blog.madewithenvy.com/webpack-2-postcss-cssnext-fdcd2fd7d0bd#.r6t2d0smy) both `css` and `scss` stylesheets, the latter after Sass pre-processing.  This is to illustrate `@import 'normalize.css';` from `node_modules` thanks to `postcss-easy-import`.  [Autoprefixer](https://github.com/postcss/autoprefixer) is also added as a "best practice".  Consider [cssnext](http://cssnext.io) instead, which includes `autoprefixer` as well as many other CSS spec features.
+
 This project shows how you can set it up. Have a look at:
 - .babelrc
 - next.config.js
 - pages/index.js
+- postcss.config.js
 - styles/index.scss
 
 Please, report any issue on enhancement related to this example to its original

examples/with-global-stylesheet/next.config.js

@@ -14,12 +14,12 @@ module.exports = {
     ,
       {
         test: /\.css$/,
-        use: ['babel-loader', 'raw-loader']
+        use: ['babel-loader', 'raw-loader', 'postcss-loader']
       }
     ,
       {
         test: /\.s(a|c)ss$/,
-        use: ['babel-loader', 'raw-loader',
+        use: ['babel-loader', 'raw-loader', 'postcss-loader',
           { loader: 'sass-loader',
             options: {
               includePaths: ['styles', 'node_modules']

examples/with-global-stylesheet/package.json

@@ -10,11 +10,15 @@
   "author": "Davide Bertola <dade@dadeb.it>",
   "license": "ISC",
   "dependencies": {
+    "autoprefixer": "6.7.6",
     "babel-plugin-module-resolver": "2.5.0",
     "babel-plugin-wrap-in-js": "^1.1.0",
     "glob": "7.1.1",
     "next": "^2.0.0-beta.18",
     "node-sass": "^4.4.0",
+    "normalize.css": "5.0.0",
+    "postcss-easy-import": "2.0.0",
+    "postcss-loader": "1.3.3",
     "raw-loader": "^0.5.1",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",

examples/with-global-stylesheet/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('postcss-easy-import')({prefix: '_'}), // keep this first
+    require('autoprefixer')({ /* ...options */ }) // so imports are auto-prefixed too
+  ]
+}

examples/with-global-stylesheet/styles/index.css

@@ -1,3 +1,5 @@
+@import 'normalize.css';
+
 p {
   font-size: xx-large;
   color: black;

examples/with-global-stylesheet/styles/index.scss

@@ -1,3 +1,5 @@
+@import 'normalize.css';
+
 $primary-color: black;
 
 p {