Update example with-scoped-stylesheets-and-postcss (#1606)

Fixes #1191

examples/with-scoped-stylesheets-and-postcss/.babelrc

@@ -1,10 +0,0 @@
-{
-  "presets": [
-    "next/babel"
-  ],
-  "plugins": [
-    ["wrap-in-js", {
-      "extensions": ["css$"]
-    }]
-  ]
-}

examples/with-scoped-stylesheets-and-postcss/README.md

@@ -29,26 +29,6 @@ now
 
 Scoped CSS is neat and keeps your JS clean. PostCSS is amazing for extended features, such as nesting. CSS Modules keep your class names “local”.
 
-# Known bugs
+# Known issues
 
-There's a bug, possibly within `next.js`, making composition between files unuseable. Consider the following:
+Composed CSS files are not watched by next.js, and thus, if you change one, nothing will happen. You'll need to edit a JS file or the CSS file you're composing for it to hot reload.
-
-*`styles.css`*
-```css
-.paragraph {
-  composes: font-sans from '../global.css';
-}
-```
-
-*`global.css`*
-```css
-.font-sans {
-  font-family: georgia; /* ;) */
-}
-```
-
-The following error is thrown:
-
-```
-Module build failed: Error: Cannot find module '-!./../node_modules/css-loader/index.js??ref--6-4!./../node_modules/postcss-loader/index.js!../global.css'
-```

examples/with-scoped-stylesheets-and-postcss/next.config.js

@@ -1,3 +1,5 @@
+const trash = require('trash')
+
 module.exports = {
   webpack: (config) => {
     config.module.rules.push(
@@ -10,27 +12,21 @@ module.exports = {
               name: 'dist/[path][name].[ext]'
             }
           },
-          'raw-loader',
-          'val-loader',
           {
             loader: 'skeleton-loader',
             options: {
-              procedure: (content) => (
+              procedure: function (content) {
-                `${content} \n` + ['module.exports = {',
+                const fileName = `${this._module.userRequest}.json`
-                  'stylesheet: module.exports.toString(),',
+                const classNames = JSON.stringify(require(fileName))
-                  'classNames: exports.locals',
+
+                trash(fileName)
+
+                return ['module.exports = {',
+                  `classNames: ${classNames},`,
+                  `stylesheet: \`${content}\``,
                   '}'
                 ].join('')
-              )
               }
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              modules: true,
-              minimize: true,
-              importLoaders: 1,
-              localIdentName: '[local]-[hash:base64:5]'
             }
           },
           'postcss-loader'

examples/with-scoped-stylesheets-and-postcss/package.json

@@ -10,18 +10,17 @@
   "author": "Thomas Lindstrøm <t@hom.as>",
   "license": "ISC",
   "dependencies": {
-    "babel-plugin-wrap-in-js": "^1.1.1",
+    "cssnano": "^3.10.0",
-    "css-loader": "^0.26.1",
     "next": "latest",
     "postcss-cssnext": "^2.9.0",
     "postcss-loader": "^1.3.0",
-    "raw-loader": "^0.5.1",
+    "postcss-modules": "^0.6.4",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
-    "skeleton-loader": "0.0.7",
+    "skeleton-loader": "^1.1.2",
-    "val-loader": "^0.5.0"
+    "trash": "^4.0.1"
   },
   "devDependencies": {
-    "now": "^3.1.0"
+    "now": "^4.10.3"
   }
 }

examples/with-scoped-stylesheets-and-postcss/pages/global.css

@@ -0,0 +1,3 @@
+.font-color {
+  color: blue;
+}

examples/with-scoped-stylesheets-and-postcss/pages/styles.css

@@ -1,4 +1,4 @@
 .paragraph {
+  composes: font-color from './global.css';
   font-size: 20px;
-  color: red;
 }

examples/with-scoped-stylesheets-and-postcss/postcss.config.js

@@ -1,5 +1,9 @@
 module.exports = {
   plugins: [
-    require('postcss-cssnext')()
+    require('postcss-cssnext')(),
+    require('postcss-modules')({
+      generateScopedName: '[local]-[hash:base64:5]'
+    }),
+    require('cssnano')()
   ]
 }