react-native-css 2.1.1 → 3.0.0-nightly.0

package/package.json

@@ -1,57 +1,274 @@
 {
   "name": "react-native-css",
-  "version": "2.1.1",
-  "description": "Style React-Native components with css",
-  "main": "build/index.js",
-  "scripts": {
-    "start": "babel src --out-dir build",
-    "prepublish": "npm run start",
-    "test": "babel-tap test/*.test.js",
-    "lint": "eslint . --ext .js",
-    "lint:fix": "npm run lint -- --fix",
-    "echo": "echo 'hello'"
-  },
-  "author": "Sabeur Thabti",
-  "license": "MIT",
-  "dependencies": {
-    "css": "^2.2.1",
-    "lodash.get": "^4.4.2",
-    "lodash.set": "^4.3.2",
-    "pre-commit": "^1.2.2",
-    "to-camel-case": "~0.2.0"
+  "version": "3.0.0-nightly.0",
+  "description": "A CSS polyfill for React Native",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/index.d.ts",
+        "default": "./dist/module/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/index.d.ts",
+        "default": "./dist/commonjs/index.js"
+      }
+    },
+    "./types": {
+      "types": "./types.d.ts"
+    },
+    "./style-collection": {
+      "source": "./src/runtime/native/style-collection/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/style-collection/index.d.ts",
+        "default": "./dist/module/style-collection/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/style-collection/index.d.ts",
+        "default": "./dist/commonjs/style-collection/index.js"
+      }
+    },
+    "./metro": {
+      "source": "./src/metro/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/metro/index.d.ts",
+        "default": "./dist/module/metro/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/metro/index.d.ts",
+        "default": "./dist/commonjs/metro/index.js"
+      }
+    },
+    "./compiler": {
+      "source": "./src/compiler/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/compiler/index.d.ts",
+        "default": "./dist/module/compiler/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/compiler/index.d.ts",
+        "default": "./dist/commonjs/compiler/index.js"
+      }
+    },
+    "./jest": {
+      "source": "./src/jest/index.ts",
+      "react-native": "./src/jest/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/jest/index.d.ts",
+        "default": "./dist/module/jest/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/jest/index.d.ts",
+        "default": "./dist/commonjs/jest/index.js"
+      }
+    },
+    "./babel": {
+      "source": "./src/babel/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/babel/index.d.ts",
+        "default": "./dist/module/babel/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/babel/index.d.ts",
+        "default": "./dist/commonjs/babel/index.js"
+      }
+    },
+    "./components": {
+      "source": "./src/components/index.ts",
+      "react-native": "./src/components/index.tsx",
+      "import": {
+        "types": "./dist/typescript/module/src/components/index.d.ts",
+        "default": "./dist/module/components/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/components/index.d.ts",
+        "default": "./dist/commonjs/components/index.js"
+      }
+    },
+    "./components/*": {
+      "source": "./src/components/*.ts",
+      "react-native": "./src/components/*.tsx",
+      "import": {
+        "types": "./dist/typescript/module/src/components/*.d.ts",
+        "default": "./dist/module/components/*.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/components/*.d.ts",
+        "default": "./dist/commonjs/components/*.js"
+      }
+    },
+    "./package.json": "./package.json"
   },
-  "devDependencies": {
-    "babel-cli": "^6.24.0",
-    "babel-eslint": "^7.1.1",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-preset-es2015": "^6.24.0",
-    "babel-tap": "^5.0.0",
-    "eslint": "^3.17.1",
-    "eslint-config-airbnb": "^14.1.0",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-react": "^6.10.3",
-    "expect": "^1.14.0",
-    "tap": "^5.7.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/sabeurthabti/react-native-css.git"
+  "main": "./dist/commonjs/index.js",
+  "module": "./dist/module/index.js",
+  "types": "./dist/typescript/commonjs/src/index.d.ts",
+  "workspaces": [
+    "example",
+    "configs"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "clean": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +; yarn install --immutable --immutable-cache --check-cache; yarn build; yes | yarn example expo prebuild --clean",
+    "clean:android": "yarn clean && yarn example android",
+    "clean:ios": "yarn clean && yarn example ios",
+    "example": "yarn workspace react-native-css-example",
+    "lint": "eslint",
+    "prepare": "bob build",
+    "prepublishOnly": "bob build",
+    "release": "release-it --config ./.config/release-it.config.ts",
+    "release:nightly": "release-it --config ./.config/release-it.nightly.config.ts --preRelease=nightly && git restore :/",
+    "start": "yarn example start",
+    "start:build": "yarn build && yarn example build",
+    "start:debug": "yarn build && yarn example debug",
+    "test": "NODE_OPTIONS=\"${NODE_OPTIONS:-} --experimental-vm-modules\" jest",
+    "typecheck": "tsc --noEmit"
   },
   "keywords": [
-    "react",
     "react-native",
-    "react-component",
+    "ios",
+    "android",
     "css",
-    "styling",
-    "components",
-    "ios"
+    "css-in-js",
+    "react-native-css"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nativewind/react-native-css.git"
+  },
+  "author": "Mark Lawlor <mwlawlor@gmail.com> (https://github.com/marklawlor)",
+  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/sabeurthabti/react-native-css/issues"
+    "url": "https://github.com/nativewind/react-native-css/issues"
+  },
+  "homepage": "https://github.com/nativewind/react-native-css#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
   },
-  "precommit": [
-    "test"
+  "files": [
+    "src",
+    "dist",
+    "types.d.ts",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
   ],
-  "homepage": "https://github.com/sabeurthabti/react-native-css"
+  "dependencies": {
+    "@expo/metro-runtime": "~6.1.1",
+    "babel-plugin-react-compiler": "^19.1.0-rc.2",
+    "colorjs.io": "0.6.0-alpha.1",
+    "comment-json": "^4.2.5",
+    "debug": "^4.4.1"
+  },
+  "peerDependencies": {
+    "expo": "54.0.0-preview.6",
+    "lightningcss": ">=1.27.0",
+    "react": "19.1.0",
+    "react-native": "0.81.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/js": "^9.30.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
+    "@tailwindcss/postcss": "^4.1.12",
+    "@testing-library/react-native": "^13.3.3",
+    "@tsconfig/react-native": "^3.0.6",
+    "@types/babel__core": "^7",
+    "@types/connect": "^3.4.38",
+    "@types/debug": "^4.1.12",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.1.10",
+    "@types/react-refresh": "^0",
+    "@types/react-test-renderer": "^19",
+    "babel-plugin-tester": "^12.0.0",
+    "babel-preset-expo": "14.0.2",
+    "commitlint": "^19.8.1",
+    "eas-build-cache-provider": "^16.4.2",
+    "eslint": "^9.30.1",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.5.1",
+    "expo": "54.0.0-preview.6",
+    "jest": "^29.7.0",
+    "jest-expo": "54.0.2",
+    "lefthook": "^1.12.2",
+    "lightningcss": "^1.30.1",
+    "metro-runtime": "^0.83.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
+    "react": "19.1.0",
+    "react-native": "0.81.0",
+    "react-native-builder-bob": "^0.40.13",
+    "react-native-reanimated": "4.0.2",
+    "react-native-safe-area-context": "5.6.1",
+    "react-native-worklets": "0.4.1",
+    "react-refresh": "^0.17.0",
+    "react-test-renderer": "^19.1.0",
+    "release-it": "^19.0.4",
+    "tailwindcss": "^4.1.12",
+    "tailwindcss-safe-area": "^1.1.0",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.40.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "dist",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      "typescript"
+    ]
+  },
+  "packageManager": "yarn@4.9.2",
+  "devEngines": {
+    "runtime": {
+      "name": "node",
+      "onFail": "error"
+    },
+    "packageManager": {
+      "name": "yarn",
+      "onFail": "warn"
+    }
+  },
+  "prettier": {
+    "plugins": [
+      "@ianvs/prettier-plugin-sort-imports"
+    ],
+    "importOrderParserPlugins": [
+      "typescript",
+      "jsx"
+    ],
+    "importOrder": [
+      "^react$|^react-native$",
+      "",
+      "<BUILTIN_MODULES>",
+      "",
+      "<THIRD_PARTY_MODULES>",
+      "",
+      "^[.]"
+    ],
+    "quoteProps": "consistent"
+  },
+  "jest": {
+    "preset": "./.config/jest.config.cjs"
+  },
+  "cspell": {
+    "import": [
+      "./.config/cspell.json"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "./.config/commitlint.config.mjs"
+    ]
+  }
 }

package/src/babel/allowedModules.ts

@@ -0,0 +1,24 @@
+import { readdirSync } from "fs";
+import { join, parse } from "path";
+
+function getFilesWithoutExtension(dirPath: string) {
+  // Read all files and directories inside dirPath synchronously
+  const entries = readdirSync(dirPath, { withFileTypes: true });
+
+  // Filter only files (ignore directories)
+  const files = entries.filter(
+    (entry) =>
+      entry.isFile() &&
+      /\.[jt]sx?$/.exec(entry.name) &&
+      !/index\.[jt]sx?$/.exec(entry.name),
+  );
+
+  // For each file, get the filename without extension
+  const filesWithoutExt = files.map((file) => parse(file.name).name);
+
+  return filesWithoutExt;
+}
+
+export const allowedModules = new Set(
+  getFilesWithoutExtension(join(__dirname, "../components")),
+);

package/src/babel/helpers.ts

@@ -0,0 +1,40 @@
+import tBabelTypes, { type CallExpression } from "@babel/types";
+
+export type BabelTypes = typeof tBabelTypes;
+
+export interface PluginOpts {
+  target?: string;
+  runtime?: string;
+  commonjs?: boolean;
+}
+
+export interface PluginState {
+  opts?: PluginOpts;
+  filename: string;
+}
+
+export function getInteropRequireDefaultSource(
+  init: CallExpression,
+  t: BabelTypes,
+) {
+  if (!t.isIdentifier(init.callee, { name: "_interopRequireDefault" })) {
+    return;
+  }
+
+  const interopArg = init.arguments.at(0);
+
+  if (
+    !t.isCallExpression(interopArg) ||
+    !t.isIdentifier(interopArg.callee, { name: "require" })
+  ) {
+    return;
+  }
+
+  const requireArg = interopArg.arguments.at(0);
+
+  if (!t.isStringLiteral(requireArg)) {
+    return;
+  }
+
+  return requireArg.value;
+}

