diff --git a/examples/with-style-sheet/.gitignore b/examples/with-style-sheet/.gitignore deleted file mode 100644 index 1437c53f70bc2..0000000000000 --- a/examples/with-style-sheet/.gitignore +++ /dev/null @@ -1,34 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env.local -.env.development.local -.env.test.local -.env.production.local - -# vercel -.vercel diff --git a/examples/with-style-sheet/README.md b/examples/with-style-sheet/README.md deleted file mode 100644 index 477752559793b..0000000000000 --- a/examples/with-style-sheet/README.md +++ /dev/null @@ -1,21 +0,0 @@ -# Using the style-sheet CSS in JS library and extract CSS to file. - -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. - -## Deploy your own - -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): - -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-style-sheet&project-name=with-style-sheet&repository-name=with-style-sheet) - -## How to use - -Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) 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 -``` - -Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-style-sheet/babel.config.js b/examples/with-style-sheet/babel.config.js deleted file mode 100644 index 72b38f5e4d0f1..0000000000000 --- a/examples/with-style-sheet/babel.config.js +++ /dev/null @@ -1,23 +0,0 @@ -const path = require('path') - -module.exports = { - presets: [ - [ - 'next/babel', - { - 'preset-react': { - pragma: 'createElement', - }, - }, - ], - ], - plugins: [ - [ - 'style-sheet/babel', - { - stylePropName: 'css', - stylePropPackageName: path.resolve('./lib/styleSheet.js'), - }, - ], - ], -} diff --git a/examples/with-style-sheet/lib/styleSheet.js b/examples/with-style-sheet/lib/styleSheet.js deleted file mode 100644 index 4fb959e8f36d7..0000000000000 --- a/examples/with-style-sheet/lib/styleSheet.js +++ /dev/null @@ -1,5 +0,0 @@ -const StyleSheet = require('style-sheet') -const setup = require('style-sheet/lib/cjs/createElement') - -const stylePropName = 'css' -module.exports.createElement = setup(StyleSheet, stylePropName) diff --git a/examples/with-style-sheet/next.config.js b/examples/with-style-sheet/next.config.js deleted file mode 100644 index 01bc4abe59861..0000000000000 --- a/examples/with-style-sheet/next.config.js +++ /dev/null @@ -1,17 +0,0 @@ -const getCss = require('style-sheet/babel').getCss -const { RawSource } = require('webpack-sources') - -class StyleSheetPlugin { - apply(compiler) { - compiler.hooks.emit.tap('StyleSheetPlugin', (compilation) => { - compilation.assets['static/bundle.css'] = new RawSource(getCss()) - }) - } -} - -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 deleted file mode 100644 index 67826c2e566e2..0000000000000 --- a/examples/with-style-sheet/package.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "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.7.0", - "react-dom": "^16.7.0", - "style-sheet": "^4.0.4" - }, - "author": "Giuseppe Gurgone", - "license": "MIT" -} diff --git a/examples/with-style-sheet/pages/_document.js b/examples/with-style-sheet/pages/_document.js deleted file mode 100644 index dc72499d197a1..0000000000000 --- a/examples/with-style-sheet/pages/_document.js +++ /dev/null @@ -1,22 +0,0 @@ -import Document, { Html, 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 deleted file mode 100644 index a8f529f0bff1a..0000000000000 --- a/examples/with-style-sheet/pages/index.js +++ /dev/null @@ -1,44 +0,0 @@ -import { useState, useEffect } from 'react' -import { StyleSheet, StyleResolver } from 'style-sheet' -const cls = StyleResolver.resolve - -export default function Home() { - const [color, setColor] = useState('#111') - useEffect(() => { - setTimeout(() => { - setColor('#00f') - }, 2000) - }) - return ( -
-
- Hello from Next.js -
-
- ) -} - -const styles = StyleSheet.create({ - root: { - fontSize: 16, - fontFamily: 'sans-serif', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - minHeight: '100vh', - backgroundImage: - 'radial-gradient(circle, #D7D7D7, #D7D7D7 1px, #FFF 1px, #FFF)', - backgroundSize: '1em 1em', - }, - another: { - fontSize: 30, - }, - brand: { - fontWeight: 'bold', - }, -})