rn-css 1.6.11 → 1.6.14-0

package/dist/cssToRN/convert.d.ts

@@ -29,6 +29,9 @@ export declare function placeContent(value: string): {
     alignContent: string;
     justifyContent: string;
 };
+export declare function background(value: string): {
+    backgroundColor: string | undefined;
+};
 export declare function textDecoration(value: string): {
     textDecorationLine: string;
     textDecorationStyle: string;

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.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.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);
@@ -87,6 +87,13 @@ function placeContent(value) {
     return { alignContent, justifyContent };
 }
 exports.placeContent = placeContent;
+function background(value) {
+    const values = value.split(/\s+/mg);
+    const color = values.pop();
+    // The background-color is the only one that we support and it's the last value
+    return { backgroundColor: isColor(color) ? color : 'transparent' };
+}
+exports.background = background;
 function textDecoration(value) {
     const values = value.split(/\s+/mg);
     const result = {
@@ -206,3 +213,160 @@ function cornerValue(prefixKey, value, postFix) {
     };
 }
 exports.cornerValue = cornerValue;
+function isColor(value) {
+    if (!value)
+        return false;
+    if (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl'))
+        return true;
+    const CSS_COLOR_NAMES = [
+        'aliceblue',
+        'antiquewhite',
+        'aqua',
+        'aquamarine',
+        'azure',
+        'beige',
+        'bisque',
+        'black',
+        'blanchedalmond',
+        'blue',
+        'blueviolet',
+        'brown',
+        'burlywood',
+        'cadetblue',
+        'chartreuse',
+        'chocolate',
+        'coral',
+        'cornflowerblue',
+        'cornsilk',
+        'crimson',
+        'cyan',
+        'darkblue',
+        'darkcyan',
+        'darkgoldenrod',
+        'darkgray',
+        'darkgrey',
+        'darkgreen',
+        'darkkhaki',
+        'darkmagenta',
+        'darkolivegreen',
+        'darkorange',
+        'darkorchid',
+        'darkred',
+        'darksalmon',
+        'darkseagreen',
+        'darkslateblue',
+        'darkslategray',
+        'darkslategrey',
+        'darkturquoise',
+        'darkviolet',
+        'deeppink',
+        'deepskyblue',
+        'dimgray',
+        'dimgrey',
+        'dodgerblue',
+        'firebrick',
+        'floralwhite',
+        'forestgreen',
+        'fuchsia',
+        'gainsboro',
+        'ghostwhite',
+        'gold',
+        'goldenrod',
+        'gray',
+        'grey',
+        'green',
+        'greenyellow',
+        'honeydew',
+        'hotpink',
+        'indianred',
+        'indigo',
+        'ivory',
+        'khaki',
+        'lavender',
+        'lavenderblush',
+        'lawngreen',
+        'lemonchiffon',
+        'lightblue',
+        'lightcoral',
+        'lightcyan',
+        'lightgoldenrodyellow',
+        'lightgray',
+        'lightgrey',
+        'lightgreen',
+        'lightpink',
+        'lightsalmon',
+        'lightseagreen',
+        'lightskyblue',
+        'lightslategray',
+        'lightslategrey',
+        'lightsteelblue',
+        'lightyellow',
+        'lime',
+        'limegreen',
+        'linen',
+        'magenta',
+        'maroon',
+        'mediumaquamarine',
+        'mediumblue',
+        'mediumorchid',
+        'mediumpurple',
+        'mediumseagreen',
+        'mediumslateblue',
+        'mediumspringgreen',
+        'mediumturquoise',
+        'mediumvioletred',
+        'midnightblue',
+        'mintcream',
+        'mistyrose',
+        'moccasin',
+        'navajowhite',
+        'navy',
+        'oldlace',
+        'olive',
+        'olivedrab',
+        'orange',
+        'orangered',
+        'orchid',
+        'palegoldenrod',
+        'palegreen',
+        'paleturquoise',
+        'palevioletred',
+        'papayawhip',
+        'peachpuff',
+        'peru',
+        'pink',
+        'plum',
+        'powderblue',
+        'purple',
+        'rebeccapurple',
+        'red',
+        'rosybrown',
+        'royalblue',
+        'saddlebrown',
+        'salmon',
+        'sandybrown',
+        'seagreen',
+        'seashell',
+        'sienna',
+        'silver',
+        'skyblue',
+        'slateblue',
+        'slategray',
+        'slategrey',
+        'snow',
+        'springgreen',
+        'steelblue',
+        'tan',
+        'teal',
+        'thistle',
+        'tomato',
+        'turquoise',
+        'violet',
+        'wheat',
+        'white',
+        'whitesmoke',
+        'yellow',
+        'yellowgreen'
+    ];
+    return CSS_COLOR_NAMES.includes(value);
+}

package/dist/cssToRN/index.js

@@ -81,7 +81,7 @@ function cssChunkToStyle(css) {
                 Object.assign(result, (0, convert_1.sideValue)('border', value, 'Width'));
                 break;
             case 'background':
-                Object.assign(result, { backgroundColor: value });
+                Object.assign(result, (0, convert_1.background)(value));
                 break;
             case 'padding':
             case 'margin':

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as RN from 'react-native';
+import './polyfill';
 export { cssToRNStyle } from './cssToRN';
 export { SharedValue, FontSizeContext, RemContext } from './styleComponent';
 export * from './useTheme';

package/dist/index.js

@@ -24,6 +24,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RemContext = exports.FontSizeContext = exports.SharedValue = exports.cssToRNStyle = void 0;
 const RN = __importStar(require("react-native"));
+require("./polyfill");
 const styleComponent_1 = __importStar(require("./styleComponent"));
 var cssToRN_1 = require("./cssToRN");
 Object.defineProperty(exports, "cssToRNStyle", { enumerable: true, get: function () { return cssToRN_1.cssToRNStyle; } });

package/dist/polyfill.d.ts

@@ -0,0 +1,3 @@
+/** polyfill for Node < 12 */
+declare function flat<A, D extends number = 1>(array: A, depth?: number): FlatArray<A, D>[];
+declare function matchAll(str: string, regex: RegExp): IterableIterator<RegExpMatchArray>;

package/dist/polyfill.js

@@ -0,0 +1,23 @@
+"use strict";
+/** polyfill for Node < 12 */
+// eslint-disable-next-line no-extend-native
+if (!Array.prototype.flat)
+    Array.prototype.flat = function (depth) { return flat(this, depth); };
+// eslint-disable-next-line no-extend-native
+if (!String.prototype.matchAll)
+    String.prototype.matchAll = function (regex) { return matchAll(this, regex); };
+/** polyfill for Node < 12 */
+function flat(array, depth = 1) {
+    if (!depth || depth < 1 || !Array.isArray(array))
+        return array;
+    return array.reduce((result, current) => result.concat(flat(current, depth - 1)), []);
+}
+function matchAll(str, regex) {
+    const matches = [];
+    let groups;
+    // eslint-disable-next-line no-cond-assign
+    while (groups = regex.exec(str)) {
+        matches.push(groups);
+    }
+    return matches[Symbol.iterator]();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.6.11",
+  "version": "1.6.14-0",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",
@@ -53,9 +53,9 @@
     "ts-jest": "^27.1.1",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.4",
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.6.0"
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.8.1"
   },
   "jest": {
     "preset": "react-native"

package/src/cssToRN/convert.ts

@@ -75,6 +75,13 @@ export function placeContent (value: string) {
   return { alignContent, justifyContent }
 }
 
+export function background (value: string) {
+  const values = value.split(/\s+/mg)
+  const color = values.pop()
+  // The background-color is the only one that we support and it's the last value
+  return { backgroundColor: isColor(color) ? color : 'transparent' }
+}
+
 export function textDecoration (value: string) {
   const values = value.split(/\s+/mg)
   const result = {
@@ -178,3 +185,159 @@ export function cornerValue (prefixKey: 'border', value: string, postFix: 'Radiu
     [prefixKey + 'BottomRight' + postFix]: bottomRight
   }
 }
+
+function isColor (value?: string) {
+  if (!value) return false
+  if (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl')) return true
+  const CSS_COLOR_NAMES = [
+    'aliceblue',
+    'antiquewhite',
+    'aqua',
+    'aquamarine',
+    'azure',
+    'beige',
+    'bisque',
+    'black',
+    'blanchedalmond',
+    'blue',
+    'blueviolet',
+    'brown',
+    'burlywood',
+    'cadetblue',
+    'chartreuse',
+    'chocolate',
+    'coral',
+    'cornflowerblue',
+    'cornsilk',
+    'crimson',
+    'cyan',
+    'darkblue',
+    'darkcyan',
+    'darkgoldenrod',
+    'darkgray',
+    'darkgrey',
+    'darkgreen',
+    'darkkhaki',
+    'darkmagenta',
+    'darkolivegreen',
+    'darkorange',
+    'darkorchid',
+    'darkred',
+    'darksalmon',
+    'darkseagreen',
+    'darkslateblue',
+    'darkslategray',
+    'darkslategrey',
+    'darkturquoise',
+    'darkviolet',
+    'deeppink',
+    'deepskyblue',
+    'dimgray',
+    'dimgrey',
+    'dodgerblue',
+    'firebrick',
+    'floralwhite',
+    'forestgreen',
+    'fuchsia',
+    'gainsboro',
+    'ghostwhite',
+    'gold',
+    'goldenrod',
+    'gray',
+    'grey',
+    'green',
+    'greenyellow',
+    'honeydew',
+    'hotpink',
+    'indianred',
+    'indigo',
+    'ivory',
+    'khaki',
+    'lavender',
+    'lavenderblush',
+    'lawngreen',
+    'lemonchiffon',
+    'lightblue',
+    'lightcoral',
+    'lightcyan',
+    'lightgoldenrodyellow',
+    'lightgray',
+    'lightgrey',
+    'lightgreen',
+    'lightpink',
+    'lightsalmon',
+    'lightseagreen',
+    'lightskyblue',
+    'lightslategray',
+    'lightslategrey',
+    'lightsteelblue',
+    'lightyellow',
+    'lime',
+    'limegreen',
+    'linen',
+    'magenta',
+    'maroon',
+    'mediumaquamarine',
+    'mediumblue',
+    'mediumorchid',
+    'mediumpurple',
+    'mediumseagreen',
+    'mediumslateblue',
+    'mediumspringgreen',
+    'mediumturquoise',
+    'mediumvioletred',
+    'midnightblue',
+    'mintcream',
+    'mistyrose',
+    'moccasin',
+    'navajowhite',
+    'navy',
+    'oldlace',
+    'olive',
+    'olivedrab',
+    'orange',
+    'orangered',
+    'orchid',
+    'palegoldenrod',
+    'palegreen',
+    'paleturquoise',
+    'palevioletred',
+    'papayawhip',
+    'peachpuff',
+    'peru',
+    'pink',
+    'plum',
+    'powderblue',
+    'purple',
+    'rebeccapurple',
+    'red',
+    'rosybrown',
+    'royalblue',
+    'saddlebrown',
+    'salmon',
+    'sandybrown',
+    'seagreen',
+    'seashell',
+    'sienna',
+    'silver',
+    'skyblue',
+    'slateblue',
+    'slategray',
+    'slategrey',
+    'snow',
+    'springgreen',
+    'steelblue',
+    'tan',
+    'teal',
+    'thistle',
+    'tomato',
+    'turquoise',
+    'violet',
+    'wheat',
+    'white',
+    'whitesmoke',
+    'yellow',
+    'yellowgreen'
+  ]
+  return CSS_COLOR_NAMES.includes(value)
+}

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 } from './convert'
+import { sideValue, border, cornerValue, font, textDecoration, shadow, placeContent, flex, flexFlow, transform, background } from './convert'
 import { createMedia } from './mediaQueries'
 
 function kebab2camel (string: string) {
@@ -78,7 +78,7 @@ function cssChunkToStyle (css: string) {
         Object.assign(result, sideValue('border', value, 'Width'))
         break
       case 'background':
-        Object.assign(result, { backgroundColor: value })
+        Object.assign(result, background(value))
         break
       case 'padding':
       case 'margin':

package/src/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import * as RN from 'react-native'
+import './polyfill'
 import styledComponent, { styledFlatList, styledSectionList, styledVirtualizedList } from './styleComponent'
 export { cssToRNStyle } from './cssToRN'
 export { SharedValue, FontSizeContext, RemContext } from './styleComponent'

package/src/polyfill.ts

@@ -0,0 +1,23 @@
+/** polyfill for Node < 12 */
+// eslint-disable-next-line no-extend-native
+if (!Array.prototype.flat) Array.prototype.flat = function <A, D extends number = 1> (depth?: number) { return flat<A, D>(this as unknown as A, depth) }
+// eslint-disable-next-line no-extend-native
+if (!String.prototype.matchAll) String.prototype.matchAll = function (regex: RegExp) { return matchAll(this as unknown as string, regex) }
+
+/** polyfill for Node < 12 */
+function flat <A, D extends number = 1> (array: A, depth = 1): FlatArray<A, D>[] {
+  if (!depth || depth < 1 || !Array.isArray(array)) return array as unknown as FlatArray<A, D>[]
+  return array.reduce((result, current) => result.concat(flat(current as unknown as unknown[], depth - 1)),
+    []
+  ) as FlatArray<A, D>[]
+}
+
+function matchAll (str: string, regex: RegExp): IterableIterator<RegExpMatchArray> {
+  const matches = []
+  let groups
+  // eslint-disable-next-line no-cond-assign
+  while (groups = regex.exec(str)) {
+    matches.push(groups)
+  }
+  return matches[Symbol.iterator]()
+}