Add example with-scoped-stylesheets-and-postcss (vercel#1146)

thomaslindstrom · timneutkens · commit 6e5d57dae93a · 2017-02-17T16:04:58.000+01:00
* Add example `with-external-stylesheets-and-postcss`

* 🔥 Remove extra semi-colon

* 📝 Attribute `with-global-stylesheet`

* Force a new test

* 📝 Update README.md

* Rename `external` -&gt; `scoped`
diff --git a/examples/with-scoped-stylesheets-and-postcss/.babelrc b/examples/with-scoped-stylesheets-and-postcss/.babelrc
@@ -0,0 +1,10 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    ["wrap-in-js", {
+      "extensions": ["css$"]
+    }]
+  ]
+}
diff --git a/examples/with-scoped-stylesheets-and-postcss/README.md b/examples/with-scoped-stylesheets-and-postcss/README.md
@@ -0,0 +1,53 @@
+# Scoped stylesheets with PostCSS example
+
+This is an example of using scoped stylesheets and PostCSS, heavily influenced by @davibe's [`with-global-stylesheet`](https://github.com/zeit/next.js/tree/master/examples/with-global-stylesheet).
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-scoped-stylesheets-and-postcss
+cd with-scoped-stylesheets-and-postcss
+```
+
+To get this example running you must
+
+    npm install .
+    npm run dev
+
+Visit [http://localhost:3000](http://localhost:3000) and try edit `pages/styles.css`. Your changes should be picked up instantly.
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+# Why
+
+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
+
+There's a bug, possibly within `next.js`, making composition between files unuseable. Consider the following:
+
+*`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'
+```
diff --git a/examples/with-scoped-stylesheets-and-postcss/next.config.js b/examples/with-scoped-stylesheets-and-postcss/next.config.js
@@ -0,0 +1,43 @@
+module.exports = {
+  webpack: (config) => {
+    config.module.rules.push(
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'emit-file-loader',
+            options: {
+              name: 'dist/[path][name].[ext]'
+            }
+          },
+          'raw-loader',
+          'val-loader',
+          {
+            loader: 'skeleton-loader',
+            options: {
+              procedure: (content) => (
+                `${content} \n` + ['module.exports = {',
+                  'stylesheet: module.exports.toString(),',
+                  'classNames: exports.locals',
+                  '}'
+                ].join('')
+              )
+            }
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              minimize: true,
+              importLoaders: 1,
+              localIdentName: '[local]-[hash:base64:5]'
+            }
+          },
+          'postcss-loader'
+        ]
+      }
+    )
+
+    return config
+  }
+}
diff --git a/examples/with-scoped-stylesheets-and-postcss/package.json b/examples/with-scoped-stylesheets-and-postcss/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "next.js-with-scoped-stylesheets-and-postcss",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "author": "Thomas Lindstrøm <t@hom.as>",
+  "license": "ISC",
+  "dependencies": {
+    "babel-plugin-wrap-in-js": "^1.1.1",
+    "css-loader": "^0.26.1",
+    "next": "^2.0.0-beta.26",
+    "postcss-cssnext": "^2.9.0",
+    "postcss-loader": "^1.3.0",
+    "raw-loader": "^0.5.1",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "skeleton-loader": "0.0.7",
+    "val-loader": "^0.5.0"
+  },
+  "devDependencies": {
+    "now": "^3.1.0"
+  }
+}
diff --git a/examples/with-scoped-stylesheets-and-postcss/pages/index.js b/examples/with-scoped-stylesheets-and-postcss/pages/index.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import Head from 'next/head'
+import {stylesheet, classNames} from './styles.css'
+
+export default () => (
+  <p className={classNames.paragraph}>
+    <Head><style dangerouslySetInnerHTML={{__html: stylesheet}} /></Head>
+    bazinga
+  </p>
+)
diff --git a/examples/with-scoped-stylesheets-and-postcss/pages/styles.css b/examples/with-scoped-stylesheets-and-postcss/pages/styles.css
@@ -0,0 +1,4 @@
+.paragraph {
+  font-size: 20px;
+  color: red;
+}
diff --git a/examples/with-scoped-stylesheets-and-postcss/postcss.config.js b/examples/with-scoped-stylesheets-and-postcss/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('postcss-cssnext')()
+  ]
+}
