diff --git a/packages/next-swc/crates/next-core/src/server_rendered_source.rs b/packages/next-swc/crates/next-core/src/server_rendered_source.rs index f0ea3f64bab97..aa3b154ffefc8 100644 --- a/packages/next-swc/crates/next-core/src/server_rendered_source.rs +++ b/packages/next-swc/crates/next-core/src/server_rendered_source.rs @@ -87,6 +87,7 @@ pub async fn create_server_rendered_source( }; let client_module_options_context = ModuleOptionsContext { enable_react_refresh, + enable_styled_jsx: true, } .cell(); let next_client_transition = NextClientTransition { diff --git a/packages/next-swc/crates/next-core/src/web_entry_source.rs b/packages/next-swc/crates/next-core/src/web_entry_source.rs index 94a5517bd0700..3b05d48f8ec8d 100644 --- a/packages/next-swc/crates/next-core/src/web_entry_source.rs +++ b/packages/next-swc/crates/next-core/src/web_entry_source.rs @@ -57,6 +57,7 @@ pub async fn create_web_entry_source( // we try resolve it once at the root and pass down a context to all // the modules. enable_react_refresh, + enable_styled_jsx: true, } .into(), ) diff --git a/packages/next-swc/crates/next-dev/tests/integration/turbopack/basic/styled-jsx/index.js b/packages/next-swc/crates/next-dev/tests/integration/turbopack/basic/styled-jsx/index.js new file mode 100644 index 0000000000000..c0691d8d98ffe --- /dev/null +++ b/packages/next-swc/crates/next-dev/tests/integration/turbopack/basic/styled-jsx/index.js @@ -0,0 +1,25 @@ +import React from 'react' +import TestRenderer from 'react-test-renderer' + +describe('styled-jsx', () => { + it('compiles away + , + ) + + expect(test.toJSON()).toMatchObject({ + children: ['This should be color: red'], + props: { + className: /jsx\-[0-9a-f]+/, + }, + type: 'span', + }) + }) +}) diff --git a/packages/next-swc/crates/next-dev/tests/package.json b/packages/next-swc/crates/next-dev/tests/package.json index 8c4ae087a410d..02872e5dae7a4 100644 --- a/packages/next-swc/crates/next-dev/tests/package.json +++ b/packages/next-swc/crates/next-dev/tests/package.json @@ -2,7 +2,10 @@ "private": true, "devDependencies": { "expect": "^24.5.0", - "jest-circus-browser": "^1.0.7" + "jest-circus-browser": "^1.0.7", + "react": "^18.2.0", + "react-test-renderer": "^18.2.0", + "styled-jsx": "^5.0.7" }, "installConfig": { "hoistingLimits": "workspaces"