rn-css 1.11.7 → 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/convert.d.ts

@@ -34,10 +34,10 @@ export declare function placeContent(value: string): {
     justifyContent: string;
 };
 export declare function background(value: string): {
+    backgroundColor: string;
     background: string;
-    backgroundColor?: undefined;
 } | {
-    backgroundColor: string | undefined;
+    backgroundColor: string;
     background?: undefined;
 };
 export declare function textDecoration(value: string): {
@@ -50,7 +50,7 @@ export declare function transform(value: string): {
 };
 export declare function font(value: string): Style;
 /** Parses a css value for the side of an element (border-width, margin, padding) */
-export declare function sideValue<T extends 'padding' | 'margin' | 'border'>(prefixKey: T, value: string, postFix?: T extends 'border' ? 'Width' | 'Style' | 'Color' | '' : ''): {
+export declare function sideValue<T extends 'padding' | 'margin' | 'border' | 'outline'>(prefixKey: T, value: string, postFix?: T extends 'border' | 'outline' ? 'Width' | 'Style' | 'Color' | '' : ''): {
     [x: string]: string;
 };
 /** Parses a css value for the corner of an element (border-radius) */

package/dist/cssToRN/convert.js

@@ -135,15 +135,10 @@ function placeContent(value) {
 }
 exports.placeContent = placeContent;
 function background(value) {
+    const values = value.match(/(linear-gradient\(|url\().*?\)|[^\s]+/mg) || [];
+    const backgroundColor = values.reverse().find(isColor) || 'transparent';
     // We support everything on web
-    if (react_native_1.Platform.OS === 'web')
-        return { background: value };
-    else {
-        const values = value.split(/\s+/mg);
-        const color = values.pop();
-        // The background-color is the only one that we support on RN and it's the last value
-        return { backgroundColor: isColor(color) ? color : 'transparent' };
-    }
+    return react_native_1.Platform.OS === 'web' ? { backgroundColor, background: value } : { backgroundColor };
 }
 exports.background = background;
 function textDecoration(value) {
@@ -270,6 +265,8 @@ function isColor(value) {
         return false;
     if (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl'))
         return true;
+    if (react_native_1.Platform.OS === 'web' && value.match(/^\s*linear-gradient\(.*\)/s))
+        return true;
     const CSS_COLOR_NAMES = [
         'aliceblue',
         'antiquewhite',

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,
@@ -96,6 +102,11 @@ function cssChunkToStyle(css) {
             case 'borderWidth':
                 Object.assign(result, (0, convert_1.sideValue)('border', value, key.split('border').pop()));
                 break;
+            case 'outlineStyle':
+            case 'outlineColor':
+            case 'outlineWidth':
+                Object.assign(result, (0, convert_1.sideValue)('outline', value, key.split('outline').pop()));
+                break;
             case 'background':
                 Object.assign(result, (0, convert_1.background)(value));
                 break;
@@ -133,6 +144,9 @@ function cssChunkToStyle(css) {
                 else
                     Object.assign(result, (0, convert_1.shadow)(key === 'boxShadow' ? 'shadow' : key, value));
                 break;
+            case 'userSelect':
+                Object.assign(result, { userSelect: value, WebkitUserSelect: value });
+                break;
             // Other keys don't require any special treatment
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore

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.7",
+  "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/convert.ts

@@ -118,14 +118,10 @@ export function placeContent (value: string) {
 }
 
 export function background (value: string) {
+  const values = value.match(/(linear-gradient\(|url\().*?\)|[^\s]+/mg) || []
+  const backgroundColor = values.reverse().find(isColor) || 'transparent'
   // We support everything on web
-  if (Platform.OS === 'web') return { background: value }
-  else {
-    const values = value.split(/\s+/mg)
-    const color = values.pop()
-    // The background-color is the only one that we support on RN and it's the last value
-    return { backgroundColor: isColor(color) ? color : 'transparent' }
-  }
+  return Platform.OS === 'web' ? { backgroundColor, background: value } : { backgroundColor }
 }
 
 export function textDecoration (value: string) {
@@ -210,7 +206,7 @@ export function font (value: string) {
 }
 
 /** Parses a css value for the side of an element (border-width, margin, padding) */
-export function sideValue <T extends 'padding' | 'margin' | 'border'> (prefixKey: T, value: string, postFix: T extends 'border' ? 'Width' | 'Style' | 'Color' | '' : '' = ''): { [x: string]: string} {
+export function sideValue <T extends 'padding' | 'margin' | 'border' | 'outline'> (prefixKey: T, value: string, postFix: T extends 'border' | 'outline' ? 'Width' | 'Style' | 'Color' | '' : '' = ''): { [x: string]: string} {
   if (value === 'none') return sideValue(prefixKey, '0', postFix)
   const [top = value, right = top, bottom = top, left = right] = findNumbers(value, prefixKey === 'margin').numbers
   return {
@@ -235,6 +231,7 @@ export function cornerValue (prefixKey: 'border', value: string, postFix: 'Radiu
 function isColor (value?: string) {
   if (!value) return false
   if (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl')) return true
+  if (Platform.OS === 'web' && value.match(/^\s*linear-gradient\(.*\)/s)) return true
   const CSS_COLOR_NAMES = [
     'aliceblue',
     'antiquewhite',

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,
@@ -93,6 +99,11 @@ function cssChunkToStyle (css: string) {
       case 'borderWidth':
         Object.assign(result, sideValue('border', value, key.split('border').pop() as '' | 'Width' | 'Style' | 'Color'))
         break
+      case 'outlineStyle':
+      case 'outlineColor':
+      case 'outlineWidth':
+        Object.assign(result, sideValue('outline', value, key.split('outline').pop() as '' | 'Width' | 'Style' | 'Color'))
+        break
       case 'background':
         Object.assign(result, background(value))
         break
@@ -128,6 +139,9 @@ function cssChunkToStyle (css: string) {
         // We need to replace boxShadow by shadow
         else Object.assign(result, shadow(key === 'boxShadow' ? 'shadow' : key, value))
         break
+      case 'userSelect':
+        Object.assign(result, { userSelect: value, WebkitUserSelect: value })
+        break
       // Other keys don't require any special treatment
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore

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;