@niibase/uniwind 1.5.1 → 1.6.1

package/CHANGELOG.md

@@ -1,3 +1,48 @@
+## What's Changed in 1.6.1
+
+
+
+### 🐛 Bug Fixes
+
+* pass data attributes to withUniwind (#477) by @Brentlok
+* p3 color parsing (#476) by @Brentlok
+
+### 🧪 Testing
+
+* advanced type check for ThemeName (#465) by @Brentlok
+
+### 📦 Other
+
+* Merge branch 'prepare-release' by @divineniiquaye
+
+
+**Full Changelog**: https://github.com/divineniiquaye/uniwind/compare/v1.6.0...v1.6.1
+
+
+## What's Changed in 1.6.0
+
+
+
+### 🚀 Features
+
+* export ThemeName and make themes public in Uniwind class (#460) by @Brentlok
+
+### 🐛 Bug Fixes
+
+* parsing multiple transforms tokens in single class (#451) by @Brentlok
+
+### 🏠 Chores
+
+* validate each entry in serialization instead of whole object (#456) by @Brentlok
+
+### 📦 Other
+
+* Merge branch 'orig' by @divineniiquaye
+
+
+**Full Changelog**: https://github.com/divineniiquaye/uniwind/compare/v1.5.1...v1.6.0
+
+
 ## What's Changed in 1.5.1
 
 

package/dist/common/components/web/generateDataSet.js

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateDataSet = void 0;
+const toCamelCase = str => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 const generateDataSet = props => {
   const dataSet = props.dataSet !== void 0 ? {
     ...props.dataSet
   } : {};
   Object.entries(props).forEach(([key, value]) => {
     if (key.startsWith("data-")) {
-      dataSet[key.slice(5)] = value;
+      dataSet[toCamelCase(key.slice(5))] = value;
     }
   });
   return dataSet;

package/dist/common/core/config/config.common.js

@@ -13,7 +13,7 @@ const SYSTEM_THEME = "system";
 const RN_VERSION = _reactNative.Platform.constants?.reactNativeVersion?.minor ?? 0;
 const UNSPECIFIED_THEME = RN_VERSION >= 82 ? "unspecified" : void 0;
 class UniwindConfigBuilder {
-  themes = ["light", "dark"];
+  _themes = ["light", "dark"];
   #hasAdaptiveThemes = true;
   #currentTheme = this.colorScheme;
   constructor() {
@@ -27,6 +27,9 @@ class UniwindConfigBuilder {
       }
     });
   }
+  get themes() {
+    return this._themes;
+  }
   get hasAdaptiveThemes() {
     return this.#hasAdaptiveThemes;
   }
@@ -61,7 +64,7 @@ class UniwindConfigBuilder {
         }
         return;
       }
-      if (!this.themes.includes(theme)) {
+      if (!this._themes.includes(theme)) {
         throw new Error(`Uniwind: You're trying to setTheme to '${theme}', but it was not registered.`);
       }
       this.#hasAdaptiveThemes = false;
@@ -89,7 +92,7 @@ class UniwindConfigBuilder {
     insets;
   }
   __reinit(_, themes) {
-    this.themes = themes;
+    this._themes = themes;
   }
   onThemeChange() {}
 }

package/dist/common/core/web/getWebStyles.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getWebVariable = exports.getWebStyles = void 0;
+var _generateDataSet = require("../../components/web/generateDataSet");
 var _cssListener = require("./cssListener");
 var _parseCSSValue = require("./parseCSSValue");
 const dummyParent = typeof document !== "undefined" ? Object.assign(document.createElement("div"), {
@@ -38,7 +39,7 @@ const getActiveStylesForClass = className => {
   });
   return extractedStyles;
 };
-const getWebStyles = (className, uniwindContext) => {
+const getWebStyles = (className, componentProps, uniwindContext) => {
   if (className === void 0) {
     return {};
   }
@@ -51,7 +52,17 @@ const getWebStyles = (className, uniwindContext) => {
     dummyParent?.removeAttribute("class");
   }
   dummy.className = className;
+  const dataSet = (0, _generateDataSet.generateDataSet)(componentProps ?? {});
+  Object.entries(dataSet).forEach(([key, value]) => {
+    if (value === false || value === void 0) {
+      return;
+    }
+    dummy.dataset[key] = String(value);
+  });
   const computedStyles = getActiveStylesForClass(className);
+  Object.keys(dataSet).forEach(key => {
+    delete dummy.dataset[key];
+  });
   return Object.fromEntries(Object.entries(computedStyles).map(([key, value]) => {
     const parsedKey = key[0] === "-" ? key : key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
     return [parsedKey, (0, _parseCSSValue.parseCSSValue)(value)];

package/dist/common/hoc/withUniwind.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.withUniwind = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
+var _generateDataSet = require("../components/web/generateDataSet");
 var _context = require("../core/context");
 var _web = require("../core/web");
 var _withUniwindUtils = require("./withUniwindUtils");
@@ -23,7 +24,7 @@ const withAutoUniwind = Component2 => props => {
         return acc;
       }
       const className = propValue;
-      const color = (0, _web.getWebStyles)(className, uniwindContext).accentColor;
+      const color = (0, _web.getWebStyles)(className, props, uniwindContext).accentColor;
       acc.generatedProps[colorProp] = color !== void 0 ? (0, _web.formatColor)(color) : void 0;
       acc.classNames += `${className} `;
       return acc;
@@ -54,7 +55,8 @@ const withAutoUniwind = Component2 => props => {
   }, [classNames]);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component2, {
     ...props,
-    ...generatedProps
+    ...generatedProps,
+    dataSet: (0, _generateDataSet.generateDataSet)(props)
   });
 };
 const withManualUniwind = (Component2, options) => props => {
@@ -71,7 +73,7 @@ const withManualUniwind = (Component2, options) => props => {
       if (props[propName] !== void 0) {
         return acc;
       }
-      const value = (0, _web.getWebStyles)(className, uniwindContext)[option.styleProperty];
+      const value = (0, _web.getWebStyles)(className, props, uniwindContext)[option.styleProperty];
       const transformedValue = value !== void 0 && option.styleProperty.toLowerCase().includes("color") ? (0, _web.formatColor)(value) : value;
       acc.classNames += `${className} `;
       acc.generatedProps[propName] = transformedValue;
@@ -93,6 +95,7 @@ const withManualUniwind = (Component2, options) => props => {
   }, [classNames]);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component2, {
     ...props,
-    ...generatedProps
+    ...generatedProps,
+    dataSet: (0, _generateDataSet.generateDataSet)(props)
   });
 };

package/dist/common/hoc/withUniwind.native.js

@@ -26,7 +26,7 @@ const withAutoUniwind = Component2 => props => {
       const {
         styles,
         dependencies: dependencies2
-      } = _native.UniwindStore.getStyles(propValue, void 0, void 0, uniwindContext);
+      } = _native.UniwindStore.getStyles(propValue, props, void 0, uniwindContext);
       acc.dependencies.push(...dependencies2);
       acc.generatedProps[colorProp] = styles.accentColor;
       return acc;
@@ -36,7 +36,7 @@ const withAutoUniwind = Component2 => props => {
       const {
         styles,
         dependencies: dependencies2
-      } = _native.UniwindStore.getStyles(propValue, void 0, void 0, uniwindContext);
+      } = _native.UniwindStore.getStyles(propValue, props, void 0, uniwindContext);
       acc.dependencies.push(...dependencies2);
       acc.generatedProps[styleProp] ??= [];
       acc.generatedProps[styleProp][0] = styles;
@@ -83,7 +83,7 @@ const withManualUniwind = (Component2, options) => props => {
       const {
         styles: styles2,
         dependencies: dependencies3
-      } = _native.UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
+      } = _native.UniwindStore.getStyles(className, props, void 0, uniwindContext);
       acc.generatedProps[propName] = styles2[option.styleProperty];
       acc.dependencies.push(...dependencies3);
       return acc;
@@ -91,7 +91,7 @@ const withManualUniwind = (Component2, options) => props => {
     const {
       styles,
       dependencies: dependencies2
-    } = _native.UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
+    } = _native.UniwindStore.getStyles(className, props, void 0, uniwindContext);
     acc.dependencies.push(...dependencies2);
     if (!(0, _withUniwindUtils.isStyleProperty)(propName)) {
       acc.generatedProps[propName] = styles;

package/dist/common/hooks/useResolveClassNames.js

@@ -10,7 +10,7 @@ var _web = require("../core/web");
 const emptyState = {};
 const useResolveClassNames = className => {
   const uniwindContext = (0, _context.useUniwindContext)();
-  const [styles, recreate] = (0, _react.useReducer)(() => className !== "" ? (0, _web.getWebStyles)(className, uniwindContext) : emptyState, void 0, () => className !== "" ? (0, _web.getWebStyles)(className, uniwindContext) : emptyState);
+  const [styles, recreate] = (0, _react.useReducer)(() => className !== "" ? (0, _web.getWebStyles)(className, void 0, uniwindContext) : emptyState, void 0, () => className !== "" ? (0, _web.getWebStyles)(className, void 0, uniwindContext) : emptyState);
   (0, _react.useLayoutEffect)(() => {
     if (className === "") {
       return;

package/dist/metro/metro-transformer.cjs

@@ -94,6 +94,15 @@ const serializeJSObject = (obj, serializer) => {
   const serializedObject = common.pipe(obj)(
     Object.entries,
     (entries) => entries.map(([key, value]) => serializer(key, serialize(value))),
+    (serializedValues) => serializedValues.filter((serializedValue) => {
+      try {
+        new Function(`function validateJS() { const obj = ({ ${serializedValue} }) }`);
+        return true;
+      } catch {
+        stringifyThemes.Logger.error(`Failed to serialize ${serializedValue} as a valid JS object entry. Skipping.`);
+        return false;
+      }
+    }),
     (entries) => entries.join(","),
     (result) => {
       if (result === "") {
@@ -102,12 +111,6 @@ const serializeJSObject = (obj, serializer) => {
       return `${result},`;
     }
   );
-  try {
-    new Function(`function validateJS() { const obj = ({ ${serializedObject} }) }`);
-  } catch {
-    stringifyThemes.Logger.error("Failed to serialize javascript object");
-    return "";
-  }
   return serializedObject;
 };
 
@@ -337,8 +340,9 @@ class Color {
           mode: "rgb"
         });
       }
+      const colorType = color.type === "display-p3" ? "p3" : color.type;
       const result = this.toRgb({
-        mode: color.type,
+        mode: colorType,
         ...color
       });
       return this.format(result);
@@ -842,6 +846,12 @@ class CSS {
       if (declarationValue.length === 1) {
         return this.processValue(declarationValue[0]);
       }
+      if (this.isTransformArray(declarationValue)) {
+        return declarationValue.flatMap((value) => {
+          const result = this.processValue(value);
+          return Array.isArray(result) ? result : [result];
+        });
+      }
       return this.addComaBetweenTokens(declarationValue).reduce((acc, value, index, array) => {
         if (typeof value === "object") {
           const nextValue = array.at(index + 1);
@@ -949,6 +959,31 @@ class CSS {
     this.logUnsupported(`Unsupported value - ${JSON.stringify(declarationValue)}`);
     return void 0;
   }
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  static TRANSFORM_TYPES = /* @__PURE__ */ new Set([
+    "translate",
+    "translateX",
+    "translateY",
+    "translateZ",
+    "rotate",
+    "rotateX",
+    "rotateY",
+    "rotateZ",
+    "scale",
+    "scaleX",
+    "scaleY",
+    "scaleZ",
+    "skew",
+    "skewX",
+    "skewY",
+    "matrix",
+    "perspective"
+  ]);
+  isTransformArray(values) {
+    return values.every(
+      (value) => typeof value === "object" && value !== null && "type" in value && CSS.TRANSFORM_TYPES.has(value.type)
+    );
+  }
   isOverflow(value) {
     return typeof value === "object" && "x" in value && ["hidden", "visible"].includes(value.x);
   }

package/dist/metro/metro-transformer.mjs

@@ -87,6 +87,15 @@ const serializeJSObject = (obj, serializer) => {
   const serializedObject = pipe(obj)(
     Object.entries,
     (entries) => entries.map(([key, value]) => serializer(key, serialize(value))),
+    (serializedValues) => serializedValues.filter((serializedValue) => {
+      try {
+        new Function(`function validateJS() { const obj = ({ ${serializedValue} }) }`);
+        return true;
+      } catch {
+        Logger.error(`Failed to serialize ${serializedValue} as a valid JS object entry. Skipping.`);
+        return false;
+      }
+    }),
     (entries) => entries.join(","),
     (result) => {
       if (result === "") {
@@ -95,12 +104,6 @@ const serializeJSObject = (obj, serializer) => {
       return `${result},`;
     }
   );
-  try {
-    new Function(`function validateJS() { const obj = ({ ${serializedObject} }) }`);
-  } catch {
-    Logger.error("Failed to serialize javascript object");
-    return "";
-  }
   return serializedObject;
 };
 
@@ -330,8 +333,9 @@ class Color {
           mode: "rgb"
         });
       }
+      const colorType = color.type === "display-p3" ? "p3" : color.type;
       const result = this.toRgb({
-        mode: color.type,
+        mode: colorType,
         ...color
       });
       return this.format(result);
@@ -835,6 +839,12 @@ class CSS {
       if (declarationValue.length === 1) {
         return this.processValue(declarationValue[0]);
       }
+      if (this.isTransformArray(declarationValue)) {
+        return declarationValue.flatMap((value) => {
+          const result = this.processValue(value);
+          return Array.isArray(result) ? result : [result];
+        });
+      }
       return this.addComaBetweenTokens(declarationValue).reduce((acc, value, index, array) => {
         if (typeof value === "object") {
           const nextValue = array.at(index + 1);
@@ -942,6 +952,31 @@ class CSS {
     this.logUnsupported(`Unsupported value - ${JSON.stringify(declarationValue)}`);
     return void 0;
   }
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  static TRANSFORM_TYPES = /* @__PURE__ */ new Set([
+    "translate",
+    "translateX",
+    "translateY",
+    "translateZ",
+    "rotate",
+    "rotateX",
+    "rotateY",
+    "rotateZ",
+    "scale",
+    "scaleX",
+    "scaleY",
+    "scaleZ",
+    "skew",
+    "skewX",
+    "skewY",
+    "matrix",
+    "perspective"
+  ]);
+  isTransformArray(values) {
+    return values.every(
+      (value) => typeof value === "object" && value !== null && "type" in value && CSS.TRANSFORM_TYPES.has(value.type)
+    );
+  }
   isOverflow(value) {
     return typeof value === "object" && "x" in value && ["hidden", "visible"].includes(value.x);
   }

package/dist/module/components/web/generateDataSet.d.ts

@@ -1,5 +1,5 @@
 export declare const generateDataSet: (props: Record<PropertyKey, any>) => DataSet;
-type DataSet = Record<string, string | boolean>;
+type DataSet = Record<string, string | boolean | undefined>;
 declare module 'react-native' {
     interface SwitchProps {
         dataSet?: DataSet;

package/dist/module/components/web/generateDataSet.js

@@ -1,8 +1,9 @@
+const toCamelCase = (str) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 export const generateDataSet = (props) => {
   const dataSet = props.dataSet !== void 0 ? { ...props.dataSet } : {};
   Object.entries(props).forEach(([key, value]) => {
     if (key.startsWith("data-")) {
-      dataSet[key.slice(5)] = value;
+      dataSet[toCamelCase(key.slice(5))] = value;
     }
   });
   return dataSet;

package/dist/module/core/config/config.common.d.ts

@@ -5,8 +5,9 @@ import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types';
 declare const SYSTEM_THEME: "system";
 export declare class UniwindConfigBuilder {
     #private;
-    protected themes: string[];
+    protected _themes: string[];
     constructor();
+    get themes(): Array<ThemeName>;
     get hasAdaptiveThemes(): boolean;
     get currentTheme(): ThemeName;
     private get colorScheme();

package/dist/module/core/config/config.common.js

@@ -7,7 +7,7 @@ const SYSTEM_THEME = "system";
 const RN_VERSION = Platform.constants?.reactNativeVersion?.minor ?? 0;
 const UNSPECIFIED_THEME = RN_VERSION >= 82 ? "unspecified" : void 0;
 export class UniwindConfigBuilder {
-  themes = ["light", "dark"];
+  _themes = ["light", "dark"];
   #hasAdaptiveThemes = true;
   #currentTheme = this.colorScheme;
   constructor() {
@@ -21,6 +21,9 @@ export class UniwindConfigBuilder {
       }
     });
   }
+  get themes() {
+    return this._themes;
+  }
   get hasAdaptiveThemes() {
     return this.#hasAdaptiveThemes;
   }
@@ -52,7 +55,7 @@ export class UniwindConfigBuilder {
         }
         return;
       }
-      if (!this.themes.includes(theme)) {
+      if (!this._themes.includes(theme)) {
         throw new Error(`Uniwind: You're trying to setTheme to '${theme}', but it was not registered.`);
       }
       this.#hasAdaptiveThemes = false;
@@ -81,7 +84,7 @@ export class UniwindConfigBuilder {
     insets;
   }
   __reinit(_, themes) {
-    this.themes = themes;
+    this._themes = themes;
   }
   onThemeChange() {
   }

package/dist/module/core/web/getWebStyles.d.ts

@@ -1,3 +1,3 @@
 import { RNStyle, UniwindContextType } from '../types';
-export declare const getWebStyles: (className: string | undefined, uniwindContext: UniwindContextType) => RNStyle;
+export declare const getWebStyles: (className: string | undefined, componentProps: Record<string, unknown> | undefined, uniwindContext: UniwindContextType) => RNStyle;
 export declare const getWebVariable: (name: string, uniwindContext: UniwindContextType) => string | undefined;

package/dist/module/core/web/getWebStyles.js

@@ -1,3 +1,4 @@
+import { generateDataSet } from "../../components/web/generateDataSet.js";
 import { CSSListener } from "./cssListener.js";
 import { parseCSSValue } from "./parseCSSValue.js";
 const dummyParent = typeof document !== "undefined" ? Object.assign(document.createElement("div"), {
@@ -33,7 +34,7 @@ const getActiveStylesForClass = (className) => {
   });
   return extractedStyles;
 };
-export const getWebStyles = (className, uniwindContext) => {
+export const getWebStyles = (className, componentProps, uniwindContext) => {
   if (className === void 0) {
     return {};
   }
@@ -46,7 +47,17 @@ export const getWebStyles = (className, uniwindContext) => {
     dummyParent?.removeAttribute("class");
   }
   dummy.className = className;
+  const dataSet = generateDataSet(componentProps ?? {});
+  Object.entries(dataSet).forEach(([key, value]) => {
+    if (value === false || value === void 0) {
+      return;
+    }
+    dummy.dataset[key] = String(value);
+  });
   const computedStyles = getActiveStylesForClass(className);
+  Object.keys(dataSet).forEach((key) => {
+    delete dummy.dataset[key];
+  });
   return Object.fromEntries(
     Object.entries(computedStyles).map(([key, value]) => {
       const parsedKey = key[0] === "-" ? key : key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());

package/dist/module/hoc/withUniwind.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useReducer } from "react";
+import { generateDataSet } from "../components/web/generateDataSet.js";
 import { useUniwindContext } from "../core/context.js";
 import { CSSListener, formatColor, getWebStyles } from "../core/web/index.js";
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from "./withUniwindUtils.js";
@@ -13,7 +14,7 @@ const withAutoUniwind = (Component2) => (props) => {
         return acc;
       }
       const className = propValue;
-      const color = getWebStyles(className, uniwindContext).accentColor;
+      const color = getWebStyles(className, props, uniwindContext).accentColor;
       acc.generatedProps[colorProp] = color !== void 0 ? formatColor(color) : void 0;
       acc.classNames += `${className} `;
       return acc;
@@ -40,7 +41,8 @@ const withAutoUniwind = (Component2) => (props) => {
     Component2,
     {
       ...props,
-      ...generatedProps
+      ...generatedProps,
+      dataSet: generateDataSet(props)
     }
   );
 };
@@ -55,7 +57,7 @@ const withManualUniwind = (Component2, options) => (props) => {
       if (props[propName] !== void 0) {
         return acc;
       }
-      const value = getWebStyles(className, uniwindContext)[option.styleProperty];
+      const value = getWebStyles(className, props, uniwindContext)[option.styleProperty];
       const transformedValue = value !== void 0 && option.styleProperty.toLowerCase().includes("color") ? formatColor(value) : value;
       acc.classNames += `${className} `;
       acc.generatedProps[propName] = transformedValue;
@@ -73,7 +75,8 @@ const withManualUniwind = (Component2, options) => (props) => {
     Component2,
     {
       ...props,
-      ...generatedProps
+      ...generatedProps,
+      dataSet: generateDataSet(props)
     }
   );
 };

package/dist/module/hoc/withUniwind.native.js

@@ -13,14 +13,14 @@ const withAutoUniwind = (Component2) => (props) => {
       if (props[colorProp] !== void 0) {
         return acc;
       }
-      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, void 0, void 0, uniwindContext);
+      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, props, void 0, uniwindContext);
       acc.dependencies.push(...dependencies2);
       acc.generatedProps[colorProp] = styles.accentColor;
       return acc;
     }
     if (isClassProperty(propName)) {
       const styleProp = classToStyle(propName);
-      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, void 0, void 0, uniwindContext);
+      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, props, void 0, uniwindContext);
       acc.dependencies.push(...dependencies2);
       acc.generatedProps[styleProp] ??= [];
       acc.generatedProps[styleProp][0] = styles;
@@ -61,12 +61,12 @@ const withManualUniwind = (Component2, options) => (props) => {
       if (props[propName] !== void 0) {
         return acc;
       }
-      const { styles: styles2, dependencies: dependencies3 } = UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
+      const { styles: styles2, dependencies: dependencies3 } = UniwindStore.getStyles(className, props, void 0, uniwindContext);
       acc.generatedProps[propName] = styles2[option.styleProperty];
       acc.dependencies.push(...dependencies3);
       return acc;
     }
-    const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
+    const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(className, props, void 0, uniwindContext);
     acc.dependencies.push(...dependencies2);
     if (!isStyleProperty(propName)) {
       acc.generatedProps[propName] = styles;

package/dist/module/hooks/useResolveClassNames.js

@@ -5,9 +5,9 @@ const emptyState = {};
 export const useResolveClassNames = (className) => {
   const uniwindContext = useUniwindContext();
   const [styles, recreate] = useReducer(
-    () => className !== "" ? getWebStyles(className, uniwindContext) : emptyState,
+    () => className !== "" ? getWebStyles(className, void 0, uniwindContext) : emptyState,
     void 0,
-    () => className !== "" ? getWebStyles(className, uniwindContext) : emptyState
+    () => className !== "" ? getWebStyles(className, void 0, uniwindContext) : emptyState
   );
   useLayoutEffect(() => {
     if (className === "") {

package/dist/module/hooks/useUniwind.d.ts

@@ -1,4 +1,5 @@
+import { ThemeName } from '../core/types';
 export declare const useUniwind: () => {
-    theme: string;
+    theme: ThemeName;
     hasAdaptiveThemes: boolean;
 };

package/dist/module/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/ScopedTheme';
 export { Uniwind } from './core';
+export type { ThemeName } from './core/types';
 export { withUniwind } from './hoc';
 export type { ApplyUniwind, ApplyUniwindOptions } from './hoc/types';
 export { useCSSVariable, useResolveClassNames, useUniwind } from './hooks';

package/package.json

@@ -1,7 +1,7 @@
 {
     "private": false,
     "name": "@niibase/uniwind",
-    "version": "1.5.1",
+    "version": "1.6.1",
     "description": "A fork of Uniwind with Reanimated 4 support",
     "homepage": "https://uniwind.dev",
     "author": "Unistack",
@@ -21,6 +21,7 @@
         "postinstall": "node scripts/postinstall.mjs",
         "test:native": "jest --config jest.config.native.js",
         "test:web": "jest --config jest.config.web.js",
+        "test:types": "tsc --project tests/type-test/tsconfig.json",
         "test:e2e": "playwright test",
         "release": "release-it"
     },
@@ -121,7 +122,7 @@
         "ts-jest": "29.4.6",
         "typescript": "catalog:",
         "unbuild": "3.6.1",
-        "vite": "7.3.1",
+        "vite": "catalog:",
         "esbuild": "0.27.3"
     }
 }

package/src/components/web/generateDataSet.ts

@@ -1,17 +1,19 @@
+const toCamelCase = (str: string) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+
 export const generateDataSet = (props: Record<PropertyKey, any>) => {
     const dataSet: DataSet = props.dataSet !== undefined ? { ...props.dataSet } : {}
 
     Object.entries(props).forEach(([key, value]) => {
         if (key.startsWith('data-')) {
             // Remove data- prefix
-            dataSet[key.slice(5)] = value
+            dataSet[toCamelCase(key.slice(5))] = value
         }
     })
 
     return dataSet
 }
 
-type DataSet = Record<string, string | boolean>
+type DataSet = Record<string, string | boolean | undefined>
 
 declare module 'react-native' {
     interface SwitchProps {

package/src/components/web/rnw.ts

@@ -4,7 +4,7 @@ import { StyleDependency } from '../../types'
 import './metro-injected'
 
 type UniwindWithThemes = {
-    themes: typeof Uniwind['themes']
+    themes: typeof Uniwind['_themes']
 }
 
 const addClassNameToRoot = () => {

package/src/core/config/config.common.ts

@@ -13,7 +13,7 @@ const RN_VERSION = Platform.constants?.reactNativeVersion?.minor ?? 0
 const UNSPECIFIED_THEME = RN_VERSION >= 82 ? 'unspecified' : undefined
 
 export class UniwindConfigBuilder {
-    protected themes = ['light', 'dark']
+    protected _themes = ['light', 'dark']
     #hasAdaptiveThemes = true
     #currentTheme = this.colorScheme as ThemeName
 
@@ -33,6 +33,10 @@ export class UniwindConfigBuilder {
         })
     }
 
+    get themes() {
+        return this._themes as Array<ThemeName>
+    }
+
     get hasAdaptiveThemes() {
         return this.#hasAdaptiveThemes
     }
@@ -77,7 +81,7 @@ export class UniwindConfigBuilder {
                 return
             }
 
-            if (!this.themes.includes(theme)) {
+            if (!this._themes.includes(theme)) {
                 throw new Error(`Uniwind: You're trying to setTheme to '${theme}', but it was not registered.`)
             }
 
@@ -116,7 +120,7 @@ export class UniwindConfigBuilder {
     }
 
     protected __reinit(_: GenerateStyleSheetsCallback, themes: Array<string>) {
-        this.themes = themes
+        this._themes = themes
     }
 
     protected onThemeChange() {

package/src/core/web/getWebStyles.ts

@@ -1,3 +1,4 @@
+import { generateDataSet } from '../../components/web/generateDataSet'
 import { RNStyle, UniwindContextType } from '../types'
 import { CSSListener } from './cssListener'
 import { parseCSSValue } from './parseCSSValue'
@@ -52,7 +53,11 @@ const getActiveStylesForClass = (className: string) => {
     return extractedStyles
 }
 
-export const getWebStyles = (className: string | undefined, uniwindContext: UniwindContextType): RNStyle => {
+export const getWebStyles = (
+    className: string | undefined,
+    componentProps: Record<string, unknown> | undefined,
+    uniwindContext: UniwindContextType,
+): RNStyle => {
     if (className === undefined) {
         return {}
     }
@@ -69,8 +74,22 @@ export const getWebStyles = (className: string | undefined, uniwindContext: Uniw
 
     dummy.className = className
 
+    const dataSet = generateDataSet(componentProps ?? {})
+
+    Object.entries(dataSet).forEach(([key, value]) => {
+        if (value === false || value === undefined) {
+            return
+        }
+
+        dummy.dataset[key] = String(value)
+    })
+
     const computedStyles = getActiveStylesForClass(className)
 
+    Object.keys(dataSet).forEach(key => {
+        delete dummy.dataset[key]
+    })
+
     return Object.fromEntries(
         Object.entries(computedStyles)
             .map(([key, value]) => {

package/src/hoc/withUniwind.native.tsx

@@ -26,7 +26,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
                 return acc
             }
 
-            const { styles, dependencies } = UniwindStore.getStyles(propValue, undefined, undefined, uniwindContext)
+            const { styles, dependencies } = UniwindStore.getStyles(propValue, props, undefined, uniwindContext)
 
             acc.dependencies.push(...dependencies)
             acc.generatedProps[colorProp] = styles.accentColor
@@ -36,7 +36,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
 
         if (isClassProperty(propName)) {
             const styleProp = classToStyle(propName)
-            const { styles, dependencies } = UniwindStore.getStyles(propValue, undefined, undefined, uniwindContext)
+            const { styles, dependencies } = UniwindStore.getStyles(propValue, props, undefined, uniwindContext)
 
             acc.dependencies.push(...dependencies)
             acc.generatedProps[styleProp] ??= []
@@ -90,7 +90,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
                 return acc
             }
 
-            const { styles, dependencies } = UniwindStore.getStyles(className, undefined, undefined, uniwindContext)
+            const { styles, dependencies } = UniwindStore.getStyles(className, props, undefined, uniwindContext)
 
             acc.generatedProps[propName] = styles[option.styleProperty]
             acc.dependencies.push(...dependencies)
@@ -98,7 +98,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
             return acc
         }
 
-        const { styles, dependencies } = UniwindStore.getStyles(className, undefined, undefined, uniwindContext)
+        const { styles, dependencies } = UniwindStore.getStyles(className, props, undefined, uniwindContext)
         acc.dependencies.push(...dependencies)
 
         if (!isStyleProperty(propName)) {

package/src/hoc/withUniwind.tsx

@@ -1,4 +1,5 @@
 import { ComponentProps, useLayoutEffect, useReducer } from 'react'
+import { generateDataSet } from '../components/web/generateDataSet'
 import { useUniwindContext } from '../core/context'
 import { CSSListener, formatColor, getWebStyles } from '../core/web'
 import { AnyObject, Component, OptionMapping, WithUniwind } from './types'
@@ -26,7 +27,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
             }
 
             const className = propValue
-            const color = getWebStyles(className, uniwindContext).accentColor
+            const color = getWebStyles(className, props, uniwindContext).accentColor
 
             acc.generatedProps[colorProp] = color !== undefined
                 ? formatColor(color)
@@ -67,6 +68,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
         <Component
             {...props}
             {...generatedProps}
+            dataSet={generateDataSet(props)}
         />
     )
 }
@@ -87,7 +89,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
                 return acc
             }
 
-            const value = getWebStyles(className, uniwindContext)[option.styleProperty]
+            const value = getWebStyles(className, props, uniwindContext)[option.styleProperty]
             const transformedValue = value !== undefined && option.styleProperty.toLowerCase().includes('color')
                 ? formatColor(value as string)
                 : value
@@ -115,6 +117,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
         <Component
             {...props}
             {...generatedProps}
+            dataSet={generateDataSet(props)}
         />
     )
 }

package/src/hooks/useResolveClassNames.ts

@@ -8,9 +8,9 @@ const emptyState = {} as RNStyle
 export const useResolveClassNames = (className: string) => {
     const uniwindContext = useUniwindContext()
     const [styles, recreate] = useReducer(
-        () => className !== '' ? getWebStyles(className, uniwindContext) : emptyState,
+        () => className !== '' ? getWebStyles(className, undefined, uniwindContext) : emptyState,
         undefined,
-        () => className !== '' ? getWebStyles(className, uniwindContext) : emptyState,
+        () => className !== '' ? getWebStyles(className, undefined, uniwindContext) : emptyState,
     )
 
     useLayoutEffect(() => {

package/src/hooks/useUniwind.ts

@@ -5,7 +5,7 @@ import { UniwindListener } from '../core/listener'
 import { ThemeName } from '../core/types'
 import { StyleDependency } from '../types'
 
-export const useUniwind = () => {
+export const useUniwind = (): { theme: ThemeName; hasAdaptiveThemes: boolean } => {
     const uniwindContext = useUniwindContext()
     const [theme, setTheme] = useState(Uniwind.currentTheme)
     const [hasAdaptiveThemes, setHasAdaptiveThemes] = useState(Uniwind.hasAdaptiveThemes)
@@ -26,7 +26,7 @@ export const useUniwind = () => {
     }, [uniwindContext])
 
     return {
-        theme: uniwindContext.scopedTheme ?? theme as ThemeName,
+        theme: uniwindContext.scopedTheme ?? theme,
         hasAdaptiveThemes: uniwindContext.scopedTheme !== null ? false : hasAdaptiveThemes,
     }
 }

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './components/ScopedTheme'
 export { Uniwind } from './core'
+export type { ThemeName } from './core/types'
 export { withUniwind } from './hoc'
 export type { ApplyUniwind, ApplyUniwindOptions } from './hoc/types'
 export { useCSSVariable, useResolveClassNames, useUniwind } from './hooks'

package/src/metro/processor/color.ts

@@ -57,8 +57,9 @@ export class Color {
                 })
             }
 
+            const colorType = color.type === 'display-p3' ? 'p3' : color.type
             const result = this.toRgb({
-                mode: color.type,
+                mode: colorType,
                 ...color,
             } as ColorType)
 

package/src/metro/processor/css.ts

@@ -434,6 +434,14 @@ export class CSS {
                 return this.processValue(declarationValue[0]!)
             }
 
+            if (this.isTransformArray(declarationValue)) {
+                return declarationValue.flatMap(value => {
+                    const result = this.processValue(value)
+
+                    return Array.isArray(result) ? result : [result]
+                })
+            }
+
             return this.addComaBetweenTokens(declarationValue).reduce<string | number>((acc, value, index, array) => {
                 if (typeof value === 'object') {
                     const nextValue = array.at(index + 1)
@@ -580,6 +588,33 @@ export class CSS {
         return undefined
     }
 
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    private static readonly TRANSFORM_TYPES = new Set([
+        'translate',
+        'translateX',
+        'translateY',
+        'translateZ',
+        'rotate',
+        'rotateX',
+        'rotateY',
+        'rotateZ',
+        'scale',
+        'scaleX',
+        'scaleY',
+        'scaleZ',
+        'skew',
+        'skewX',
+        'skewY',
+        'matrix',
+        'perspective',
+    ])
+
+    private isTransformArray(values: Array<any>) {
+        return values.every(
+            value => typeof value === 'object' && value !== null && 'type' in value && CSS.TRANSFORM_TYPES.has(value.type),
+        )
+    }
+
     private isOverflow(value: any): value is { x: OverflowKeyword; y: OverflowKeyword } {
         return typeof value === 'object' && 'x' in value && ['hidden', 'visible'].includes(value.x)
     }

package/src/metro/utils/serialize.ts

@@ -100,6 +100,19 @@ export const serializeJSObject = (obj: Record<string, any>, serializer: (key: st
     const serializedObject = pipe(obj)(
         Object.entries,
         entries => entries.map(([key, value]) => serializer(key, serialize(value))),
+        serializedValues =>
+            serializedValues.filter(serializedValue => {
+                try {
+                    // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
+                    new Function(`function validateJS() { const obj = ({ ${serializedValue} }) }`)
+
+                    return true
+                } catch {
+                    Logger.error(`Failed to serialize ${serializedValue} as a valid JS object entry. Skipping.`)
+
+                    return false
+                }
+            }),
         entries => entries.join(','),
         result => {
             if (result === '') {
@@ -110,13 +123,5 @@ export const serializeJSObject = (obj: Record<string, any>, serializer: (key: st
         },
     )
 
-    try {
-        // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
-        new Function(`function validateJS() { const obj = ({ ${serializedObject} }) }`)
-    } catch {
-        Logger.error('Failed to serialize javascript object')
-        return ''
-    }
-
     return serializedObject
 }