terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Add with style-sheet example (#5572)

Browse source 
* Remove pathname (#5428)

Same as #5424

* fix typo (#5451)

* Add with style-sheet example

* Fix readme

* Fix typo
This commit is contained in:
Giuseppe 2018-11-01 14:05:39 +01:00 committed by Tim Neutkens
parent 2728dbe633
commit c95abc209b
8 changed files with 140 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/with-apollo-and-redux/README.md
View file

@ -41,7 +41,7 @@ now
## The idea behind the example
This example serves as a conduit if you were using Apollo 1.X with Redux, and are migrating to Apollo 2.x, however, you have chosen not to manage your entire application state within Apollo (`apollo-link-state`).
In 2.0.0, Apollo severs out-of-the-box support for redux in favor of Apollo's state management. This example aims to be an amalgamation of the [`with-apollo`](https://github.com/zeit/next.js/tree/master/examples/with-apollo) and [`with-redux`](https://github.com/zeit/next.js/tree/master/examples/with-redux) examples.
In 2.0.0, Apollo serves out-of-the-box support for redux in favor of Apollo's state management. This example aims to be an amalgamation of the [`with-apollo`](https://github.com/zeit/next.js/tree/master/examples/with-apollo) and [`with-redux`](https://github.com/zeit/next.js/tree/master/examples/with-redux) examples.
Note that you can access the redux store like you normally would using `react-redux`'s `connect`. Here's a quick example:

8
examples/with-style-sheet/.babelrc Normal file
View file

@ -0,0 +1,8 @@
{
"presets": [
"next/babel"
],
"plugins": [
"style-sheet/babel"
]
}

44
examples/with-style-sheet/README.md Normal file
View file

@ -0,0 +1,44 @@
[![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-style-sheet)
# Using the style-sheet CSS in JS library and extract CSS to file.
## How to use
### Using `create-next-app`
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
```bash
npx create-next-app --example with-style-sheet with-style-sheet-app
# or
yarn create next-app --example with-style-sheet with-style-sheet-app
```
### Download manually
Download the example:
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-style-sheet
cd with-style-sheet
```
Install it and run:
```bash
npm install
npm run dev
# or
yarn
yarn 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 features an app using the [style-sheet](https://www.npmjs.com/package/style-sheet) CSS in JS library and demonstrates how it is possible to extract styles to file.

18
examples/with-style-sheet/next.config.js Normal file
View file

@ -0,0 +1,18 @@
const getCss = require('style-sheet/babel').getCss
const { RawSource } = require('webpack-sources')
class StyleSheetPlugin {
apply (compiler) {
compiler.plugin('emit', (compilation, cb) => {
compilation.assets['static/bundle.css'] = new RawSource(getCss())
cb()
})
}
}
module.exports = {
webpack: (config, options) => {
config.plugins.push(new StyleSheetPlugin())
return config
}
}

19
examples/with-style-sheet/package.json Normal file
View file

@ -0,0 +1,19 @@
{
"name": "with-style-sheet",
"version": "1.0.0",
"description": "This example features: style-sheet a CSS in JS library with static CSS extraction support.",
"main": "index.js",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"style-sheet": "^3.0.1"
},
"author": "Giuseppe Gurgone",
"license": "ISC"
}

18
examples/with-style-sheet/pages/_document.js Normal file
View file

@ -0,0 +1,18 @@
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render () {
return (
<html>
<Head>
<style>{`body { margin: 0 }`}</style>
<link id='__style_sheet_extracted__' rel='stylesheet' href='/_next/static/bundle.css' />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}

29
examples/with-style-sheet/pages/index.js Normal file
View file

@ -0,0 +1,29 @@
import React from 'react'
import { StyleSheet, StyleResolver } from 'style-sheet'
const cls = StyleResolver.resolve
export default () => (
<div className={cls([styles.root, styles.color])}>
<div>Hello from <span className={cls(styles.brand)}>Next.js</span></div>
</div>
)
const styles = StyleSheet.create({
root: {
fontSize: 30,
fontFamily: 'sans-serif',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
minHeight: '100vh',
backgroundImage: 'radial-gradient(circle, #D7D7D7, #D7D7D7 1px, #FFF 1px, #FFF)',
backgroundSize: '1em 1em'
},
color: {
// showcasing dynamic styles
color: Math.random() > 0.5 ? '#111' : '#222'
},
brand: {
fontWeight: 'bold'
}
})

6
packages/next/pages/_document.js
View file

@ -48,7 +48,7 @@ export class Head extends Component {
if(!files || files.length === 0) {
return null
}
return files.map((file) => {
// Only render .css files here
if(!/\.css$/.exec(file)) {
@ -82,7 +82,7 @@ export class Head extends Component {
if(!files || files.length === 0) {
return null
}
return files.map((file) => {
// Only render .js files here
if(!/\.js$/.exec(file)) {
@ -168,7 +168,7 @@ export class NextScript extends Component {
if(!files || files.length === 0) {
return null
}
return files.map((file) => {
// Only render .js files here
if(!/\.js$/.exec(file)) {