Skip to content

Unify CSS-to-RN compiler and runtime pipeline#5

Draft
cray0000 wants to merge 22 commits into
masterfrom
unification
Draft

Unify CSS-to-RN compiler and runtime pipeline#5
cray0000 wants to merge 22 commits into
masterfrom
unification

Conversation

@cray0000

@cray0000 cray0000 commented Jun 20, 2026

Copy link
Copy Markdown
Member

Summary

This PR unifies the CSS-to-React-Native style pipeline into a new @cssxjs/css-to-rn workspace package and wires CSSX, loaders, Babel output, and runtime entrypoints through it. The goal is to replace the separate forked CSS-to-RN transform libraries and the old CSSX runtime with one maintainable compiler/runtime package.

Key changes:

  • Adds packages/css-to-rn, a TypeScript ESM package owning CSS parsing, selector IR, value resolution, property transforms, style resolution, caching, and React runtime tracking.
  • Keeps Stylus-to-CSS compilation separate, while moving pure CSS-to-RN style compilation and runtime resolution into the unified package.
  • Supports local JS template interpolation in function-scoped css/styl templates, with interpolation values reusing one cache slot per compiled call shape.
  • Adds runtime CSS string compilation for generated CSS via useCompiledCss(), useCssxLayer(), and cssx().
  • Implements nested var() resolution, partial shorthand substitution, dynamic dependency tracking, bounded cache behavior, deep inline-style hashing, media/dimension tracking, web matchMedia invalidation, and React Native Dimensions integration.
  • Adds React 19 useSyncExternalStore tracking without Teamplay or @nx-js/observer-util, including Suspense/aborted-render cleanup tests.
  • Implements :hover/:active aliases, filter, background-image/gradient support, limited background shorthand, animations/transitions/keyframes, and Reanimated v4-compatible animation style output.
  • Adds build-strict diagnostics for unsupported static declarations while keeping runtime compilation graceful for generated CSS.
  • Migrates loaders and Babel runtime paths to the unified package, with source-condition test/dev imports and built/default import smoke coverage.
  • Stops tracking generated dist output; package builds still emit dist for published/default exports.
  • Keeps legacy runtime/*-teamplay import paths as compatibility wrappers only.
  • Removes the old packages/runtime package from the active graph.
  • Updates architecture.md, AGENTS.md, plan.md, public docs, README credits, and CI smoke checks for the new architecture.

Validation

  • cd packages/css-to-rn && npm test
  • cd packages/css-to-rn && npm run build
  • source-condition import smoke with node -C cssx-ts
  • built/default package import smoke after local build
  • CI=true yarn test
  • yarn docs-build
  • git diff --check
  • GitHub Actions PR check is passing on the latest commit.

Review Focus

This is a large architectural PR. Please scrutinize:

  • Runtime cache invalidation, interpolation cache behavior, and reference stability.
  • Media/dimension invalidation, web matchMedia subscriptions, React Native dimensions, and listener cleanup.
  • Suspense/aborted-render subscription safety and memory leak edge cases.
  • Complex value parsing: nested var(), shorthand fragments, gradients/backgrounds, transforms, animations, transitions, and invalid generated CSS.
  • Babel output compatibility with existing CSSX styleName, css, styl, and part workflows.
  • Package exports/source-condition behavior and whether the new package boundary is maintainable long term.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant