From 563856f477d8ee03912ff2045cd15707bf9d8fea Mon Sep 17 00:00:00 2001
From: Orlin M Bozhinov <om@soundsapiens.com>
Date: Sun, 5 Mar 2017 17:48:37 +0200
Subject: [PATCH] postcss-loader, postcss-easy-import, normalize.css and
 autoprefixer (#1352)

---
 examples/with-global-stylesheet/README.md         | 3 +++
 examples/with-global-stylesheet/next.config.js    | 4 ++--
 examples/with-global-stylesheet/package.json      | 4 ++++
 examples/with-global-stylesheet/postcss.config.js | 6 ++++++
 examples/with-global-stylesheet/styles/index.css  | 2 ++
 examples/with-global-stylesheet/styles/index.scss | 2 ++
 6 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 examples/with-global-stylesheet/postcss.config.js

diff --git a/examples/with-global-stylesheet/README.md b/examples/with-global-stylesheet/README.md
index c337a0ae..42605f2e 100644
--- a/examples/with-global-stylesheet/README.md
+++ b/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
diff --git a/examples/with-global-stylesheet/next.config.js b/examples/with-global-stylesheet/next.config.js
index ce788fab..f8935363 100644
--- a/examples/with-global-stylesheet/next.config.js
+++ b/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']
diff --git a/examples/with-global-stylesheet/package.json b/examples/with-global-stylesheet/package.json
index 00a16770..6d0ff1b2 100644
--- a/examples/with-global-stylesheet/package.json
+++ b/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",
diff --git a/examples/with-global-stylesheet/postcss.config.js b/examples/with-global-stylesheet/postcss.config.js
new file mode 100644
index 00000000..6c583f46
--- /dev/null
+++ b/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
+  ]
+}
diff --git a/examples/with-global-stylesheet/styles/index.css b/examples/with-global-stylesheet/styles/index.css
index 13088067..d9ad8c13 100644
--- a/examples/with-global-stylesheet/styles/index.css
+++ b/examples/with-global-stylesheet/styles/index.css
@@ -1,3 +1,5 @@
+@import 'normalize.css';
+
 p {
   font-size: xx-large;
   color: black;
diff --git a/examples/with-global-stylesheet/styles/index.scss b/examples/with-global-stylesheet/styles/index.scss
index 1306155d..552f230c 100644
--- a/examples/with-global-stylesheet/styles/index.scss
+++ b/examples/with-global-stylesheet/styles/index.scss
@@ -1,3 +1,5 @@
+@import 'normalize.css';
+
 $primary-color: black;
 
 p {