Skip to content

feat: support shared theme-aware tw styles - #16

Draft
e-simpson wants to merge 2 commits into
mgcrea:mainfrom
e-simpson:codex/shared-theme-styles
Draft

feat: support shared theme-aware tw styles#16
e-simpson wants to merge 2 commits into
mgcrea:mainfrom
e-simpson:codex/shared-theme-styles

Conversation

@e-simpson

@e-simpson e-simpson commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Preserves dark: and light: variants generated by module-level tw and twStyle calls.
  • Adds useTwStyle() to resolve shared styles reactively inside a component.
  • Makes useTwStyle() honor the Babel plugin's configured colorScheme.importFrom and colorScheme.importName hook.
  • Keeps pure resolveTwStyle() for explicit or controlled scheme values.

Why

Hooks cannot run at module scope, but shared styles still need to retain every theme variant. A runtime helper also cannot read consumer Babel options by itself, so hardcoding React Native's system useColorScheme would bypass applications with a custom theme provider.

The compiler now injects the configured hook at the legal component boundary and passes its value to useTwStyle:

const cardStyles = tw`bg-white dark:bg-gray-900`;

function Card() {
  const style = useTwStyle(cardStyles);
  return <View style={style} />;
}

With:

colorScheme: {
  importFrom: "@/theme/useColorScheme",
  importName: "useAppColorScheme",
}

the generated component uses useAppColorScheme(), not React Native's system hook. The plugin also rejects module-scope useTwStyle calls and supports aliased imports.

Validation

  • bun run spec — 1,066 passed, 1 skipped
  • bun run check
  • bun run lint
  • bun run format:check
  • bun run build
  • git diff --check

@e-simpson
e-simpson force-pushed the codex/shared-theme-styles branch from d0c2f54 to f77b614 Compare July 28, 2026 02:03
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