rn-css 1.6.13 → 1.6.14-2

package/dist/cssToRN/index.js

@@ -16,8 +16,8 @@ function stripSpaces(string) {
 }
 function cssToStyle(css) {
     const result = {};
-    // Find media queries
-    const cssWithoutMediaQueries = css.replace(/@media(.*?){[^{}]*}/gmis, res => {
+    // Find media queries (We use [\s\S] instead of . because dotall flag (s) is not supported by react-native-windows)
+    const cssWithoutMediaQueries = css.replace(/@media([\s\S]*?){[^{}]*}/gmi, res => {
         const { css, isValid } = (0, mediaQueries_1.createMedia)(res);
         const style = cssChunkToStyle(css);
         const mediaQuery = (context) => isValid(context) && style;
@@ -26,9 +26,9 @@ function cssToStyle(css) {
         result.media.push(mediaQuery);
         return '';
     });
-    // Find hover (we don't support hover within media queries)
-    const cssWithoutHover = cssWithoutMediaQueries.replace(/&:hover\s*{(.*?)}/gmis, res => {
-        const hoverInstructions = res.substring(0, res.length - 1).replace(/&:hover\s*{/mis, ''); // We remove the `&:hover {` and `}`
+    // Find hover (we don't support hover within media queries) (We use [\s\S] instead of . because dotall flag (s) is not supported by react-native-windows)
+    const cssWithoutHover = cssWithoutMediaQueries.replace(/&:hover\s*{([\s\S]*?)}/gmi, res => {
+        const hoverInstructions = res.substring(0, res.length - 1).replace(/&:hover\s*{/mi, ''); // We remove the `&:hover {` and `}`
         result.hover = cssChunkToStyle(hoverInstructions);
         return '';
     });

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.13",
+  "version": "1.6.14-2",
   "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/index.ts

@@ -14,8 +14,8 @@ function stripSpaces (string: string) {
 
 function cssToStyle (css: string) {
   const result: Style = {}
-  // Find media queries
-  const cssWithoutMediaQueries = css.replace(/@media(.*?){[^{}]*}/gmis, res => {
+  // Find media queries (We use [\s\S] instead of . because dotall flag (s) is not supported by react-native-windows)
+  const cssWithoutMediaQueries = css.replace(/@media([\s\S]*?){[^{}]*}/gmi, res => {
     const { css, isValid } = createMedia(res)
     const style = cssChunkToStyle(css)
     const mediaQuery = (context: Context) => isValid(context) && style
@@ -23,9 +23,9 @@ function cssToStyle (css: string) {
     result.media!.push(mediaQuery)
     return ''
   })
-  // Find hover (we don't support hover within media queries)
-  const cssWithoutHover = cssWithoutMediaQueries.replace(/&:hover\s*{(.*?)}/gmis, res => {
-    const hoverInstructions = res.substring(0, res.length - 1).replace(/&:hover\s*{/mis, '')// We remove the `&:hover {` and `}`
+  // Find hover (we don't support hover within media queries) (We use [\s\S] instead of . because dotall flag (s) is not supported by react-native-windows)
+  const cssWithoutHover = cssWithoutMediaQueries.replace(/&:hover\s*{([\s\S]*?)}/gmi, res => {
+    const hoverInstructions = res.substring(0, res.length - 1).replace(/&:hover\s*{/mi, '')// We remove the `&:hover {` and `}`
     result.hover = cssChunkToStyle(hoverInstructions)
     return ''
   })

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