rn-css 1.10.0 → 1.10.2

package/README.md

@@ -61,6 +61,7 @@ There is only partial support for `%` units as I didn't find a way to retrieve t
  * left
  * right
  * flex-basis
+ * border
 
 **`%` with `calc`, `min`, `max`**: You can try using `%` inside `calc`, `min` or `max` with the following CSS props, it should work as expected:
 

package/dist/convertUnits.js

@@ -22,7 +22,8 @@ function convertValue(key, value, units) {
     // Percentage values need to rely on an other unit as reference
     const finalUnits = { ...units };
     if (value.includes('%')) {
-        if (react_native_1.Platform.OS === 'web')
+        // Percentage is not supported on borders in web
+        if (react_native_1.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;

package/dist/cssToRN/index.js

@@ -126,8 +126,12 @@ function cssChunkToStyle(css) {
                 break;
             case 'boxShadow':
             case 'textShadow':
+                // To provide support for the 4th element (spread-radius) at least for web
+                if (react_native_1.Platform.OS === 'web')
+                    Object.assign(result, { [key]: value });
                 // We need to replace boxShadow by shadow
-                Object.assign(result, (0, convert_1.shadow)(key === 'boxShadow' ? 'shadow' : key, value));
+                else
+                    Object.assign(result, (0, convert_1.shadow)(key === 'boxShadow' ? 'shadow' : key, value));
                 break;
             // Other keys don't require any special treatment
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "scripts": {
     "test": "jest",
     "prepare": "rm -rf dist && tsc",

package/src/convertUnits.ts

@@ -21,7 +21,8 @@ export function convertValue (key: keyof PartialStyle | keyof Transform, value:
   // Percentage values need to rely on an other unit as reference
   const finalUnits = { ...units }
   if (value.includes('%')) {
-    if (Platform.OS === 'web') return value
+    // Percentage is not supported on borders in web
+    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

package/src/cssToRN/index.ts

@@ -1,4 +1,4 @@
-import { Dimensions } from 'react-native'
+import { Dimensions, Platform } from 'react-native'
 import convertStyle from '../convertStyle'
 import { CompleteStyle, Context, PartialStyle, Style, Units } from '../types'
 import { sideValue, border, borderLike, cornerValue, font, textDecoration, shadow, placeContent, flex, flexFlow, transform, background } from './convert'
@@ -123,8 +123,10 @@ function cssChunkToStyle (css: string) {
         break
       case 'boxShadow':
       case 'textShadow':
+        // To provide support for the 4th element (spread-radius) at least for web
+        if (Platform.OS === 'web') Object.assign(result, { [key]: value })
         // We need to replace boxShadow by shadow
-        Object.assign(result, shadow(key === 'boxShadow' ? 'shadow' : key, value))
+        else Object.assign(result, shadow(key === 'boxShadow' ? 'shadow' : key, value))
         break
       // Other keys don't require any special treatment
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment