chore: upgrade nextjs emption 11

BREAKING CHANGE: emotion 11 and nextjs 10 required
ccontrols · Dec 4, 2020 · 7fc4168 · 7fc4168
1 parent 2bf0481
commit 7fc4168
Show file tree

Hide file tree

Showing 22 changed files with 507 additions and 347 deletions.
diff --git a/examples/nextjs/.babelrc b/examples/nextjs/.babelrc
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -21,14 +21,12 @@
     "@component-controls/core": "^1.44.0",
     "@component-controls/nextjs-plugin": "^1.44.1",
     "@component-controls/viewport-plugin": "^1.44.1",
-    "@emotion/react": "^11.0.0",
     "@theme-ui/presets": "^0.6.0-alpha.1",
     "next": "^10.0.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@emotion/babel-plugin": "^11.0.0",
     "babel-preset-react-app": "^9.0.0",
     "typescript": "^3.9.3",
     "webpack-bundle-analyzer": "^3.7.0"

diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -13,9 +13,6 @@
   },
   "dependencies": {
     "@component-controls/gatsby-theme-stories": "^1.44.1",
-    "@emotion/react": "^11.0.0",
-    "emotion": "^11.0.0",
-    "emotion-server": "^11.0.0",
     "gatsby": "^2.27.4",
     "next": "^10.0.3",
     "react": "^17.0.1",

diff --git a/examples/simple/pages/_app.js b/examples/simple/pages/_app.js
diff --git a/examples/simple/pages/_document.js b/examples/simple/pages/_document.js
diff --git a/examples/starter/package.json b/examples/starter/package.json
@@ -23,9 +23,6 @@
     "@component-controls/gatsby-theme-stories": "^1.44.1",
     "@component-controls/nextjs-plugin": "^1.44.1",
     "@component-controls/viewport-plugin": "^1.44.1",
-    "@emotion/react": "^11.0.0",
-    "emotion": "^11.0.0",
-    "emotion-server": "^11.0.0",
     "gatsby": "^2.27.4",
     "next": "^10.0.3",
     "react": "^17.0.1",

diff --git a/examples/starter/pages/_app.js b/examples/starter/pages/_app.js
diff --git a/examples/starter/pages/_document.js b/examples/starter/pages/_document.js
diff --git a/examples/stories/src/blogs/storybook-6-migration-nextjs-ssg.mdx b/examples/stories/src/blogs/storybook-6-migration-nextjs-ssg.mdx
@@ -75,19 +75,13 @@ You can either copy the pages from this [github repo](https://github.com/atanass
 ```js:title=pages/_app.js {4}
 import React from 'react';
 import NextApp from 'next/app';
-import { CacheProvider } from '@emotion/core';
 import '../src/tailwind.output.css';
 
-// Use only { cache } from 'emotion'. Don't use { css }.
-import { cache } from 'emotion';
-
 export default class App extends NextApp {
   render() {
     const { Component, pageProps } = this.props;
     return (
-      <CacheProvider value={cache}>
-        <Component {...pageProps} />
-      </CacheProvider>
+      <Component {...pageProps} />
     );
   }
 }

diff --git a/examples/stories/src/tutorial/getting-started/ssg/nextjs.mdx b/examples/stories/src/tutorial/getting-started/ssg/nextjs.mdx
@@ -68,109 +68,6 @@ The remaining steps are the same as for an existing nextjs project.
 yarn add @component-controls/nextjs-plugin
 ```
 
-### Configure emotion SSR
-
-#### Add emotion packages
-
-```sh
-yarn add emotion emotion-server @emotion/core
-```
-
-
-To configure [emotion](https://emotion.sh/docs/introduction) for SSR, you can view this [`emotion starter project`](https://github.com/vercel/next.js/tree/canary/examples/with-emotion/pages)
-
-### Create a pages folder
-
-```sh
-mkdir pages
-```
-
-
-#### Add pages/_app.js
-
-Create a new or edit `_app.js` file in the pages folder:
-
-<details>
-  <summary>view source...</summary>
-
-```js:title=pages/_app.js
-import React from 'react';
-import NextApp from 'next/app';
-import { CacheProvider } from '@emotion/core';
-
-// Use only { cache } from 'emotion'. Don't use { css }.
-import { cache } from 'emotion';
-
-export default class App extends NextApp {
-  render() {
-    const { Component, pageProps } = this.props;
-    return (
-      <CacheProvider value={cache}>
-        <Component {...pageProps} />
-      </CacheProvider>
-    );
-  }
-}
-```
-
-</details>
-
-#### Add pages/_document.js
-
-Create a new or edit `_document.js` file in the pages folder:
-
-<details>
-  <summary>view source...</summary>
-
-```js:title=pages/_document.js
-import React from 'react';
-import fs from 'fs';
-import Document, { Html, Head, Main, NextScript } from 'next/document';
-import { extractCritical } from 'emotion-server';
-
-export default class MyDocument extends Document {
-  static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    const styles = extractCritical(initialProps.html);
-    // following only if you are usng css in your componentes
-    let cssStyles;
-    const cssBundle = process.env.NEXT_CC_CSS_FILENAME;
-    if (cssBundle && fs.existsSync(cssBundle)) {
-      cssStyles = fs.readFileSync(cssBundle, 'utf8');
-    }
-    // end css styles
-    return {
-      ...initialProps,
-      styles: (
-        <>
-          {initialProps.styles}
-          <style
-            data-emotion-css={styles.ids.join(' ')}
-            dangerouslySetInnerHTML={{ __html: styles.css }}
-          />
-
-          {cssStyles && <style>{cssStyles}</style>}
-        </>
-      ),
-    };
-  }
-
-  render() {
-    return (
-      <Html>
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
-}
-```
-</details>
-
-
 ### Enable component-controls
 
 The default options will configure `component-controls` to work with react apps,  with `react-docgen` for prop-types and `react-docgen-typescript` for typescript props information
@@ -183,6 +80,12 @@ module.exports = withStories({ configPath: '.config', ....other options });
 
 ## Create content pages
 
+### Create a pages folder
+
+```sh
+mkdir pages
+```
+
 ### Application home
 
 Create a new or edit `index.tsx` or `index.js` file in the pages folder: