@niibase/uniwind 1.5.1 → 1.6.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 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/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/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;
 };
 
@@ -842,6 +845,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 +958,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;
 };
 
@@ -835,6 +838,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 +951,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/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/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.0",
     "description": "A fork of Uniwind with Reanimated 4 support",
     "homepage": "https://uniwind.dev",
     "author": "Unistack",
@@ -121,7 +121,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/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/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/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
 }