Skip to content

Commit

Permalink
Implement styled-jsx with swc's styled_jsx (vercel/turborepo#354)
Browse files Browse the repository at this point in the history
This implements support for styled-jsx in next-dev using swc's styled_jsx crate.

It's only applied in next-dev, and is only applied as a transform to app code, much like the react-refresh transform.

To do:
* [x] The transform doesn't seem to be applied. Pass the added test.

Test Plan: `cargo test -p next-dev --
test_crates_next_dev_tests_integration_turbopack_basic_styled_jsx
--nocapture`
  • Loading branch information
wbinnssmith authored Sep 14, 2022
1 parent 826998c commit d4192f4
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions packages/next-swc/crates/next-core/src/web_entry_source.rs
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from 'react'
import TestRenderer from 'react-test-renderer'

describe('styled-jsx', () => {
it('compiles away <style jsx>', () => {
const test = TestRenderer.create(
<>
<span>This should be color: red</span>
<style jsx>{`
span {
color: red;
}
`}</style>
</>,
)

expect(test.toJSON()).toMatchObject({
children: ['This should be color: red'],
props: {
className: /jsx\-[0-9a-f]+/,
},
type: 'span',
})
})
})
5 changes: 4 additions & 1 deletion packages/next-swc/crates/next-dev/tests/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit d4192f4

Please sign in to comment.