@niibase/uniwind 1.6.3 → 1.6.4

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## What's Changed in 1.6.4
+
+
+
+### 🚀 Features
+
+* getCSSVariable function to get css variable outside of react (#521) by @Brentlok
+* parse inline-start inline-end border to RN (#515) by @Brentlok
+
+### 🐛 Bug Fixes
+
+* join border radius to fix some components (#517) by @Brentlok
+* remove deprecated push notification ios export (#516) by @Brentlok
+
+### 📦 Other
+
+* Merge branch 'pre-release' by @divineniiquaye
+
+
+**Full Changelog**: https://github.com/divineniiquaye/uniwind/compare/v1.6.3...v1.6.4
+
+
 ## What's Changed in 1.6.3
 
 

package/dist/common/components/index.js

@@ -197,9 +197,6 @@ module.exports = {
   get PlatformColor() {
     return require("react-native").PlatformColor;
   },
-  get PushNotificationIOS() {
-    return require("react-native").PushNotificationIOS;
-  },
   get processColor() {
     return require("react-native").processColor;
   },

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

@@ -7,6 +7,7 @@ exports.UniwindConfigBuilder = exports.Uniwind = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _withUniwind = require("../../hoc/withUniwind");
+var _useCSSVariable = require("../../hooks/useCSSVariable/useCSSVariable");
 var _types = require("../../types");
 var _listener = require("../listener");
 const SYSTEM_THEME = "system";
@@ -88,6 +89,11 @@ class UniwindConfigBuilder {
   updateCSSVariables(theme, cssVariables) {}
   // oxlint-disable-next-line typescript/no-unused-vars
   updateInsets(insets) {}
+  getCSSVariable = variableName => {
+    return (0, _useCSSVariable.getCSSVariable)(variableName, {
+      scopedTheme: null
+    });
+  };
   __reinit(_, themes) {
     this._themes = themes;
   }

package/dist/common/hooks/useCSSVariable/index.js

@@ -3,14 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _useCSSVariable = require("./useCSSVariable");
-Object.keys(_useCSSVariable).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useCSSVariable[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useCSSVariable[key];
-    }
-  });
-});
+Object.defineProperty(exports, "useCSSVariable", {
+  enumerable: true,
+  get: function () {
+    return _useCSSVariable.useCSSVariable;
+  }
+});
+var _useCSSVariable = require("./useCSSVariable");

package/dist/common/hooks/useCSSVariable/useCSSVariable.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCSSVariable = void 0;
+exports.useCSSVariable = exports.getCSSVariable = void 0;
 var _react = require("react");
 var _utils = require("../../common/utils");
 var _context = require("../../core/context");
@@ -11,45 +11,49 @@ var _listener = require("../../core/listener");
 var _logger = require("../../core/logger");
 var _types = require("../../types");
 var _getVariableValue = require("./getVariableValue");
-const getValue = (name, uniwindContext) => Array.isArray(name) ? name.map(name2 => (0, _getVariableValue.getVariableValue)(name2, uniwindContext)) : (0, _getVariableValue.getVariableValue)(name, uniwindContext);
 let warned = false;
 const logDevError = name => {
   warned = true;
   _logger.Logger.warn(`We couldn't find your variable ${name}. Make sure it's used at least once in your className, or define it in a static theme as described in the docs: https://docs.uniwind.dev/api/use-css-variable`);
 };
+const getCSSVariable = (name, uniwindContext) => {
+  const value = Array.isArray(name) ? name.map(name2 => (0, _getVariableValue.getVariableValue)(name2, uniwindContext)) : (0, _getVariableValue.getVariableValue)(name, uniwindContext);
+  if (Array.isArray(value)) {
+    value.forEach((val, index) => {
+      if (val === void 0 && __DEV__ && !warned) {
+        logDevError(name[index] ?? "");
+      }
+    });
+  }
+  if (value === void 0 && __DEV__ && !warned) {
+    logDevError(name);
+  }
+  return value;
+};
+exports.getCSSVariable = getCSSVariable;
 const useCSSVariable = name => {
   const uniwindContext = (0, _context.useUniwindContext)();
-  const [value, setValue] = (0, _react.useState)(getValue(name, uniwindContext));
+  const [value, setValue] = (0, _react.useState)(getCSSVariable(name, uniwindContext));
   const nameRef = (0, _react.useRef)(name);
   (0, _react.useLayoutEffect)(() => {
     if (Array.isArray(name) && Array.isArray(nameRef.current)) {
       if ((0, _utils.arrayEquals)(name, nameRef.current)) {
         return;
       }
-      setValue(getValue(name, uniwindContext));
+      setValue(getCSSVariable(name, uniwindContext));
       nameRef.current = name;
       return;
     }
     if (name !== nameRef.current) {
-      setValue(getValue(name, uniwindContext));
+      setValue(getCSSVariable(name, uniwindContext));
       nameRef.current = name;
     }
   }, [name]);
   (0, _react.useLayoutEffect)(() => {
-    const updateValue = () => setValue(getValue(nameRef.current, uniwindContext));
+    const updateValue = () => setValue(getCSSVariable(nameRef.current, uniwindContext));
     const dispose = _listener.UniwindListener.subscribe(updateValue, [_types.StyleDependency.Theme, _types.StyleDependency.Variables]);
     return dispose;
   }, [uniwindContext]);
-  if (Array.isArray(value)) {
-    value.forEach((val, index) => {
-      if (val === void 0 && __DEV__ && !warned) {
-        logDevError(name[index] ?? "");
-      }
-    });
-  }
-  if (value === void 0 && __DEV__ && !warned) {
-    logDevError(name);
-  }
   return value;
 };
 exports.useCSSVariable = useCSSVariable;

package/dist/metro/metro-transformer.cjs

@@ -1485,6 +1485,7 @@ const cssToRNMap = {
 };
 const BORDER_WIDTH_KEYS = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"];
 const BORDER_COLOR_KEYS = ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"];
+const BORDER_RADIUS_KEYS = ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"];
 class RN {
   constructor(Processor) {
     this.Processor = Processor;
@@ -1496,6 +1497,9 @@ class RN {
         if (x.includes("padding") || x.includes("margin")) {
           return x.replace("InlineStart", "Start").replace("InlineEnd", "End").replace("Inline", "Horizontal").replace("Block", "Vertical");
         }
+        if (x.includes("border")) {
+          return x.replace("InlineStart", "Start").replace("InlineEnd", "End");
+        }
         return x;
       }
     );
@@ -1599,6 +1603,15 @@ class RN {
         };
       }
     }
+    if (BORDER_RADIUS_KEYS.every((key) => keys.includes(key))) {
+      const borderRadius = styles.borderTopLeftRadius;
+      if (BORDER_RADIUS_KEYS.every((key) => styles[key] === borderRadius)) {
+        return {
+          ...common.removeKeys(styles, BORDER_RADIUS_KEYS),
+          borderRadius
+        };
+      }
+    }
     return styles;
   }
 }

package/dist/metro/metro-transformer.mjs

@@ -1478,6 +1478,7 @@ const cssToRNMap = {
 };
 const BORDER_WIDTH_KEYS = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"];
 const BORDER_COLOR_KEYS = ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"];
+const BORDER_RADIUS_KEYS = ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"];
 class RN {
   constructor(Processor) {
     this.Processor = Processor;
@@ -1489,6 +1490,9 @@ class RN {
         if (x.includes("padding") || x.includes("margin")) {
           return x.replace("InlineStart", "Start").replace("InlineEnd", "End").replace("Inline", "Horizontal").replace("Block", "Vertical");
         }
+        if (x.includes("border")) {
+          return x.replace("InlineStart", "Start").replace("InlineEnd", "End");
+        }
         return x;
       }
     );
@@ -1592,6 +1596,15 @@ class RN {
         };
       }
     }
+    if (BORDER_RADIUS_KEYS.every((key) => keys.includes(key))) {
+      const borderRadius = styles.borderTopLeftRadius;
+      if (BORDER_RADIUS_KEYS.every((key) => styles[key] === borderRadius)) {
+        return {
+          ...removeKeys(styles, BORDER_RADIUS_KEYS),
+          borderRadius
+        };
+      }
+    }
     return styles;
   }
 }

package/dist/module/components/index.js

