react-native-unistyles 3.0.0-rc.3 → 3.0.0-rc.4

package/lib/typescript/src/web-only/index.d.ts

@@ -0,0 +1,2 @@
+export { getWebProps } from './getWebProps';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/web-only/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/web-only/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-rc.3",
+  "version": "3.0.0-rc.4",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "NODE_ENV=babel-test jest ./plugin",
@@ -51,8 +51,22 @@
       "types": "./lib/typescript/src/server/index.d.ts",
       "import": "./lib/module/server/index.js",
       "browser": "./lib/module/server/index.js",
-      "react-native": "./src/server.ts",
+      "react-native": "./src/server/index.ts",
       "default": "./lib/commonjs/server/index.js"
+    },
+    "./web": {
+      "types": "./lib/typescript/src/web-only/index.d.ts",
+      "import": "./lib/module/web-only/index.js",
+      "browser": "./lib/module/web-only/index.js",
+      "react-native": "./src/web-only/index.ts",
+      "default": "./lib/commonjs/web-only/index.js"
+    },
+    "./reanimated": {
+      "types": "./lib/typescript/src/reanimated/index.d.ts",
+      "import": "./lib/module/reanimated/index.js",
+      "browser": "./lib/module/reanimated/index.js",
+      "react-native": "./src/reanimated/index.ts",
+      "default": "./lib/commonjs/reanimated/index.js"
     }
   },
   "files": [
@@ -66,6 +80,8 @@
     "web",
     "components",
     "server",
+    "web-only",
+    "reanimated",
     "react-native.config.js",
     "Unistyles.podspec",
     "!plugin/__tests__",
@@ -124,6 +140,7 @@
     "react-native": "0.77.1",
     "react-native-builder-bob": "0.37.0",
     "react-native-nitro-modules": "0.25.2",
+    "react-native-reanimated": "3.17.5",
     "react-native-web": "0.19.13",
     "react-test-renderer": "18.3.1",
     "release-it": "17.11.0",
@@ -134,7 +151,13 @@
     "react": "*",
     "react-native": ">=0.76.0",
     "react-native-edge-to-edge": "*",
-    "react-native-nitro-modules": "*"
+    "react-native-nitro-modules": "*",
+    "react-native-reanimated": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native-reanimated": {
+      "optional": true
+    }
   },
   "workspaces": [
     "example",

package/plugin/index.js

@@ -83,21 +83,10 @@ var NATIVE_COMPONENTS_PATHS = {
 
 // plugin/src/exotic.ts
 var t = __toESM(require("@babel/types"));
-
-// plugin/src/paths.ts
-var isWindows = process.platform === "win32";
-var toWinPath = (pathString) => {
-  return pathString;
-};
-var toPlatformPath = (pathString) => {
-  return isWindows ? toWinPath(pathString) : pathString;
-};
-
-// plugin/src/exotic.ts
-function handleExoticImport(path, state, exoticImport) {
-  const specifiers = path.node.specifiers;
-  const source = path.node.source;
-  if (path.node.importKind !== "value") {
+function handleExoticImport(path2, state, exoticImport) {
+  const specifiers = path2.node.specifiers;
+  const source = path2.node.source;
+  if (path2.node.importKind !== "value") {
     return;
   }
   specifiers.forEach((specifier) => {
@@ -112,22 +101,22 @@ function handleExoticImport(path, state, exoticImport) {
         const newImport = t.importDeclaration(
           [t.importDefaultSpecifier(t.identifier(specifier.local.name))],
           t.stringLiteral(
-            state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(toPlatformPath(`react-native-unistyles/components/native/${rule.mapTo}`)) ?? "" : toPlatformPath(`react-native-unistyles/components/native/${rule.mapTo}`)
+            state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(`react-native-unistyles/components/native/${rule.mapTo}`) ?? "" : `react-native-unistyles/components/native/${rule.mapTo}`
           )
         );
-        path.replaceWith(newImport);
+        path2.replaceWith(newImport);
       } else {
         const newImport = t.importDeclaration(
           [t.importSpecifier(t.identifier(rule.mapTo), t.identifier(rule.mapTo))],
           t.stringLiteral(
-            state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(toPlatformPath(`react-native-unistyles/components/native/${rule.mapTo}`)) ?? "" : toPlatformPath(`react-native-unistyles/components/native/${rule.mapTo}`)
+            state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(`react-native-unistyles/components/native/${rule.mapTo}`) ?? "" : `react-native-unistyles/components/native/${rule.mapTo}`
           )
         );
-        path.node.specifiers = specifiers.filter((s) => s !== specifier);
-        if (path.node.specifiers.length === 0) {
-          path.replaceWith(newImport);
+        path2.node.specifiers = specifiers.filter((s) => s !== specifier);
+        if (path2.node.specifiers.length === 0) {
+          path2.replaceWith(newImport);
         } else {
-          path.insertBefore(newImport);
+          path2.insertBefore(newImport);
         }
       }
       return;
@@ -137,12 +126,12 @@ function handleExoticImport(path, state, exoticImport) {
 
 // plugin/src/import.ts
 var t2 = __toESM(require("@babel/types"));
-function addUnistylesImport(path, state) {
+function addUnistylesImport(path2, state) {
   const localNames = Object.keys(state.reactNativeImports);
   const names = Object.values(state.reactNativeImports);
   const pairs = Object.entries(state.reactNativeImports);
   const nodesToRemove = [];
-  path.node.body.forEach((node) => {
+  path2.node.body.forEach((node) => {
     if (t2.isImportDeclaration(node) && node.source.value === "react-native") {
       node.specifiers = node.specifiers.filter((specifier) => !localNames.some((name) => name === specifier.local.name));
       if (node.specifiers.length === 0) {
@@ -151,7 +140,7 @@ function addUnistylesImport(path, state) {
     }
   });
   names.forEach((name) => {
-    const rnWebImport = path.node.body.find((node) => t2.isImportDeclaration(node) && node.source.value === toPlatformPath(`react-native-web/dist/exports/${name}`));
+    const rnWebImport = path2.node.body.find((node) => t2.isImportDeclaration(node) && node.source.value === `react-native-web/dist/exports/${name}`);
     if (rnWebImport) {
       rnWebImport.specifiers = [];
     }
@@ -160,34 +149,44 @@ function addUnistylesImport(path, state) {
     const newImport = t2.importDeclaration(
       [t2.importSpecifier(t2.identifier(localName), t2.identifier(name))],
       t2.stringLiteral(
-        state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(toPlatformPath(`react-native-unistyles/src/components/native/${name}`)) ?? "" : toPlatformPath(`react-native-unistyles/components/native/${name}`)
+        state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(`react-native-unistyles/src/components/native/${name}`) ?? "" : `react-native-unistyles/components/native/${name}`
       )
     );
-    path.node.body.unshift(newImport);
+    path2.node.body.unshift(newImport);
   });
-  nodesToRemove.forEach((node) => path.node.body.splice(path.node.body.indexOf(node), 1));
+  nodesToRemove.forEach((node) => path2.node.body.splice(path2.node.body.indexOf(node), 1));
 }
 function isInsideNodeModules(state) {
   return state.file.opts.filename?.includes("node_modules") && !state.file.replaceWithUnistyles;
 }
-function addUnistylesRequire(path, state) {
+function addUnistylesRequire(path2, state) {
   Object.entries(state.reactNativeImports).forEach(([componentName, uniqueName]) => {
     const newRequire = t2.variableDeclaration("const", [
       t2.variableDeclarator(
         t2.identifier(uniqueName),
         t2.callExpression(t2.identifier("require"), [
-          t2.stringLiteral(toPlatformPath(`react-native-unistyles/src/components/native/${componentName}`))
+          t2.stringLiteral(`react-native-unistyles/src/components/native/${componentName}`)
         ])
       )
     ]);
-    path.node.body.unshift(newRequire);
+    path2.node.body.unshift(newRequire);
   });
 }
 
+// plugin/src/paths.ts
+var import_node_path = __toESM(require("node:path"));
+var isWindows = process.platform === "win32";
+var toWinPath = (pathString) => {
+  return import_node_path.default.normalize(pathString).replace(/\//g, "\\");
+};
+var toPlatformPath = (pathString) => {
+  return isWindows ? toWinPath(pathString) : pathString;
+};
+
 // plugin/src/ref.ts
 var t3 = __toESM(require("@babel/types"));
-function hasStringRef(path) {
-  return path.node.openingElement.attributes.find(
+function hasStringRef(path2) {
+  return path2.node.openingElement.attributes.find(
     (attr) => t3.isJSXAttribute(attr) && t3.isJSXIdentifier(attr.name, { name: "ref" }) && t3.isStringLiteral(attr.value)
   );
 }
@@ -324,8 +323,8 @@ function stringToUniqueId(str) {
   const absHash = Math.abs(hash);
   return absHash % 1e9;
 }
-function isUnistylesStyleSheet(path, state) {
-  const { callee } = path.node;
+function isUnistylesStyleSheet(path2, state) {
+  const { callee } = path2.node;
   if (!t4.isMemberExpression(callee) || !t4.isIdentifier(callee.property)) {
     return false;
   }
@@ -333,38 +332,38 @@ function isUnistylesStyleSheet(path, state) {
   const isRequire = state.file.hasUnistylesImport && callee.property.name === "create" && t4.isMemberExpression(callee.object) && t4.isIdentifier(callee.object.property) && t4.isIdentifier(callee.object.object) && callee.object.object.name === state.file.styleSheetLocalName && callee.object.property.name === "StyleSheet";
   return isImport || isRequire;
 }
-function isUnistylesCommonJSRequire(path, state) {
-  const isRequire = t4.isIdentifier(path.node.callee) && path.node.arguments.length > 0 && t4.isStringLiteral(path.node.arguments[0]) && path.node.arguments[0].value === "react-native-unistyles";
-  if (isRequire && t4.isVariableDeclarator(path.parent) && t4.isIdentifier(path.parent.id)) {
+function isUnistylesCommonJSRequire(path2, state) {
+  const isRequire = t4.isIdentifier(path2.node.callee) && path2.node.arguments.length > 0 && t4.isStringLiteral(path2.node.arguments[0]) && path2.node.arguments[0].value === "react-native-unistyles";
+  if (isRequire && t4.isVariableDeclarator(path2.parent) && t4.isIdentifier(path2.parent.id)) {
     state.file.hasUnistylesImport = true;
-    state.file.styleSheetLocalName = path.parent.id.name;
+    state.file.styleSheetLocalName = path2.parent.id.name;
   }
   return isRequire;
 }
-function isReactNativeCommonJSRequire(path, state) {
-  const isRequire = t4.isIdentifier(path.node.callee) && path.node.arguments.length > 0 && path.node.callee.name === "require";
-  const requireImportName = path.node.arguments.find((node) => t4.isStringLiteral(node));
+function isReactNativeCommonJSRequire(path2, state) {
+  const isRequire = t4.isIdentifier(path2.node.callee) && path2.node.arguments.length > 0 && path2.node.callee.name === "require";
+  const requireImportName = path2.node.arguments.find((node) => t4.isStringLiteral(node));
   const isReactNativeRequire = isRequire && requireImportName && (requireImportName.value === "react-native" || requireImportName.value === "react-native-web/dist/index");
-  if (isReactNativeRequire && t4.isVariableDeclarator(path.parent) && t4.isIdentifier(path.parent.id)) {
-    state.file.reactNativeCommonJSName = path.parent.id.name;
+  if (isReactNativeRequire && t4.isVariableDeclarator(path2.parent) && t4.isIdentifier(path2.parent.id)) {
+    state.file.reactNativeCommonJSName = path2.parent.id.name;
   }
   return isRequire;
 }
-function isKindOfStyleSheet(path, state) {
+function isKindOfStyleSheet(path2, state) {
   if (!state.file.forceProcessing && !state.file.hasUnistylesImport) {
     return false;
   }
-  const { callee } = path.node;
+  const { callee } = path2.node;
   return t4.isMemberExpression(callee) && t4.isIdentifier(callee.property) && callee.property.name === "create" && t4.isIdentifier(callee.object);
 }
-function addStyleSheetTag(path, state) {
+function addStyleSheetTag(path2, state) {
   const str = state.filename?.replace(state.cwd, "") ?? "";
   const uniqueId = stringToUniqueId(str) + ++state.file.tagNumber;
-  path.node.arguments.push(t4.numericLiteral(uniqueId));
+  path2.node.arguments.push(t4.numericLiteral(uniqueId));
 }
-function getStylesDependenciesFromObject(path) {
+function getStylesDependenciesFromObject(path2) {
   const detectedStylesWithVariants = /* @__PURE__ */ new Set();
-  const stylesheet = path.node.arguments[0];
+  const stylesheet = path2.node.arguments[0];
   if (t4.isObjectExpression(stylesheet)) {
     stylesheet?.properties.forEach((property) => {
       if (!t4.isObjectProperty(property) || !t4.isIdentifier(property.key)) {
@@ -663,8 +662,8 @@ function addDependencies(state, styleName, unistyle, detectedDependencies) {
 
 // plugin/src/variants.ts
 var t5 = __toESM(require("@babel/types"));
-function extractVariants(path, state) {
-  const maybeVariants = path.node.body.filter((node2) => t5.isExpressionStatement(node2) && t5.isCallExpression(node2.expression) && t5.isMemberExpression(node2.expression.callee));
+function extractVariants(path2, state) {
+  const maybeVariants = path2.node.body.filter((node2) => t5.isExpressionStatement(node2) && t5.isCallExpression(node2.expression) && t5.isMemberExpression(node2.expression.callee));
   if (maybeVariants.length === 0) {
     return;
   }
@@ -687,7 +686,7 @@ function extractVariants(path, state) {
     return;
   }
   const calleeName = callee.object.name;
-  const newUniqueName = path.scope.generateUidIdentifier(calleeName);
+  const newUniqueName = path2.scope.generateUidIdentifier(calleeName);
   const shadowDeclaration = t5.variableDeclaration("const", [
     t5.variableDeclarator(newUniqueName, t5.identifier(calleeName))
   ]);
@@ -698,14 +697,14 @@ function extractVariants(path, state) {
   const finalDeclaration = t5.variableDeclaration("const", [
     t5.variableDeclarator(t5.identifier(calleeName), newCallExpression)
   ]);
-  const pathIndex = path.node.body.findIndex((bodyPath) => bodyPath === targetVariant);
-  const rest = path.node.body.slice(pathIndex + 1);
+  const pathIndex = path2.node.body.findIndex((bodyPath) => bodyPath === targetVariant);
+  const rest = path2.node.body.slice(pathIndex + 1);
   const statement = t5.blockStatement([
     finalDeclaration,
     ...rest
   ]);
-  path.node.body = [
-    ...path.node.body.slice(0, pathIndex),
+  path2.node.body = [
+    ...path2.node.body.slice(0, pathIndex),
     shadowDeclaration,
     statement
   ];
@@ -724,8 +723,8 @@ function index_default() {
     name: "babel-react-native-unistyles",
     visitor: {
       Program: {
-        enter(path, state) {
-          state.file.replaceWithUnistyles = REPLACE_WITH_UNISTYLES_PATHS.map(toPlatformPath).concat(state.opts.autoProcessPaths ?? []).some((path2) => state.filename?.includes(path2));
+        enter(path2, state) {
+          state.file.replaceWithUnistyles = REPLACE_WITH_UNISTYLES_PATHS.map(toPlatformPath).concat(state.opts.autoProcessPaths ?? []).some((path3) => state.filename?.includes(path3));
           state.file.hasAnyUnistyle = false;
           state.file.hasUnistylesImport = false;
           state.file.addUnistylesRequire = false;
@@ -735,7 +734,7 @@ function index_default() {
           state.file.tagNumber = 0;
           state.reactNativeImports = {};
           state.file.forceProcessing = state.opts.autoProcessRoot && state.filename ? state.filename.includes(toPlatformPath(`${state.file.opts.root}/${state.opts.autoProcessRoot}/`)) : false;
-          path.traverse({
+          path2.traverse({
             BlockStatement(blockPath) {
               if (isInsideNodeModules(state)) {
                 return;
@@ -744,41 +743,41 @@ function index_default() {
             }
           });
         },
-        exit(path, state) {
+        exit(path2, state) {
           if (isInsideNodeModules(state)) {
             return;
           }
           if (state.file.addUnistylesRequire) {
-            return addUnistylesRequire(path, state);
+            return addUnistylesRequire(path2, state);
           }
           if (state.file.hasAnyUnistyle || state.file.hasVariants || state.file.replaceWithUnistyles || state.file.forceProcessing) {
-            addUnistylesImport(path, state);
+            addUnistylesImport(path2, state);
           }
         }
       },
-      FunctionDeclaration(path, state) {
+      FunctionDeclaration(path2, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        const componentName = path.node.id ? path.node.id.name : null;
+        const componentName = path2.node.id ? path2.node.id.name : null;
         if (componentName) {
           state.file.hasVariants = false;
         }
       },
-      ClassDeclaration(path, state) {
+      ClassDeclaration(path2, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        const componentName = path.node.id ? path.node.id.name : null;
+        const componentName = path2.node.id ? path2.node.id.name : null;
         if (componentName) {
           state.file.hasVariants = false;
         }
       },
-      VariableDeclaration(path, state) {
+      VariableDeclaration(path2, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        path.node.declarations.forEach((declaration) => {
+        path2.node.declarations.forEach((declaration) => {
           if (t6.isArrowFunctionExpression(declaration.init) || t6.isFunctionExpression(declaration.init)) {
             const componentName = declaration.id && t6.isIdentifier(declaration.id) ? declaration.id.name : null;
             if (componentName) {
@@ -787,83 +786,83 @@ function index_default() {
           }
         });
       },
-      ImportDeclaration(path, state) {
+      ImportDeclaration(path2, state) {
         const exoticImport = REPLACE_WITH_UNISTYLES_EXOTIC_PATHS.concat(state.opts.autoRemapImports ?? []).find((exotic) => state.filename?.includes(exotic.path));
         if (exoticImport) {
-          return handleExoticImport(path, state, exoticImport);
+          return handleExoticImport(path2, state, exoticImport);
         }
         if (isInsideNodeModules(state)) {
           return;
         }
-        const importSource = path.node.source.value;
+        const importSource = path2.node.source.value;
         if (importSource.includes("react-native-unistyles")) {
           state.file.hasUnistylesImport = true;
-          path.node.specifiers.forEach((specifier) => {
+          path2.node.specifiers.forEach((specifier) => {
             if (t6.isImportSpecifier(specifier) && t6.isIdentifier(specifier.imported) && specifier.imported.name === "StyleSheet") {
               state.file.styleSheetLocalName = specifier.local.name;
             }
           });
         }
         if (importSource === "react-native") {
-          path.node.specifiers.forEach((specifier) => {
+          path2.node.specifiers.forEach((specifier) => {
             if (t6.isImportSpecifier(specifier) && t6.isIdentifier(specifier.imported) && REACT_NATIVE_COMPONENT_NAMES.includes(specifier.imported.name)) {
               state.reactNativeImports[specifier.local.name] = specifier.imported.name;
             }
           });
         }
-        if (importSource.includes(toPlatformPath("react-native/Libraries"))) {
-          handleExoticImport(path, state, NATIVE_COMPONENTS_PATHS);
+        if (importSource.includes("react-native/Libraries")) {
+          handleExoticImport(path2, state, NATIVE_COMPONENTS_PATHS);
         }
         if (!state.file.forceProcessing && Array.isArray(state.opts.autoProcessImports)) {
           state.file.forceProcessing = state.opts.autoProcessImports.includes(importSource);
         }
       },
-      JSXElement(path, state) {
+      JSXElement(path2, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        if (hasStringRef(path)) {
+        if (hasStringRef(path2)) {
           throw new Error("Detected string based ref which is not supported by Unistyles.");
         }
       },
-      MemberExpression(path, state) {
+      MemberExpression(path2, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        if (!state.file.reactNativeCommonJSName || !t6.isIdentifier(path.node.object)) {
+        if (!state.file.reactNativeCommonJSName || !t6.isIdentifier(path2.node.object)) {
           return;
         }
-        if (path.node.object.name !== state.file.reactNativeCommonJSName || !t6.isIdentifier(path.node.property)) {
+        if (path2.node.object.name !== state.file.reactNativeCommonJSName || !t6.isIdentifier(path2.node.property)) {
           return;
         }
-        if (!REACT_NATIVE_COMPONENT_NAMES.includes(path.node.property.name)) {
+        if (!REACT_NATIVE_COMPONENT_NAMES.includes(path2.node.property.name)) {
           return;
         }
-        if (!state.reactNativeImports[path.node.property.name]) {
-          const uniqueId = path.scope.generateUidIdentifier(`reactNativeUnistyles_${path.node.property.name}`);
-          state.reactNativeImports[path.node.property.name] = uniqueId.name;
+        if (!state.reactNativeImports[path2.node.property.name]) {
+          const uniqueId = path2.scope.generateUidIdentifier(`reactNativeUnistyles_${path2.node.property.name}`);
+          state.reactNativeImports[path2.node.property.name] = uniqueId.name;
           state.file.addUnistylesRequire = true;
         }
-        path.node.object.name = state.reactNativeImports[path.node.property.name];
+        path2.node.object.name = state.reactNativeImports[path2.node.property.name];
       },
-      CallExpression(path, state) {
+      CallExpression(path2, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        if (isUnistylesCommonJSRequire(path, state)) {
+        if (isUnistylesCommonJSRequire(path2, state)) {
           return;
         }
-        if (isReactNativeCommonJSRequire(path, state)) {
+        if (isReactNativeCommonJSRequire(path2, state)) {
           return;
         }
-        if (!isUnistylesStyleSheet(path, state) && !isKindOfStyleSheet(path, state)) {
+        if (!isUnistylesStyleSheet(path2, state) && !isKindOfStyleSheet(path2, state)) {
           return;
         }
         state.file.hasAnyUnistyle = true;
-        addStyleSheetTag(path, state);
-        const arg = t6.isAssignmentExpression(path.node.arguments[0]) ? path.node.arguments[0].right : path.node.arguments[0];
+        addStyleSheetTag(path2, state);
+        const arg = t6.isAssignmentExpression(path2.node.arguments[0]) ? path2.node.arguments[0].right : path2.node.arguments[0];
         if (t6.isObjectExpression(arg)) {
-          const detectedDependencies = getStylesDependenciesFromObject(path);
+          const detectedDependencies = getStylesDependenciesFromObject(path2);
           if (detectedDependencies) {
             if (t6.isObjectExpression(arg)) {
               arg.properties.forEach((property) => {
@@ -875,7 +874,7 @@ function index_default() {
           }
         }
         if (t6.isArrowFunctionExpression(arg) || t6.isFunctionExpression(arg)) {
-          const funcPath = t6.isAssignmentExpression(path.node.arguments[0]) ? path.get("arguments.0.right") : path.get("arguments.0");
+          const funcPath = t6.isAssignmentExpression(path2.node.arguments[0]) ? path2.get("arguments.0.right") : path2.get("arguments.0");
           const detectedDependencies = getStylesDependenciesFromFunction(funcPath);
           if (detectedDependencies) {
             const body = t6.isBlockStatement(arg.body) ? arg.body.body.find((statement) => t6.isReturnStatement(statement))?.argument : arg.body;

package/reanimated/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../lib/commonjs/reanimated/index",
+  "module": "../lib/module/reanimated/index",
+  "react-native": "../src/reanimated/index",
+  "types": "../lib/typescript/src/reanimated/index"
+}

package/src/reanimated/index.ts

@@ -0,0 +1 @@
+export { useAnimatedTheme } from './useAnimatedTheme'

package/src/reanimated/useAnimatedTheme.native.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+import { type SharedValue, useSharedValue } from 'react-native-reanimated'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
+import type { UnistylesTheme } from '../types'
+
+export const useAnimatedTheme = () => {
+    const theme = useSharedValue(UnistylesRuntime.getTheme())
+
+    useEffect(() => {
+        // @ts-ignore this is hidden from TS
+        const dispose = StyleSheet.addChangeListener(changedDependencies => {
+            if (changedDependencies.includes(UnistyleDependency.Theme)) {
+                theme.set(UnistylesRuntime.getTheme())
+            }
+        })
+
+        return () => dispose()
+    }, [])
+
+    return theme as SharedValue<UnistylesTheme>
+}

package/src/reanimated/useAnimatedTheme.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+import { type SharedValue, useSharedValue } from 'react-native-reanimated'
+import { UnistyleDependency, UnistylesRuntime } from '../specs'
+import type { UnistylesTheme } from '../types'
+import { services } from '../web/services'
+
+export const useAnimatedTheme = () => {
+    const theme = useSharedValue(UnistylesRuntime.getTheme())
+
+    useEffect(() => {
+        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => theme.set(UnistylesRuntime.getTheme()))
+
+        return () => {
+            dispose()
+        }
+    }, [])
+
+    return theme as SharedValue<UnistylesTheme>
+}

package/src/web/shadowRegistry.ts

@@ -1,8 +1,8 @@
 import { UnistyleDependency } from '../specs/NativePlatform/NativePlatform.nitro'
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import { deepMergeObjects } from '../utils'
-import type { UnistylesServices } from './types'
-import { extractSecrets, extractUnistyleDependencies } from './utils'
+import type { UniGeneratedStyle, UnistylesServices } from './types'
+import { extractSecrets, extractUnistyleDependencies, isGeneratedUnistyle, isServer } from './utils'
 import { getVariants } from './variants'
 
 export class UnistylesShadowRegistry {
@@ -28,6 +28,13 @@ export class UnistylesShadowRegistry {
     }
 
     addStyles = (unistyles: Array<UnistylesValues>, forChild?: boolean) => {
+        const [firstStyle] = unistyles
+
+        // If it is already a generated style, return it
+        if (firstStyle && isGeneratedUnistyle(firstStyle)) {
+            return firstStyle as UniGeneratedStyle
+        }
+
         const getParsedStyles = () => {
             const allStyles = unistyles.map(unistyle => {
                 const secrets = extractSecrets(unistyle)
@@ -97,7 +104,7 @@ export class UnistylesShadowRegistry {
     getScopedTheme = () => this.scopedTheme
 
     remove = (ref: any, hash?: string) => {
-        if (!(ref instanceof HTMLElement) || !hash) {
+        if (isServer() || !(ref instanceof HTMLElement) || !hash) {
             return
         }
 

package/src/web/types.ts

@@ -1,8 +1,8 @@
 import type { UnistylesListener } from './listener'
-import type{ UnistylesRegistry } from './registry'
-import type{ UnistylesRuntime } from './runtime'
-import type{ UnistylesShadowRegistry } from './shadowRegistry'
-import type{ UnistylesState } from './state'
+import type { UnistylesRegistry } from './registry'
+import type { UnistylesRuntime } from './runtime'
+import type { UnistylesShadowRegistry } from './shadowRegistry'
+import type { UnistylesState } from './state'
 
 export type UnistylesServices = {
     runtime: UnistylesRuntime,
@@ -11,3 +11,8 @@ export type UnistylesServices = {
     state: UnistylesState,
     listener: UnistylesListener
 }
+
+export const UNI_GENERATED_KEYS = ['$$css', 'hash', 'injectedClassName'] as const
+export type UniGeneratedKey = typeof UNI_GENERATED_KEYS[number]
+
+export type UniGeneratedStyle = Record<UniGeneratedKey, string>

package/src/web/utils/unistyle.ts

@@ -5,6 +5,7 @@ import { ColorScheme, Orientation } from '../../specs/types'
 import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet'
 import { isUnistylesMq, parseMq } from '../../utils'
 import * as unistyles from '../services'
+import { UNI_GENERATED_KEYS, type UniGeneratedKey, type UniGeneratedStyle } from '../types'
 import { keyInObject, reduceObject } from './common'
 
 export const schemeToTheme = (scheme: ColorScheme) => {
@@ -139,3 +140,7 @@ export const checkForAnimated = (value: any): boolean => {
 
     return false
 }
+
+export const isGeneratedUnistyle = (value: Record<string, any>): value is UniGeneratedStyle => {
+    return Object.keys(value).every(key => UNI_GENERATED_KEYS.includes(key as UniGeneratedKey))
+}

package/src/web-only/getWebProps.ts

@@ -0,0 +1,18 @@
+import type { StyleProp } from 'react-native'
+import { getClassName } from '../core'
+import type { RNStyle, UnistylesValues } from '../types'
+import { createUnistylesRef } from '../web/utils/createUnistylesRef'
+
+export const getWebProps = <T>(style: StyleProp<RNStyle>) => {
+    const styles = getClassName(style as UnistylesValues)
+    const ref = createUnistylesRef<T>(styles)
+    const [generatedStyles] = styles ?? []
+
+    return {
+        className: [
+            generatedStyles?.hash,
+            generatedStyles?.injectedClassName,
+        ].filter(Boolean).join(' '),
+        ref
+    }
+}

package/src/web-only/index.ts

@@ -0,0 +1,2 @@
+
+export { getWebProps } from './getWebProps'

package/web-only/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "../lib/commonjs/web-only/index",
+    "module": "../lib/module/web-only/index",
+    "react-native": "../src/web-only/index",
+    "types": "../lib/typescript/src/web-only/index"
+}