From 123a635f004562e594ea2484e287e00ffcf7abec Mon Sep 17 00:00:00 2001
From: Guilherme Diego <guidiego.expgames@gmail.com>
Date: Wed, 15 Mar 2017 11:21:48 -0300
Subject: [PATCH] Example to create next application with scoped/external css.
 (#1340)

* First structure for external css example

* Remove: Builded files

* Fix: Identation to 2 spaces

* Fix example

* Fix lint

* Fix: Review points
---
 examples/with-external-scoped-css/.babelrc    | 12 ++++++++++
 examples/with-external-scoped-css/.gitignore  |  1 +
 examples/with-external-scoped-css/README.md   | 18 ++++++++++++++
 .../with-external-scoped-css/package.json     | 21 ++++++++++++++++
 .../pages/_document.js                        | 24 +++++++++++++++++++
 .../with-external-scoped-css/pages/index.js   | 10 ++++++++
 .../with-external-scoped-css/pages/index.sass |  4 ++++
 .../with-external-scoped-css/pre-processor.js | 10 ++++++++
 8 files changed, 100 insertions(+)
 create mode 100644 examples/with-external-scoped-css/.babelrc
 create mode 100644 examples/with-external-scoped-css/.gitignore
 create mode 100644 examples/with-external-scoped-css/README.md
 create mode 100644 examples/with-external-scoped-css/package.json
 create mode 100644 examples/with-external-scoped-css/pages/_document.js
 create mode 100644 examples/with-external-scoped-css/pages/index.js
 create mode 100644 examples/with-external-scoped-css/pages/index.sass
 create mode 100644 examples/with-external-scoped-css/pre-processor.js

diff --git a/examples/with-external-scoped-css/.babelrc b/examples/with-external-scoped-css/.babelrc
new file mode 100644
index 00000000..e6031195
--- /dev/null
+++ b/examples/with-external-scoped-css/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "css-modules-transform", {
+        "extensions": [".css", ".sass"],
+        "extractCss": "./static/css/bundle.css",
+        "preprocessCss": "./pre-processor.js"
+      }
+    ]
+  ]
+}
diff --git a/examples/with-external-scoped-css/.gitignore b/examples/with-external-scoped-css/.gitignore
new file mode 100644
index 00000000..ecdef5b8
--- /dev/null
+++ b/examples/with-external-scoped-css/.gitignore
@@ -0,0 +1 @@
+static
\ No newline at end of file
diff --git a/examples/with-external-scoped-css/README.md b/examples/with-external-scoped-css/README.md
new file mode 100644
index 00000000..821d9ccc
--- /dev/null
+++ b/examples/with-external-scoped-css/README.md
@@ -0,0 +1,18 @@
+## Scoped Style with external CSS file
+The motivation for this example is using scoped css from external files and in the end generate a compiled static `.css` file to use in production..
+
+#### Running That
+
+```
+yarn install
+yarn start
+```
+
+#### Supported Langs
+The plugin supports the `less`, `scss` and `css` file extensions. It is possible to add support for another pre-processor by creating a function to compile the code. In the example we use `sass` as our css pre-processor
+
+To edit the types you need to go to `.babelrc`
+
+
+#### Attention Points
+- Next.js doesn't have support for watching `*.css files. So you will have to edit a Javascript file to re-compile the css. In the future this will be fixed by [#823](https://github.com/zeit/next.js/pull/823).
\ No newline at end of file
diff --git a/examples/with-external-scoped-css/package.json b/examples/with-external-scoped-css/package.json
new file mode 100644
index 00000000..1fa0efff
--- /dev/null
+++ b/examples/with-external-scoped-css/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "with-external-scoped-css",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "ISC",
+  "author": "",
+  "scripts": {
+    "start": "next",
+    "build": "next build",
+    "run": "next start"
+  },
+  "dependencies":{
+    "next": "^2.0.0-beta",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
+  },
+  "devDependencies": {
+    "babel-plugin-css-modules-transform": "^1.2.1",
+    "node-sass": "^4.5.0",
+  }
+}
diff --git a/examples/with-external-scoped-css/pages/_document.js b/examples/with-external-scoped-css/pages/_document.js
new file mode 100644
index 00000000..2fedf399
--- /dev/null
+++ b/examples/with-external-scoped-css/pages/_document.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import Document, { Head, Main, NextScript } from 'next/document'
+
+export default class MyDocument extends Document {
+  static getInitialProps ({ renderPage }) {
+    const {html, head} = renderPage()
+    return { html, head }
+  }
+
+  render () {
+    return (
+      <html>
+        <Head>
+          <link rel='stylesheet' href='/static/css/bundle.css' />
+        </Head>
+        <body>
+          {this.props.customValue}
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/examples/with-external-scoped-css/pages/index.js b/examples/with-external-scoped-css/pages/index.js
new file mode 100644
index 00000000..3f6f14ca
--- /dev/null
+++ b/examples/with-external-scoped-css/pages/index.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import ss from './index.sass'
+
+export const IndexPage = () => (
+  <div className={ss.example}>
+    This is an example from scoped style in a outside CSS file {'<3'}
+  </div>
+)
+
+export default IndexPage
diff --git a/examples/with-external-scoped-css/pages/index.sass b/examples/with-external-scoped-css/pages/index.sass
new file mode 100644
index 00000000..8dc7419c
--- /dev/null
+++ b/examples/with-external-scoped-css/pages/index.sass
@@ -0,0 +1,4 @@
+.example
+  font-size: 36px
+  width: 300px
+  margin: 100px auto
\ No newline at end of file
diff --git a/examples/with-external-scoped-css/pre-processor.js b/examples/with-external-scoped-css/pre-processor.js
new file mode 100644
index 00000000..183cfd73
--- /dev/null
+++ b/examples/with-external-scoped-css/pre-processor.js
@@ -0,0 +1,10 @@
+const sass = require('node-sass')
+
+module.exports = (data, filename) => {
+  return sass.renderSync({
+    data,
+    file: filename,
+    indentedSyntax: true,
+    outputStyle: 'compressed'
+  }).css.toString('utf8')
+}