rn-css 1.11.8 → 1.11.9

package/dist/convertUnits.js

@@ -7,7 +7,7 @@ const react_native_1 = require("./react-native");
 function parseValue(value) {
     // Match a single unit
     const unit = value.match(/([+-]?\b\d+(\.\d+)?)([a-z]+\b|%)?/i);
-    return [parseFloat(unit[1]), unit[3]];
+    return unit ? [parseFloat(unit[1]), unit[3]] : [0, undefined];
 }
 exports.parseValue = parseValue;
 /** Convert a value using the provided unit transform table */
@@ -30,13 +30,13 @@ function convertValue(key, value, units) {
         else if (['marginLeft', 'marginRight', 'translateX'].includes(key) || key.startsWith('borderLeft') || key.startsWith('borderRight'))
             finalUnits['%'] = units.width / 100;
         else if (key.startsWith('border') && key.endsWith('Radius'))
-            finalUnits['%'] = (units.width + units.height) / 200;
+            finalUnits['%'] = ((units.width || 0) + (units.height || 0)) / 200;
         else if (['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'top', 'left', 'bottom', 'right', 'flexBasis', 'rotate3d'].includes(key)) {
             if (value.startsWith('calc') || value.startsWith('max') || value.startsWith('min')) {
                 if (['height', 'minHeight', 'maxHeight', 'top', 'bottom'].includes(key))
-                    finalUnits['%'] = units.height / 100;
+                    finalUnits['%'] = (units.height || 0) / 100;
                 else
-                    finalUnits['%'] = units.width / 100;
+                    finalUnits['%'] = (units.width || 0) / 100;
             }
             // width: 100%, height: 100% are supported
             else
@@ -53,7 +53,7 @@ function convertValue(key, value, units) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         if (['deg', 'rad', 'turn', 's'].includes(unit))
             return occ; // We don't want to convert deg, rad, turn, second units
-        return val * (finalUnits[unit || 'px']) + '';
+        return val * (finalUnits[unit || 'px'] || 1) + '';
     });
     // We handle extra calculations (calc, min, max, parsing...)
     if (convertedValue.startsWith('calc('))

package/dist/cssToRN/index.js

@@ -56,6 +56,12 @@ function cssToRNStyle(css, units = {}) {
         vh: height / 100,
         vmin: Math.min(width, height) / 100,
         vmax: Math.max(width, height) / 100,
+        lvw: width / 100,
+        lvh: height / 100,
+        svw: width / 100,
+        svh: height / 100,
+        dvw: width / 100,
+        dvh: height / 100,
         width: 100,
         height: 100,
         rem: 16,

package/dist/features.d.ts

@@ -7,6 +7,12 @@ export declare const useScreenSize: () => {
     vh: number;
     vmin: number;
     vmax: number;
+    dvw: number;
+    dvh: number;
+    lvw: number;
+    lvh: number;
+    svw: number;
+    svh: number;
 };
 /** Hook that will apply the style reserved for hover state if needed */
 export declare const useHover: (onMouseEnter: ((event: MouseEvent) => void) | undefined, onMouseLeave: ((event: MouseEvent) => void | undefined) | undefined, needsHover: boolean) => {

package/dist/features.js

@@ -13,7 +13,16 @@ const mediaQueries_1 = require("./cssToRN/mediaQueries");
 const useScreenSize = () => {
     const { width, height } = (0, react_native_1.useWindowDimensions)();
     return react_1.default.useMemo(() => ({
-        vw: width / 100, vh: height / 100, vmin: Math.min(width, height) / 100, vmax: Math.max(width, height) / 100
+        vw: width / 100,
+        vh: height / 100,
+        vmin: Math.min(width, height) / 100,
+        vmax: Math.max(width, height) / 100,
+        dvw: width / 100,
+        dvh: height / 100,
+        lvw: width / 100,
+        lvh: height / 100,
+        svw: width / 100,
+        svh: height / 100
     }), [height, width]);
 };
 exports.useScreenSize = useScreenSize;

package/dist/types.d.ts

@@ -3,6 +3,12 @@ export declare type Units = {
     '%'?: number;
     vw?: number;
     vh?: number;
+    dvw?: number;
+    dvh?: number;
+    lvw?: number;
+    lvh?: number;
+    svw?: number;
+    svh?: number;
     vmin?: number;
     vmax?: number;
     em: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.11.8",
+  "version": "1.11.9",
   "exports": {
     ".": {
       "import": "./dist/index.js",

package/src/convertUnits.ts

@@ -6,7 +6,7 @@ import { Platform } from './react-native'
 export function parseValue (value: string): [number, string | undefined] {
   // Match a single unit
   const unit = value.match(/([+-]?\b\d+(\.\d+)?)([a-z]+\b|%)?/i)
-  return [parseFloat(unit![1]), unit![3] as (string | undefined)]
+  return unit ? [parseFloat(unit[1]), unit[3] as (string | undefined)] : [0, undefined]
 }
 
 /** Convert a value using the provided unit transform table */
@@ -25,11 +25,11 @@ export function convertValue (key: keyof PartialStyle | keyof Transform, value:
     if (Platform.OS === 'web' && (!key.toLowerCase().includes('border') || key.toLowerCase().includes('radius'))) return value
     if (['marginTop', 'marginBottom', 'translateY'].includes(key) || key.startsWith('borderTop') || key.startsWith('borderBottom')) finalUnits['%'] = units.height! / 100
     else if (['marginLeft', 'marginRight', 'translateX'].includes(key) || key.startsWith('borderLeft') || key.startsWith('borderRight')) finalUnits['%'] = units.width! / 100
-    else if (key.startsWith('border') && key.endsWith('Radius')) finalUnits['%'] = (units.width! + units.height!) / 200
+    else if (key.startsWith('border') && key.endsWith('Radius')) finalUnits['%'] = ((units.width || 0) + (units.height || 0)) / 200
     else if (['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'top', 'left', 'bottom', 'right', 'flexBasis', 'rotate3d'].includes(key)) {
       if (value.startsWith('calc') || value.startsWith('max') || value.startsWith('min')) {
-        if (['height', 'minHeight', 'maxHeight', 'top', 'bottom'].includes(key)) finalUnits['%'] = units.height! / 100
-        else finalUnits['%'] = units.width! / 100
+        if (['height', 'minHeight', 'maxHeight', 'top', 'bottom'].includes(key)) finalUnits['%'] = (units.height || 0) / 100
+        else finalUnits['%'] = (units.width || 0) / 100
       }
       // width: 100%, height: 100% are supported
       else return value
@@ -43,7 +43,7 @@ export function convertValue (key: keyof PartialStyle | keyof Transform, value:
     const [val, unit] = parseValue(occ)
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     if (['deg', 'rad', 'turn', 's'].includes(unit!)) return occ // We don't want to convert deg, rad, turn, second units
-    return val * (finalUnits[unit as keyof Units || 'px']!) + ''
+    return val * (finalUnits[unit as keyof Units || 'px'] || 1) + ''
   })
 
   // We handle extra calculations (calc, min, max, parsing...)

package/src/cssToRN/index.ts

@@ -20,7 +20,7 @@ function cssToStyle (css: string) {
     const style = cssChunkToStyle(css)
     const mediaQuery = (context: Context) => isValid(context) && style
     if (!result.media) result.media = []
-    result.media!.push(mediaQuery)
+    result.media.push(mediaQuery)
     return ''
   })
   // Find hover (we don't support hover within media queries) (We use [\s\S] instead of . because dotall flag (s) is not supported by react-native-windows)
@@ -54,6 +54,12 @@ export function cssToRNStyle (css: string, units: { em?: number, width?: number,
     vh: height / 100,
     vmin: Math.min(width, height) / 100,
     vmax: Math.max(width, height) / 100,
+    lvw: width / 100,
+    lvh: height / 100,
+    svw: width / 100,
+    svh: height / 100,
+    dvw: width / 100,
+    dvh: height / 100,
     width: 100,
     height: 100,
     rem: 16,

package/src/features.tsx

@@ -9,7 +9,16 @@ import { createContext } from './cssToRN/mediaQueries'
 export const useScreenSize = () => {
   const { width, height } = useWindowDimensions()
   return React.useMemo(() => ({
-    vw: width / 100, vh: height / 100, vmin: Math.min(width, height) / 100, vmax: Math.max(width, height) / 100
+    vw: width / 100,
+    vh: height / 100,
+    vmin: Math.min(width, height) / 100,
+    vmax: Math.max(width, height) / 100,
+    dvw: width / 100,
+    dvh: height / 100,
+    lvw: width / 100,
+    lvh: height / 100,
+    svw: width / 100,
+    svh: height / 100
   }), [height, width])
 }
 

package/src/types.ts

@@ -4,6 +4,12 @@ export type Units = {
   '%'?: number;
   vw?: number;
   vh?: number;
+  dvw?: number;
+  dvh?: number;
+  lvw?: number;
+  lvh?: number;
+  svw?: number;
+  svh?: number;
   vmin?: number;
   vmax?: number;
   em: number;