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

package/plugin/index.js

@@ -85,20 +85,19 @@ var NATIVE_COMPONENTS_PATHS = {
 var t = __toESM(require("@babel/types"));
 
 // plugin/src/paths.ts
-var path = __toESM(require("node:path"));
 var isWindows = process.platform === "win32";
 var toWinPath = (pathString) => {
-  return path.normalize(pathString).replace(/\//g, "\\");
+  return pathString;
 };
 var toPlatformPath = (pathString) => {
   return isWindows ? toWinPath(pathString) : pathString;
 };
 
 // plugin/src/exotic.ts
-function handleExoticImport(path2, state, exoticImport) {
-  const specifiers = path2.node.specifiers;
-  const source = path2.node.source;
-  if (path2.node.importKind !== "value") {
+function handleExoticImport(path, state, exoticImport) {
+  const specifiers = path.node.specifiers;
+  const source = path.node.source;
+  if (path.node.importKind !== "value") {
     return;
   }
   specifiers.forEach((specifier) => {
@@ -116,7 +115,7 @@ function handleExoticImport(path2, state, exoticImport) {
             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}`)
           )
         );
-        path2.replaceWith(newImport);
+        path.replaceWith(newImport);
       } else {
         const newImport = t.importDeclaration(
           [t.importSpecifier(t.identifier(rule.mapTo), t.identifier(rule.mapTo))],
@@ -124,11 +123,11 @@ function handleExoticImport(path2, state, exoticImport) {
             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}`)
           )
         );
-        path2.node.specifiers = specifiers.filter((s) => s !== specifier);
-        if (path2.node.specifiers.length === 0) {
-          path2.replaceWith(newImport);
+        path.node.specifiers = specifiers.filter((s) => s !== specifier);
+        if (path.node.specifiers.length === 0) {
+          path.replaceWith(newImport);
         } else {
-          path2.insertBefore(newImport);
+          path.insertBefore(newImport);
         }
       }
       return;
@@ -138,12 +137,12 @@ function handleExoticImport(path2, state, exoticImport) {
 
 // plugin/src/import.ts
 var t2 = __toESM(require("@babel/types"));
-function addUnistylesImport(path2, state) {
+function addUnistylesImport(path, state) {
   const localNames = Object.keys(state.reactNativeImports);
   const names = Object.values(state.reactNativeImports);
   const pairs = Object.entries(state.reactNativeImports);
   const nodesToRemove = [];
-  path2.node.body.forEach((node) => {
+  path.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) {
@@ -152,7 +151,7 @@ function addUnistylesImport(path2, state) {
     }
   });
   names.forEach((name) => {
-    const rnWebImport = path2.node.body.find((node) => t2.isImportDeclaration(node) && node.source.value === toPlatformPath(`react-native-web/dist/exports/${name}`));
+    const rnWebImport = path.node.body.find((node) => t2.isImportDeclaration(node) && node.source.value === toPlatformPath(`react-native-web/dist/exports/${name}`));
     if (rnWebImport) {
       rnWebImport.specifiers = [];
     }
@@ -164,31 +163,31 @@ function addUnistylesImport(path2, state) {
         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}`)
       )
     );
-    path2.node.body.unshift(newImport);
+    path.node.body.unshift(newImport);
   });
-  nodesToRemove.forEach((node) => path2.node.body.splice(path2.node.body.indexOf(node), 1));
+  nodesToRemove.forEach((node) => path.node.body.splice(path.node.body.indexOf(node), 1));
 }
 function isInsideNodeModules(state) {
   return state.file.opts.filename?.includes("node_modules") && !state.file.replaceWithUnistyles;
 }
-function addUnistylesRequire(path2, state) {
+function addUnistylesRequire(path, 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(`react-native-unistyles/src/components/native/${componentName}`)
+          t2.stringLiteral(toPlatformPath(`react-native-unistyles/src/components/native/${componentName}`))
         ])
       )
     ]);
-    path2.node.body.unshift(newRequire);
+    path.node.body.unshift(newRequire);
   });
 }
 
 // plugin/src/ref.ts
 var t3 = __toESM(require("@babel/types"));
-function hasStringRef(path2) {
-  return path2.node.openingElement.attributes.find(
+function hasStringRef(path) {
+  return path.node.openingElement.attributes.find(
     (attr) => t3.isJSXAttribute(attr) && t3.isJSXIdentifier(attr.name, { name: "ref" }) && t3.isStringLiteral(attr.value)
   );
 }
@@ -325,8 +324,8 @@ function stringToUniqueId(str) {
   const absHash = Math.abs(hash);
   return absHash % 1e9;
 }
-function isUnistylesStyleSheet(path2, state) {
-  const { callee } = path2.node;
+function isUnistylesStyleSheet(path, state) {
+  const { callee } = path.node;
   if (!t4.isMemberExpression(callee) || !t4.isIdentifier(callee.property)) {
     return false;
   }
@@ -334,38 +333,38 @@ function isUnistylesStyleSheet(path2, 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(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)) {
+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)) {
     state.file.hasUnistylesImport = true;
-    state.file.styleSheetLocalName = path2.parent.id.name;
+    state.file.styleSheetLocalName = path.parent.id.name;
   }
   return isRequire;
 }
-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));
+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));
   const isReactNativeRequire = isRequire && requireImportName && (requireImportName.value === "react-native" || requireImportName.value === "react-native-web/dist/index");
-  if (isReactNativeRequire && t4.isVariableDeclarator(path2.parent) && t4.isIdentifier(path2.parent.id)) {
-    state.file.reactNativeCommonJSName = path2.parent.id.name;
+  if (isReactNativeRequire && t4.isVariableDeclarator(path.parent) && t4.isIdentifier(path.parent.id)) {
+    state.file.reactNativeCommonJSName = path.parent.id.name;
   }
   return isRequire;
 }
-function isKindOfStyleSheet(path2, state) {
+function isKindOfStyleSheet(path, state) {
   if (!state.file.forceProcessing && !state.file.hasUnistylesImport) {
     return false;
   }
-  const { callee } = path2.node;
+  const { callee } = path.node;
   return t4.isMemberExpression(callee) && t4.isIdentifier(callee.property) && callee.property.name === "create" && t4.isIdentifier(callee.object);
 }
-function addStyleSheetTag(path2, state) {
+function addStyleSheetTag(path, state) {
   const str = state.filename?.replace(state.cwd, "") ?? "";
   const uniqueId = stringToUniqueId(str) + ++state.file.tagNumber;
-  path2.node.arguments.push(t4.numericLiteral(uniqueId));
+  path.node.arguments.push(t4.numericLiteral(uniqueId));
 }
-function getStylesDependenciesFromObject(path2) {
+function getStylesDependenciesFromObject(path) {
   const detectedStylesWithVariants = /* @__PURE__ */ new Set();
-  const stylesheet = path2.node.arguments[0];
+  const stylesheet = path.node.arguments[0];
   if (t4.isObjectExpression(stylesheet)) {
     stylesheet?.properties.forEach((property) => {
       if (!t4.isObjectProperty(property) || !t4.isIdentifier(property.key)) {
@@ -664,8 +663,8 @@ function addDependencies(state, styleName, unistyle, detectedDependencies) {
 
 // plugin/src/variants.ts
 var t5 = __toESM(require("@babel/types"));
-function extractVariants(path2, state) {
-  const maybeVariants = path2.node.body.filter((node2) => t5.isExpressionStatement(node2) && t5.isCallExpression(node2.expression) && t5.isMemberExpression(node2.expression.callee));
+function extractVariants(path, state) {
+  const maybeVariants = path.node.body.filter((node2) => t5.isExpressionStatement(node2) && t5.isCallExpression(node2.expression) && t5.isMemberExpression(node2.expression.callee));
   if (maybeVariants.length === 0) {
     return;
   }
@@ -688,7 +687,7 @@ function extractVariants(path2, state) {
     return;
   }
   const calleeName = callee.object.name;
-  const newUniqueName = path2.scope.generateUidIdentifier(calleeName);
+  const newUniqueName = path.scope.generateUidIdentifier(calleeName);
   const shadowDeclaration = t5.variableDeclaration("const", [
     t5.variableDeclarator(newUniqueName, t5.identifier(calleeName))
   ]);
@@ -699,14 +698,14 @@ function extractVariants(path2, state) {
   const finalDeclaration = t5.variableDeclaration("const", [
     t5.variableDeclarator(t5.identifier(calleeName), newCallExpression)
   ]);
-  const pathIndex = path2.node.body.findIndex((bodyPath) => bodyPath === targetVariant);
-  const rest = path2.node.body.slice(pathIndex + 1);
+  const pathIndex = path.node.body.findIndex((bodyPath) => bodyPath === targetVariant);
+  const rest = path.node.body.slice(pathIndex + 1);
   const statement = t5.blockStatement([
     finalDeclaration,
     ...rest
   ]);
-  path2.node.body = [
-    ...path2.node.body.slice(0, pathIndex),
+  path.node.body = [
+    ...path.node.body.slice(0, pathIndex),
     shadowDeclaration,
     statement
   ];
@@ -715,12 +714,18 @@ function extractVariants(path2, state) {
 
 // plugin/src/index.ts
 function index_default() {
+  if (process.env.NODE_ENV === "test") {
+    return {
+      name: "babel-react-native-unistyles",
+      visitor: {}
+    };
+  }
   return {
     name: "babel-react-native-unistyles",
     visitor: {
       Program: {
-        enter(path2, state) {
-          state.file.replaceWithUnistyles = REPLACE_WITH_UNISTYLES_PATHS.map(toPlatformPath).concat(state.opts.autoProcessPaths ?? []).some((path3) => state.filename?.includes(path3));
+        enter(path, state) {
+          state.file.replaceWithUnistyles = REPLACE_WITH_UNISTYLES_PATHS.map(toPlatformPath).concat(state.opts.autoProcessPaths ?? []).some((path2) => state.filename?.includes(path2));
           state.file.hasAnyUnistyle = false;
           state.file.hasUnistylesImport = false;
           state.file.addUnistylesRequire = false;
@@ -730,7 +735,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;
-          path2.traverse({
+          path.traverse({
             BlockStatement(blockPath) {
               if (isInsideNodeModules(state)) {
                 return;
@@ -739,41 +744,41 @@ function index_default() {
             }
           });
         },
-        exit(path2, state) {
+        exit(path, state) {
           if (isInsideNodeModules(state)) {
             return;
           }
           if (state.file.addUnistylesRequire) {
-            return addUnistylesRequire(path2, state);
+            return addUnistylesRequire(path, state);
           }
           if (state.file.hasAnyUnistyle || state.file.hasVariants || state.file.replaceWithUnistyles || state.file.forceProcessing) {
-            addUnistylesImport(path2, state);
+            addUnistylesImport(path, state);
           }
         }
       },
-      FunctionDeclaration(path2, state) {
+      FunctionDeclaration(path, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        const componentName = path2.node.id ? path2.node.id.name : null;
+        const componentName = path.node.id ? path.node.id.name : null;
         if (componentName) {
           state.file.hasVariants = false;
         }
       },
-      ClassDeclaration(path2, state) {
+      ClassDeclaration(path, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        const componentName = path2.node.id ? path2.node.id.name : null;
+        const componentName = path.node.id ? path.node.id.name : null;
         if (componentName) {
           state.file.hasVariants = false;
         }
       },
-      VariableDeclaration(path2, state) {
+      VariableDeclaration(path, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        path2.node.declarations.forEach((declaration) => {
+        path.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) {
@@ -782,80 +787,83 @@ function index_default() {
           }
         });
       },
-      ImportDeclaration(path2, state) {
+      ImportDeclaration(path, state) {
         const exoticImport = REPLACE_WITH_UNISTYLES_EXOTIC_PATHS.concat(state.opts.autoRemapImports ?? []).find((exotic) => state.filename?.includes(exotic.path));
         if (exoticImport) {
-          return handleExoticImport(path2, state, exoticImport);
+          return handleExoticImport(path, state, exoticImport);
         }
         if (isInsideNodeModules(state)) {
           return;
         }
-        const importSource = path2.node.source.value;
+        const importSource = path.node.source.value;
         if (importSource.includes("react-native-unistyles")) {
           state.file.hasUnistylesImport = true;
-          path2.node.specifiers.forEach((specifier) => {
+          path.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") {
-          path2.node.specifiers.forEach((specifier) => {
+          path.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(path2, state, NATIVE_COMPONENTS_PATHS);
+          handleExoticImport(path, state, NATIVE_COMPONENTS_PATHS);
         }
         if (!state.file.forceProcessing && Array.isArray(state.opts.autoProcessImports)) {
           state.file.forceProcessing = state.opts.autoProcessImports.includes(importSource);
         }
       },
-      JSXElement(path2, state) {
+      JSXElement(path, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        if (hasStringRef(path2)) {
+        if (hasStringRef(path)) {
           throw new Error("Detected string based ref which is not supported by Unistyles.");
         }
       },
-      MemberExpression(path2, state) {
+      MemberExpression(path, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        if (!state.file.reactNativeCommonJSName || !t6.isIdentifier(path2.node.object)) {
+        if (!state.file.reactNativeCommonJSName || !t6.isIdentifier(path.node.object)) {
+          return;
+        }
+        if (path.node.object.name !== state.file.reactNativeCommonJSName || !t6.isIdentifier(path.node.property)) {
           return;
         }
-        if (path2.node.object.name !== state.file.reactNativeCommonJSName || !t6.isIdentifier(path2.node.property)) {
+        if (!REACT_NATIVE_COMPONENT_NAMES.includes(path.node.property.name)) {
           return;
         }
-        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;
+        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;
           state.file.addUnistylesRequire = true;
         }
-        path2.node.object.name = state.reactNativeImports[path2.node.property.name];
+        path.node.object.name = state.reactNativeImports[path.node.property.name];
       },
-      CallExpression(path2, state) {
+      CallExpression(path, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        if (isUnistylesCommonJSRequire(path2, state)) {
+        if (isUnistylesCommonJSRequire(path, state)) {
           return;
         }
-        if (isReactNativeCommonJSRequire(path2, state)) {
+        if (isReactNativeCommonJSRequire(path, state)) {
           return;
         }
-        if (!isUnistylesStyleSheet(path2, state) && !isKindOfStyleSheet(path2, state)) {
+        if (!isUnistylesStyleSheet(path, state) && !isKindOfStyleSheet(path, state)) {
           return;
         }
         state.file.hasAnyUnistyle = true;
-        addStyleSheetTag(path2, state);
-        const arg = t6.isAssignmentExpression(path2.node.arguments[0]) ? path2.node.arguments[0].right : path2.node.arguments[0];
+        addStyleSheetTag(path, state);
+        const arg = t6.isAssignmentExpression(path.node.arguments[0]) ? path.node.arguments[0].right : path.node.arguments[0];
         if (t6.isObjectExpression(arg)) {
-          const detectedDependencies = getStylesDependenciesFromObject(path2);
+          const detectedDependencies = getStylesDependenciesFromObject(path);
           if (detectedDependencies) {
             if (t6.isObjectExpression(arg)) {
               arg.properties.forEach((property) => {
@@ -867,7 +875,7 @@ function index_default() {
           }
         }
         if (t6.isArrowFunctionExpression(arg) || t6.isFunctionExpression(arg)) {
-          const funcPath = t6.isAssignmentExpression(path2.node.arguments[0]) ? path2.get("arguments.0.right") : path2.get("arguments.0");
+          const funcPath = t6.isAssignmentExpression(path.node.arguments[0]) ? path.get("arguments.0.right") : path.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/src/components/native/Image.tsx

@@ -4,7 +4,8 @@ import { getClassName } from '../../core'
 import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
 import type { UnistylesValues } from '../../types'
 import { copyComponentProperties } from '../../utils'
-import { createUnistylesRef, keyInObject } from '../../web/utils'
+import { checkForProp } from '../../web/utils'
+import { createUnistylesRef } from '../../web/utils/createUnistylesRef'
 
 type Props = ComponentProps<typeof NativeImage> & {
     style?: UnistylesValues
@@ -14,8 +15,8 @@ type Props = ComponentProps<typeof NativeImage> & {
 const UnistylesImage = forwardRef<unknown, Props>((props, forwardedRef) => {
     const classNames = getClassName(props.style)
     const ref = createUnistylesRef(classNames, forwardedRef)
-    const hasWidthStyle = typeof props.style === 'object' && keyInObject(props.style, 'width')
-    const hasHeightStyle = typeof props.style === 'object' && keyInObject(props.style, 'height')
+    const hasWidthStyle = checkForProp(props.style, 'width')
+    const hasHeightStyle = checkForProp(props.style, 'height')
 
     maybeWarnAboutMultipleUnistyles(props.style as ViewStyle, 'Image')
 

package/src/components/native/ImageBackground.tsx

@@ -5,7 +5,8 @@ import { getClassName } from '../../core'
 import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
 import type { UnistylesValues } from '../../types'
 import { copyComponentProperties } from '../../utils'
-import { createUnistylesRef, keyInObject } from '../../web/utils'
+import { keyInObject } from '../../web/utils'
+import { createUnistylesRef } from '../../web/utils/createUnistylesRef'
 
 type Props = {
     style?: UnistylesValues

package/src/core/createUnistylesElement.tsx

@@ -2,26 +2,43 @@ import React from 'react'
 import type { ViewStyle } from 'react-native'
 import type { UnistylesValues } from '../types'
 import { copyComponentProperties } from '../utils'
-import { createUnistylesRef } from '../web/utils'
+import { isServer } from '../web/utils'
+import { createUnistylesRef } from '../web/utils/createUnistylesRef'
 import { getClassName } from './getClassname'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
+const STYLE_PROPS = ['style', 'contentContainerStyle', 'columnWrapperStyle'] as const
+
 type ComponentProps = {
-    style?: UnistylesValues | Array<UnistylesValues>
+    [K in typeof STYLE_PROPS[number]]?: UnistylesValues
 }
 
-export const createUnistylesElement = (Component: any) => {
-    const UnistylesComponent = React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
-        const classNames = getClassName(props.style)
-        const ref = createUnistylesRef(classNames, forwardedRef)
+const buildUnistylesProps = (Component: any, props: ComponentProps, forwardedRef: React.ForwardedRef<unknown>) => {
+    const componentStyleProps = STYLE_PROPS.filter(styleProp => styleProp in props)
+    const classNames = Object.fromEntries(componentStyleProps.map(styleProp => [styleProp, getClassName(props[styleProp])]))
+    const refs = componentStyleProps.map(styleProp => {
+        return createUnistylesRef(
+            classNames[styleProp],
+            styleProp === 'style' ? forwardedRef : undefined
+        )
+    })
 
-        maybeWarnAboutMultipleUnistyles(props.style as ViewStyle, Component.displayName)
+    componentStyleProps.forEach(styleProp => {
+        maybeWarnAboutMultipleUnistyles(props[styleProp] as ViewStyle, Component.displayName)
+    })
+
+    return {
+        ...classNames,
+        ref: isServer() ? undefined : (componentRef: any) => refs.forEach(ref => ref?.(componentRef))
+    }
+}
 
+export const createUnistylesElement = (Component: any) => {
+    const UnistylesComponent = React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
         return (
             <Component
                 {...props}
-                style={classNames}
-                ref={ref}
+                {...buildUnistylesProps(Component, props, forwardedRef)}
             />
         )
     })

package/src/core/getClassname.ts

@@ -1,15 +1,25 @@
 import type { UnistylesValues } from '../types'
-import { UnistylesWeb } from '../web'
+import * as unistyles from '../web/services'
+import { checkForAnimated } from '../web/utils'
 
 export const getClassName = (unistyle: UnistylesValues | undefined | Array<UnistylesValues>, forChild?: boolean) => {
     if (!unistyle) {
         return undefined
     }
 
-    const { hash, injectedClassName } = UnistylesWeb.shadowRegistry.addStyles(
-        Array.isArray(unistyle) ? unistyle.flat(Number.POSITIVE_INFINITY) : [unistyle],
+    const flattenedStyles = Array.isArray(unistyle) ? unistyle.flat(Number.POSITIVE_INFINITY) : [unistyle]
+    const animatedStyles = flattenedStyles.filter(checkForAnimated)
+    const regularStyles = flattenedStyles.filter(style => !checkForAnimated(style))
+
+    const { hash, injectedClassName } = unistyles.services.shadowRegistry.addStyles(
+        regularStyles,
         forChild
     )
 
-    return hash ? { $$css: true, hash, injectedClassName } : undefined
+    return hash
+        ? [
+            { $$css: true, hash, injectedClassName },
+            animatedStyles,
+        ] as const
+        : undefined
 }

package/src/core/useProxifiedUnistyles/listener.ts

@@ -1,10 +1,10 @@
 import { UnistyleDependency } from '../../specs'
-import { UnistylesWeb } from '../../web'
+import * as unistyles from '../../web/services'
 import type { ListenerProps } from './types'
 
 export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerProps) => {
-    const disposeTheme = UnistylesWeb.listener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme)
-    const disposeRuntime = UnistylesWeb.listener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), updateRuntime)
+    const disposeTheme = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme)
+    const disposeRuntime = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), updateRuntime)
 
     return () => {
         disposeTheme()

package/src/core/withUnistyles/withUnistyles.tsx

@@ -56,10 +56,11 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
 
         const NativeComponent = Component as ComponentType
+        const [classNames] = styleClassNames ?? []
 
         return (
             <div
-                className={styleClassNames?.hash}
+                className={classNames?.hash}
                 style={{ display: 'contents' }}
             >
                 <NativeComponent {...combinedProps} ref={ref} />

package/src/hooks/useMedia.native.ts

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useState } from 'react'
-import { isUnistylesMq, isValidMq, parseMq } from '../mq'
 import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
+import { isUnistylesMq, isValidMq, parseMq } from '../utils'
 
 export const useMedia = (config: { mq: symbol }) => {
     const computeIsVisible = (): boolean => {

package/src/hooks/useMedia.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { isUnistylesMq, isValidMq, parseMq } from '../mq'
+import { isUnistylesMq, isValidMq, parseMq } from '../utils'
 
 export const useMedia = (config: { mq: symbol }) => {
     const disposeRef = useRef(() => {})