rsnext/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js
Jiachi Liu 7a09f88d14
Reexports styled-jsx JSXStyle in nextjs (#36585)
When using pnpm / yarnPnP to install next.js, styled-jsx as dependency is not hoisted in the top level node_modules, it will fail when nodejs is trying to resolve `styled-jsx/style` from project directory. Re-export `styled-jsx/style` in next.js and let swc/babel plugin compile the import path it to `next/dist/shared/lib/styled-jsx`

Resolves #10149
Closes #21320
Closes #9325



Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
2022-04-30 20:25:05 +00:00

39 lines
1.5 KiB
JavaScript

import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import colors, { size } from './constants';
const color = 'red';
const bar = new String("div.jsx-aaed0341accea8f{font-size:3em}");
bar.__hash = "aaed0341accea8f";
const baz = new String("div{font-size:3em}");
baz.__hash = "aaed0341accea8f";
const a = new String(`div{font-size:${size}em}`);
a.__hash = "3066b487d298d78f";
export const uh = bar;
export const foo = new String(`div.jsx-67354fc16554bdab{color:${color}}`);
foo.__hash = "67354fc16554bdab";
({
styles: <_JSXStyle id={"ef44b0e76b4e59a2"}>{`div.jsx-ef44b0e76b4e59a2{color:${colors.green.light}}a.jsx-ef44b0e76b4e59a2{color:red}`}</_JSXStyle>,
className: "jsx-ef44b0e76b4e59a2"
});
const b = {
styles: <_JSXStyle id={"ef44b0e76b4e59a2"}>{`div.jsx-ef44b0e76b4e59a2{color:${colors.green.light}}a.jsx-ef44b0e76b4e59a2{color:red}`}</_JSXStyle>,
className: "jsx-ef44b0e76b4e59a2"
};
const dynamic = (colors1)=>{
const b = {
styles: <_JSXStyle id={"d1249fb76dde6727"} dynamic={[
colors1.green.light
]}>{`div.__jsx-style-dynamic-selector{color:${colors1.green.light}}a.__jsx-style-dynamic-selector{color:red}`}</_JSXStyle>,
className: _JSXStyle.dynamic([
[
"d1249fb76dde6727",
[
colors1.green.light
]
]
])
};
};
export default {
styles: <_JSXStyle id={"d85f88350ca31aae"}>{`div.jsx-d85f88350ca31aae{font-size:3em}p.jsx-d85f88350ca31aae{color:${color}}`}</_JSXStyle>,
className: "jsx-d85f88350ca31aae"
};