rn-css 1.10.0 → 1.10.1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "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