Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(stylex.props): transform dynamic styles #50

Merged
merged 1 commit into from
Oct 10, 2024
+469 −26
Merged

feat(stylex.props): transform dynamic styles #50

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions Cargo.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 1 addition & 4 deletions crates/stylex-shared/src/shared/enums/data_structures/evaluate_result_value.rs
View file
Original file line number Diff line number Diff line change
@@ -46,10 +46,7 @@ impl fmt::Debug for EvaluateResultValue {
Self::FunctionConfig(e) => f.debug_tuple("FunctionConfig").field(e).finish(),
Self::FunctionConfigMap(e) => f.debug_tuple("FunctionConfigMap").field(e).finish(),
Self::ThemeRef(e) => f.debug_tuple("ThemeRef").field(e).finish(),
Self::Callback(_) => f
.debug_tuple("Callback")
.field(&"Function Pointer")
.finish(),
Self::Callback(_) => f.debug_tuple("Callback").field(&"Callback").finish(),
}
}
}
13 changes: 7 additions & 6 deletions crates/stylex-shared/src/shared/utils/core/stylex_merge.rs
View file
Original file line number Diff line number Diff line change
@@ -166,6 +166,7 @@ pub(crate) fn stylex_merge(
break;
}
}

if !state.gen_conditional_classes() && conditional > 0 {
bail_out = true;
}
@@ -180,20 +181,20 @@ pub(crate) fn stylex_merge(

assert!(arg_path.spread.is_none(), "Spread not implemented yet");

let mut member_transfom = MemberTransform {
let mut member_transform = MemberTransform {
index,
bail_out_index,
non_null_props: non_null_props.clone(),
state: state.clone(),
parents: vec![],
};

arg_path.expr = arg_path.expr.clone().fold_with(&mut member_transfom);
arg_path.expr = arg_path.expr.clone().fold_with(&mut member_transform);

index = member_transfom.index;
bail_out_index = member_transfom.bail_out_index;
non_null_props = member_transfom.non_null_props;
*state = member_transfom.state;
index = member_transform.index;
bail_out_index = member_transform.bail_out_index;
non_null_props = member_transform.non_null_props;
*state = member_transform.state;
}

for arg in args.iter() {
18 changes: 9 additions & 9 deletions crates/stylex-shared/src/shared/utils/js/evaluate.rs
View file
Original file line number Diff line number Diff line change
@@ -695,7 +695,7 @@ fn _evaluate(
});

let value = match value.as_ref() {
EvaluateResultValue::Expr(expr) => expr.clone(),
EvaluateResultValue::Expr(expr) => Some(expr.clone()),
EvaluateResultValue::Vec(items) => {
let mut elems: Vec<Option<ExprOrSpread>> = vec![];

@@ -741,20 +741,20 @@ fn _evaluate(
elems,
};

Box::new(Expr::Array(array))
}
EvaluateResultValue::Callback(_cb) => {
unimplemented!("EvaluateResultValue::Callback");
Some(Box::new(Expr::Array(array)))
}
EvaluateResultValue::Callback(_) => None,
_ => {
panic!("Property value must be an expression")
}
};

props.push(PropOrSpread::Prop(Box::new(Prop::from(KeyValueProp {
key: PropName::Ident(quote_ident!(key.unwrap())),
value: value.clone(),
}))));
if let Some(value) = value {
props.push(PropOrSpread::Prop(Box::new(Prop::from(KeyValueProp {
key: PropName::Ident(quote_ident!(key.unwrap())),
value: value.clone(),
}))));
}
}

_ => unimplemented!(),
29 changes: 29 additions & 0 deletions ...c_test.rs/dynamic_style_function_only_accepts_named_parameters_valid_with_other_styles.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
//__stylex_metadata_start__[{"class_name":"x13jbg0v","style":{"rtl":null,"ltr":".x13jbg0v{font-size:var(--fontSize,revert)}"},"priority":3000},{"class_name":"x3stwaq","style":{"rtl":null,"ltr":".x3stwaq{font-weight:100}"},"priority":3000},{"class_name":"xngnso2","style":{"rtl":null,"ltr":".xngnso2{font-size:1.5rem}"},"priority":3000}]__stylex_metadata_end__
import _inject from "@stylexjs/stylex/lib/stylex-inject";
var _inject2 = _inject;
import stylex from "@stylexjs/stylex";
_inject2(".x13jbg0v{font-size:var(--fontSize,revert)}", 3000);
_inject2(".x3stwaq{font-weight:100}", 3000);
_inject2(".xngnso2{font-size:1.5rem}", 3000);
const styles = {
size: (size: number)=>[
{
fontSize: "x13jbg0v",
$$css: true
},
{
"--fontSize": ((val)=>typeof val === "number" ? val + "px" : val != null ? val : "initial")(8 * size + 'px')
}
],
count: {
fontWeight: "x3stwaq",
$$css: true
},
largeNumber: {
fontSize: "xngnso2",
$$css: true
}
};
const { className, style = {} } = {
...stylex.props(styles.count, styles.size(size), styles.largeNumber)
};
94 changes: 94 additions & 0 deletions crates/stylex-shared/tests/fixture/counter-with-dynamic-styles/input.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
'use client';

import * as stylex from '@stylexjs/stylex';
import { spacing, text, globalTokens as $ } from './globalTokens.stylex';
import { colors } from '@stylexjs/open-props/lib/colors.stylex';
import { useState } from 'react';

export default function Counter() {
const [count, setCount] = useState(0);

return (
<div {...stylex.props(styles.container)}>
<button
{...stylex.props(styles.button)}
onClick={() => setCount((c) => c - 1)}
>
-
</button>
<div
{...stylex.props(
styles.count,
styles.size(count),
Math.abs(count) > 99 && styles.largeNumber,
)}
>
{count}
</div>
<button
{...stylex.props(styles.button)}
onClick={() => setCount((c) => c + 1)}
>
+
</button>
</div>
);
}

const DARK = '@media (prefers-color-scheme: dark)';

