Example to create next application with scoped/external css. (vercel#…

…1340) * First structure for external css example * Remove: Builded files * Fix: Identation to 2 spaces * Fix example * Fix lint * Fix: Review points
collin · Mar 15, 2017 · 123a635 · 123a635
1 parent 13ccf78
commit 123a635
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 0 deletions.
diff --git a/examples/with-external-scoped-css/.babelrc 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
@@ -0,0 +1 @@
+static
diff --git a/examples/with-external-scoped-css/README.md 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).
diff --git a/examples/with-external-scoped-css/package.json 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
@@ -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
@@ -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
@@ -0,0 +1,4 @@
+.example
+  font-size: 36px
+  width: 300px
+  margin: 100px auto
diff --git a/examples/with-external-scoped-css/pre-processor.js 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')
+}