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

package/{LICENSE.md → LICENSE}

@@ -1,8 +1,6 @@
-The MIT License
-===============
-
-Copyright (c) 2016 Sabeur Thabti
+MIT License
 
+Copyright (c) 2025 Mark Lawlor
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
@@ -10,13 +8,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,95 +1,202 @@
+# react-native-css
 
-# Babel-plugin
- The awesome @danilosterrapid7 create a babel-plugin for React-native-css:
+A CSS polyfill for React Native
 
-https://www.npmjs.com/package/babel-plugin-react-native-sass-classname
+The goal of this library is to provide the most complete CSS support for React Native, within the limitations of Yoga and the core React Native package. This includes multiple advanced CSS features like media queries, container queries, CSS variables, and more.
 
+## Installation
 
-# react-native-css [![Circle CI](https://circleci.com/gh/sabeurthabti/react-native-css.svg?style=svg&circle-token=a140907997e6a37c6c5ec75f04e8150cef049ff6)](https://circleci.com/gh/sabeurthabti/react-native-css) [![NPM](https://img.shields.io/npm/dm/react-native-css.svg?style=flat-square)](https://www.npmjs.com/package/react-native-css)
+1. Create a CSS file in your project, e.g. `styles.css`.
+2. Import the CSS file in your App entry point, or root layout component:
+3. Setup the bundler using one of the methods below.
 
-> React-native-css turns valid CSS into the Facebook subset of CSS.
+### Metro based projects
 
-## Version 2 
-With version 2 come new changes:
+> [!TIP]  
+> All Expo and React Native Community CLI projects use Metro as the bundler, so this guide applies to them.
 
-- Remove sass/scss support, this is a huge overhead for little benefit. 
-- No CLI, we believe that this is an unnecessary context switch
-- NO I/O, no longer writing files, we do everything at runtime.  
+You will need to add `withReactNativeCSS` to your Metro configuration.
 
-> if you still want access to the the old implementation, please check `v1` branch. 
+```ts
+import { getDefaultConfig } from "expo/metro-config";
+import { withReactNativeCSS } from "react-native-css/metro";
 
-## Install
+const defaultConfig = getDefaultConfig(__dirname);
 
-```bash
-yarn add react-native-css
+export default withReactNativeCSS(defaultConfig);
+
+// OR with the globalClassNamePolyfill enabled
+export default withReactNativeCSS(defaultConfig, {
+  globalClassNamePolyfill: true,
+});
+```
+
+### Other bundlers
+
+`react-native-css` officially only supports Metro as the bundler, but we welcome community contributions to support other bundlers like Webpack, Vite or Turbopack.
+
+More documentation coming soon.
+
+## Usage
+
+You can use the library by importing the React Native components directly from `react-native-css/components`:
+
+```ts
+import { View } from 'react-native-css/components';
+
+import "./styles.css";
+
+export default function App() {
+  return (
+    <View className="container">
+      <View className="box" />
+    </View>
+  );
+}
+```
+
+### With `globalClassNamePolyfill`
+
+Enabling the `globalClassNamePolyfill` allows you to use the classNames prop on any React Native component, similar to how you would use it in a web application.
+
+```ts
+import { View } from 'react-native';
+
+import "./styles.css";
+
+export default function App() {
+  return (
+    <View className="container">
+      <View className="box" />
+    </View>
+  );
+}
 ```
 
-```bash
-npm install react-native-css --save
+To enable the `globalClassNamePolyfill`, you need to enable it in your Metro configuration:
+
+```ts
+import { withReactNativeCSS } from "react-native-css/metro";
+
+module.exports = withReactNativeCSS(
+  {
+    // Your existing Metro configuration
+  },
+  {
+    globalClassNamePolyfill: true,
+  },
+);
 ```
 
+### Via hooks
+
+#### `useCssElement`
+
+You can also use the `useCssElement` hook.
+
+```ts
+import { View as RNView } from 'react-native';
+import { useCssElement } from 'react-native-css';
+
+export default function App() {
+  const Container = useCssElement(RNView, {
+    className: "container",
+  });
 
-# Example
+  const Box = useCssElement(RNView, {
+    className: "container",
+  });
 
-Given the following CSS:
+  return (
+    <Container>
+      <Box />
+    </Container>
+  );
+}
+```
+
+> [!IMPORTANT]  
+> The hook returns a React Element, not a style object. The element will work on all platforms and will correctly apply the React context needed to support all features of the library
 
-``` js
-import RNC from 'react-native-css';
+#### `useNativeCssStyle`
 
-RNC`
-  description {
-    margin-bottom: 20px;
-    font-size: 18px;
-    text-align: center;
-    color: #656656;
-  }
+If you just require the style object, you can use the `useNativeCssStyle` hook:
 
-  container {
-    padding: 30px;
-    margin-top: 65px;
-    align-items: center;
-    display: block;
-  }
-`
+```ts
+import { View as RNView } from 'react-native';
+import { useNativeCssStyle } from 'react-native-css';
 