const styles = stylex.create({
size: (size) => ({ fontSize: (8 * size)+'px'}),
container: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
borderRadius: spacing.md,
borderWidth: 1,
borderStyle: 'solid',
borderColor: colors.blue7,
padding: spacing.xxxs,
fontFamily: $.fontSans,
gap: spacing.xs,
},
button: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '6rem',
aspectRatio: 1,
color: colors.blue7,
backgroundColor: {
default: colors.gray3,
':hover': colors.gray4,
[DARK]: {
default: colors.gray9,
':hover': colors.gray8,
},
},
borderWidth: 0,
borderStyle: 'none',
borderRadius: spacing.xs,
padding: spacing.xs,
margin: spacing.xs,
cursor: 'pointer',
fontSize: text.h2,
transform: {
default: null,
':hover': 'scale(1.025)',
':active': 'scale(0.975)',
},
},
count: {
fontSize: text.h2,
fontWeight: 100,
color: colors.lime7,
minWidth: '6rem',
textAlign: 'center',
fontFamily: $.fontMono,
},
largeNumber: {
fontSize: text.h3,
},
});
91 changes: 91 additions & 0 deletions crates/stylex-shared/tests/fixture/counter-with-dynamic-styles/rs_output.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
'use client';
import _inject from "@stylexjs/stylex/lib/stylex-inject";
var _inject2 = _inject;
import "@stylexjs/open-props/lib/colors.stylex";
import "./globalTokens.stylex";
import * as stylex from '@stylexjs/stylex';
import { spacing, text, globalTokens as $ } from './globalTokens.stylex';
import { colors } from '@stylexjs/open-props/lib/colors.stylex';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return <div {...{
className: "Page__styles.container x78zum5 x6s0dn4 xl56j7k x1q0g3np xkorlav xmkeg23 x1y0btm7 xzj82u7 xhcr65l x1byiw6p x1l7lfc5"
}}>
<button {...{
className: "Page__styles.button x78zum5 x6s0dn4 xl56j7k x17frcva x1plog1 x1ynku2j xij5jp x6lnu34 xd84qqf x1ap9xfb xc342km xng3xce x12ugs8o x1kopudh xp822f4 x1ypdohk xf8wwq x1u4xmye xglsxx3"
}} onClick={()=>setCount((c)=>c - 1)}>
-
</button>
<div {...stylex.props(styles.count, styles.size(count), Math.abs(count) > 99 && styles.largeNumber)}>
{count}
</div>
<button {...{
className: "Page__styles.button x78zum5 x6s0dn4 xl56j7k x17frcva x1plog1 x1ynku2j xij5jp x6lnu34 xd84qqf x1ap9xfb xc342km xng3xce x12ugs8o x1kopudh xp822f4 x1ypdohk xf8wwq x1u4xmye xglsxx3"
}} onClick={()=>setCount((c)=>c + 1)}>
+
</button>
</div>;
}
const DARK = '@media (prefers-color-scheme: dark)';
_inject2(".x13jbg0v{font-size:var(--fontSize,revert)}", 3000);
_inject2(".x78zum5{display:flex}", 3000);
_inject2(".x6s0dn4{align-items:center}", 3000);
_inject2(".xl56j7k{justify-content:center}", 3000);
_inject2(".x1q0g3np{flex-direction:row}", 3000);
_inject2(".xkorlav{border-radius:var(--x120tmbh)}", 2000);
_inject2(".xmkeg23{border-width:1px}", 2000);
_inject2(".x1y0btm7{border-style:solid}", 2000);
_inject2(".xzj82u7{border-color:var(--x1g16e7s)}", 2000);
_inject2(".xhcr65l{padding:var(--xk88l2w)}", 1000);
_inject2(".x1byiw6p{font-family:var(--x6ywdb8)}", 3000);
_inject2(".x1l7lfc5{gap:var(--xvp50ho)}", 2000);
_inject2(".x17frcva{height:6rem}", 4000);
_inject2(".x1plog1{aspect-ratio:1}", 3000);
_inject2(".x1ynku2j{color:var(--x1g16e7s)}", 3000);
_inject2(".xij5jp{background-color:var(--x1wnl0mb)}", 3000);
_inject2(".x6lnu34:hover{background-color:var(--x1987uwy)}", 3130);
_inject2("@media (prefers-color-scheme: dark){.xd84qqf.xd84qqf{background-color:var(--xv11w9p)}}", 3200);
_inject2("@media (prefers-color-scheme: dark){.x1ap9xfb.x1ap9xfb:hover{background-color:var(--xd0alct)}}", 3330);
_inject2(".xc342km{border-width:0}", 2000);
_inject2(".xng3xce{border-style:none}", 2000);
_inject2(".x12ugs8o{border-radius:var(--xvp50ho)}", 2000);
_inject2(".x1kopudh{padding:var(--xvp50ho)}", 1000);
_inject2(".xp822f4{margin:var(--xvp50ho)}", 1000);
_inject2(".x1ypdohk{cursor:pointer}", 3000);
_inject2(".xf8wwq{font-size:var(--x1nryaqe)}", 3000);
_inject2(".x1u4xmye:hover{transform:scale(1.025)}", 3130);
_inject2(".xglsxx3:active{transform:scale(.975)}", 3170);
_inject2(".x3stwaq{font-weight:100}", 3000);
_inject2(".x1fk3gbn{color:var(--x146xnew)}", 3000);
_inject2(".x1843ork{min-width:6rem}", 4000);
_inject2(".x2b8uid{text-align:center}", 3000);
_inject2(".x1nlbcxq{font-family:var(--xur0yta)}", 3000);
_inject2(".x8c9cfh{font-size:var(--x1yfd0fu)}", 3000);
const styles = {
size: (size)=>[
{
"Page__styles.size": "Page__styles.size",
fontSize: "x13jbg0v",
$$css: true
},
{
"--fontSize": ((val)=>typeof val === "number" ? val + "px" : val != null ? val : "initial")(8 * size + 'px')
}
],
count: {
"Page__styles.count": "Page__styles.count",
fontSize: "xf8wwq",
fontWeight: "x3stwaq",
color: "x1fk3gbn",
minWidth: "x1843ork",
textAlign: "x2b8uid",
fontFamily: "x1nlbcxq",
$$css: true
},
largeNumber: {
"Page__styles.largeNumber": "Page__styles.largeNumber",
fontSize: "x8c9cfh",
$$css: true
}
};
50 changes: 50 additions & 0 deletions crates/stylex-shared/tests/fixture/counter-with-dynamic-styles/rs_output_prod.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
'use client';
import * as stylex from '@stylexjs/stylex';
import { spacing, text, globalTokens as $ } from './globalTokens.stylex';
import { colors } from '@stylexjs/open-props/lib/colors.stylex';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return <div {...{
className: "x78zum5 x6s0dn4 xl56j7k x1q0g3np xkorlav xmkeg23 x1y0btm7 xzj82u7 xhcr65l x1byiw6p x1l7lfc5"
}}>
<button {...{
className: "x78zum5 x6s0dn4 xl56j7k x17frcva x1plog1 x1ynku2j xij5jp x6lnu34 xd84qqf x1ap9xfb xc342km xng3xce x12ugs8o x1kopudh xp822f4 x1ypdohk xf8wwq x1u4xmye xglsxx3"
}} onClick={()=>setCount((c)=>c - 1)}>
-
</button>
<div {...stylex.props(styles.count, styles.size(count), Math.abs(count) > 99 && styles.largeNumber)}>
{count}
</div>
<button {...{
className: "x78zum5 x6s0dn4 xl56j7k x17frcva x1plog1 x1ynku2j xij5jp x6lnu34 xd84qqf x1ap9xfb xc342km xng3xce x12ugs8o x1kopudh xp822f4 x1ypdohk xf8wwq x1u4xmye xglsxx3"
}} onClick={()=>setCount((c)=>c + 1)}>
+
</button>
</div>;
}
const DARK = '@media (prefers-color-scheme: dark)';
const styles = {
size: (size)=>[
{
fontSize: "x13jbg0v",
$$css: true
},
{
"--fontSize": ((val)=>typeof val === "number" ? val + "px" : val != null ? val : "initial")(8 * size + 'px')
}
],
count: {
fontSize: "xf8wwq",
fontWeight: "x3stwaq",
color: "x1fk3gbn",
minWidth: "x1843ork",
textAlign: "x2b8uid",
fontFamily: "x1nlbcxq",
$$css: true
},
largeNumber: {
fontSize: "x8c9cfh",
$$css: true
}
};
92 changes: 92 additions & 0 deletions crates/stylex-shared/tests/fixture/counter-with-dynamic-styles/wasm_output.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
//__stylex_metadata_start__[{"class_name":"x13jbg0v","style":{"rtl":null,"ltr":".x13jbg0v{font-size:var(--fontSize,revert)}"},"priority":3000},{"class_name":"x78zum5","style":{"rtl":null,"ltr":".x78zum5{display:flex}"},"priority":3000},{"class_name":"x6s0dn4","style":{"rtl":null,"ltr":".x6s0dn4{align-items:center}"},"priority":3000},{"class_name":"xl56j7k","style":{"rtl":null,"ltr":".xl56j7k{justify-content:center}"},"priority":3000},{"class_name":"x1q0g3np","style":{"rtl":null,"ltr":".x1q0g3np{flex-direction:row}"},"priority":3000},{"class_name":"xkorlav","style":{"rtl":null,"ltr":".xkorlav{border-radius:var(--x120tmbh)}"},"priority":2000},{"class_name":"xmkeg23","style":{"rtl":null,"ltr":".xmkeg23{border-width:1px}"},"priority":2000},{"class_name":"x1y0btm7","style":{"rtl":null,"ltr":".x1y0btm7{border-style:solid}"},"priority":2000},{"class_name":"xzj82u7","style":{"rtl":null,"ltr":".xzj82u7{border-color:var(--x1g16e7s)}"},"priority":2000},{"class_name":"xhcr65l","style":{"rtl":null,"ltr":".xhcr65l{padding:var(--xk88l2w)}"},"priority":1000},{"class_name":"x1byiw6p","style":{"rtl":null,"ltr":".x1byiw6p{font-family:var(--x6ywdb8)}"},"priority":3000},{"class_name":"x1l7lfc5","style":{"rtl":null,"ltr":".x1l7lfc5{gap:var(--xvp50ho)}"},"priority":2000},{"class_name":"x17frcva","style":{"rtl":null,"ltr":".x17frcva{height:6rem}"},"priority":4000},{"class_name":"x1plog1","style":{"rtl":null,"ltr":".x1plog1{aspect-ratio:1}"},"priority":3000},{"class_name":"x1ynku2j","style":{"rtl":null,"ltr":".x1ynku2j{color:var(--x1g16e7s)}"},"priority":3000},{"class_name":"xij5jp","style":{"rtl":null,"ltr":".xij5jp{background-color:var(--x1wnl0mb)}"},"priority":3000},{"class_name":"x6lnu34","style":{"rtl":null,"ltr":".x6lnu34:hover{background-color:var(--x1987uwy)}"},"priority":3130},{"class_name":"xd84qqf","style":{"rtl":null,"ltr":"@media (prefers-color-scheme: dark){.xd84qqf.xd84qqf{background-color:var(--xv11w9p)}}"},"priority":3200},{"class_name":"x1ap9xfb","style":{"rtl":null,"ltr":"@media (prefers-color-scheme: dark){.x1ap9xfb.x1ap9xfb:hover{background-color:var(--xd0alct)}}"},"priority":3330},{"class_name":"xc342km","style":{"rtl":null,"ltr":".xc342km{border-width:0}"},"priority":2000},{"class_name":"xng3xce","style":{"rtl":null,"ltr":".xng3xce{border-style:none}"},"priority":2000},{"class_name":"x12ugs8o","style":{"rtl":null,"ltr":".x12ugs8o{border-radius:var(--xvp50ho)}"},"priority":2000},{"class_name":"x1kopudh","style":{"rtl":null,"ltr":".x1kopudh{padding:var(--xvp50ho)}"},"priority":1000},{"class_name":"xp822f4","style":{"rtl":null,"ltr":".xp822f4{margin:var(--xvp50ho)}"},"priority":1000},{"class_name":"x1ypdohk","style":{"rtl":null,"ltr":".x1ypdohk{cursor:pointer}"},"priority":3000},{"class_name":"xf8wwq","style":{"rtl":null,"ltr":".xf8wwq{font-size:var(--x1nryaqe)}"},"priority":3000},{"class_name":"x1u4xmye","style":{"rtl":null,"ltr":".x1u4xmye:hover{transform:scale(1.025)}"},"priority":3130},{"class_name":"xglsxx3","style":{"rtl":null,"ltr":".xglsxx3:active{transform:scale(.975)}"},"priority":3170},{"class_name":"x3stwaq","style":{"rtl":null,"ltr":".x3stwaq{font-weight:100}"},"priority":3000},{"class_name":"x1fk3gbn","style":{"rtl":null,"ltr":".x1fk3gbn{color:var(--x146xnew)}"},"priority":3000},{"class_name":"x1843ork","style":{"rtl":null,"ltr":".x1843ork{min-width:6rem}"},"priority":4000},{"class_name":"x2b8uid","style":{"rtl":null,"ltr":".x2b8uid{text-align:center}"},"priority":3000},{"class_name":"x1nlbcxq","style":{"rtl":null,"ltr":".x1nlbcxq{font-family:var(--xur0yta)}"},"priority":3000},{"class_name":"x8c9cfh","style":{"rtl":null,"ltr":".x8c9cfh{font-size:var(--x1yfd0fu)}"},"priority":3000}]__stylex_metadata_end__
'use client';
import _inject from "@stylexjs/stylex/lib/stylex-inject";
var _inject2 = _inject;
import "@stylexjs/open-props/lib/colors.stylex";
import "./globalTokens.stylex";
import * as stylex from '@stylexjs/stylex';
import { spacing, text, globalTokens as $ } from './globalTokens.stylex';
import { colors } from '@stylexjs/open-props/lib/colors.stylex';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return <div {...{
className: "Page__styles.container x78zum5 x6s0dn4 xl56j7k x1q0g3np xkorlav xmkeg23 x1y0btm7 xzj82u7 xhcr65l x1byiw6p x1l7lfc5"
}}>
<button {...{
className: "Page__styles.button x78zum5 x6s0dn4 xl56j7k x17frcva x1plog1 x1ynku2j xij5jp x6lnu34 xd84qqf x1ap9xfb xc342km xng3xce x12ugs8o x1kopudh xp822f4 x1ypdohk xf8wwq x1u4xmye xglsxx3"
}} onClick={()=>setCount((c)=>c - 1)}>
-
</button>
<div {...stylex.props(styles.count, styles.size(count), Math.abs(count) > 99 && styles.largeNumber)}>
{count}
</div>
<button {...{
className: "Page__styles.button x78zum5 x6s0dn4 xl56j7k x17frcva x1plog1 x1ynku2j xij5jp x6lnu34 xd84qqf x1ap9xfb xc342km xng3xce x12ugs8o x1kopudh xp822f4 x1ypdohk xf8wwq x1u4xmye xglsxx3"
}} onClick={()=>setCount((c)=>c + 1)}>
+
</button>
</div>;
}
const DARK = '@media (prefers-color-scheme: dark)';
_inject2(".x13jbg0v{font-size:var(--fontSize,revert)}", 3000);
_inject2(".x78zum5{display:flex}", 3000);
_inject2(".x6s0dn4{align-items:center}", 3000);
_inject2(".xl56j7k{justify-content:center}", 3000);
_inject2(".x1q0g3np{flex-direction:row}", 3000);
_inject2(".xkorlav{border-radius:var(--x120tmbh)}", 2000);
_inject2(".xmkeg23{border-width:1px}", 2000);
_inject2(".x1y0btm7{border-style:solid}", 2000);
_inject2(".xzj82u7{border-color:var(--x1g16e7s)}", 2000);
_inject2(".xhcr65l{padding:var(--xk88l2w)}", 1000);
_inject2(".x1byiw6p{font-family:var(--x6ywdb8)}", 3000);
_inject2(".x1l7lfc5{gap:var(--xvp50ho)}", 2000);
_inject2(".x17frcva{height:6rem}", 4000);
_inject2(".x1plog1{aspect-ratio:1}", 3000);
_inject2(".x1ynku2j{color:var(--x1g16e7s)}", 3000);
_inject2(".xij5jp{background-color:var(--x1wnl0mb)}", 3000);
_inject2(".x6lnu34:hover{background-color:var(--x1987uwy)}", 3130);
_inject2("@media (prefers-color-scheme: dark){.xd84qqf.xd84qqf{background-color:var(--xv11w9p)}}", 3200);
_inject2("@media (prefers-color-scheme: dark){.x1ap9xfb.x1ap9xfb:hover{background-color:var(--xd0alct)}}", 3330);
_inject2(".xc342km{border-width:0}", 2000);
_inject2(".xng3xce{border-style:none}", 2000);
_inject2(".x12ugs8o{border-radius:var(--xvp50ho)}", 2000);
_inject2(".x1kopudh{padding:var(--xvp50ho)}", 1000);
_inject2(".xp822f4{margin:var(--xvp50ho)}", 1000);
_inject2(".x1ypdohk{cursor:pointer}", 3000);
_inject2(".xf8wwq{font-size:var(--x1nryaqe)}", 3000);
_inject2(".x1u4xmye:hover{transform:scale(1.025)}", 3130);
_inject2(".xglsxx3:active{transform:scale(.975)}", 3170);
_inject2(".x3stwaq{font-weight:100}", 3000);
_inject2(".x1fk3gbn{color:var(--x146xnew)}", 3000);
_inject2(".x1843ork{min-width:6rem}", 4000);
_inject2(".x2b8uid{text-align:center}", 3000);
_inject2(".x1nlbcxq{font-family:var(--xur0yta)}", 3000);
_inject2(".x8c9cfh{font-size:var(--x1yfd0fu)}", 3000);
const styles = {
size: (size)=>[
{
"Page__styles.size": "Page__styles.size",
fontSize: "x13jbg0v",
$$css: true
},
{
"--fontSize": ((val)=>typeof val === "number" ? val + "px" : val != null ? val : "initial")(8 * size + 'px')
}
],
count: {
"Page__styles.count": "Page__styles.count",
fontSize: "xf8wwq",
fontWeight: "x3stwaq",
color: "x1fk3gbn",
minWidth: "x1843ork",
textAlign: "x2b8uid",
fontFamily: "x1nlbcxq",
$$css: true
},
largeNumber: {
"Page__styles.largeNumber": "Page__styles.largeNumber",
fontSize: "x8c9cfh",
$$css: true
}
};
51 changes: 51 additions & 0 deletions crates/stylex-shared/tests/fixture/counter-with-dynamic-styles/wasm_output_prod.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
//__stylex_metadata_start__[{"class_name":"x13jbg0v","style":{"rtl":null,"ltr":".x13jbg0v{font-size:var(--fontSize,revert)}"},"priority":3000},{"class_name":"x78zum5","style":{"rtl":null,"ltr":".x78zum5{display:flex}"},"priority":3000},{"class_name":"x6s0dn4","style":{"rtl":null,"ltr":".x6s0dn4{align-items:center}"},"priority":3000},{"class_name":"xl56j7k","style":{"rtl":null,"ltr":".xl56j7k{justify-content:center}"},"priority":3000},{"class_name":"x1q0g3np","style":{"rtl":null,"ltr":".x1q0g3np{flex-direction:row}"},"priority":3000},{"class_name":"xkorlav","style":{"rtl":null,"ltr":".xkorlav{border-radius:var(--x120tmbh)}"},"priority":2000},{"class_name":"xmkeg23","style":{"rtl":null,"ltr":".xmkeg23{border-width:1px}"},"priority":2000},{"class_name":"x1y0btm7","style":{"rtl":null,"ltr":".x1y0btm7{border-style:solid}"},"priority":2000},{"class_name":"xzj82u7","style":{"rtl":null,"ltr":".xzj82u7{border-color:var(--x1g16e7s)}"},"priority":2000},{"class_name":"xhcr65l","style":{"rtl":null,"ltr":".xhcr65l{padding:var(--xk88l2w)}"},"priority":1000},{"class_name":"x1byiw6p","style":{"rtl":null,"ltr":".x1byiw6p{font-family:var(--x6ywdb8)}"},"priority":3000},{"class_name":"x1l7lfc5","style":{"rtl":null,"ltr":".x1l7lfc5{gap:var(--xvp50ho)}"},"priority":2000},{"class_name":"x17frcva","style":{"rtl":null,"ltr":".x17frcva{height:6rem}"},"priority":4000},{"class_name":"x1plog1","style":{"rtl":null,"ltr":".x1plog1{aspect-ratio:1}"},"priority":3000},{"class_name":"x1ynku2j","style":{"rtl":null,"ltr":".x1ynku2j{color:var(--x1g16e7s)}"},"priority":3000},{"class_name":"xij5jp","style":{"rtl":null,"ltr":".xij5jp{background-color:var(--x1wnl0mb)}"},"priority":3000},{"class_name":"x6lnu34","style":{"rtl":null,"ltr":".x6lnu34:hover{background-color:var(--x1987uwy)}"},"priority":3130},{"class_name":"xd84qqf","style":{"rtl":null,"ltr":"@media (prefers-color-scheme: dark){.xd84qqf.xd84qqf{background-color:var(--xv11w9p)}}"},"priority":3200},{"class_name":"x1ap9xfb","style":{"rtl":null,"ltr":"@media (prefers-color-scheme: dark){.x1ap9xfb.x1ap9xfb:hover{background-color:var(--xd0alct)}}"},"priority":3330},{"class_name":"xc342km","style":{"rtl":null,"ltr":".xc342km{border-width:0}"},"priority":2000},{"class_name":"xng3xce","style":{"rtl":null,"ltr":".xng3xce{border-style:none}"},"priority":2000},{"class_name":"x12ugs8o","style":{"rtl":null,"ltr":".x12ugs8o{border-radius:var(--xvp50ho)}"},"priority":2000},{"class_name":"x1kopudh","style":{"rtl":null,"ltr":".x1kopudh{padding:var(--xvp50ho)}"},"priority":1000},{"class_name":"xp822f4","style":{"rtl":null,"ltr":".xp822f4{margin:var(--xvp50ho)}"},"priority":1000},{"class_name":"x1ypdohk","style":{"rtl":null,"ltr":".x1ypdohk{cursor:pointer}"},"priority":3000},{"class_name":"xf8wwq","style":{"rtl":null,"ltr":".xf8wwq{font-size:var(--x1nryaqe)}"},"priority":3000},{"class_name":"x1u4xmye","style":{"rtl":null,"ltr":".x1u4xmye:hover{transform:scale(1.025)}"},"priority":3130},{"class_name":"xglsxx3","style":{"rtl":null,"ltr":".xglsxx3:active{transform:scale(.975)}"},"priority":3170},{"class_name":"x3stwaq","style":{"rtl":null,"ltr":".x3stwaq{font-weight:100}"},"priority":3000},{"class_name":"x1fk3gbn","style":{"rtl":null,"ltr":".x1fk3gbn{color:var(--x146xnew)}"},"priority":3000},{"class_name":"x1843ork","style":{"rtl":null,"ltr":".x1843ork{min-width:6rem}"},"priority":4000},{"class_name":"x2b8uid","style":{"rtl":null,"ltr":".x2b8uid{text-align:center}"},"priority":3000},{"class_name":"x1nlbcxq","style":{"rtl":null,"ltr":".x1nlbcxq{font-family:var(--xur0yta)}"},"priority":3000},{"class_name":"x8c9cfh","style":{"rtl":null,"ltr":".x8c9cfh{font-size:var(--x1yfd0fu)}"},"priority":3000}]__stylex_metadata_end__
'use client';
import * as stylex from '@stylexjs/stylex';
import { spacing, text, globalTokens as $ } from './globalTokens.stylex';
import { colors } from '@stylexjs/open-props/lib/colors.stylex';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return <div {...{
className: "x78zum5 x6s0dn4 xl56j7k x1q0g3np xkorlav xmkeg23 x1y0btm7 xzj82u7 xhcr65l x1byiw6p x1l7lfc5"
}}>
<button {...{
className: "x78zum5 x6s0dn4 xl56j7k x17frcva x1plog1 x1ynku2j xij5jp x6lnu34 xd84qqf x1ap9xfb xc342km xng3xce x12ugs8o x1kopudh xp822f4 x1ypdohk xf8wwq x1u4xmye xglsxx3"
}} onClick={()=>setCount((c)=>c - 1)}>
-
</button>
<div {...stylex.props(styles.count, styles.size(count), Math.abs(count) > 99 && styles.largeNumber)}>
{count}
</div>
<button {...{
className: "x78zum5 x6s0dn4 xl56j7k x17frcva x1plog1 x1ynku2j xij5jp x6lnu34 xd84qqf x1ap9xfb xc342km xng3xce x12ugs8o x1kopudh xp822f4 x1ypdohk xf8wwq x1u4xmye xglsxx3"
}} onClick={()=>setCount((c)=>c + 1)}>
+
</button>
</div>;
}
const DARK = '@media (prefers-color-scheme: dark)';
const styles = {
size: (size)=>[
{
fontSize: "x13jbg0v",
$$css: true
},
{
"--fontSize": ((val)=>typeof val === "number" ? val + "px" : val != null ? val : "initial")(8 * size + 'px')
}
],
count: {
fontSize: "xf8wwq",
fontWeight: "x3stwaq",
color: "x1fk3gbn",
minWidth: "x1843ork",
textAlign: "x2b8uid",
fontFamily: "x1nlbcxq",
$$css: true
},
largeNumber: {
fontSize: "x8c9cfh",
$$css: true
}
};
34 changes: 34 additions & 0 deletions ...tylex-shared/tests/stylex_validation_create_test/stylex_validation_create_dynamic_test.rs
View file
Original file line number Diff line number Diff line change
@@ -143,3 +143,37 @@ test!(
});
"#
);

