Update with-style-sheet example (#13323)

examples/with-style-sheet/.babelrc

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

examples/with-style-sheet/babel.config.js

@@ -0,0 +1,23 @@
+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'),
+      },
+    ],
+  ],
+}

examples/with-style-sheet/lib/styleSheet.js

@@ -0,0 +1,5 @@
+const StyleSheet = require('style-sheet')
+const setup = require('style-sheet/lib/cjs/createElement')
+
+const stylePropName = 'css'
+module.exports.createElement = setup(StyleSheet, stylePropName)

examples/with-style-sheet/next.config.js

@@ -3,9 +3,8 @@ const { RawSource } = require('webpack-sources')
 
 class StyleSheetPlugin {
   apply(compiler) {
-    compiler.plugin('emit', (compilation, cb) => {
+    compiler.hooks.emit.tap('StyleSheetPlugin', (compilation) => {
       compilation.assets['static/bundle.css'] = new RawSource(getCss())
-      cb()
     })
   }
 }

examples/with-style-sheet/package.json

@@ -12,7 +12,7 @@
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "style-sheet": "^3.0.1"
+    "style-sheet": "^4.0.4"
   },
   "author": "Giuseppe Gurgone",
   "license": "ISC"

examples/with-style-sheet/pages/index.js

@@ -1,9 +1,21 @@
+import React from 'react'
 import { StyleSheet, StyleResolver } from 'style-sheet'
 const cls = StyleResolver.resolve
 
 export default function Home() {
+  const [color, setColor] = React.useState('#111')
+  React.useEffect(() => {
+    setTimeout(() => {
+      setColor('#00f')
+    }, 2000)
+  })
   return (
-    <div className={cls([styles.root, styles.color])}>
+    <div
+      className={cls([styles.root, styles.another])}
+      css={{
+        color,
+      }}
+    >
       <div>
         Hello from <span className={cls(styles.brand)}>Next.js</span>
       </div>
@@ -13,7 +25,7 @@ export default function Home() {
 
 const styles = StyleSheet.create({
   root: {
-    fontSize: 30,
+    fontSize: 16,
     fontFamily: 'sans-serif',
     display: 'flex',
     alignItems: 'center',
@@ -23,9 +35,8 @@ const styles = StyleSheet.create({
       'radial-gradient(circle, #D7D7D7, #D7D7D7 1px, #FFF 1px, #FFF)',
     backgroundSize: '1em 1em',
   },
-  color: {
-    // showcasing dynamic styles
-    color: Math.random() > 0.5 ? '#111' : '#222',
+  another: {
+    fontSize: 30,
   },
   brand: {
     fontWeight: 'bold',