package/src/babel/import-plugin.ts

@@ -0,0 +1,176 @@
+import { resolve } from "path";
+
+import { type PluginObj } from "@babel/core";
+import type { Statement } from "@babel/types";
+
+import {
+  getInteropRequireDefaultSource,
+  type BabelTypes,
+  type PluginState,
+} from "./helpers";
+import {
+  handleReactNativeIdentifierRequire,
+  handleReactNativeImport,
+  handleReactNativeObjectPatternRequire,
+} from "./react-native";
+import {
+  handleReactNativeWebIdentifierRequire,
+  handleReactNativeWebImport,
+  handleReactNativeWebObjectPatternRequire,
+} from "./react-native-web";
+
+export default function ({
+  types: t,
+}: {
+  types: BabelTypes;
+}): PluginObj<PluginState> {
+  const processed = new WeakSet();
+
+  const thisModuleDist = resolve(__dirname, "../../../dist");
+  const thisModuleSrc = resolve(__dirname, "../../../src");
+
+  function isFromThisModule(filename: string): boolean {
+    return (
+      filename.startsWith(thisModuleDist) || filename.startsWith(thisModuleSrc)
+    );
+  }
+
+  return {
+    name: "Rewrite react-native to react-native-css",
+    visitor: {
+      ImportDeclaration(path, state): void {
+        if (
+          processed.has(path) ||
+          processed.has(path.node) ||
+          isFromThisModule(state.filename)
+        ) {
+          return;
+        }
+
+        const statements =
+          handleReactNativeImport(path.node, t, state.filename) ??
+          handleReactNativeWebImport(path.node, t, state.filename);
+
+        if (!statements) {
+          return;
+        }
+
+        for (const statement of statements) {
+          processed.add(statement);
+        }
+
+        path.replaceWithMultiple(statements);
+      },
+      VariableDeclaration(path, state): void {
+        if (
+          processed.has(path) ||
+          processed.has(path.node) ||
+          isFromThisModule(state.filename)
+        ) {
+          return;
+        }
+
+        const firstDeclaration = path.node.declarations.at(0);
+
+        // We only handle single variable declarations for now.
+        if (path.node.declarations.length > 1) {
+          return;
+        }
+
+        // Skip declarations that are not initialized. eg `let x;`
+        if (!firstDeclaration?.init) {
+          return;
+        }
+
+        const { id, init } = firstDeclaration;
+
+        // We only handle `const <id> = <init>()`
+        if (!t.isCallExpression(init)) {
+          return;
+        }
+
+        // We only handle `const id = <init>() OR const { <id> } = <init>()`
+        if (!(t.isIdentifier(id) || t.isObjectPattern(id))) {
+          return;
+        }
+
+        const initArg = init.arguments.at(0);
+
+        if (!initArg) {
+          return;
+        }
+
+        let statements: Statement[] | undefined;
+
+        // `const <id> = require(<source>);`
+        if (
+          t.isIdentifier(id) &&
+          t.isIdentifier(init.callee, { name: "require" }) &&
+          t.isStringLiteral(initArg)
+        ) {
+          statements =
+            handleReactNativeIdentifierRequire(
+              path,
+              t,
+              id.name,
+              initArg.value,
+              state.filename,
+            ) ??
+            handleReactNativeWebIdentifierRequire(
+              path,
+              t,
+              id.name,
+              initArg.value,
+              state.filename,
+            );
+        } else if (
+          t.isObjectPattern(id) &&
+          t.isIdentifier(init.callee, { name: "require" }) &&
+          t.isStringLiteral(initArg)
+        ) {
+          statements =
+            handleReactNativeObjectPatternRequire(
+              path,
+              t,
+              id,
+              initArg.value,
+              state.filename,
+            ) ??
+            handleReactNativeWebObjectPatternRequire(
+              path,
+              t,
+              id,
+              initArg.value,
+              state.filename,
+            );
+        } else if (
+          t.isIdentifier(id) &&
+          t.isIdentifier(init.callee, { name: "_interopRequireDefault" })
+        ) {
+          // `const <id> = _interopRequireDefault(require(<source>));`
+          const source = getInteropRequireDefaultSource(init, t);
+          if (!source) {
+            return;
+          }
+          statements = handleReactNativeWebIdentifierRequire(
+            path,
+            t,
+            id.name,
+            source,
+            state.filename,
+          );
+        }
+
+        if (!statements) {
+          return;
+        }
+
+        for (const statement of statements) {
+          processed.add(statement);
+        }
+
+        path.replaceWithMultiple(statements);
+      },
+    },
+  };
+}

package/src/babel/index.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+module.exports = function () {
+  return {
+    plugins: [
+      require("./import-plugin").default,
+      "react-native-worklets/plugin",
+    ],
+  };
+};