Process completed with exit code 1.

AssertionError: expected 'import React from "react";\nimport * …' to deeply equal 'import React from "react";\nimport * …' - Expected + Received @@ -1,23 +1,28 @@ import React from "react"; import * as stylex from "@stylexjs/stylex"; const styles = stylex.create({ + // withConfig for displayName (debugging) button: { backgroundColor: "#BF4F74", color: "white", padding: "8px 16px", borderWidth: 0, borderStyle: "none", borderRadius: "4px", - }, + }, + + // withConfig for componentId (stable class names) card: { padding: "16px", backgroundColor: "white", borderRadius: "8px", boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)", - }, + }, + + // Combining withConfig options input: { padding: "8px 12px", borderWidth: "2px", borderStyle: "solid", borderColor: { @@ -34,11 +39,13 @@ inputHasError: { borderColor: { default: "red", ":focus": "red", }, - }, + }, + + // withConfig on extended components baseButton: { fontSize: "14px", cursor: "pointer", }, extendedButton: { ❯ src/transform.test.ts:275:41

AssertionError: expected 'import * as stylex from "@stylexjs/st…' to deeply equal 'import * as stylex from "@stylexjs/st…' - Expected + Received @@ -1,28 +1,37 @@ import * as stylex from "@stylexjs/stylex"; const styles = stylex.create({ + // Universal selector for all children resetBox: { boxSizing: "border-box", margin: 0, padding: 0, - }, + }, + + // Universal direct children container: { display: "flex", gap: "16px", flex: 1, minWidth: 0, - }, + }, + + // Universal with pseudo-class list: { listStyle: "none", padding: 0, marginBottom: "8px", fontWeight: "bold", - }, + }, + + // Universal in hover state hoverContainer: { color: "#BF4F74", - }, + }, + + // Nested universal selectors deepReset: { fontFamily: "inherit", fontSize: "inherit", }, }); ❯ src/transform.test.ts:275:41

AssertionError: expected 'import * as stylex from "@stylexjs/st…' to deeply equal 'import * as stylex from "@stylexjs/st…' - Expected + Received @@ -1,8 +1,9 @@ import * as stylex from "@stylexjs/stylex"; const styles = stylex.create({ + // Using shouldForwardProp to filter props (v5 pattern) button: { backgroundColor: "#BF4F74", padding: "8px 16px", fontSize: "14px", color: "white", @@ -14,11 +15,13 @@ padding: "12px 24px", fontSize: "18px", }, buttonBackgroundColor: (backgroundColor: string) => ({ backgroundColor, - }), + }), + + // Using isPropValid from @emotion link: { color: { default: "#333", ":hover": "#BF4F74", }, @@ -26,11 +29,13 @@ textDecoration: "none", }, linkActive: { color: "#BF4F74", fontWeight: "bold", - }, + }, + + // Custom prop filtering logic (transient props pattern) box: { backgroundColor: "white", padding: "16px", borderRadius: "8px", boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)", @@ -38,11 +43,13 @@ boxBackgroundColor: (backgroundColor: string) => ({ backgroundColor, }), boxPadding: (padding: string) => ({ padding, - }), + }), + + // Filter multiple custom props card: { backgroundColor: "#4F74BF", borderRadius: "4px", padding: "16px", color: "white", ❯ src/transform.test.ts:275:41

AssertionError: expected 'import * as stylex from "@stylexjs/st…' to deeply equal 'import * as stylex from "@stylexjs/st…' - Expected + Received @@ -29,30 +29,37 @@ transform: "scale(1)", }, }); const styles = stylex.create({ + // Single animation fadeBox: { animationName: fadeIn, animationDuration: "0.5s", animationTimingFunction: "ease-in-out", - }, + }, + + // Multiple animations combined animatedCard: { animationName: `${fadeIn}, ${slideIn}`, animationDuration: "0.3s, 0.5s", animationTimingFunction: "ease-out, ease-out", padding: "20px", backgroundColor: "white", borderRadius: "8px", boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)", - }, + }, + + // Animation with multiple properties bounceIn: { animationName: scaleUp, animationDuration: "0.6s", animationTimingFunction: "cubic-bezier(0.68, -0.55, 0.265, 1.55)", animationFillMode: "both", - }, + }, + + // Chained animations with delay sequentialAnimation: { animationName: `${fadeIn}, ${slideIn}`, animationDuration: "0.3s, 0.5s", animationTimingFunction: "ease-out, ease-out", animationDelay: "0s, 0.3s", ❯ src/transform.test.ts:275:41

AssertionError: expected 'import * as stylex from "@stylexjs/st…' to deeply equal 'import * as stylex from "@stylexjs/st…' - Expected + Received @@ -1,27 +1,34 @@ import * as stylex from "@stylexjs/stylex"; const styles = stylex.create({ + // Using !important to override inline styles or third-party CSS overrideButton: { backgroundColor: "#BF4F74", color: "white", borderWidth: 0, borderStyle: "none", padding: "8px 16px", borderRadius: "4px", - }, + }, + + // Overriding specific properties forceWidth: { width: "100%", maxWidth: "500px", margin: "0 auto", - }, + }, + + // Mixed important and normal mixedStyles: { fontSize: "16px", color: "#333", lineHeight: 1.5, margin: 0, - }, + }, + + // Important in pseudo-selectors importantHover: { color: { default: "#BF4F74", ":hover": "#4F74BF", }, ❯ src/transform.test.ts:275:41

AssertionError: expected 'import React from "react";\nimport * …' to deeply equal 'import React from "react";\nimport * …' - Expected + Received @@ -10,11 +10,13 @@ borderWidth: 0, borderStyle: "none", borderRadius: "4px", textDecoration: "none", cursor: "pointer", - }, + }, + + // Wrapper that always renders as a specific element but passes `as` through buttonWrapper: { boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)", }, }); ❯ src/transform.test.ts:275:41