@colorye/react-native-css ⚡️

High-performance, Rust SWC–powered Tailwind CSS v4 and standard CSS compiler for React Native and Expo.

---

🌟 Why @colorye/react-native-css?

Modern React Native apps need the ergonomics of Tailwind CSS v4 and standard CSS without sacrificing runtime performance. @colorye/react-native-css compiles utility classes directly into hoisted StyleSheet.create objects (_rnStyles) using a native Rust SWC transform layer.

• 🦀 Rust SWC Compiler: Transforms JSX at native speeds, hoisting static styles to StyleSheet.create with zero runtime overhead.
• 🗺️ SourceMap v3 Fidelity: Full source mapping support for accurate line-and-column stack traces in Metro / React Native debugger.
• 🎨 Tailwind CSS v4 Native: Full support for CSS-first config, @theme, oklch(), lab(), CSS custom properties (var()), and nested calc().
• ⚡ Optimized Dynamic States: Pseudo-classes like active:, pressed:, and disabled: compile to optimized React Native Pressable render callbacks.
• 🎬 Transition & Animation: Support for duration-, ease-, and delay- utility mappings.
• 🌳 Group States & Text Inheritance: Native coordination for group / group-active: and CSS text style inheritance (color, fontSize, fontWeight, etc.).
• 🔄 Component Interoperability: First-class cssInterop and remapProps for third-party libraries (FlashList, TrueSheet, etc.).
• 🌍 Multi-platform N-API Prebuilds: Zero-setup binaries across macOS (Apple Silicon & Intel), Linux (GNU & musl, x64 & arm64), and Windows (x64 & arm64).

---

⚖️ SOTA Comparison

Feature / Metric	@colorye/react-native-css	NativeWind v4	Unistyles 3.0	Tamagui	Vanilla StyleSheet
Styling Paradigm	Tailwind v4 / Modern CSS	Tailwind v3/v4	Custom StyleSheet DSL	Custom UI / Styled DSL	Plain JS Objects
Compiler Engine	Rust (SWC + LightningCSS)	Babel / LightningCSS	None (Pure C++ JSI)	Babel / Node AST	None
Static Style Inlining	Hoisted StyleSheet.create	Runtime Mapping	Runtime C++ Stylesheet	Compile-time flattening	Manual
Tailwind v4 (@theme, oklch)	✅ First-Class Native	🟡 Requires plugins	❌ Custom tokens	❌ Custom config	❌ Manual
Static Class Runtime Cost	0 ms	Low-to-medium	Low (C++ JSI cache)	Low-to-zero	0 ms
Dynamic Pseudo-states (active:, disabled:)	Auto Pressable / JSX Transform	Dynamic hooks / proxy	Runtime state bindings	Compiler variants	Manual state logic
CSS Text Style Inheritance	Automatic (InheritContext)	Web-only / explicit	Manual	Theme-based	Manual
Third-Party Component Interop	cssInterop / remapProps	cssInterop	Custom C++ wrappers	Custom styled wrappers	Manual style passing

---

📦 Installation

npm install @colorye/react-native-css
# or
yarn add @colorye/react-native-css
# or
pnpm add @colorye/react-native-css

---

⚙️ Setup & Configuration

1. Metro Configuration (metro.config.js)

Wrap your Metro config or assign the custom CSS transformer:

const { getDefaultConfig } = require("expo/metro-config");

const config = getDefaultConfig(__dirname);

config.transformer = {
  ...config.transformer,
  babelTransformerPath: require.resolve("@colorye/react-native-css/transformer"),
};

module.exports = config;

2. Babel Configuration (babel.config.js)

Add the Babel plugin pointing to your global stylesheet:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "@colorye/react-native-css/babel",
        {
          css: "./src/assets/styles/index.css",
          paths: ["src/"],
        },
      ],
    ],
  };
};

3. Tailwind CSS Setup (src/assets/styles/index.css)

Import Tailwind CSS v4 in your main CSS file:

@import "tailwindcss";

@theme {
  --color-primary: #0065d6;
  --color-secondary: #0ea5e9;
  --font-display: "Inter-Bold";
}

---

🚀 TypeScript Support

Add the type definitions to your env.d.ts or global.d.ts for JSX className auto-completion on all React Native primitives:

/// <reference types="@colorye/react-native-css/types" />

---

💡 Usage Examples

Basic Styling & Pseudo-classes

import { View, Text, Pressable } from "react-native";

export function UserCard() {
  return (
    <View className="p-4 bg-white rounded-2xl shadow-sm">
      <Text className="text-xl font-bold text-slate-900">
        React Native CSS
      </Text>
      <Pressable className="mt-4 px-4 py-2 bg-primary rounded-xl active:scale-95 active:opacity-80">
        <Text className="text-white text-center font-medium">Get Started</Text>
      </Pressable>
    </View>
  );
}

Group Hover / Active States

import { Pressable, View, Text } from "react-native";

export function GroupItem() {
  return (
    <Pressable className="group flex-row items-center p-3 rounded-lg bg-slate-100">
      <View className="w-3 h-3 rounded-full bg-slate-400 group-active:bg-primary" />
      <Text className="ml-3 text-slate-700 group-active:text-primary font-medium">
        Click to Highlight
      </Text>
    </Pressable>
  );
}

Third-Party Component Interop (cssInterop)

import { FlashList } from "@shopify/flash-list";
import { cssInterop } from "@colorye/react-native-css";

export const StyledFlashList = cssInterop(FlashList, {
  className: "style",
  contentContainerClassName: "contentContainerStyle",
});

// Usage
<StyledFlashList
  className="flex-1 bg-slate-50"
  contentContainerClassName="p-4"
  data={data}
  renderItem={renderItem}
/>

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

# Build Rust native bindings
yarn build:native

# Build JS distribution
yarn build:js

# Run full build
yarn build

---

📄 License

MIT © Rye Nguyen