Skip to content

Commit

Permalink
examples: Add an example for the next-css plugin (vercel#3739)
Browse files Browse the repository at this point in the history
- with css modules
- with additional webpack config
- with post css
- without css modules

Fix vercel#3699
  • Loading branch information
AriLFrankel authored and timneutkens committed Feb 16, 2018
1 parent 48e6dec commit 7b975d2
Show file tree
Hide file tree
Showing 6 changed files with 124 additions and 0 deletions.
40 changes: 40 additions & 0 deletions examples/with-next-css/README.md
Original file line number Diff line number Diff line change
@@ -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.
16 changes: 16 additions & 0 deletions examples/with-next-css/next.config.js
Original file line number Diff line number Diff line change
@@ -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;
}
});
*/
16 changes: 16 additions & 0 deletions examples/with-next-css/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
23 changes: 23 additions & 0 deletions examples/with-next-css/pages/_document.js
Original file line number Diff line number Diff line change
@@ -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>
)
}
}
13 changes: 13 additions & 0 deletions examples/with-next-css/pages/index.js
Original file line number Diff line number Diff line change
@@ -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>
*/
16 changes: 16 additions & 0 deletions examples/with-next-css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.example {
font-size: 50px;
color: papayawhip;
}

/* Post-CSS */
/*
:root {
--some-color: red;
}
.example {
color: var(--some-color);
}
*/

0 comments on commit 7b975d2

Please sign in to comment.