Update css examples to use built-in CSS support (#10029)

* Update tailwind example

* Update blog-starter example

* Update with-next-css example

* Update with-quill-js

* Update with-rbx-bulma-pro

* Remove incompatible example

* Update with-react-multi-carousel

* Update-with-semantic-ui

* Update with-videojs example

* Remove @zeit/next-css from package.json of updated examples

* Remove deprecated examples

* Remove target from all examples

* Update package.json

* Apply suggestions from code review
Co-Authored-By: NJoe Haddad <timer@zeit.co>
Co-authored-by: NJoe Haddad <timer150@gmail.com>

examples/blog-starter/components/syntax-highlight.css

-code[class*='language-'],
-pre[class*='language-'] {
-  color: #f8f8f2;
-  background: none;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-pre[class*='language-'] {
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-  border-radius: 0.3em;
-}
-
-:not(pre) > code[class*='language-'],
-pre[class*='language-'] {
-  background: #2b2b2b;
-}
-
-:not(pre) > code[class*='language-'] {
-  padding: 0.1em;
-  border-radius: 0.3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #d4d0ab;
-}
-
-.token.punctuation {
-  color: #fefefe;
-}
-
-.token.property,
-.token.tag,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #ffa07a;
-}
-
-.token.boolean,
-.token.number {
-  color: #00e0e0;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #abe338;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string,
-.token.variable {
-  color: #00e0e0;
-}
-
-.token.atrule,
-.token.attr-value,
-.token.function {
-  color: #ffd700;
-}
-
-.token.keyword {
-  color: #00e0e0;
-}
-
-.token.regex,
-.token.important {
-  color: #ffd700;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-@media screen and (-ms-high-contrast: active) {
-  code[class*='language-'],
-  pre[class*='language-'] {
-    color: windowText;
-    background: window;
-  }
-
-  :not(pre) > code[class*='language-'],
-  pre[class*='language-'] {
-    background: window;
-  }
-
-  .token.important {
-    background: highlight;
-    color: window;
-    font-weight: normal;
-  }
-
-  .token.atrule,
-  .token.attr-value,
-  .token.function,
-  .token.keyword,
-  .token.operator,
-  .token.selector {
-    font-weight: bold;
-  }
-
-  .token.attr-value,
-  .token.comment,
-  .token.doctype,
-  .token.function,
-  .token.keyword,
-  .token.operator,
-  .token.property,
-  .token.string {
-    color: highlight;
-  }
-
-  .token.attr-value,
-  .token.url {
-    font-weight: normal;
-  }
-}

examples/blog-starter/next.config.js

@@ -15,28 +15,14 @@ module.exports = withMDX({
       module: 'empty',
     }
 
-    config.module.rules.push(
-      {
-        test: /\.css$/,
-        use: [
-          defaultLoaders.babel,
-          {
-            loader: require('styled-jsx/webpack').loader,
-            options: {
-              type: 'global',
-            },
-          },
-        ],
-      },
-      {
-        test: /\.svg$/,
-        use: [
-          {
-            loader: '@svgr/webpack',
-          },
-        ],
-      }
-    )
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        {
+          loader: '@svgr/webpack',
+        },
+      ],
+    })
 
     if (isServer && !dev) {
       const originalEntry = config.entry

examples/blog-starter/package.json

@@ -7,7 +7,6 @@
     "now-build": "next build && yarn build:rss"
   },
   "dependencies": {
-    "@zeit/next-css": "^1.0.1",
     "@zeit/next-mdx": "^1.2.0",
     "babel-plugin-macros": "^2.5.0",
     "babel-plugin-preval": "^3.0.1",

examples/with-cookie-auth/next.config.js

-module.exports = {
-  target: 'serverless',
-}

examples/with-external-scoped-css/README.md

-# With external scoped css
-
-This example has been deprecated in favor of [@zeit/next-css](https://github.com/zeit/next-plugins/tree/master/packages/next-css).

examples/with-next-css/README.md

@@ -45,4 +45,4 @@ 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.
+This example demonstrates how to use Next.js' built-in CSS imports and CSS modules support.

examples/with-next-css/component/hello-world.js

+import css from './hello-world.module.css'
+
+export default () => (
+  <div className={css.hello}>
+    Hello World, I am being styled using CSS Modules!
+  </div>
+)

examples/with-next-css/component/hello-world.module.css

+.hello {
+  font-size: 25px;
+}

examples/with-next-css/next.config.js

-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;
-  }
-});
-*/

