diff --git a/packages/next/package.json b/packages/next/package.json
index 6b65ff072ee172efa9c00905c00bcf0bf53e9832..52499fa8ea8462f42055a0ba3269d195d4320632 100644
--- 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
new file mode 100644
index 0000000000000000000000000000000000000000..af26b8fe6d9a2c5f4d956ff1fa304ca4114595a0
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000000000000000000000000000000..c4182130e5f29224d8bf5573e477a6d6eed0013f
--- /dev/null
+++ 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
index ec697fa9f4b0db11364ca27f0d4bbbc4c9ffd431..7d8a3eb1f185e01a399be5276d62f1aa590aa24f 100644
--- 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
index ba5cbef38c420bdb4187405bdc7c360cdcfd8a27..937763ee1419a521c37053ed72390707e19daf77 100644
--- 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
index ad625cfbe8bbfe285bfdfcb2e65ff4b0b2db1008..5dfff92352bcb474f7072fc723ac11ad45eed9a3 100644
--- 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"