From c95abc209bbb56d72a8564e7bcc59a588d34f7e1 Mon Sep 17 00:00:00 2001 From: Giuseppe Date: Thu, 1 Nov 2018 14:05:39 +0100 Subject: [PATCH] Add with style-sheet example (#5572) * Remove pathname (#5428) Same as #5424 * fix typo (#5451) * Add with style-sheet example * Fix readme * Fix typo --- examples/with-apollo-and-redux/README.md | 2 +- examples/with-style-sheet/.babelrc | 8 ++++ examples/with-style-sheet/README.md | 44 ++++++++++++++++++++ examples/with-style-sheet/next.config.js | 18 ++++++++ examples/with-style-sheet/package.json | 19 +++++++++ examples/with-style-sheet/pages/_document.js | 18 ++++++++ examples/with-style-sheet/pages/index.js | 29 +++++++++++++ packages/next/pages/_document.js | 6 +-- 8 files changed, 140 insertions(+), 4 deletions(-) create mode 100644 examples/with-style-sheet/.babelrc create mode 100644 examples/with-style-sheet/README.md create mode 100644 examples/with-style-sheet/next.config.js create mode 100644 examples/with-style-sheet/package.json create mode 100644 examples/with-style-sheet/pages/_document.js create mode 100644 examples/with-style-sheet/pages/index.js diff --git a/examples/with-apollo-and-redux/README.md b/examples/with-apollo-and-redux/README.md index 7f44cbd9..40e9d40d 100644 --- a/examples/with-apollo-and-redux/README.md +++ b/examples/with-apollo-and-redux/README.md @@ -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: diff --git a/examples/with-style-sheet/.babelrc b/examples/with-style-sheet/.babelrc new file mode 100644 index 00000000..15b62670 --- /dev/null +++ b/examples/with-style-sheet/.babelrc @@ -0,0 +1,8 @@ +{ + "presets": [ + "next/babel" + ], + "plugins": [ + "style-sheet/babel" + ] +} diff --git a/examples/with-style-sheet/README.md b/examples/with-style-sheet/README.md new file mode 100644 index 00000000..ab347d2a --- /dev/null +++ b/examples/with-style-sheet/README.md @@ -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. diff --git a/examples/with-style-sheet/next.config.js b/examples/with-style-sheet/next.config.js new file mode 100644 index 00000000..203abeb3 --- /dev/null +++ b/examples/with-style-sheet/next.config.js @@ -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 + } +} diff --git a/examples/with-style-sheet/package.json b/examples/with-style-sheet/package.json new file mode 100644 index 00000000..7c7aa7b8 --- /dev/null +++ b/examples/with-style-sheet/package.json @@ -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" +} diff --git a/examples/with-style-sheet/pages/_document.js b/examples/with-style-sheet/pages/_document.js new file mode 100644 index 00000000..e6f5f88a --- /dev/null +++ b/examples/with-style-sheet/pages/_document.js @@ -0,0 +1,18 @@ +import Document, { Head, Main, NextScript } from 'next/document' + +export default class MyDocument extends Document { + render () { + return ( + + + + + + +
+ + + + ) + } +} diff --git a/examples/with-style-sheet/pages/index.js b/examples/with-style-sheet/pages/index.js new file mode 100644 index 00000000..70e2faab --- /dev/null +++ b/examples/with-style-sheet/pages/index.js @@ -0,0 +1,29 @@ +import React from 'react' +import { StyleSheet, StyleResolver } from 'style-sheet' +const cls = StyleResolver.resolve + +export default () => ( +
+
Hello from Next.js
+
+) + +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' + } +}) diff --git a/packages/next/pages/_document.js b/packages/next/pages/_document.js index 822656bf..ed9ba8b1 100644 --- a/packages/next/pages/_document.js +++ b/packages/next/pages/_document.js @@ -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)) {