+import "./styles.css";
+
+export default function App() {
+  return (
+    <View style={useNativeCssStyle("container")}>
+      <Text style={useNativeCssStyle("my-text")}>
+        Hello, world!
+      </Text>
+    </View>
+  )
+}
 ```
 
-React-native-css will generate to the following:
-
-``` javascript
-{"description":{"marginBottom":20,"fontSize":18,"textAlign":"center","color":"#656656"},"container":{"padding":30,"marginTop":65,"alignItems":"center"}}
-```  
-# Usage
-```js
-import RNC from 'react-native-css';
-
-class SearchPage extends Component {
-  render() {
-    const { color, fontSize } = this.props;
-      const styles = RNC`
-        description {
-          margin-bottom: 20px;
-          font-size: ${fontSize}
-          text-align: center;
-          color: ${color}
-        }
-
-        container {
-          padding: 30px;
-          margin-top: 65px;
-          align-items: center;
-          display: block;
-        }
-      `;
-
-    return (
-      <View style={styles.container}>
-        <Text style={styles.description}>
-            Search!
-        </Text>
-      </View>
-    );
-  }
+> [!IMPORTANT]  
+> This hook may will only work on native platforms. It will return an empty object on web.
+> This hook may not support all features of the library.
+> This hooks does not support container queries or inheritance for children elements.
+
+#### `useNativeCssVariable`
+
+If you just require a CSS variable value, you can use the `useNativeCssVariable` hook:
+
+```ts
+import { useNativeCssVariable } from 'react-native-css';
+
+export default function App() {
+  const myColor = useNativeCssVariable("my-color");
+
+  return (
+    <View style={{ backgroundColor: myColor }}>
+      <Text style={{ color: myColor }}>
+        Hello, world!
+      </Text>
+    </View>
+  )
 }
+```
+
+> [!IMPORTANT]  
+> This hook may will only work on native platforms. It will return `undefined` on web.
+> This hook may not support all features of the library.
 
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+To quickly get started with the project, you can run:
+
+```sh
+yarn init -2     # We require Yarn 4
+yarn clean       # Install dependencies, rebuild the project and example app
+yarn example ios # Or yarn example android
+```
+
+Once the example app is built, you can use
+
+```sh
+yarn example start       # Start Expo CLI
+yarn example start:build # Rebuild the project and start Expo CLI
+yarn example start:debug # Rebuild the project and start Expo CLI with debug logging
 ```
+
+> [!TIP]  
+> `start:build` and `start:debug` will clear the cache before starting the Expo CLI. If you are experiencing issue with `yarn example start` not reflecting your changes, try running `yarn example start:build` or `yarn example start:debug`.
+
+## License
+
+MIT
+
+See the [license](LICENSE) file for more details.
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/dist/commonjs/babel/allowedModules.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedModules = void 0;
+var _fs = require("fs");
+var _path = require("path");
+function getFilesWithoutExtension(dirPath) {
+  // Read all files and directories inside dirPath synchronously
+  const entries = (0, _fs.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 => (0, _path.parse)(file.name).name);
+  return filesWithoutExt;
+}
+const allowedModules = exports.allowedModules = new Set(getFilesWithoutExtension((0, _path.join)(__dirname, "../components")));
+//# sourceMappingURL=allowedModules.js.map

package/dist/commonjs/babel/allowedModules.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_fs","require","_path","getFilesWithoutExtension","dirPath","entries","readdirSync","withFileTypes","files","filter","entry","isFile","exec","name","filesWithoutExt","map","file","parse","allowedModules","exports","Set","join","__dirname"],"sourceRoot":"../../../src","sources":["babel/allowedModules.ts"],"mappings":";;;;;;AAAA,IAAAA,GAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,SAASE,wBAAwBA,CAACC,OAAe,EAAE;EACjD;EACA,MAAMC,OAAO,GAAG,IAAAC,eAAW,EAACF,OAAO,EAAE;IAAEG,aAAa,EAAE;EAAK,CAAC,CAAC;;EAE7D;EACA,MAAMC,KAAK,GAAGH,OAAO,CAACI,MAAM,CACzBC,KAAK,IACJA,KAAK,CAACC,MAAM,CAAC,CAAC,IACd,YAAY,CAACC,IAAI,CAACF,KAAK,CAACG,IAAI,CAAC,IAC7B,CAAC,iBAAiB,CAACD,IAAI,CAACF,KAAK,CAACG,IAAI,CACtC,CAAC;;EAED;EACA,MAAMC,eAAe,GAAGN,KAAK,CAACO,GAAG,CAAEC,IAAI,IAAK,IAAAC,WAAK,EAACD,IAAI,CAACH,IAAI,CAAC,CAACA,IAAI,CAAC;EAElE,OAAOC,eAAe;AACxB;AAEO,MAAMI,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,IAAIE,GAAG,CACnCjB,wBAAwB,CAAC,IAAAkB,UAAI,EAACC,SAAS,EAAE,eAAe,CAAC,CAC3D,CAAC","ignoreList":[]}

package/dist/commonjs/babel/helpers.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInteropRequireDefaultSource = getInteropRequireDefaultSource;
+function getInteropRequireDefaultSource(init, t) {
+  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;
+}
+//# sourceMappingURL=helpers.js.map

package/dist/commonjs/babel/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getInteropRequireDefaultSource","init","t","isIdentifier","callee","name","interopArg","arguments","at","isCallExpression","requireArg","isStringLiteral","value"],"sourceRoot":"../../../src","sources":["babel/helpers.ts"],"mappings":";;;;;;AAeO,SAASA,8BAA8BA,CAC5CC,IAAoB,EACpBC,CAAa,EACb;EACA,IAAI,CAACA,CAAC,CAACC,YAAY,CAACF,IAAI,CAACG,MAAM,EAAE;IAAEC,IAAI,EAAE;EAAyB,CAAC,CAAC,EAAE;IACpE;EACF;EAEA,MAAMC,UAAU,GAAGL,IAAI,CAACM,SAAS,CAACC,EAAE,CAAC,CAAC,CAAC;EAEvC,IACE,CAACN,CAAC,CAACO,gBAAgB,CAACH,UAAU,CAAC,IAC/B,CAACJ,CAAC,CAACC,YAAY,CAACG,UAAU,CAACF,MAAM,EAAE;IAAEC,IAAI,EAAE;EAAU,CAAC,CAAC,EACvD;IACA;EACF;EAEA,MAAMK,UAAU,GAAGJ,UAAU,CAACC,SAAS,CAACC,EAAE,CAAC,CAAC,CAAC;EAE7C,IAAI,CAACN,CAAC,CAACS,eAAe,CAACD,UAAU,CAAC,EAAE;IAClC;EACF;EAEA,OAAOA,UAAU,CAACE,KAAK;AACzB","ignoreList":[]}

package/dist/commonjs/babel/import-plugin.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+var _path = require("path");
+var _helpers = require("./helpers.js");
+var _reactNative = require("./react-native.js");
+var _reactNativeWeb = require("./react-native-web.js");
+function _default({
+  types: t
+}) {
+  const processed = new WeakSet();
+  const thisModuleDist = (0, _path.resolve)(__dirname, "../../../dist");
+  const thisModuleSrc = (0, _path.resolve)(__dirname, "../../../src");
+  function isFromThisModule(filename) {
+    return filename.startsWith(thisModuleDist) || filename.startsWith(thisModuleSrc);
+  }
+  return {
+    name: "Rewrite react-native to react-native-css",
+    visitor: {
+      ImportDeclaration(path, state) {
+        if (processed.has(path) || processed.has(path.node) || isFromThisModule(state.filename)) {
+          return;
+        }
+        const statements = (0, _reactNative.handleReactNativeImport)(path.node, t, state.filename) ?? (0, _reactNativeWeb.handleReactNativeWebImport)(path.node, t, state.filename);
+        if (!statements) {
+          return;
+        }
+        for (const statement of statements) {
+          processed.add(statement);
+        }
+        path.replaceWithMultiple(statements);
+      },
+      VariableDeclaration(path, state) {
+        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;
+
+        // `const <id> = require(<source>);`
+        if (t.isIdentifier(id) && t.isIdentifier(init.callee, {
+          name: "require"
+        }) && t.isStringLiteral(initArg)) {
+          statements = (0, _reactNative.handleReactNativeIdentifierRequire)(path, t, id.name, initArg.value, state.filename) ?? (0, _reactNativeWeb.handleReactNativeWebIdentifierRequire)(path, t, id.name, initArg.value, state.filename);
+        } else if (t.isObjectPattern(id) && t.isIdentifier(init.callee, {
+          name: "require"
+        }) && t.isStringLiteral(initArg)) {
+          statements = (0, _reactNative.handleReactNativeObjectPatternRequire)(path, t, id, initArg.value, state.filename) ?? (0, _reactNativeWeb.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 = (0, _helpers.getInteropRequireDefaultSource)(init, t);
+          if (!source) {
+            return;
+          }
+          statements = (0, _reactNativeWeb.handleReactNativeWebIdentifierRequire)(path, t, id.name, source, state.filename);
+        }
+        if (!statements) {
+          return;
+        }
+        for (const statement of statements) {
+          processed.add(statement);
+        }
+        path.replaceWithMultiple(statements);
+      }
+    }
+  };
+}
+//# sourceMappingURL=import-plugin.js.map

package/dist/commonjs/babel/import-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_path","require","_helpers","_reactNative","_reactNativeWeb","_default","types","t","processed","WeakSet","thisModuleDist","resolve","__dirname","thisModuleSrc","isFromThisModule","filename","startsWith","name","visitor","ImportDeclaration","path","state","has","node","statements","handleReactNativeImport","handleReactNativeWebImport","statement","add","replaceWithMultiple","VariableDeclaration","firstDeclaration","declarations","at","length","init","id","isCallExpression","isIdentifier","isObjectPattern","initArg","arguments","callee","isStringLiteral","handleReactNativeIdentifierRequire","value","handleReactNativeWebIdentifierRequire","handleReactNativeObjectPatternRequire","handleReactNativeWebObjectPatternRequire","source","getInteropRequireDefaultSource"],"sourceRoot":"../../../src","sources":["babel/import-plugin.ts"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,YAAA,GAAAF,OAAA;AAKA,IAAAG,eAAA,GAAAH,OAAA;AAMe,SAAAI,SAAU;EACvBC,KAAK,EAAEC;AAGT,CAAC,EAA0B;EACzB,MAAMC,SAAS,GAAG,IAAIC,OAAO,CAAC,CAAC;EAE/B,MAAMC,cAAc,GAAG,IAAAC,aAAO,EAACC,SAAS,EAAE,eAAe,CAAC;EAC1D,MAAMC,aAAa,GAAG,IAAAF,aAAO,EAACC,SAAS,EAAE,cAAc,CAAC;EAExD,SAASE,gBAAgBA,CAACC,QAAgB,EAAW;IACnD,OACEA,QAAQ,CAACC,UAAU,CAACN,cAAc,CAAC,IAAIK,QAAQ,CAACC,UAAU,CAACH,aAAa,CAAC;EAE7E;EAEA,OAAO;IACLI,IAAI,EAAE,0CAA0C;IAChDC,OAAO,EAAE;MACPC,iBAAiBA,CAACC,IAAI,EAAEC,KAAK,EAAQ;QACnC,IACEb,SAAS,CAACc,GAAG,CAACF,IAAI,CAAC,IACnBZ,SAAS,CAACc,GAAG,CAACF,IAAI,CAACG,IAAI,CAAC,IACxBT,gBAAgB,CAACO,KAAK,CAACN,QAAQ,CAAC,EAChC;UACA;QACF;QAEA,MAAMS,UAAU,GACd,IAAAC,oCAAuB,EAACL,IAAI,CAACG,IAAI,EAAEhB,CAAC,EAAEc,KAAK,CAACN,QAAQ,CAAC,IACrD,IAAAW,0CAA0B,EAACN,IAAI,CAACG,IAAI,EAAEhB,CAAC,EAAEc,KAAK,CAACN,QAAQ,CAAC;QAE1D,IAAI,CAACS,UAAU,EAAE;UACf;QACF;QAEA,KAAK,MAAMG,SAAS,IAAIH,UAAU,EAAE;UAClChB,SAAS,CAACoB,GAAG,CAACD,SAAS,CAAC;QAC1B;QAEAP,IAAI,CAACS,mBAAmB,CAACL,UAAU,CAAC;MACtC,CAAC;MACDM,mBAAmBA,CAACV,IAAI,EAAEC,KAAK,EAAQ;QACrC,IACEb,SAAS,CAACc,GAAG,CAACF,IAAI,CAAC,IACnBZ,SAAS,CAACc,GAAG,CAACF,IAAI,CAACG,IAAI,CAAC,IACxBT,gBAAgB,CAACO,KAAK,CAACN,QAAQ,CAAC,EAChC;UACA;QACF;QAEA,MAAMgB,gBAAgB,GAAGX,IAAI,CAACG,IAAI,CAACS,YAAY,CAACC,EAAE,CAAC,CAAC,CAAC;;QAErD;QACA,IAAIb,IAAI,CAACG,IAAI,CAACS,YAAY,CAACE,MAAM,GAAG,CAAC,EAAE;UACrC;QACF;;QAEA;QACA,IAAI,CAACH,gBAAgB,EAAEI,IAAI,EAAE;UAC3B;QACF;QAEA,MAAM;UAAEC,EAAE;UAAED;QAAK,CAAC,GAAGJ,gBAAgB;;QAErC;QACA,IAAI,CAACxB,CAAC,CAAC8B,gBAAgB,CAACF,IAAI,CAAC,EAAE;UAC7B;QACF;;QAEA;QACA,IAAI,EAAE5B,CAAC,CAAC+B,YAAY,CAACF,EAAE,CAAC,IAAI7B,CAAC,CAACgC,eAAe,CAACH,EAAE,CAAC,CAAC,EAAE;UAClD;QACF;QAEA,MAAMI,OAAO,GAAGL,IAAI,CAACM,SAAS,CAACR,EAAE,CAAC,CAAC,CAAC;QAEpC,IAAI,CAACO,OAAO,EAAE;UACZ;QACF;QAEA,IAAIhB,UAAmC;;QAEvC;QACA,IACEjB,CAAC,CAAC+B,YAAY,CAACF,EAAE,CAAC,IAClB7B,CAAC,CAAC+B,YAAY,CAACH,IAAI,CAACO,MAAM,EAAE;UAAEzB,IAAI,EAAE;QAAU,CAAC,CAAC,IAChDV,CAAC,CAACoC,eAAe,CAACH,OAAO,CAAC,EAC1B;UACAhB,UAAU,GACR,IAAAoB,+CAAkC,EAChCxB,IAAI,EACJb,CAAC,EACD6B,EAAE,CAACnB,IAAI,EACPuB,OAAO,CAACK,KAAK,EACbxB,KAAK,CAACN,QACR,CAAC,IACD,IAAA+B,qDAAqC,EACnC1B,IAAI,EACJb,CAAC,EACD6B,EAAE,CAACnB,IAAI,EACPuB,OAAO,CAACK,KAAK,EACbxB,KAAK,CAACN,QACR,CAAC;QACL,CAAC,MAAM,IACLR,CAAC,CAACgC,eAAe,CAACH,EAAE,CAAC,IACrB7B,CAAC,CAAC+B,YAAY,CAACH,IAAI,CAACO,MAAM,EAAE;UAAEzB,IAAI,EAAE;QAAU,CAAC,CAAC,IAChDV,CAAC,CAACoC,eAAe,CAACH,OAAO,CAAC,EAC1B;UACAhB,UAAU,GACR,IAAAuB,kDAAqC,EACnC3B,IAAI,EACJb,CAAC,EACD6B,EAAE,EACFI,OAAO,CAACK,KAAK,EACbxB,KAAK,CAACN,QACR,CAAC,IACD,IAAAiC,wDAAwC,EACtC5B,IAAI,EACJb,CAAC,EACD6B,EAAE,EACFI,OAAO,CAACK,KAAK,EACbxB,KAAK,CAACN,QACR,CAAC;QACL,CAAC,MAAM,IACLR,CAAC,CAAC+B,YAAY,CAACF,EAAE,CAAC,IAClB7B,CAAC,CAAC+B,YAAY,CAACH,IAAI,CAACO,MAAM,EAAE;UAAEzB,IAAI,EAAE;QAAyB,CAAC,CAAC,EAC/D;UACA;UACA,MAAMgC,MAAM,GAAG,IAAAC,uCAA8B,EAACf,IAAI,EAAE5B,CAAC,CAAC;UACtD,IAAI,CAAC0C,MAAM,EAAE;YACX;UACF;UACAzB,UAAU,GAAG,IAAAsB,qDAAqC,EAChD1B,IAAI,EACJb,CAAC,EACD6B,EAAE,CAACnB,IAAI,EACPgC,MAAM,EACN5B,KAAK,CAACN,QACR,CAAC;QACH;QAEA,IAAI,CAACS,UAAU,EAAE;UACf;QACF;QAEA,KAAK,MAAMG,SAAS,IAAIH,UAAU,EAAE;UAClChB,SAAS,CAACoB,GAAG,CAACD,SAAS,CAAC;QAC1B;QAEAP,IAAI,CAACS,mBAAmB,CAACL,UAAU,CAAC;MACtC;IACF;EACF,CAAC;AACH","ignoreList":[]}

package/dist/commonjs/babel/index.js

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

package/dist/commonjs/babel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["module","exports","plugins","require","default"],"sourceRoot":"../../../src","sources":["babel/index.ts"],"mappings":";;AAAA;AACAA,MAAM,CAACC,OAAO,GAAG,YAAY;EAC3B,OAAO;IACLC,OAAO,EAAE,CACPC,OAAO,CAAC,iBAAiB,CAAC,CAACC,OAAO,EAClC,8BAA8B;EAElC,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/commonjs/babel/react-native-web.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleReactNativeWebIdentifierRequire = handleReactNativeWebIdentifierRequire;
+exports.handleReactNativeWebImport = handleReactNativeWebImport;
+exports.handleReactNativeWebObjectPatternRequire = handleReactNativeWebObjectPatternRequire;
+var _path = require("path");
+var _allowedModules = require("./allowedModules.js");
+function parseReactNativeWebSource(source, filename) {
+  if (source.startsWith(".")) {
+    source = (0, _path.resolve)(filename, source);
+    const internalPath = source.split("react-native-web/dist")[1];
+    if (!internalPath) {
+      return;
+    }
+
+    // Strip the absolute system filepath
+    source = `react-native-web/${internalPath}`;
+  }
+  if (source === "react-native-web") {
+    return {
+      source: "react-native-css/components"
+    };
+  } else if (source.startsWith("react-native-web/")) {
+    const name = source.split("/").at(-1);
+    if (!name || !_allowedModules.allowedModules.has(name)) {
+      return;
+    }
+    return {
+      source: `react-native-css/components/${name}`,
+      name
+    };
+  }
+  return;
+}
+function handleReactNativeWebImport(declaration, t, filename) {
+  const {
+    specifiers,
+    source
+  } = declaration;
+  const rnwSource = parseReactNativeWebSource(source.value, filename);
+  if (!rnwSource) {
+    return;
+  }
+  if (specifiers.length === 0) {
+    return [t.importDeclaration([], t.stringLiteral("react-native-css/components"))];
+  }
+  const statements = [];
+  for (const specifier of specifiers) {
+    if (t.isImportDefaultSpecifier(specifier)) {
+      const {
+        source: newSource,
+        name
+      } = rnwSource;
+      if (!name) {
+        statements.push(t.importDeclaration([t.importDefaultSpecifier(specifier.local)], t.stringLiteral(newSource)));
+      } else {
+        statements.push(t.importDeclaration([t.importSpecifier(specifier.local, specifier.local)], t.stringLiteral(`react-native-css/components/${name}`)));
+      }
+    } else if (t.isImportNamespaceSpecifier(specifier)) {
+      statements.push(t.importDeclaration([specifier], t.stringLiteral("react-native-css/components")));
+    } else {
+      const localName = t.isStringLiteral(specifier.imported) ? specifier.imported.value : specifier.imported.name;
+      if (!_allowedModules.allowedModules.has(localName)) {
+        statements.push(t.importDeclaration([specifier], source));
+      } else {
+        statements.push(t.importDeclaration([t.importSpecifier(specifier.local, specifier.imported)], t.stringLiteral(`react-native-css/components/${localName}`)));
+      }
+    }
+  }
+  return statements;
+}
+function handleReactNativeWebIdentifierRequire(path, t, id, source, filename) {
+  const parsedSource = parseReactNativeWebSource(source, filename);
+  if (!parsedSource) {
+    return;
+  }
+  const {
+    source: newSource,
+    name
+  } = parsedSource;
+  if (name) {
+    return [t.variableDeclaration(path.node.kind, [t.variableDeclarator(t.objectPattern([name === id ? t.objectProperty(t.identifier(name), t.identifier(id), false, true) : t.objectProperty(t.identifier(name), t.identifier(id))]), t.callExpression(t.identifier("require"), [t.stringLiteral(newSource)]))])];
+  } else {
+    return [t.variableDeclaration(path.node.kind, [t.variableDeclarator(t.identifier(id), t.callExpression(t.identifier("require"), [t.stringLiteral(newSource)]))])];
+  }
+}
+function handleReactNativeWebObjectPatternRequire(path, t, id, source, filename) {
+  const parsedSource = parseReactNativeWebSource(source, filename);
+
+  // Don't handle `const { Text } = require('react-native-web/dist/cjs/Text');` - we only handle package exports
+  if (!parsedSource || parsedSource.name) {
+    return;
+  }
+  const statements = [];
+  for (const identifier of id.properties) {
+    if (t.isRestElement(identifier)) {
+      // Bail out on `const { ...rest } = require('react-native-web');`
+      // We need to exit as we do not handle `const { Text, ...rest } = require('react-native-web');`
+      return;
+    } else if (!(t.isIdentifier(identifier.value) && t.isIdentifier(identifier.key))) {
+      // Bail out on anything that isn't `const { <key>: <identifier> } = require('react-native-web');`
+      return;
+    } else {
+      const name = identifier.key.name;
+      if (!_allowedModules.allowedModules.has(name)) {
+        statements.push(t.variableDeclaration(path.node.kind, [t.variableDeclarator(t.objectPattern([identifier]), t.callExpression(t.identifier("require"), [t.stringLiteral(source)]))]));
+      } else {
+        const newSourceWithName = `react-native-css/components/${name}`;
+        statements.push(t.variableDeclaration(path.node.kind, [t.variableDeclarator(t.objectPattern([t.objectProperty(t.identifier(name), t.identifier(identifier.value.name), false, true)]), t.callExpression(t.identifier("require"), [t.stringLiteral(newSourceWithName)]))]));
+      }
+    }
+  }
+  return statements;
+}
+//# sourceMappingURL=react-native-web.js.map

package/dist/commonjs/babel/react-native-web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_path","require","_allowedModules","parseReactNativeWebSource","source","filename","startsWith","resolve","internalPath","split","name","at","allowedModules","has","handleReactNativeWebImport","declaration","t","specifiers","rnwSource","value","length","importDeclaration","stringLiteral","statements","specifier","isImportDefaultSpecifier","newSource","push","importDefaultSpecifier","local","importSpecifier","isImportNamespaceSpecifier","localName","isStringLiteral","imported","handleReactNativeWebIdentifierRequire","path","id","parsedSource","variableDeclaration","node","kind","variableDeclarator","objectPattern","objectProperty","identifier","callExpression","handleReactNativeWebObjectPatternRequire","properties","isRestElement","isIdentifier","key","newSourceWithName"],"sourceRoot":"../../../src","sources":["babel/react-native-web.ts"],"mappings":";;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAUA,IAAAC,eAAA,GAAAD,OAAA;AAIA,SAASE,yBAAyBA,CAACC,MAAc,EAAEC,QAAgB,EAAE;EACnE,IAAID,MAAM,CAACE,UAAU,CAAC,GAAG,CAAC,EAAE;IAC1BF,MAAM,GAAG,IAAAG,aAAO,EAACF,QAAQ,EAAED,MAAM,CAAC;IAElC,MAAMI,YAAY,GAAGJ,MAAM,CAACK,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;IAC7D,IAAI,CAACD,YAAY,EAAE;MACjB;IACF;;IAEA;IACAJ,MAAM,GAAG,oBAAoBI,YAAY,EAAE;EAC7C;EAEA,IAAIJ,MAAM,KAAK,kBAAkB,EAAE;IACjC,OAAO;MAAEA,MAAM,EAAE;IAA8B,CAAC;EAClD,CAAC,MAAM,IAAIA,MAAM,CAACE,UAAU,CAAC,mBAAmB,CAAC,EAAE;IACjD,MAAMI,IAAI,GAAGN,MAAM,CAACK,KAAK,CAAC,GAAG,CAAC,CAACE,EAAE,CAAC,CAAC,CAAC,CAAC;IACrC,IAAI,CAACD,IAAI,IAAI,CAACE,8BAAc,CAACC,GAAG,CAACH,IAAI,CAAC,EAAE;MACtC;IACF;IAEA,OAAO;MACLN,MAAM,EAAE,+BAA+BM,IAAI,EAAE;MAC7CA;IACF,CAAC;EACH;EAEA;AACF;AAEO,SAASI,0BAA0BA,CACxCC,WAA8B,EAC9BC,CAAa,EACbX,QAAgB,EACS;EACzB,MAAM;IAAEY,UAAU;IAAEb;EAAO,CAAC,GAAGW,WAAW;EAE1C,MAAMG,SAAS,GAAGf,yBAAyB,CAACC,MAAM,CAACe,KAAK,EAAEd,QAAQ,CAAC;EACnE,IAAI,CAACa,SAAS,EAAE;IACd;EACF;EAEA,IAAID,UAAU,CAACG,MAAM,KAAK,CAAC,EAAE;IAC3B,OAAO,CACLJ,CAAC,CAACK,iBAAiB,CAAC,EAAE,EAAEL,CAAC,CAACM,aAAa,CAAC,6BAA6B,CAAC,CAAC,CACxE;EACH;EAEA,MAAMC,UAAuB,GAAG,EAAE;EAElC,KAAK,MAAMC,SAAS,IAAIP,UAAU,EAAE;IAClC,IAAID,CAAC,CAACS,wBAAwB,CAACD,SAAS,CAAC,EAAE;MACzC,MAAM;QAAEpB,MAAM,EAAEsB,SAAS;QAAEhB;MAAK,CAAC,GAAGQ,SAAS;MAE7C,IAAI,CAACR,IAAI,EAAE;QACTa,UAAU,CAACI,IAAI,CACbX,CAAC,CAACK,iBAAiB,CACjB,CAACL,CAAC,CAACY,sBAAsB,CAACJ,SAAS,CAACK,KAAK,CAAC,CAAC,EAC3Cb,CAAC,CAACM,aAAa,CAACI,SAAS,CAC3B,CACF,CAAC;MACH,CAAC,MAAM;QACLH,UAAU,CAACI,IAAI,CACbX,CAAC,CAACK,iBAAiB,CACjB,CAACL,CAAC,CAACc,eAAe,CAACN,SAAS,CAACK,KAAK,EAAEL,SAAS,CAACK,KAAK,CAAC,CAAC,EACrDb,CAAC,CAACM,aAAa,CAAC,+BAA+BZ,IAAI,EAAE,CACvD,CACF,CAAC;MACH;IACF,CAAC,MAAM,IAAIM,CAAC,CAACe,0BAA0B,CAACP,SAAS,CAAC,EAAE;MAClDD,UAAU,CAACI,IAAI,CACbX,CAAC,CAACK,iBAAiB,CACjB,CAACG,SAAS,CAAC,EACXR,CAAC,CAACM,aAAa,CAAC,6BAA6B,CAC/C,CACF,CAAC;IACH,CAAC,MAAM;MACL,MAAMU,SAAS,GAAGhB,CAAC,CAACiB,eAAe,CAACT,SAAS,CAACU,QAAQ,CAAC,GACnDV,SAAS,CAACU,QAAQ,CAACf,KAAK,GACxBK,SAAS,CAACU,QAAQ,CAACxB,IAAI;MAE3B,IAAI,CAACE,8BAAc,CAACC,GAAG,CAACmB,SAAS,CAAC,EAAE;QAClCT,UAAU,CAACI,IAAI,CAACX,CAAC,CAACK,iBAAiB,CAAC,CAACG,SAAS,CAAC,EAAEpB,MAAM,CAAC,CAAC;MAC3D,CAAC,MAAM;QACLmB,UAAU,CAACI,IAAI,CACbX,CAAC,CAACK,iBAAiB,CACjB,CAACL,CAAC,CAACc,eAAe,CAACN,SAAS,CAACK,KAAK,EAAEL,SAAS,CAACU,QAAQ,CAAC,CAAC,EACxDlB,CAAC,CAACM,aAAa,CAAC,+BAA+BU,SAAS,EAAE,CAC5D,CACF,CAAC;MACH;IACF;EACF;EAEA,OAAOT,UAAU;AACnB;AAEO,SAASY,qCAAqCA,CACnDC,IAAmC,EACnCpB,CAAa,EACbqB,EAAU,EACVjC,MAAc,EACdC,QAAgB,EAChB;EACA,MAAMiC,YAAY,GAAGnC,yBAAyB,CAACC,MAAM,EAAEC,QAAQ,CAAC;EAEhE,IAAI,CAACiC,YAAY,EAAE;IACjB;EACF;EAEA,MAAM;IAAElC,MAAM,EAAEsB,SAAS;IAAEhB;EAAK,CAAC,GAAG4B,YAAY;EAEhD,IAAI5B,IAAI,EAAE;IACR,OAAO,CACLM,CAAC,CAACuB,mBAAmB,CAACH,IAAI,CAACI,IAAI,CAACC,IAAI,EAAE,CACpCzB,CAAC,CAAC0B,kBAAkB,CAClB1B,CAAC,CAAC2B,aAAa,CAAC,CACdjC,IAAI,KAAK2B,EAAE,GACPrB,CAAC,CAAC4B,cAAc,CACd5B,CAAC,CAAC6B,UAAU,CAACnC,IAAI,CAAC,EAClBM,CAAC,CAAC6B,UAAU,CAACR,EAAE,CAAC,EAChB,KAAK,EACL,IACF,CAAC,GACDrB,CAAC,CAAC4B,cAAc,CAAC5B,CAAC,CAAC6B,UAAU,CAACnC,IAAI,CAAC,EAAEM,CAAC,CAAC6B,UAAU,CAACR,EAAE,CAAC,CAAC,CAC3D,CAAC,EACFrB,CAAC,CAAC8B,cAAc,CAAC9B,CAAC,CAAC6B,UAAU,CAAC,SAAS,CAAC,EAAE,CACxC7B,CAAC,CAACM,aAAa,CAACI,SAAS,CAAC,CAC3B,CACH,CAAC,CACF,CAAC,CACH;EACH,CAAC,MAAM;IACL,OAAO,CACLV,CAAC,CAACuB,mBAAmB,CAACH,IAAI,CAACI,IAAI,CAACC,IAAI,EAAE,CACpCzB,CAAC,CAAC0B,kBAAkB,CAClB1B,CAAC,CAAC6B,UAAU,CAACR,EAAE,CAAC,EAChBrB,CAAC,CAAC8B,cAAc,CAAC9B,CAAC,CAAC6B,UAAU,CAAC,SAAS,CAAC,EAAE,CACxC7B,CAAC,CAACM,aAAa,CAACI,SAAS,CAAC,CAC3B,CACH,CAAC,CACF,CAAC,CACH;EACH;AACF;AAEO,SAASqB,wCAAwCA,CACtDX,IAAmC,EACnCpB,CAAa,EACbqB,EAAiB,EACjBjC,MAAc,EACdC,QAAgB,EAChB;EACA,MAAMiC,YAAY,GAAGnC,yBAAyB,CAACC,MAAM,EAAEC,QAAQ,CAAC;;EAEhE;EACA,IAAI,CAACiC,YAAY,IAAIA,YAAY,CAAC5B,IAAI,EAAE;IACtC;EACF;EAEA,MAAMa,UAAuB,GAAG,EAAE;EAElC,KAAK,MAAMsB,UAAU,IAAIR,EAAE,CAACW,UAAU,EAAE;IACtC,IAAIhC,CAAC,CAACiC,aAAa,CAACJ,UAAU,CAAC,EAAE;MAC/B;MACA;MACA;IACF,CAAC,MAAM,IACL,EAAE7B,CAAC,CAACkC,YAAY,CAACL,UAAU,CAAC1B,KAAK,CAAC,IAAIH,CAAC,CAACkC,YAAY,CAACL,UAAU,CAACM,GAAG,CAAC,CAAC,EACrE;MACA;MACA;IACF,CAAC,MAAM;MACL,MAAMzC,IAAI,GAAGmC,UAAU,CAACM,GAAG,CAACzC,IAAI;MAEhC,IAAI,CAACE,8BAAc,CAACC,GAAG,CAACH,IAAI,CAAC,EAAE;QAC7Ba,UAAU,CAACI,IAAI,CACbX,CAAC,CAACuB,mBAAmB,CAACH,IAAI,CAACI,IAAI,CAACC,IAAI,EAAE,CACpCzB,CAAC,CAAC0B,kBAAkB,CAClB1B,CAAC,CAAC2B,aAAa,CAAC,CAACE,UAAU,CAAC,CAAC,EAC7B7B,CAAC,CAAC8B,cAAc,CAAC9B,CAAC,CAAC6B,UAAU,CAAC,SAAS,CAAC,EAAE,CACxC7B,CAAC,CAACM,aAAa,CAAClB,MAAM,CAAC,CACxB,CACH,CAAC,CACF,CACH,CAAC;MACH,CAAC,MAAM;QACL,MAAMgD,iBAAiB,GAAG,+BAA+B1C,IAAI,EAAE;QAE/Da,UAAU,CAACI,IAAI,CACbX,CAAC,CAACuB,mBAAmB,CAACH,IAAI,CAACI,IAAI,CAACC,IAAI,EAAE,CACpCzB,CAAC,CAAC0B,kBAAkB,CAClB1B,CAAC,CAAC2B,aAAa,CAAC,CACd3B,CAAC,CAAC4B,cAAc,CACd5B,CAAC,CAAC6B,UAAU,CAACnC,IAAI,CAAC,EAClBM,CAAC,CAAC6B,UAAU,CAACA,UAAU,CAAC1B,KAAK,CAACT,IAAI,CAAC,EACnC,KAAK,EACL,IACF,CAAC,CACF,CAAC,EACFM,CAAC,CAAC8B,cAAc,CAAC9B,CAAC,CAAC6B,UAAU,CAAC,SAAS,CAAC,EAAE,CACxC7B,CAAC,CAACM,aAAa,CAAC8B,iBAAiB,CAAC,CACnC,CACH,CAAC,CACF,CACH,CAAC;MACH;IACF;EACF;EAEA,OAAO7B,UAAU;AACnB","ignoreList":[]}