rn-css 1.6.14-2 → 1.6.16

package/dist/convertUnits.js

@@ -50,8 +50,8 @@ function convertValue(key, value, units) {
     const convertedValue = value.replace(/(\b\d+(\.\d+)?)([a-z]+\b|%)/ig, occ => {
         const [val, unit] = parseValue(occ);
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        if (['deg', 'rad', 'turn'].includes(unit))
-            return occ; // We don't want to convert deg and rad units
+        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']) + '';
     });
     // We handle extra calculations (calc, min, max, parsing...)

package/dist/cssToRN/convert.d.ts

@@ -1,6 +1,10 @@
 import type { Style, Transform } from '../types';
 /** Parse a css value for border */
-export declare function border(prefixKey: 'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'outline', value: string): {
+export declare function border(value: string): {
+    [x: string]: string;
+};
+/** Parse a css value for border-like elements */
+export declare function borderLike(prefixKey: 'outline' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom', value: string): {
     [x: string]: string;
 };
 export declare function shadow(prefix: 'textShadow' | 'shadow', value: string): {
@@ -42,7 +46,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(prefixKey: 'padding' | 'margin' | 'border', value: string, postFix?: 'Width' | ''): {
+export declare function sideValue<T extends 'padding' | 'margin' | 'border'>(prefixKey: T, value: string, postFix?: T extends 'border' ? 'Width' | 'Style' | 'Color' | '' : ''): {
     [x: string]: string;
 };
 /** Parses a css value for the corner of an element (border-radius) */

package/dist/cssToRN/convert.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cornerValue = exports.sideValue = exports.font = exports.transform = exports.textDecoration = exports.background = exports.placeContent = exports.flexFlow = exports.flex = exports.shadow = exports.border = void 0;
+exports.cornerValue = exports.sideValue = exports.font = exports.transform = exports.textDecoration = exports.background = exports.placeContent = exports.flexFlow = exports.flex = exports.shadow = exports.borderLike = exports.border = void 0;
 /** Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min( */
 function isNumber(value) {
     return value.match(/^[+-]?(\.\d|\d|calc\(|max\(|min\()/mg);
@@ -26,7 +26,33 @@ function findNumbers(value) {
     return result;
 }
 /** Parse a css value for border */
-function border(prefixKey, value) {
+function border(value) {
+    const values = value.split(/\s+/mg);
+    const result = {
+        borderWidth: '0',
+        borderColor: 'black',
+        borderStyle: 'solid'
+    };
+    values.forEach((value) => {
+        if (['solid', 'dotted', 'dashed'].includes(value))
+            result.borderStyle = value;
+        else if (isNumber(value))
+            result.borderWidth = value;
+        // eslint-disable-next-line no-useless-return
+        else if (value === 'none')
+            return;
+        else
+            result.borderColor = value;
+    });
+    return {
+        ...sideValue('border', result.borderWidth, 'Width'),
+        ...sideValue('border', result.borderColor, 'Color'),
+        ...sideValue('border', result.borderStyle, 'Style')
+    };
+}
+exports.border = border;
+/** Parse a css value for border-like elements */
+function borderLike(prefixKey, value) {
     const values = value.split(/\s+/mg);
     const result = {
         [prefixKey + 'Width']: '0',
@@ -45,7 +71,7 @@ function border(prefixKey, value) {
     });
     return result;
 }
-exports.border = border;
+exports.borderLike = borderLike;
 function shadow(prefix, value) {
     if (value === 'none')
         return shadow(prefix, '0 0 0 black');
@@ -193,7 +219,7 @@ exports.font = font;
 function sideValue(prefixKey, value, postFix = '') {
     if (value === 'none')
         return sideValue(prefixKey, '0', postFix);
-    const [top, right = top, bottom = top, left = right] = findNumbers(value).numbers;
+    const [top = value, right = top, bottom = top, left = right] = findNumbers(value).numbers;
     return {
         [prefixKey + 'Top' + postFix]: top,
         [prefixKey + 'Left' + postFix]: left,

package/dist/cssToRN/index.js

@@ -69,16 +69,20 @@ function cssChunkToStyle(css) {
         const key = kebab2camel(rawKey.trim());
         const value = stripSpaces(rawValue.trim()); // We need this to correctly read calc() values
         switch (key) {
-            case 'outline':
             case 'border':
+                Object.assign(result, (0, convert_1.border)(value));
+                break;
             case 'borderTop':
             case 'borderLeft':
             case 'borderRight':
             case 'borderBottom':
-                Object.assign(result, (0, convert_1.border)(key, value));
+            case 'outline':
+                Object.assign(result, (0, convert_1.borderLike)(key, value));
                 break;
+            case 'borderStyle':
+            case 'borderColor':
             case 'borderWidth':
-                Object.assign(result, (0, convert_1.sideValue)('border', value, 'Width'));
+                Object.assign(result, (0, convert_1.sideValue)('border', value, key.split('border').pop()));
                 break;
             case 'background':
                 Object.assign(result, (0, convert_1.background)(value));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.6.14-2",
+  "version": "1.6.16",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",

package/src/convertUnits.ts

@@ -41,7 +41,7 @@ export function convertValue (key: keyof PartialStyle | keyof Transform, value:
   const convertedValue = value.replace(/(\b\d+(\.\d+)?)([a-z]+\b|%)/ig, occ => {
     const [val, unit] = parseValue(occ)
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    if (['deg', 'rad', 'turn'].includes(unit!)) return occ // We don't want to convert deg and rad units
+    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']!) + ''
   })
 

package/src/cssToRN/convert.ts

@@ -23,7 +23,29 @@ function findNumbers (value: string) {
 }
 
 /** Parse a css value for border */
-export function border (prefixKey: 'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'outline', value: string): { [x:string]: string } {
+export function border (value: string): { [x:string]: string } {
+  const values = value.split(/\s+/mg)
+  const result = {
+    borderWidth: '0',
+    borderColor: 'black',
+    borderStyle: 'solid'
+  }
+  values.forEach((value: string) => {
+    if (['solid', 'dotted', 'dashed'].includes(value)) result.borderStyle = value
+    else if (isNumber(value)) result.borderWidth = value
+    // eslint-disable-next-line no-useless-return
+    else if (value === 'none') return
+    else result.borderColor = value
+  })
+  return {
+    ...sideValue('border', result.borderWidth, 'Width'),
+    ...sideValue('border', result.borderColor, 'Color'),
+    ...sideValue('border', result.borderStyle, 'Style')
+  }
+}
+
+/** Parse a css value for border-like elements */
+export function borderLike (prefixKey: 'outline' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom', value: string): { [x:string]: string } {
   const values = value.split(/\s+/mg)
   const result = {
     [prefixKey + 'Width']: '0',
@@ -164,9 +186,9 @@ export function font (value: string) {
 }
 
 /** Parses a css value for the side of an element (border-width, margin, padding) */
-export function sideValue (prefixKey: 'padding' | 'margin' | 'border', value: string, postFix: 'Width' | '' = ''): { [x: string]: string} {
+export function sideValue <T extends 'padding' | 'margin' | 'border'> (prefixKey: T, value: string, postFix: T extends 'border' ? 'Width' | 'Style' | 'Color' | '' : '' = ''): { [x: string]: string} {
   if (value === 'none') return sideValue(prefixKey, '0', postFix)
-  const [top, right = top, bottom = top, left = right] = findNumbers(value).numbers
+  const [top = value, right = top, bottom = top, left = right] = findNumbers(value).numbers
   return {
     [prefixKey + 'Top' + postFix]: top,
     [prefixKey + 'Left' + postFix]: left,

package/src/cssToRN/index.ts

@@ -1,7 +1,7 @@
 import { Dimensions } from 'react-native'
 import convertStyle from '../convertStyle'
 import type { Context, PartialStyle, Style, Units } from '../types'
-import { sideValue, border, cornerValue, font, textDecoration, shadow, placeContent, flex, flexFlow, transform, background } from './convert'
+import { sideValue, border, borderLike, cornerValue, font, textDecoration, shadow, placeContent, flex, flexFlow, transform, background } from './convert'
 import { createMedia } from './mediaQueries'
 
 function kebab2camel (string: string) {
@@ -66,16 +66,20 @@ function cssChunkToStyle (css: string) {
     const key = kebab2camel(rawKey.trim())
     const value = stripSpaces(rawValue.trim())// We need this to correctly read calc() values
     switch (key) {
-      case 'outline':
       case 'border':
+        Object.assign(result, border(value))
+        break
       case 'borderTop':
       case 'borderLeft':
       case 'borderRight':
       case 'borderBottom':
-        Object.assign(result, border(key, value))
+      case 'outline':
+        Object.assign(result, borderLike(key, value))
         break
+      case 'borderStyle':
+      case 'borderColor':
       case 'borderWidth':
-        Object.assign(result, sideValue('border', value, 'Width'))
+        Object.assign(result, sideValue('border', value, key.split('border').pop() as '' | 'Width' | 'Style' | 'Color'))
         break
       case 'background':
         Object.assign(result, background(value))