Skip to content

Commit 689c58d

Browse files
kdy1kdy1
committed
Update jest snapshots
1 parent 0fd007a commit 689c58d

File tree

1 file changed

+258
-0
lines changed

1 file changed

+258
-0
lines changed

‎packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap‎

Lines changed: 258 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -488,6 +488,46 @@ export const Test11 = ({ color })=>{
488488
"
489489
`;
490490
491+
exports[`Should load swc-confidential wasm plugin correctly > Should transform basic-variables-in-css correctly 1`] = `
492+
"import _JSXStyle from "styled-jsx/style";
493+
export default function Component() {
494+
const width = 100;
495+
const height = 200;
496+
const color = '#FF0000';
497+
return /*#__PURE__*/ React.createElement("div", {
498+
className: _JSXStyle.dynamic([
499+
[
500+
"dc595e2db5d50f19",
501+
[
502+
width,
503+
height,
504+
color
505+
]
506+
]
507+
])
508+
}, /*#__PURE__*/ React.createElement("h1", {
509+
className: _JSXStyle.dynamic([
510+
[
511+
"dc595e2db5d50f19",
512+
[
513+
width,
514+
height,
515+
color
516+
]
517+
]
518+
])
519+
}, "Basic Variables Test"), /*#__PURE__*/ React.createElement(_JSXStyle, {
520+
id: "dc595e2db5d50f19",
521+
dynamic: [
522+
width,
523+
height,
524+
color
525+
]
526+
}, \`.component.__jsx-style-dynamic-selector{width:\${width}px;height:\${height}px;color:\${color}}\`));
527+
}
528+
"
529+
`;
530+
491531
exports[`Should load swc-confidential wasm plugin correctly > Should transform class correctly 1`] = `
492532
"import _JSXStyle from "styled-jsx/style";
493533
class _class {
@@ -505,6 +545,54 @@ export { _class as default };
505545
"
506546
`;
507547
548+
exports[`Should load swc-confidential wasm plugin correctly > Should transform complex-animation-keyframes correctly 1`] = `
549+
"import _JSXStyle from "styled-jsx/style";
550+
export default function Component() {
551+
const middleOpacity = 0.5;
552+
const rotation = 180;
553+
const duration = 1000;
554+
const easing = 'ease-in-out';
555+
const delay = 200;
556+
return /*#__PURE__*/ React.createElement("div", {
557+
className: _JSXStyle.dynamic([
558+
[
559+
"9a951a50ad92485b",
560+
[
561+
middleOpacity,
562+
rotation,
563+
duration,
564+
easing,
565+
delay
566+
]
567+
]
568+
]) + " " + "wrapper"
569+
}, /*#__PURE__*/ React.createElement("div", {
570+
className: _JSXStyle.dynamic([
571+
[
572+
"9a951a50ad92485b",
573+
[
574+
middleOpacity,
575+
rotation,
576+
duration,
577+
easing,
578+
delay
579+
]
580+
]
581+
]) + " " + "animated"
582+
}, "Animated Element"), /*#__PURE__*/ React.createElement(_JSXStyle, {
583+
id: "9a951a50ad92485b",
584+
dynamic: [
585+
middleOpacity,
586+
rotation,
587+
duration,
588+
easing,
589+
delay
590+
]
591+
}, \`@-webkit-keyframes customAnimation{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}50%{opacity:\${middleOpacity};-webkit-transform:rotate(\${rotation}deg);transform:rotate(\${rotation}deg)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes customAnimation{0%{opacity:0;-moz-transform:scale(0);transform:scale(0)}50%{opacity:\${middleOpacity};-moz-transform:rotate(\${rotation}deg);transform:rotate(\${rotation}deg)}100%{opacity:1;-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes customAnimation{0%{opacity:0;-o-transform:scale(0);transform:scale(0)}50%{opacity:\${middleOpacity};-o-transform:rotate(\${rotation}deg);transform:rotate(\${rotation}deg)}100%{opacity:1;-o-transform:scale(1);transform:scale(1)}}@keyframes customAnimation{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}50%{opacity:\${middleOpacity};-webkit-transform:rotate(\${rotation}deg);-moz-transform:rotate(\${rotation}deg);-o-transform:rotate(\${rotation}deg);transform:rotate(\${rotation}deg)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.wrapper.__jsx-style-dynamic-selector{}.wrapper.__jsx-style-dynamic-selector .animated.__jsx-style-dynamic-selector{-webkit-animation:customAnimation \${duration}ms \${easing} forwards;-moz-animation:customAnimation \${duration}ms \${easing} forwards;-o-animation:customAnimation \${duration}ms \${easing} forwards;animation:customAnimation \${duration}ms \${easing} forwards;-webkit-animation-delay:\${delay}ms;-moz-animation-delay:\${delay}ms;-o-animation-delay:\${delay}ms;animation-delay:\${delay}ms}\`));
592+
}
593+
"
594+
`;
595+
508596
exports[`Should load swc-confidential wasm plugin correctly > Should transform component-attribute correctly 1`] = `
509597
"import _JSXStyle from "styled-jsx/style";
510598
const Test = ()=>/*#__PURE__*/ React.createElement("div", {
@@ -575,6 +663,57 @@ class Test extends React.Component {
575663
"
576664
`;
577665
666+
exports[`Should load swc-confidential wasm plugin correctly > Should transform css-variables-and-functions correctly 1`] = `
667+
"import _JSXStyle from "styled-jsx/style";
668+
export default function Component() {
669+
const dynamicValue = '"dynamic content"';
670+
const color1 = '#FF0000';
671+
const color2 = '#0000FF';
672+
const offset = 5;
673+
const spacing = 10;
674+
return /*#__PURE__*/ React.createElement("div", {
675+
className: _JSXStyle.dynamic([
676+
[
677+
"22c978f6faeec16f",
678+
[
679+
dynamicValue,
680+
color1,
681+
color2,
682+
offset,
683+
offset,
684+
spacing
685+
]
686+
]
687+
]) + " " + "container"
688+
}, /*#__PURE__*/ React.createElement("div", {
689+
className: _JSXStyle.dynamic([
690+
[
691+
"22c978f6faeec16f",
692+
[
693+
dynamicValue,
694+
color1,
695+
color2,
696+
offset,
697+
offset,
698+
spacing
699+
]
700+
]
701+
]) + " " + "item"
702+
}, "CSS Variables and Functions"), /*#__PURE__*/ React.createElement(_JSXStyle, {
703+
id: "22c978f6faeec16f",
704+
dynamic: [
705+
dynamicValue,
706+
color1,
707+
color2,
708+
offset,
709+
offset,
710+
spacing
711+
]
712+
}, \`.container.__jsx-style-dynamic-selector{--local-var:\${dynamicValue};color:var(--text-color);background:-webkit-linear-gradient(left,\${color1},\${color2});background:-moz-linear-gradient(left,\${color1},\${color2});background:-o-linear-gradient(left,\${color1},\${color2});background:linear-gradient(to right,\${color1},\${color2})}.container.__jsx-style-dynamic-selector .item.__jsx-style-dynamic-selector{-webkit-transform:translate(-webkit-calc(var(--x) + \${offset}px),-webkit-calc(var(--y) + \${offset}px));-moz-transform:translate(-moz-calc(var(--x) + \${offset}px),-moz-calc(var(--y) + \${offset}px));-ms-transform:translate(calc(var(--x) + \${offset}px),calc(var(--y) + \${offset}px));-o-transform:translate(calc(var(--x) + \${offset}px),calc(var(--y) + \${offset}px));transform:translate(-webkit-calc(var(--x) + \${offset}px),-webkit-calc(var(--y) + \${offset}px));transform:translate(-moz-calc(var(--x) + \${offset}px),-moz-calc(var(--y) + \${offset}px));transform:translate(calc(var(--x) + \${offset}px),calc(var(--y) + \${offset}px))}.container.__jsx-style-dynamic-selector div.__jsx-style-dynamic-selector{margin:-webkit-calc(10px + \${spacing}px);margin:-moz-calc(10px + \${spacing}px);margin:calc(10px + \${spacing}px)}\`));
713+
}
714+
"
715+
`;
716+
578717
exports[`Should load swc-confidential wasm plugin correctly > Should transform different-jsx-ids correctly 1`] = `
579718
"import _JSXStyle from "styled-jsx/style";
580719
const color = "red";
@@ -889,6 +1028,68 @@ export default function IndexPage() {
8891028
"
8901029
`;
8911030
1031+
exports[`Should load swc-confidential wasm plugin correctly > Should transform global-styles-with-dynamic-values correctly 1`] = `
1032+
"import _JSXStyle from "styled-jsx/style";
1033+
export default function Component() {
1034+
const id = 'theme-1';
1035+
const cssVariables = {
1036+
'--primary-color': '#0070f3',
1037+
'--secondary-color': '#ff0080'
1038+
};
1039+
const stringifyCssVariablesObject = (obj)=>{
1040+
return Object.entries(obj).map(([key, value])=>\`\${key}: \${value};\`).join('\\n');
1041+
};
1042+
const buttonColor = 'var(--primary-color)';
1043+
const backgroundColor = '#f0f0f0';
1044+
return /*#__PURE__*/ React.createElement("div", {
1045+
className: _JSXStyle.dynamic([
1046+
[
1047+
"f656cf9d5a360ff0",
1048+
[
1049+
id,
1050+
stringifyCssVariablesObject(cssVariables),
1051+
buttonColor,
1052+
backgroundColor
1053+
]
1054+
]
1055+
]) + " " + \`scope-\${id}\`
1056+
}, /*#__PURE__*/ React.createElement("button", {
1057+
className: _JSXStyle.dynamic([
1058+
[
1059+
"f656cf9d5a360ff0",
1060+
[
1061+
id,
1062+
stringifyCssVariablesObject(cssVariables),
1063+
buttonColor,
1064+
backgroundColor
1065+
]
1066+
]
1067+
])
1068+
}, "Global Styled Button"), /*#__PURE__*/ React.createElement("div", {
1069+
className: _JSXStyle.dynamic([
1070+
[
1071+
"f656cf9d5a360ff0",
1072+
[
1073+
id,
1074+
stringifyCssVariablesObject(cssVariables),
1075+
buttonColor,
1076+
backgroundColor
1077+
]
1078+
]
1079+
])
1080+
}, "Styled Div"), /*#__PURE__*/ React.createElement(_JSXStyle, {
1081+
id: "f656cf9d5a360ff0",
1082+
dynamic: [
1083+
id,
1084+
stringifyCssVariablesObject(cssVariables),
1085+
buttonColor,
1086+
backgroundColor
1087+
]
1088+
}, \`.scope-\${id}{\${stringifyCssVariablesObject(cssVariables)}}.scope-\${id} button{color:\${buttonColor}}.scope-\${id} div{background-color:\${backgroundColor}}\`));
1089+
}
1090+
"
1091+
`;
1092+
8921093
exports[`Should load swc-confidential wasm plugin correctly > Should transform issue--317 correctly 1`] = `
8931094
"import _JSXStyle from "styled-jsx/style";
8941095
export const MyComponent = ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
@@ -998,6 +1199,47 @@ export default (()=>/*#__PURE__*/ React.createElement("div", {
9981199
"
9991200
`;
10001201
1202+
exports[`Should load swc-confidential wasm plugin correctly > Should transform media-queries-with-variables correctly 1`] = `
1203+
"import _JSXStyle from "styled-jsx/style";
1204+
export default function Component() {
1205+
const ResponsiveBreakpoint = {
1206+
mobile: '768px',
1207+
tablet: '1024px',
1208+
desktop: '1440px'
1209+
};
1210+
const breakpoint = 'mobile';
1211+
const mobileWidth = 320;
1212+
return /*#__PURE__*/ React.createElement("div", {
1213+
className: _JSXStyle.dynamic([
1214+
[
1215+
"3cd101c7fd762502",
1216+
[
1217+
ResponsiveBreakpoint[breakpoint],
1218+
mobileWidth
1219+
]
1220+
]
1221+
]) + " " + "component"
1222+
}, /*#__PURE__*/ React.createElement("div", {
1223+
className: _JSXStyle.dynamic([
1224+
[
1225+
"3cd101c7fd762502",
1226+
[
1227+
ResponsiveBreakpoint[breakpoint],
1228+
mobileWidth
1229+
]
1230+
]
1231+
]) + " " + "active"
1232+
}, "Responsive Element"), /*#__PURE__*/ React.createElement(_JSXStyle, {
1233+
id: "3cd101c7fd762502",
1234+
dynamic: [
1235+
ResponsiveBreakpoint[breakpoint],
1236+
mobileWidth
1237+
]
1238+
}, \`.component.__jsx-style-dynamic-selector{width:100%}@media(max-width:\${ResponsiveBreakpoint[breakpoint]}){.component.__jsx-style-dynamic-selector{width:\${mobileWidth}px}.component.__jsx-style-dynamic-selector.active.__jsx-style-dynamic-selector{color:blue}.component.__jsx-style-dynamic-selector div.__jsx-style-dynamic-selector{display:block}}\`));
1239+
}
1240+
"
1241+
`;
1242+
10011243
exports[`Should load swc-confidential wasm plugin correctly > Should transform mixed-global-scoped correctly 1`] = `
10021244
"import _JSXStyle from "styled-jsx/style";
10031245
const Test = ()=>/*#__PURE__*/ React.createElement(_JSXStyle, {
@@ -1052,6 +1294,22 @@ export { _class as default };
10521294
"
10531295
`;
10541296
1297+
exports[`Should load swc-confidential wasm plugin correctly > Should transform nested-selectors correctly 1`] = `
1298+
"import _JSXStyle from "styled-jsx/style";
1299+
export default function Component() {
1300+
return /*#__PURE__*/ React.createElement("div", {
1301+
className: "jsx-2552bb7cce0bcbcf" + " " + "parent"
1302+
}, /*#__PURE__*/ React.createElement("div", {
1303+
className: "jsx-2552bb7cce0bcbcf" + " " + "child"
1304+
}, "Nested Selectors Test"), /*#__PURE__*/ React.createElement("h1", {
1305+
className: "jsx-2552bb7cce0bcbcf"
1306+
}, "Heading"), /*#__PURE__*/ React.createElement(_JSXStyle, {
1307+
id: "2552bb7cce0bcbcf"
1308+
}, ".parent.jsx-2552bb7cce0bcbcf{position:relative}.parent.jsx-2552bb7cce0bcbcf.jsx-2552bb7cce0bcbcf:hover{background-color:red}.parent.jsx-2552bb7cce0bcbcf .child.jsx-2552bb7cce0bcbcf{margin-top:10px}.parent.jsx-2552bb7cce0bcbcf div.jsx-2552bb7cce0bcbcf{padding:15px}.parent.jsx-2552bb7cce0bcbcf h1.jsx-2552bb7cce0bcbcf{font-size:24px}"));
1309+
}
1310+
"
1311+
`;
1312+
10551313
exports[`Should load swc-confidential wasm plugin correctly > Should transform next-54653 correctly 1`] = `
10561314
"const _defaultExport = new String("@media(max-width:870px){th.expiration-date-cell,td.expiration-date-cell{display:none}}");
10571315
_defaultExport.__hash = "fd71bf06ba8860bb";

0 commit comments

Comments
 (0)