rn-css 1.6.12 → 1.6.14-1

package/dist/cssToRN/convert.js

@@ -89,8 +89,9 @@ function placeContent(value) {
 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: values.pop() };
+    return { backgroundColor: isColor(color) ? color : 'transparent' };
 }
 exports.background = background;
 function textDecoration(value) {
@@ -212,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/mediaQueries.js

@@ -101,7 +101,7 @@ function parseConstraintValue(constraintString) {
     return (context) => evaluateConstraint(constraint, context);
 }
 function parse(constraint, previous) {
-    const result = constraint.match(/\sand\s|,|\sonly\s|\(|\snot\s/ims);
+    const result = constraint.match(/\sand\s|,|\sonly\s|\(|\snot\s/im);
     if (!result) {
         // If we reached the end of the string, we just return the last constraint
         if (constraint.match(/\w/))
@@ -147,7 +147,8 @@ function parse(constraint, previous) {
     }
 }
 const createMedia = (query) => {
-    const parsed = query.match(/@media(.*?){([^{}]*)}/mis);
+    // We use [\s\S] instead of dotall flag (s) because it is not supported by react-native-windows
+    const parsed = query.match(/@media([\s\S]*?){([^{}]*)}/mi);
     if (!parsed)
         throw new Error(`Parsing error: check the syntax of media query ${query}.`);
     const [, constraints, css] = parsed;

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.12",
+  "version": "1.6.14-1",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",
@@ -9,7 +9,7 @@
     "start": "react-native start",
     "lint": "eslint --fix .",
     "build": "webpack",
-    "release": "release-it",
+    "release": "npm run prepare && release-it",
     "web": "webpack serve --open --mode development"
   },
   "peerDependencies": {
@@ -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

@@ -77,8 +77,9 @@ export function placeContent (value: string) {
 
 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: values.pop() }
+  return { backgroundColor: isColor(color) ? color : 'transparent' }
 }
 
 export function textDecoration (value: string) {
@@ -184,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/mediaQueries.ts

@@ -159,7 +159,7 @@ function parseConstraintValue (constraintString: string): Evaluation {
 export type Evaluation = (context: Context) => boolean
 
 function parse (constraint: string, previous?: Evaluation): Evaluation {
-  const result = constraint.match(/\sand\s|,|\sonly\s|\(|\snot\s/ims)
+  const result = constraint.match(/\sand\s|,|\sonly\s|\(|\snot\s/im)
 
   if (!result) {
     // If we reached the end of the string, we just return the last constraint
@@ -206,7 +206,8 @@ function parse (constraint: string, previous?: Evaluation): Evaluation {
 }
 
 export const createMedia = (query: string) => {
-  const parsed = query.match(/@media(.*?){([^{}]*)}/mis)
+  // We use [\s\S] instead of dotall flag (s) because it is not supported by react-native-windows
+  const parsed = query.match(/@media([\s\S]*?){([^{}]*)}/mi)
   if (!parsed) throw new Error(`Parsing error: check the syntax of media query ${query}.`)
   const [, constraints, css] = parsed
   const isValid = parse(constraints)

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]()
+}