examples: Add an example for the next-css plugin

- with css modules - with additional webpack config - with post css - without css modules Fix #3699
vercel · Feb 9, 2018 · f38e26a · f38e26a
1 parent 9a10461
commit f38e26a
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 0 deletions.
diff --git a/examples/with-next-css/README.md b/examples/with-next-css/README.md
@@ -0,0 +1,40 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-next-css)
+
+# next-css example
+
+## How to use
+
+### Using `create-next-app`
+
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+
+```
+npm i -g create-next-app
+create-next-app --example with-next-css with-next-css-app
+```
+
+### Download manually
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-next-css
+cd with-next-css
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example demonstrates how to use the [next-css plugin](https://github.com/zeit/next-plugins/tree/master/packages/next-css) It includes patterns for with and without CSS Modules, with PostCSS and with additional webpack configurations on top of the next-css plugin.
diff --git a/examples/with-next-css/next.config.js b/examples/with-next-css/next.config.js
@@ -0,0 +1,16 @@
+const withCSS = require('@zeit/next-css')
+/* Without CSS Modules, with PostCSS */
+module.exports = withCSS()
+
+/* With CSS Modules */
+// module.exports = withCSS({ cssModules: true })
+
+/* With additional configuration on top of CSS Modules */
+/*
+module.exports = withCSS({
+  cssModules: true,
+  webpack: function (config) {
+    return config;
+  }
+});
+*/
diff --git a/examples/with-next-css/package.json b/examples/with-next-css/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "with-css-modules",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@zeit/next-css": "0.0.7",
+    "next": "5.0.0",
+    "react": "16.2.0",
+    "react-dom": "16.2.0"
+  }
+}
diff --git a/examples/with-next-css/pages/_document.js b/examples/with-next-css/pages/_document.js
@@ -0,0 +1,23 @@
+/*
+In production the stylesheet is compiled to .next/static/style.css and served from /_next/static/style.css
+
+You have to include it into the page using either next/head or a custom _document.js, as is being done in this file.
+*/
+
+import Document, { Head, Main, NextScript } from 'next/document'
+
+export default class MyDocument extends Document {
+  render () {
+    return (
+      <html>
+        <Head>
+          <link rel='stylesheet' href='/_next/static/style.css' />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/examples/with-next-css/pages/index.js b/examples/with-next-css/pages/index.js
@@ -0,0 +1,13 @@
+
+/* Without CSS Modules, maybe with PostCSS */
+
+import '../style.css'
+
+export default () => <div className='example'>O Hai world!</div>
+
+/* With CSS Modules */
+/*
+import css from "../style.css"
+
+export default () => <div className={css.example}>Hello World, I am being styled using CSS Modules!</div>
+*/
diff --git a/examples/with-next-css/style.css b/examples/with-next-css/style.css
@@ -0,0 +1,16 @@
+.example {
+  font-size: 50px;
+  color: papayawhip;
+}
+
+/* Post-CSS */
+/* 
+:root {
+  --some-color: red;
+}
+
+.example {
+  color: var(--some-color);
+} 
+
+*/