@@ -195,9 +195,6 @@ module.exports = {
   get PlatformColor() {
     return require("react-native").PlatformColor;
   },
-  get PushNotificationIOS() {
-    return require("react-native").PushNotificationIOS;
-  },
   get processColor() {
     return require("react-native").processColor;
   },

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

@@ -1,6 +1,7 @@
 import { ComponentPropsWithRef, ElementType } from 'react';
 import { Insets } from 'react-native';
 import { ApplyUniwind } from '../../hoc/types';
+import { GetCSSVariable } from '../../hooks/useCSSVariable/useCSSVariable';
 import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types';
 declare const SYSTEM_THEME: "system";
 export declare class UniwindConfigBuilder {
@@ -17,6 +18,7 @@ export declare class UniwindConfigBuilder {
     setTheme(theme: ThemeName | typeof SYSTEM_THEME): void;
     updateCSSVariables(theme: ThemeName, cssVariables: CSSVariables): void;
     updateInsets(insets: Insets): void;
+    getCSSVariable: GetCSSVariable;
     protected __reinit(_: GenerateStyleSheetsCallback, themes: Array<string>): void;
     protected onThemeChange(): void;
 }

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

@@ -1,6 +1,7 @@
 import { createElement, useMemo } from "react";
 import { Appearance, Platform } from "react-native";
 import { withUniwind } from "../../hoc/withUniwind.js";
+import { getCSSVariable } from "../../hooks/useCSSVariable/useCSSVariable.js";
 import { ColorScheme, StyleDependency } from "../../types.js";
 import { UniwindListener } from "../listener.js";
 const SYSTEM_THEME = "system";
@@ -82,6 +83,9 @@ export class UniwindConfigBuilder {
   // oxlint-disable-next-line typescript/no-unused-vars
   updateInsets(insets) {
   }
+  getCSSVariable = ((variableName) => {
+    return getCSSVariable(variableName, { scopedTheme: null });
+  });
   __reinit(_, themes) {
     this._themes = themes;
   }

package/dist/module/hooks/useCSSVariable/index.d.ts

@@ -1 +1 @@
-export * from './useCSSVariable';
+export { useCSSVariable } from './useCSSVariable';

package/dist/module/hooks/useCSSVariable/index.js

@@ -1 +1 @@
-export * from "./useCSSVariable.js";
+export { useCSSVariable } from "./useCSSVariable.js";

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

@@ -1,6 +1,8 @@
+import { UniwindContextType } from '../../core/types';
+export declare const getCSSVariable: (name: string | Array<string>, uniwindContext: UniwindContextType) => string | (string | undefined)[] | undefined;
 type IsGenericNumber<T> = T & 0 extends -1 ? false : true;
 type CreateArray<N extends number, Value, TAcc extends Array<Value> = []> = TAcc['length'] extends N ? TAcc : CreateArray<N, Value, [...TAcc, Value]>;
-type UseCSSVariable = {
+export type GetCSSVariable = {
     (name: string): string | number | undefined;
     <const T extends Array<string>>(names: T): IsGenericNumber<T['length']> extends true ? Array<string | number | undefined> : CreateArray<T['length'], string | number | undefined>;
 };
@@ -9,5 +11,5 @@ type UseCSSVariable = {
  * @param name Name / Array of names of the CSS variable.
  * @returns Value / Values of the CSS variable. On web it is always a string (1rem, #ff0000, etc.), but on native it can be a string or a number (16px, #ff0000)
  */
-export declare const useCSSVariable: UseCSSVariable;
+export declare const useCSSVariable: GetCSSVariable;
 export {};

package/dist/module/hooks/useCSSVariable/useCSSVariable.js

@@ -5,7 +5,6 @@ import { UniwindListener } from "../../core/listener.js";
 import { Logger } from "../../core/logger.js";
 import { StyleDependency } from "../../types.js";
 import { getVariableValue } from "./getVariableValue.js";
-const getValue = (name, uniwindContext) => Array.isArray(name) ? name.map((name2) => getVariableValue(name2, uniwindContext)) : getVariableValue(name, uniwindContext);
 let warned = false;
 const logDevError = (name) => {
   warned = true;
@@ -13,41 +12,45 @@ const logDevError = (name) => {
     `We couldn't find your variable ${name}. Make sure it's used at least once in your className, or define it in a static theme as described in the docs: https://docs.uniwind.dev/api/use-css-variable`
   );
 };
+export const getCSSVariable = (name, uniwindContext) => {
+  const value = Array.isArray(name) ? name.map((name2) => getVariableValue(name2, uniwindContext)) : getVariableValue(name, uniwindContext);
+  if (Array.isArray(value)) {
+    value.forEach((val, index) => {
+      if (val === void 0 && __DEV__ && !warned) {
+        logDevError(name[index] ?? "");
+      }
+    });
+  }
+  if (value === void 0 && __DEV__ && !warned) {
+    logDevError(name);
+  }
+  return value;
+};
 export const useCSSVariable = (name) => {
   const uniwindContext = useUniwindContext();
-  const [value, setValue] = useState(getValue(name, uniwindContext));
+  const [value, setValue] = useState(getCSSVariable(name, uniwindContext));
   const nameRef = useRef(name);
   useLayoutEffect(() => {
     if (Array.isArray(name) && Array.isArray(nameRef.current)) {
       if (arrayEquals(name, nameRef.current)) {
         return;
       }
-      setValue(getValue(name, uniwindContext));
+      setValue(getCSSVariable(name, uniwindContext));
       nameRef.current = name;
       return;
     }
     if (name !== nameRef.current) {
-      setValue(getValue(name, uniwindContext));
+      setValue(getCSSVariable(name, uniwindContext));
       nameRef.current = name;
     }
   }, [name]);
   useLayoutEffect(() => {
-    const updateValue = () => setValue(getValue(nameRef.current, uniwindContext));
+    const updateValue = () => setValue(getCSSVariable(nameRef.current, uniwindContext));
     const dispose = UniwindListener.subscribe(
       updateValue,
       [StyleDependency.Theme, StyleDependency.Variables]
     );
     return dispose;
   }, [uniwindContext]);
-  if (Array.isArray(value)) {
-    value.forEach((val, index) => {
-      if (val === void 0 && __DEV__ && !warned) {
-        logDevError(name[index] ?? "");
-      }
-    });
-  }
-  if (value === void 0 && __DEV__ && !warned) {
-    logDevError(name);
-  }
   return value;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
     "private": false,
     "name": "@niibase/uniwind",
-    "version": "1.6.3",
+    "version": "1.6.4",
     "description": "A fork of Uniwind with Reanimated 4 support",
     "homepage": "https://uniwind.dev",
     "author": "Unistack",

package/src/components/index.ts

@@ -196,9 +196,6 @@ module.exports = {
     get PlatformColor() {
         return require('react-native').PlatformColor
     },
-    get PushNotificationIOS() {
-        return require('react-native').PushNotificationIOS
-    },
     get processColor() {
         return require('react-native').processColor
     },

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

@@ -2,6 +2,7 @@ import { ComponentPropsWithRef, createElement, ElementType, useMemo } from 'reac
 import { Appearance, Insets, Platform } from 'react-native'
 import { ApplyUniwind } from '../../hoc/types'
 import { withUniwind } from '../../hoc/withUniwind'
+import { GetCSSVariable, getCSSVariable } from '../../hooks/useCSSVariable/useCSSVariable'
 import { ColorScheme, StyleDependency } from '../../types'
 import { UniwindListener } from '../listener'
 import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
@@ -116,6 +117,10 @@ export class UniwindConfigBuilder {
         // noop
     }
 
+    getCSSVariable = ((variableName: string | Array<string>) => {
+        return getCSSVariable(variableName, { scopedTheme: null })
+    }) as GetCSSVariable
+
     protected __reinit(_: GenerateStyleSheetsCallback, themes: Array<string>) {
         this._themes = themes
     }

package/src/hooks/useCSSVariable/index.ts

@@ -1 +1 @@
-export * from './useCSSVariable'
+export { useCSSVariable } from './useCSSVariable'

package/src/hooks/useCSSVariable/useCSSVariable.ts

@@ -7,11 +7,6 @@ import { UniwindContextType } from '../../core/types'
 import { StyleDependency } from '../../types'
 import { getVariableValue } from './getVariableValue'
 
-const getValue = (name: string | Array<string>, uniwindContext: UniwindContextType) =>
-    Array.isArray(name)
-        ? name.map(name => getVariableValue(name, uniwindContext))
-        : getVariableValue(name, uniwindContext)
-
 let warned = false
 
 const logDevError = (name: string) => {
@@ -21,10 +16,30 @@ const logDevError = (name: string) => {
     )
 }
 
+export const getCSSVariable = (name: string | Array<string>, uniwindContext: UniwindContextType) => {
+    const value = Array.isArray(name)
+        ? name.map(name => getVariableValue(name, uniwindContext))
+        : getVariableValue(name, uniwindContext)
+
+    if (Array.isArray(value)) {
+        value.forEach((val, index) => {
+            if (val === undefined && __DEV__ && !warned) {
+                logDevError(name[index] ?? '')
+            }
+        })
+    }
+
+    if (value === undefined && __DEV__ && !warned) {
+        logDevError(name as string)
+    }
+
+    return value
+}
+
 type IsGenericNumber<T> = T & 0 extends -1 ? false : true
 type CreateArray<N extends number, Value, TAcc extends Array<Value> = []> = TAcc['length'] extends N ? TAcc : CreateArray<N, Value, [...TAcc, Value]>
 
-type UseCSSVariable = {
+export type GetCSSVariable = {
     (name: string): string | number | undefined
     <const T extends Array<string>>(
         names: T,
@@ -36,9 +51,9 @@ type UseCSSVariable = {
  * @param name Name / Array of names of the CSS variable.
  * @returns Value / Values of the CSS variable. On web it is always a string (1rem, #ff0000, etc.), but on native it can be a string or a number (16px, #ff0000)
  */
-export const useCSSVariable: UseCSSVariable = (name: string | Array<string>) => {
+export const useCSSVariable: GetCSSVariable = (name: string | Array<string>) => {
     const uniwindContext = useUniwindContext()
-    const [value, setValue] = useState(getValue(name, uniwindContext))
+    const [value, setValue] = useState(getCSSVariable(name, uniwindContext))
     const nameRef = useRef(name)
 
     useLayoutEffect(() => {
@@ -47,20 +62,20 @@ export const useCSSVariable: UseCSSVariable = (name: string | Array<string>) =>
                 return
             }
 
-            setValue(getValue(name, uniwindContext))
+            setValue(getCSSVariable(name, uniwindContext))
             nameRef.current = name
 
             return
         }
 
         if (name !== nameRef.current) {
-            setValue(getValue(name, uniwindContext))
+            setValue(getCSSVariable(name, uniwindContext))
             nameRef.current = name
         }
     }, [name])
 
     useLayoutEffect(() => {
-        const updateValue = () => setValue(getValue(nameRef.current, uniwindContext))
+        const updateValue = () => setValue(getCSSVariable(nameRef.current, uniwindContext))
         const dispose = UniwindListener.subscribe(
             updateValue,
             [StyleDependency.Theme, StyleDependency.Variables],
@@ -69,17 +84,5 @@ export const useCSSVariable: UseCSSVariable = (name: string | Array<string>) =>
         return dispose
     }, [uniwindContext])
 
-    if (Array.isArray(value)) {
-        value.forEach((val, index) => {
-            if (val === undefined && __DEV__ && !warned) {
-                logDevError(name[index] ?? '')
-            }
-        })
-    }
-
-    if (value === undefined && __DEV__ && !warned) {
-        logDevError(name as string)
-    }
-
     return value as never
 }

package/src/metro/processor/rn.ts

@@ -231,6 +231,7 @@ const cssToRNMap: Record<string, (value: any) => Record<string, any>> = {
 
 const BORDER_WIDTH_KEYS = ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth']
 const BORDER_COLOR_KEYS = ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor']
+const BORDER_RADIUS_KEYS = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius']
 
 export class RN {
     constructor(private readonly Processor: ProcessorBuilder) {}
@@ -249,6 +250,12 @@ export class RN {
                             .replace('Block', 'Vertical')
                     }
 
+                    if (x.includes('border')) {
+                        return x
+                            .replace('InlineStart', 'Start')
+                            .replace('InlineEnd', 'End')
+                    }
+
                     return x
                 },
             )
@@ -382,6 +389,18 @@ export class RN {
             }
         }
 
+        if (BORDER_RADIUS_KEYS.every(key => keys.includes(key))) {
+            const borderRadius = styles.borderTopLeftRadius
+
+            // Join border radius
+            if (BORDER_RADIUS_KEYS.every(key => styles[key] === borderRadius)) {
+                return {
+                    ...removeKeys(styles, BORDER_RADIUS_KEYS),
+                    borderRadius,
+                }
+            }
+        }
+
         return styles
     }
 }