AssertionError: expected 'import * as stylex from "@stylexjs/st…' to deeply equal 'import React from "react";\nimport * …' - Expected + Received - import React from "react"; - import * as stylex from "@stylexjs/stylex"; + import * as stylex from "@stylexjs/stylex"; + import isPropValid from "@emotion/is-prop-valid"; const styles = stylex.create({ - buttonBase: { + button: { color: "white", borderWidth: 0, borderStyle: "none", borderRadius: "4px", }, - buttonDefault: { - backgroundColor: "#BF4F74", - padding: "8px 16px", - fontSize: "14px", - }, - buttonLarge: { - padding: "12px 24px", - fontSize: "18px", - }, - buttonColorGreen: { - backgroundColor: "#4CAF50", - }, - linkBase: { - textDecoration: "none", - }, - linkActive: { - color: "#BF4F74", - fontWeight: "bold", - }, - linkInactive: { - color: "#333", - fontWeight: "normal", - }, - linkHover: { - color: "#BF4F74", + link: { + color: { + default: "#333", + ":hover": "#BF4F74", + }, + fontWeight: "normal", + textDecoration: "none", + }, + linkActive: { + color: "#BF4F74", + fontWeight: "bold", }, - boxBase: { + box: { borderRadius: "8px", boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)", }, - boxDefault: { - backgroundColor: "white", - padding: "16px", + card: { + borderRadius: "4px", - }, - cardBase: { padding: "16px", color: "white", }, - cardPrimary: { - backgroundColor: "#BF4F74", - }, - cardSecondary: { - backgroundColor: "#4F74BF", - }, - cardRounded: { - borderRadius: "16px", - }, - cardSquare: { - borderRadius: "4px", - }, - }); - - interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { - color?: string; - size?: "small" | "large"; - } - - function Button({ color, size, children, ...props }: ButtonProps) { - return ( - <button - {...stylex.props( - styles.buttonBase, - styles.buttonDefault, - size === "large" && styles.buttonLarge, - color === "#4CAF50" && styles.buttonColorGreen, - )} - style={color && color !== "#4CAF50" ? { backgroundColor: color } : undefined} - {...props} - > - {children} - </button> + cardRounded: { + borderRadius: "16px", + }, + }); + + export const App = () => ( + <div> + <button size="large" {...stylex.props(styles.button)} color="#4CAF50"> + Large Green Button - ); - } - - interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> { - isActive?: boolean; - } - - function Link({ isActive, children, ...props }: LinkProps) { - const [isHovered, setIsHovered] = React.useState(false); - - return ( - <a - {...stylex.props( - styles.linkBase, - isActive ? styles.linkActive : styles.linkInactive, - isHovered && styles.linkHover, - )} - onMouseEnter={() => setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} - {...props} - > - {children} - </a> - ); - } - - interface BoxProps extends React.HTMLAttributes<HTMLDivElement> { - $background?: string; - $padding?: string; - } - - function Box({ $background, $padding, children, ...props }: BoxProps) { - return ( + </button> + <button {...stylex.props(styles.button)}>Default Button</button> + <br /> + <a href="#" {...stylex.props(styles.link, styles.linkActive)}> + Active Link + </a> + <a href="#" {...stylex.props(styles.link)}> + Normal Link + </a> + <br /> - <div - {...stylex.props(styles.boxBase, styles.boxDefault)} - style={{ - backgroundColor: $background || undefined, - padding: $padding || undefined, - }} - {...props} - > - {children} - </div> - ); - } - - interface CardProps extends React.HTMLAttributes<HTMLDivElement> { - variant?: "primary" | "secondary"; - elevation?: number; - rounded?: boolean; - } - - function

AssertionError: expected 'import * as stylex from "@stylexjs/st…' to deeply equal 'import * as stylex from "@stylexjs/st…' - Expected + Received @@ -7,14 +7,10 @@ margin: "0.5em", color: "#BF4F74", backgroundColor: "papayawhip", borderStyle: "none", borderRadius: "3px", - outline: { - default: null, - ":focus": "none", - }, }, }); export const App = () => { const inputRef = useRef<HTMLInputElement>(null); ❯ src/transform.test.ts:269:41

AssertionError: expected 'import * as stylex from "@stylexjs/st…' to deeply equal 'import * as stylex from "@stylexjs/st…' - Expected + Received @@ -1,65 +1,52 @@ import * as stylex from "@stylexjs/stylex"; - const fadeIn = stylex.keyframes({ - from: { - opacity: 0, - }, - to: { - opacity: 1, - }, - }); - - const slideIn = stylex.keyframes({ - from: { - transform: "translateX(-100%)", - }, - to: { - transform: "translateX(0)", - }, - }); - - const scaleUp = stylex.keyframes({ - "0%": { - transform: "scale(0.5)", - }, - "50%": { - transform: "scale(1.1)", - }, - "100%": { - transform: "scale(1)", - }, - }); - - const styles = stylex.create({ - fadeBox: { - animationName: fadeIn, - animationDuration: "0.5s", - animationTimingFunction: "ease-in-out", - }, - animatedCard: { - animationName: `${fadeIn}, ${slideIn}`, - animationDuration: "0.3s, 0.5s", - animationTimingFunction: "ease-out, ease-out", + const styles = stylex.create({ + fadeBox: {}, + animatedCard: { padding: "20px", backgroundColor: "white", borderRadius: "8px", boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)", }, bounceIn: { - animationName: scaleUp, animationDuration: "0.6s", animationTimingFunction: "cubic-bezier(0.68, -0.55, 0.265, 1.55)", animationFillMode: "both", }, - sequentialAnimation: { - animationName: `${fadeIn}, ${slideIn}`, - animationDuration: "0.3s, 0.5s", - animationTimingFunction: "ease-out, ease-out", - animationDelay: "0s, 0.3s", - }, - }); + sequentialAnimation: {}, + }); + + const fadeIn = keyframes` + from { + opacity: 0; + } + to { + opacity: 1; + } + `; + + const slideIn = keyframes` + from { + transform: translateX(-100%); + } + to { + transform: translateX(0); + } + `; + + const scaleUp = keyframes` + 0% { + transform: scale(0.5); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } + `; export const App = () => ( <div> <div {...stylex.props(styles.fadeBox)}>Fade in</div> <div {...stylex.props(styles.animatedCard)}>Animated Card</div> ❯ src/transform.test.ts:269:41

AssertionError: expected 'import * as stylex from "@stylexjs/st…' to deeply equal 'import * as stylex from "@stylexjs/st…' - Expected + Received import * as stylex from "@stylexjs/stylex"; - const rotate = stylex.keyframes({ - from: { - transform: "rotate(0deg)", - }, - to: { - transform: "rotate(360deg)", - }, - }); - - const styles = stylex.create({ - rotate: { - display: "inline-block", - animationName: rotate, - animationDuration: "2s", - animationTimingFunction: "linear", - animationIterationCount: "infinite", - padding: "2rem 1rem", - fontSize: "1.2rem", - }, - }); + const styles = stylex.create({ + rotate: { + display: "inline-block", + padding: "2rem 1rem", + fontSize: "1.2rem", + }, + }); + + const rotate = keyframes` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + `; export const App = () => <div {...stylex.props(styles.rotate)}>💅</div>; ❯ src/transform.test.ts:269:41

AssertionError: expected 'import * as stylex from "@stylexjs/st…' to deeply equal 'import * as stylex from "@stylexjs/st…' - Expected + Received - import * as stylex from "@stylexjs/stylex"; - import { vars, textVars } from "./css-variables.stylex"; + import * as stylex from "@stylexjs/stylex"; const styles = stylex.create({ button: { - padding: `${vars.spacingSm} ${vars.spacingMd}`, + padding: "var(--spacing-sm) var(--spacing-md)", - backgroundColor: vars.colorPrimary, + backgroundColor: { + default: "var(--color-primary)", + ":hover": "var(--color-secondary)", + }, color: "white", borderWidth: "2px", borderStyle: "solid", - borderColor: vars.colorSecondary, + borderColor: "var(--color-secondary)", - borderRadius: vars.borderRadius, - }, - buttonHover: { - backgroundColor: vars.colorSecondary, + borderRadius: "var(--border-radius)", }, card: { - padding: vars.spacingLg, + padding: "var(--spacing-lg)", borderWidth: "1px", borderStyle: "solid", - borderColor: vars.colorSecondary, + borderColor: "var(--color-secondary, #ccc)", - borderRadius: vars.borderRadius, + borderRadius: "var(--border-radius)", - margin: vars.spacingMd, + margin: "var(--spacing-md)", }, text: { - color: textVars.textColor, + color: "var(--text-color, #333)", - fontSize: textVars.fontSize, + fontSize: "var(--font-size, 16px)", - lineHeight: textVars.lineHeight, + lineHeight: "var(--line-height, 1.5)", }, }); export const App = () => ( - <div {...stylex.props(styles.card)}> + <> + <div {...stylex.props(styles.card)}> - <p {...stylex.props(styles.text)}>Some text content</p> + <p {...stylex.props(styles.text)}>Some text content</p> - <button {...stylex.props(styles.button)}>Click me</button> + <button {...stylex.props(styles.button)}>Click me</button> - </div> + </div> + </> ); ❯ src/transform.test.ts:269:41

AssertionError: expected 'import * as stylex from "@stylexjs/st…' to deeply equal 'import * as stylex from "@stylexjs/st…' - Expected + Received @@ -1,26 +1,24 @@ import * as stylex from "@stylexjs/stylex"; - const truncate = { - whiteSpace: "nowrap", - overflow: "hidden", - textOverflow: "ellipsis", - } as const; - const styles = stylex.create({ title: { - ...truncate, fontSize: "1.5em", color: "#BF4F74", }, subtitle: { - ...truncate, fontSize: "1em", color: "#666", }, }); + const truncate = css` + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + `; + export const App = () => ( <div> <h1 {...stylex.props(styles.title)}>This is a very long title that will be truncated</h1> <h2 {...stylex.props(styles.subtitle)}>This is a subtitle that will also be truncated</h2> </div> ❯ src/transform.test.ts:269:41

AssertionError: expected 'import * as stylex from "@stylexjs/st…' to deeply equal 'import React from "react";\nimport * …' - Expected + Received @@ -1,6 +1,5 @@ - import React from "react"; import * as stylex from "@stylexjs/stylex"; const styles = stylex.create({ link: { display: "flex", @@ -11,38 +10,19 @@ }, icon: { flex: "none", width: "48px", height: "48px", - fill: "#BF4F74", + fill: "rebeccapurple", transition: "fill 0.25s", }, - iconHover: { - fill: "rebeccapurple", - }, }); export const App = () => ( <a href="#" {...stylex.props(styles.link)}> - <Icon viewBox="0 0 20 20" styles={styles}> + <svg {...stylex.props(styles.icon)} viewBox="0 0 20 20"> <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" /> - </Icon> + </svg> Hover me </a> ); - function Icon({ - viewBox, - children, - styles: sx, - }: { - viewBox: string; - children: React.ReactNode; - styles: typeof styles; - }) { - return ( - <svg viewBox={viewBox} {...stylex.props(sx.icon)}> - {children} - </svg> - ); - } - ❯ src/transform.test.ts:269:41

AssertionError: expected 'import * as stylex from "@stylexjs/st…' to deeply equal 'import React from "react";\nimport * …' - Expected + Received - import React from "react"; import * as stylex from "@stylexjs/stylex"; const styles = stylex.create({ - multiSelector: {}, - multiSelectorHoverFocus: { + multiSelector: { - backgroundColor: "#BF4F74", + backgroundColor: "#4F74BF", color: "white", - }, - multiSelectorActiveFocusVisible: { outline: "2px solid #4F74BF", outlineOffset: "2px", }, - multiSelectorSelected: { - backgroundColor: "#4F74BF", - color: "white", - }, - compoundSelector: {}, - compoundHighlighted: { - borderWidth: "2px", - borderStyle: "solid", - borderColor: "gold", - }, - compoundError: { + compoundSelector: { borderWidth: "2px", borderStyle: "solid", borderColor: "red", backgroundColor: "#fee", }, - chainedPseudo: {}, + chainedPseudo: { - chainedPseudoFocusEnabled: { - borderColor: "#BF4F74", - }, - chainedPseudoHoverEnabled: { - borderColor: "#999", + borderColor: "#999", - }, - chainedPseudoCheckedEnabled: { backgroundColor: "#BF4F74", }, - nav: {}, - navLink: { + complexNested: { - color: "#333", + color: "#4F74BF", textDecoration: "none", - }, - navLinkHoverFocus: { - color: "#BF4F74", - }, - navLinkActive: { - fontWeight: "bold", - color: "#4F74BF", - }, - heading: { - marginBottom: "0.5em", - lineHeight: 1.2, - }, - textBlock: { - marginBottom: "1em", - lineHeight: 1.6, - }, - }); - - interface MultiSelectorProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { - isActive?: boolean; - isSelected?: boolean; - } - - function MultiSelector({ isActive, isSelected, ...props }: MultiSelectorProps) { - const [isFocused, setIsFocused] = React.useState(false); - const [isHovered, setIsHovered] = React.useState(false); - const [isPressed, setIsPressed] = React.useState(false); - - return ( - <button - {...stylex.props( - styles.multiSelector, - (isHovered || isFocused) && styles.multiSelectorHoverFocus, - (isPressed || isFocused) && styles.multiSelectorActiveFocusVisible, - (isActive || isSelected) && styles.multiSelectorSelected, - )} - onFocus={() => setIsFocused(true)} - onBlur={() => setIsFocused(false)} - onMouseEnter={() => setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} - onMouseDown={() => setIsPressed(true)} - onMouseUp={() => setIsPressed(false)} - {...props} - /> - ); - } - - interface CompoundSelectorProps { - highlighted?: boolean; - error?: boolean; - children?: React.ReactNode; - } - - function CompoundSelector({ highlighted, error, children }: CompoundSelectorProps) { - return ( + fontWeight: "bold", + }, + groupDescendant: { + marginBottom: "1em", + lineHeight: 1.6, + }, + }); + + export const App = () => ( + <div> + <button {...stylex.props(styles.multiSelector)}>Multi Selector</button> - <div - {...stylex.props( - styles.compoundSelector, - highlighted && styles.compoundHighlighted, + <div {...stylex.props(styles.compoundSelector)} className="card highlighted"> - error && styles.compoundError, - )} - > - {children} - </div> - ); - } - - interface ChainedPseudoProps extends React.InputHTMLAttributes<HTMLInputElement> {} - - function ChainedPseudo({ disabled, ...props }: ChainedPseudoProps) { - const [isFocused, setIsFocused] = React.useState(false); - const [isHovered, setIsHovered] = React.useState(false); - - return ( - <input - {...stylex.props( - styles.chainedPseudo, - !disabled && isFocused && styles.chainedPseudoFocusEnabled, - !disabled && isHovered && !isFocused && styles.chainedPseudoHoverEnabled, - )} - disabled={disabled} - onFocus={() => setIsFocused(true)} - onBlur={() => setIsFocused(f

AssertionError: expected 'import * as stylex from "@stylexjs/st…' to deeply equal 'import * as stylex from "@stylexjs/st…' - Expected + Received @@ -6,26 +6,23 @@ borderWidth: "1px", borderStyle: "solid", borderColor: "#BF4F74", display: "block", margin: "0 0 1em", - "::placeholder": { - color: "#BF4F74", + color: "#BF4F74", - }, + }, - }, - inputPadding: (padding: string) => ({ - padding, - }), }); export const App = () => ( <> - <input type="text" size={5} {...stylex.props(styles.input)} placeholder="Small" /> + <input {...stylex.props(styles.input)} $small placeholder="Small" /> - <input type="text" {...stylex.props(styles.input)} placeholder="Normal" /> + <input {...stylex.props(styles.input)} placeholder="Normal" /> <input - type="text" - {...stylex.props(styles.input, styles.inputPadding("2em"))} + {...stylex.props(styles.input)} + style={{ + padding: "2em", + }} placeholder="Padded" /> </> ); ❯ src/transform.test.ts:269:41