test!(
Syntax::Typescript(TsSyntax {
tsx: true,
..Default::default()
}),
|tr| {
StyleXTransform::new_test_force_runtime_injection(
tr.comments.clone(),
&PluginPass::default(),
None,
)
},
dynamic_style_function_only_accepts_named_parameters_valid_with_other_styles,
r#"
import stylex from "@stylexjs/stylex";
const styles = stylex.create({
size: (size: number) => ({ fontSize: (8 * size)+'px'}),
count: {
fontWeight: 100,
},
largeNumber: {
fontSize: '1.5rem',
},
});
const { className, style = {} } = { ...stylex.props(
styles.count,
styles.size(size),
styles.largeNumber
)}
"#
);
4 changes: 3 additions & 1 deletion packages/nextjs-plugin/package.json
View file
Original file line number Diff line number Diff line change
@@ -7,6 +7,9 @@
"path": "../../scripts/packages"
}
},
"dependencies": {
"@stylexjs/babel-plugin": "^0.8.0"
},
"devDependencies": {
"@babel/types": "^7.23.9",
"@stylexswc/eslint-config": "workspace:*",
@@ -31,7 +34,6 @@
"license": "MIT",
"main": "dist/index.js",
"peerDependencies": {
"@stylexjs/babel-plugin": "^0.8.0",
"next": ">=14.0.1"
},
"private": false,
4 changes: 3 additions & 1 deletion packages/nextjs-swc-plugin/package.json
View file
Original file line number Diff line number Diff line change
@@ -7,6 +7,9 @@
"path": "../../scripts/packages"
}
},
"dependencies": {
"@stylexjs/babel-plugin": "^0.8.0"
},
"devDependencies": {
"@babel/types": "^7.23.9",
"@stylexswc/eslint-config": "workspace:*",
@@ -30,7 +33,6 @@
"license": "MIT",
"main": "dist/index.js",
"peerDependencies": {
"@stylexjs/babel-plugin": "^0.8.0",
"next": ">=14.0.1"
},
"private": false,