feat!: Migrate from Emotion to StyleX.

.yarnrc.yml

@@ -1,7 +1,7 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.6.3.cjs
+yarnPath: .yarn/releases/yarn-4.13.0.cjs

REMAINING-ISSUES.md

@@ -0,0 +1,53 @@
+# Remaining Truss 2 Migration Issues
+
+Ran `yarn test` and `yarn type-check` on this branch.
+
+- `yarn test` now passes: 782 passed, 1 skipped, 0 failed.
+- `yarn type-check` now passes.
+- Vitest still reports the known StyleX shutdown hang after successful test completion.
+
+## Resolved migration work
+
+The Truss 2 migration blockers that were previously tracked here are now resolved for the test suite:
+
+- enabling `runtimeInjection: true` in `vitest.config.mts` fixed missing StyleX CSS in Vitest/JSDOM
+- style-based test assertions were updated to work with Truss 2 / StyleX CSS variable output
+- `expect(...).toHaveStyle(...)` was extended in `src/setupTests.tsx` to support both normal computed styles and `--x-*` dynamic style variables
+- `Tabs` / `NavLink` Truss transform issues were resolved without needing to rewrite app code
+- `ScrollableParent` was updated to avoid destructuring style objects
+- responsive grid hook tests were updated for Truss 2 output
+- `useResponsiveGridItem` now uses runtime-injected `@container` CSS for arbitrary runtime values instead of dynamic `ifContainer({ gt })`
+- `GridTable` tests now pass again after test cleanup and Truss-compatible style handling adjustments
+
+## Remaining issues
+
+### 1. Story type-check issue resolved
+
+The previous story-level type-check failure is no longer reproducible:
+
+- `src/components/Card.stories.tsx` now uses the Truss 2-compatible `Properties` type from `src/Css`
+- `yarn type-check` completes successfully on this branch
+
+This migration blocker is resolved.
+
+### 2. Known upstream StyleX / Vitest shutdown issue
+
+`vitest` still finishes successfully but logs a hanging-process shutdown timeout afterward.
+
+Current understanding:
+
+- this is not caused by Beam tests themselves
+- this is not specific to the Truss repros
+- isolation pointed to the StyleX Vite plugin rather than Truss
+- the likely root cause matches the upstream StyleX issue discussed during this migration
+
+This is currently treated as an upstream tooling issue, not a Beam migration blocker.
+
+## Notes for future cleanup
+
+- `useResponsiveGridItem` intentionally uses a shared runtime `<style>` tag with injected `@container` rules because Truss 2 / StyleX cannot express arbitrary runtime `ifContainer({ gt })` thresholds.
+- We regression-tested the extra `Css.spread(...)` additions in `src/components/Table/GridTable.tsx` and `src/components/Table/components/Row.tsx`; none of those added wrappers were required, so they were removed.
+
+## Suggested next step
+
+1. Investigate the upstream StyleX / Vitest shutdown hang once a fix is available.

package.json

@@ -70,7 +70,6 @@
     "use-query-params": "^2.2.2"
   },
   "peerDependencies": {
-    "@emotion/react": ">=11",
     "mobx-react": ">=7",
     "react": ">=16",
     "react-router-dom": ">=5.2"
@@ -84,11 +83,10 @@
     }
   },
   "devDependencies": {
-    "@emotion/react": "^11.14.0",
     "@homebound/eslint-config": "^1.10.2",
     "@homebound/rtl-react-router-utils": "1.3.0",
     "@homebound/rtl-utils": "^2.70.0",
-    "@homebound/truss": "^1.137.5",
+    "@homebound/truss": "^2.1.1",
     "@homebound/tsconfig": "^1.1.1",
     "@semantic-release/exec": "^7.1.0",
     "@semantic-release/git": "^10.0.1",
@@ -134,5 +132,5 @@
   "imports": {
     "src/*": "./src/*"
   },
-  "packageManager": "yarn@3.6.3"
+  "packageManager": "yarn@4.13.0"
 }