diff --git a/examples/with-next-css/README.md b/examples/with-next-css/README.md new file mode 100644 index 0000000000000..0451a9912893e --- /dev/null +++ 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. \ No newline at end of file diff --git a/examples/with-next-css/next.config.js b/examples/with-next-css/next.config.js new file mode 100644 index 0000000000000..b631652547704 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..65d5f2648a7aa --- /dev/null +++ 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 new file mode 100644 index 0000000000000..512ea5e457ea5 --- /dev/null +++ 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 ( + + + + + +
+ + + + ) + } +} diff --git a/examples/with-next-css/pages/index.js b/examples/with-next-css/pages/index.js new file mode 100644 index 0000000000000..1c8ec8c0d4dc0 --- /dev/null +++ b/examples/with-next-css/pages/index.js @@ -0,0 +1,13 @@ + +/* Without CSS Modules, maybe with PostCSS */ + +import '../style.css' + +export default () =>
O Hai world!
+ +/* With CSS Modules */ +/* +import css from "../style.css" + +export default () =>
Hello World, I am being styled using CSS Modules!
+*/ diff --git a/examples/with-next-css/style.css b/examples/with-next-css/style.css new file mode 100644 index 0000000000000..ace395e6609e5 --- /dev/null +++ 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); +} + +*/