Upgrade styled-jsx (#19241)

This fixes compatibility with React 17 and `styled-jsx`. Fixes #19242
vercel · Nov 17, 2020 · ab0e274 · ab0e274
1 parent c283442
commit ab0e274
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 5 deletions.
diff --git a/packages/next/package.json b/packages/next/package.json
@@ -98,7 +98,7 @@
     "schema-utils": "2.7.1",
     "stream-browserify": "3.0.0",
     "style-loader": "1.2.1",
-    "styled-jsx": "3.3.1",
+    "styled-jsx": "3.3.2",
     "use-subscription": "1.5.1",
     "vm-browserify": "1.1.2",
     "watchpack": "2.0.0-beta.13",

diff --git a/test/integration/client-navigation/lib/colored-blue.js b/test/integration/client-navigation/lib/colored-blue.js
@@ -0,0 +1,6 @@
+import { css } from 'styled-jsx/css'
+export const pBlue = css.resolve`
+  p {
+    color: blue;
+  }
+`
diff --git a/test/integration/client-navigation/pages/styled-jsx-external.js b/test/integration/client-navigation/pages/styled-jsx-external.js
@@ -0,0 +1,9 @@
+import { pBlue } from '../lib/colored-blue'
+export default () => (
+  <div>
+    <p id="blue-box" className={pBlue.className}>
+      This is blue
+    </p>
+    {pBlue.styles}
+  </div>
+)
diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js
@@ -39,6 +39,7 @@ describe('Client Navigation', () => {
       '/fragment-syntax',
       '/custom-extension',
       '/styled-jsx',
+      '/styled-jsx-external',
       '/with-cdm',
       '/url-prop',
       '/url-prop-override',

diff --git a/test/integration/client-navigation/test/rendering.js b/test/integration/client-navigation/test/rendering.js
@@ -205,6 +205,14 @@ export default function (render, fetch, ctx) {
       expect(style.text().includes(`p.${styleId}{color:blue`)).toBeTruthy()
     })
 
+    test('renders styled jsx external', async () => {
+      const $ = await get$('/styled-jsx-external')
+      const styleId = $('#blue-box').attr('class')
+      const style = $('style')
+
+      expect(style.text().includes(`p.${styleId}{color:blue`)).toBeTruthy()
+    })
+
     test('renders properties populated asynchronously', async () => {
       const html = await render('/async-props')
       expect(html.includes('Diego Milito')).toBeTruthy()

diff --git a/yarn.lock b/yarn.lock
@@ -15358,10 +15358,10 @@ styled-jsx-plugin-postcss@3.0.2:
     postcss "^7.0.2"
     postcss-load-plugins "^2.3.0"
 
-styled-jsx@3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.1.tgz#d79f306c42c99cefbe8e76f35dad8100dc5c9ecc"
-  integrity sha512-RhW71t3k95E3g7Zq3lEBk+kmf+p4ZME7c5tfsYf9M5mq6CgIvFXkbvhawL2gWriXLRlMyKAYACE89Qa2JnTqUw==
+styled-jsx@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.2.tgz#2474601a26670a6049fb4d3f94bd91695b3ce018"
+  integrity sha512-daAkGd5mqhbBhLd6jYAjYBa9LpxYCzsgo/f6qzPdFxVB8yoGbhxvzQgkC0pfmCVvW3JuAEBn0UzFLBfkHVZG1g==
   dependencies:
     "@babel/types" "7.8.3"
     babel-plugin-syntax-jsx "6.18.0"