examples/with-next-css/package.json

@@ -8,8 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@zeit/next-css": "^1.0.1",
-    "next": "latest",
+    "next": "^9.1.8-canary.11",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   }

examples/with-next-css/pages/_app.js

+import '../style.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-next-css/pages/index.js

-/* Without CSS Modules, maybe with PostCSS */
+import HelloWorld from '../component/hello-world'
 
-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>
-*/
+export default () => (
+  <div className="example">
+    <HelloWorld />
+  </div>
+)

examples/with-next-css/style.css

-.example {
-  font-size: 50px;
-  color: papayawhip;
-}
-
-/* Post-CSS */
-/*
 :root {
   --some-color: red;
 }
 
-.example {
+body {
   color: var(--some-color);
 }
-
-*/

examples/with-quill-js/next.config.js

-// next.config.js
-const withCSS = require('@zeit/next-css')
-module.exports = withCSS({
-  /* my next config */
-})

examples/with-quill-js/package.json

@@ -9,8 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@zeit/next-css": "^1.0.1",
-    "next": "latest",
+    "next": "^9.1.8-canary.11",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-quill": "^1.3.3"

examples/with-quill-js/pages/_app.js

+import 'react-quill/dist/quill.snow.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-quill-js/pages/index.js

 import React from 'react'
 import dynamic from 'next/dynamic'
-import 'react-quill/dist/quill.snow.css'
 
 const QuillNoSSRWrapper = dynamic(import('react-quill'), {
   ssr: false,

examples/with-rbx-bulma-pro/components/Layout.js

@@ -9,7 +9,6 @@ import {
   Title,
   Footer,
 } from 'rbx'
-import 'bulma-pro/css/bulma.css'
 
 const Layout = ({ children }) => {
   return (

examples/with-rbx-bulma-pro/next.config.js

-const withCSS = require('@zeit/next-css')
-module.exports = withCSS({
-  webpack: config => {
-    // Fixes npm packages that depend on `fs` module
-    config.node = {
-      fs: 'empty',
-    }
-
-    return config
-  },
-})

examples/with-rbx-bulma-pro/package.json

@@ -6,9 +6,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@zeit/next-css": "1.0.1",
     "bulma-pro": "^0.1.7",
-    "next": "8.1.0",
+    "next": "^9.1.8-canary.11",
     "rbx": "^2.2.0",
     "react": "16.8.6",
     "react-dom": "16.8.6"

examples/with-rbx-bulma-pro/pages/_app.js

+import 'bulma-pro/css/bulma.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-react-css-modules/.babelrc

-{
-    "presets": [
-        "next/babel"
-    ],
-    "plugins": [
-        [
-            "react-css-modules",
-            {
-                "exclude": "node_modules",
-                "generateScopedName": "[local]_[hash:base64:5]"
-            }
-        ]
-    ]
-}
\ No newline at end of file

examples/with-react-css-modules/README.md

-# react-css-modules example
-
-## Deploy your own
-
-Deploy the example using [ZEIT Now](https://zeit.co/now):
-
-[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-react-css-modules)
-
-## How to use
-
-### Using `create-next-app`
-
-Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/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-react-css-modules with-react-css-modules-app
-# or
-yarn create next-app --example with-react-css-modules with-react-css-modules-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-react-css-modules
-cd with-react-css-modules
-```
-
-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
-
-[`react-css-modules`](https://github.com/gajus/react-css-modules) implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global unique name.
-
-This example shows how to integrate [`babel-plugin-react-css-modules`](https://github.com/gajus/babel-plugin-react-css-modules) in Next.js.

examples/with-react-css-modules/next.config.js

-const withCSS = require('@zeit/next-css')
-
-module.exports = withCSS({
-  cssModules: true,
-  cssLoaderOptions: {
-    importLoaders: 1,
-    localIdentName: '[local]_[hash:base64:5]',
-  },
-})

examples/with-react-css-modules/package.json

-{
-  "name": "with-react-css-modules",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "dev": "next",
-    "build": "next build",
-    "start": "next start"
-  },
-  "author": "Samciu",
-  "license": "ISC",
-  "dependencies": {
-    "@zeit/next-css": "^1.0.1",
-    "babel-plugin-react-css-modules": "^5.2.4",
-    "next": "latest",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
-  }
-}

examples/with-react-css-modules/pages/index.css

-.example {
-  font-size: 36px;
-  background: #999999;
-}

examples/with-react-css-modules/pages/index.js

-import React from 'react'
-import './index.css'
-
-export default () => (
-  <div styleName="example">This is an example with react-css-modules.</div>
-)

examples/with-react-multi-carousel/next.config.js

-const withPlugins = require('next-compose-plugins')
-const withCSS = require('@zeit/next-css')
-const withFonts = require('next-fonts')
-
-module.exports = withPlugins([withCSS, withFonts], { target: 'serverless' })

examples/with-react-multi-carousel/package.json

@@ -13,19 +13,12 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
-    "@zeit/next-css": "^1.0.1",
     "jss": "^9.8.7",
     "mobile-detect": "^1.4.3",
-    "next": "latest",
+    "next": "^9.1.8-canary.11",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-jss": "^8.6.1",
     "react-multi-carousel": "^1.2.5"
-  },
-  "devDependencies": {
-    "file-loader": "^3.0.1",
-    "next-compose-plugins": "^2.1.1",
-    "next-fonts": "^0.17.0",
-    "url-loader": "^1.1.2"
   }
 }

examples/with-react-multi-carousel/pages/_app.js

@@ -8,9 +8,12 @@ import Head from 'next/head'
 import { MuiThemeProvider } from '@material-ui/core/styles'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import JssProvider from 'react-jss/lib/JssProvider'
-
 import getPageContext from '../src/getPageContext'
 
+// Add global styles
+import '../style.css'
+import 'react-multi-carousel/lib/styles.css'
+
 class MyApp extends App {
   constructor() {
     super()

examples/with-react-multi-carousel/pages/index.js

@@ -4,8 +4,6 @@ import { withStyles } from '@material-ui/core/styles'
 import Carousel from 'react-multi-carousel'
 
 import Image from '../components/image'
-import '../style.css'
-import 'react-multi-carousel/lib/styles.css'
 
 const styles = theme => ({
   root: {

examples/with-scoped-stylesheets-and-postcss/README.md

-# Scoped stylesheets and PostCSS
-
-This example has been deprecated in favor of the [@zeit/next-css](https://github.com/zeit/next-plugins/tree/master/packages/next-css#postcss-plugins) module.

examples/with-semantic-ui/next.config.js

-const withCSS = require('@zeit/next-css')
-
-module.exports = withCSS({
-  target: 'serverless',
+module.exports = {
   webpack(config) {
     config.module.rules.push({
-      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
+      test: /\.(png|svg)$/,
       use: {
         loader: 'url-loader',
         options: {
@@ -17,4 +14,4 @@ module.exports = withCSS({
     })
     return config
   },
-})
+}

examples/with-semantic-ui/package.json

@@ -7,14 +7,13 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "latest",
+    "next": "^9.1.8-canary.11",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.84.0"
   },
   "devDependencies": {
-    "@zeit/next-css": "^1.0.1",
     "file-loader": "^3.0.1",
     "url-loader": "^1.1.2",
     "webpack": "^4.29.0"

examples/with-semantic-ui/pages/_app.js

+import 'semantic-ui-css/semantic.min.css'
+import './styles.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-semantic-ui/pages/index.js

-import 'semantic-ui-css/semantic.min.css'
 import { Modal, Button, Icon } from 'semantic-ui-react'
 
 import SmallImage from './SmallImage.png'
 import LargeImage from './LargeImage.png'
-import './styles.css'
 
 export default () => (
   <div className="centered">
@@ -18,7 +16,7 @@ export default () => (
           <div className="wrapper">
             <div className="row">
               <p>
-                Larger content should be still availble as a fallback to{' '}
+                Larger content should be still available as a fallback to{' '}
                 <em>fileLoader</em> but it should not polute{' '}
                 <em>/.next/static/css</em> folder. You should see two images
                 below. One, smaller, loaded as data url, and one, bigger, loaded

examples/with-tailwindcss/next.config.js

-const withCSS = require('@zeit/next-css')
-
-module.exports = withCSS({})

examples/with-tailwindcss/package.json

@@ -7,8 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@zeit/next-css": "^1.0.1",
-    "next": "latest",
+    "next": "^9.1.8-canary.11",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },

examples/with-tailwindcss/pages/_app.js

 import '../styles/index.css'
 
-import React from 'react'
-import App from 'next/app'
-
-export default class MyApp extends App {
-  render() {
-    const { Component, pageProps } = this.props
-
-    return <Component {...pageProps} />
-  }
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
 }
+
+export default MyApp

examples/with-tailwindcss/postcss.config.js

 module.exports = {
   plugins: [
-    require('postcss-easy-import'),
-    require('tailwindcss'),
-    process.env.NODE_ENV === 'production' &&
-      require('@fullhuman/postcss-purgecss')({
-        content: [
-          './pages/**/*.{js,jsx,ts,tsx}',
-          './components/**/*.{js,jsx,ts,tsx}',
-        ],
-        defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
-      }),
-    require('autoprefixer'),
-    require('cssnano'),
+    'tailwindcss',
+    process.env.NODE_ENV === 'production'
+      ? [
+          '@fullhuman/postcss-purgecss',
+          {
+            content: [
+              './pages/**/*.{js,jsx,ts,tsx}',
+              './components/**/*.{js,jsx,ts,tsx}',
+            ],
+            defaultExtractor: content =>
+              content.match(/[A-Za-z0-9-_:/]+/g) || [],
+          },
+        ]
+      : undefined,
+    'autoprefixer',
   ],
 }

examples/with-videojs/components/Player.js

 import React, { Component } from 'react'
 import videojs from 'video.js'
 import 'videojs-youtube'
-import 'video.js/dist/video-js.css'
 
 class Player extends Component {
   componentDidMount() {

examples/with-videojs/next.config.js

-const withCss = require('@zeit/next-css')
-
-module.exports = withCss({
-  webpack(config) {
-    config.module.rules.push({
-      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
-      use: {
-        loader: 'url-loader',
-        options: {
-          limit: 100000,
-          publicPath: './',
-          outputPath: 'static/',
-          name: '[name].[ext]',
-        },
-      },
-    })
-
-    return config
-  },
-})

examples/with-videojs/package.json

@@ -7,11 +7,9 @@
     "start": "next start"
   },
   "dependencies": {
-    "@zeit/next-css": "^1.0.1",
-    "next": "latest",
+    "next": "^9.1.8-canary.11",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "url-loader": "^0.6.2",
     "video.js": "^6.7.3",
     "videojs-youtube": "^2.4.1"
   },

examples/with-videojs/pages/_app.js

+import 'video.js/dist/video-js.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-videojs/pages/index.js

-import Head from 'next/head'
 import React from 'react'
 import Player from '../components/Player'
 
@@ -6,24 +5,16 @@ export default class Index extends React.Component {
   render() {
     const videoJsOptions = {
       techOrder: ['youtube'],
-      autoplay: true,
+      autoplay: false,
       controls: true,
       sources: [
         {
-          src: 'https://www.youtube.com/watch?v=jiLkBxw2pbs',
+          src: 'https://www.youtube.com/watch?v=IxQB14xVas0',
           type: 'video/youtube',
         },
       ],
     }
 
-    return (
-      <div>
-        <Head>
-          <link rel="stylesheet" href="/_next/static/style.css" />
-        </Head>
-
-        <Player {...videoJsOptions} />
-      </div>
-    )
+    return <Player {...videoJsOptions} />
   }
 }

examples/with-zones/blog/next.config.js

 const assetPrefix = process.env.BUILDING_FOR_NOW ? '/blog' : ''
 
 module.exports = {
-  target: 'serverless',
   assetPrefix,
   env: {
     ASSET_PREFIX: assetPrefix,

examples/with-zones/home/next.config.js

-module.exports = {
-  target: 'serverless',
-}