rn-css 1.9.1 → 1.9.3

package/dist/src/cssToRN/convert.js

@@ -1,418 +0,0 @@
-"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.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(.
- * Optionally accept "auto" value (for margins)
- * @param value The value to check
- * @param acceptAuto true if auto is an accepted value
- * @returns true if the value is a number
- */
-function isNumber(value, acceptAuto) {
-    if (acceptAuto && value === 'auto')
-        return true;
-    return value.match(/^[+-]?(\.\d|\d|calc\(|max\(|min\()/mg);
-}
-/**
- * Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min(.
- * Optionally accept "auto" value (for margins)
- * @param value The value to check
- * @param acceptAuto true if auto is an accepted value
- * @returns true if the value is a number
- */
-/**
- * Split the value into numbers values and non numbers values
- * @param value The value to check
- * @param acceptAuto true if auto is an accepted value
- * @returns An object containing the number and non number values as arrays.
- */
-function findNumbers(value, acceptAuto) {
-    const result = {
-        nonNumbers: [],
-        numbers: []
-    };
-    let group = '';
-    value.split(/\s+/mg).forEach(val => {
-        // HACK: we prevent some parts of font-family names like "Rounded Mplus 1c" to be interpreted as numbers
-        if (val.startsWith('"') || val.startsWith("'"))
-            group = val.charAt(0);
-        if (group && val.endsWith(group))
-            group = '';
-        if (group)
-            result.nonNumbers.push(val);
-        else
-            result[isNumber(val, acceptAuto) ? 'numbers' : 'nonNumbers'].push(val);
-    });
-    return result;
-}
-/** Parse a css value for border */
-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',
-        [prefixKey + 'Color']: 'black',
-        [prefixKey + 'Style']: 'solid'
-    };
-    if (value === 'none')
-        return result;
-    values.forEach((value) => {
-        if (['solid', 'dotted', 'dashed'].includes(value))
-            result[prefixKey + 'Style'] = value;
-        else if (isNumber(value))
-            result[prefixKey + 'Width'] = value;
-        else
-            result[prefixKey + 'Color'] = value;
-    });
-    return result;
-}
-exports.borderLike = borderLike;
-function shadow(prefix, value) {
-    if (value === 'none')
-        return shadow(prefix, '0 0 0 black');
-    const { nonNumbers, numbers } = findNumbers(value);
-    return {
-        [prefix + 'Offset']: { width: numbers[0] || '0', height: numbers[1] || '0' },
-        [prefix + 'Radius']: numbers[2] || '0',
-        [prefix + 'Color']: nonNumbers[0] || 'black'
-    };
-}
-exports.shadow = shadow;
-function flex(value) {
-    const [flexGrow, flexShrink = '0', flexBasis = '0'] = value.split(/\s/g);
-    // If the only property is a not a number, its value is flexBasis. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex
-    if ((parseFloat(flexGrow) + '') !== flexGrow)
-        return { flexBasis: flexGrow };
-    // If the second property is not a number, its value is flexBasis.
-    if (((parseFloat(flexShrink) + '') !== flexShrink))
-        return { flexGrow, flexBasis: flexShrink };
-    return {
-        flexGrow, flexShrink, flexBasis
-    };
-}
-exports.flex = flex;
-function flexFlow(value) {
-    const values = value.split(/\s/g);
-    const result = {};
-    values.forEach(val => {
-        if (['wrap', 'nowrap', 'wrap-reverse'].includes(val))
-            result.flexWrap = val;
-        else if (['row', 'column', 'row-reverse', 'column-reverse'].includes(val))
-            result.flexDirection = val;
-    });
-    return result;
-}
-exports.flexFlow = flexFlow;
-function placeContent(value) {
-    const [alignContent, justifyContent = alignContent] = value.split(/\s/g);
-    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 = {
-        textDecorationLine: 'none',
-        textDecorationStyle: 'solid',
-        textDecorationColor: 'black'
-    };
-    values.forEach(value => {
-        if (['none', 'solid', 'double', 'dotted', 'dashed'].includes(value))
-            result.textDecorationStyle = value;
-        else if (['none', 'underline', 'line-through'].includes(value)) {
-            // To accept 'underline line-throught' as a value, we need to concatenate
-            if (result.textDecorationLine !== 'none')
-                result.textDecorationLine += ' ' + value;
-            else
-                result.textDecorationLine = value;
-        }
-        else
-            result.textDecorationColor = value;
-    });
-    return result;
-}
-exports.textDecoration = textDecoration;
-function read2D(prefix, value) {
-    const [x, y = x] = value.split(',').map(val => val.trim());
-    return [
-        { [prefix + 'X']: x },
-        { [prefix + 'Y']: y }
-    ];
-}
-function read3D(prefix, value) {
-    const [x, y, z] = value.split(',').map(val => val.trim());
-    const transform = [];
-    if (x)
-        transform.push({ [prefix + 'X']: x });
-    if (y)
-        transform.push({ [prefix + 'Y']: y });
-    if (z)
-        transform.push({ [prefix + 'Z']: z });
-    return transform;
-}
-function transform(value) {
-    // Parse transform operations
-    const transform = [...value.matchAll(/(\w+)\((.*?)\)/gm)].reduce((acc, val) => {
-        const operation = val[1];
-        const values = val[2].trim();
-        if (['translate', 'scale', 'skew'].includes(operation))
-            return acc.concat(read2D(operation, values));
-        else if (operation === 'rotate3d')
-            return acc.concat(read3D('rotate', values));
-        else
-            return acc.concat({ [operation]: values });
-    }, []);
-    return { transform };
-}
-exports.transform = transform;
-function font(value) {
-    const { nonNumbers, numbers } = findNumbers(value);
-    const result = {
-        fontStyle: 'normal',
-        fontWeight: 'normal'
-    };
-    for (let i = 0; i < nonNumbers.length; i++) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const val = nonNumbers.shift();
-        if (val === 'italic')
-            result.fontStyle = val;
-        else if (val === 'bold')
-            result.fontWeight = val;
-        else if (val === 'normal')
-            continue; // can be both fontStyle or fontWeight, but as it is the default we can just ignore.
-        else if (['small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums'].includes(val))
-            result.fontVariant = val;
-        else {
-            nonNumbers.unshift(val);
-            break;
-        }
-    }
-    // The font family is the last property and can contain spaces
-    if (nonNumbers.length > 0)
-        result.fontFamily = nonNumbers.join(' ');
-    // The font size is always defined and is the last number
-    const size = numbers.pop();
-    if (!size)
-        return result;
-    const [fontSize, lineHeight] = size.split('/'); // We can define the line height like this : fontSize/lineHeight
-    result.fontSize = fontSize;
-    if (lineHeight)
-        result.lineHeight = lineHeight;
-    // The font size is always after the font weight
-    if (numbers.length)
-        result.fontWeight = numbers[0];
-    return result;
-}
-exports.font = font;
-/** Parses a css value for the side of an element (border-width, margin, padding) */
-function sideValue(prefixKey, value, postFix = '') {
-    if (value === 'none')
-        return sideValue(prefixKey, '0', postFix);
-    const [top = value, right = top, bottom = top, left = right] = findNumbers(value, prefixKey === 'margin').numbers;
-    return {
-        [prefixKey + 'Top' + postFix]: top,
-        [prefixKey + 'Left' + postFix]: left,
-        [prefixKey + 'Right' + postFix]: right,
-        [prefixKey + 'Bottom' + postFix]: bottom
-    };
-}
-exports.sideValue = sideValue;
-/** Parses a css value for the corner of an element (border-radius) */
-function cornerValue(prefixKey, value, postFix) {
-    const [topLeft, topRight = topLeft, bottomRight = topLeft, bottomLeft = topRight] = findNumbers(value).numbers;
-    return {
-        [prefixKey + 'TopLeft' + postFix]: topLeft,
-        [prefixKey + 'TopRight' + postFix]: topRight,
-        [prefixKey + 'BottomLeft' + postFix]: bottomLeft,
-        [prefixKey + 'BottomRight' + postFix]: bottomRight
-    };
-}
-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/src/cssToRN/index.d.ts

@@ -1,8 +0,0 @@
-import { CompleteStyle, Style } from '../types';
-declare function cssToStyle(css: string): Style;
-export declare function cssToRNStyle(css: string, units?: {
-    em?: number;
-    width?: number;
-    height?: number;
-}): CompleteStyle;
-export default cssToStyle;

package/dist/src/cssToRN/index.js

@@ -1,140 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cssToRNStyle = void 0;
-const react_native_1 = require("react-native");
-const convertStyle_1 = __importDefault(require("../convertStyle"));
-const convert_1 = require("./convert");
-const mediaQueries_1 = require("./mediaQueries");
-function kebab2camel(string) {
-    return string.replace(/-./g, x => x.toUpperCase()[1]);
-}
-function stripSpaces(string) {
-    return string.replace(/(calc|max|min|rgb|rgba)\(.*?\)/mg, res => res.replace(/\s/g, ''));
-}
-function cssToStyle(css) {
-    const result = {};
-    // 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;
-        if (!result.media)
-            result.media = [];
-        result.media.push(mediaQuery);
-        return '';
-    });
-    // 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 '';
-    });
-    // Find active (we don't support active within media queries) (We use [\s\S] instead of . because dotall flag (s) is not supported by react-native-windows)
-    const cssWithoutActive = cssWithoutHover.replace(/&:active\s*{([\s\S]*?)}/gmi, res => {
-        const activeInstructions = res.substring(0, res.length - 1).replace(/&:active\s*{/mi, ''); // We remove the `&:active {` and `}`
-        result.active = cssChunkToStyle(activeInstructions);
-        return '';
-    });
-    // Find focus (we don't support focus within media queries) (We use [\s\S] instead of . because dotall flag (s) is not supported by react-native-windows)
-    const cssWithoutFocus = cssWithoutActive.replace(/&:focus\s*{([\s\S]*?)}/gmi, res => {
-        const activeInstructions = res.substring(0, res.length - 1).replace(/&:focus\s*{/mi, ''); // We remove the `&:focus {` and `}`
-        result.focus = cssChunkToStyle(activeInstructions);
-        return '';
-    });
-    Object.assign(result, cssChunkToStyle(cssWithoutFocus));
-    return result;
-}
-function cssToRNStyle(css, units = {}) {
-    const { width, height } = react_native_1.Dimensions.get('window');
-    const finalUnits = {
-        em: 16,
-        '%': 0.01,
-        vw: width / 100,
-        vh: height / 100,
-        vmin: Math.min(width, height) / 100,
-        vmax: Math.max(width, height) / 100,
-        width: 100,
-        height: 100,
-        rem: 16,
-        px: 1,
-        pt: 96 / 72,
-        in: 96,
-        pc: 16,
-        cm: 96 / 2.54,
-        mm: 96 / 25.4,
-        ...units
-    };
-    const rnStyle = cssChunkToStyle(css);
-    return (0, convertStyle_1.default)(rnStyle, finalUnits);
-}
-exports.cssToRNStyle = cssToRNStyle;
-function cssChunkToStyle(css) {
-    const result = {};
-    css.split(/\s*;\s*(?!base64)/mg).forEach((entry) => {
-        const [rawKey, ...rest] = entry.split(':');
-        const rawValue = rest.join(':');
-        if (!rawValue)
-            return;
-        const key = kebab2camel(rawKey.trim());
-        const value = stripSpaces(rawValue.trim()); // We need this to correctly read calc() values
-        switch (key) {
-            case 'border':
-                Object.assign(result, (0, convert_1.border)(value));
-                break;
-            case 'borderTop':
-            case 'borderLeft':
-            case 'borderRight':
-            case 'borderBottom':
-            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, key.split('border').pop()));
-                break;
-            case 'background':
-                Object.assign(result, (0, convert_1.background)(value));
-                break;
-            case 'padding':
-            case 'margin':
-                Object.assign(result, (0, convert_1.sideValue)(key, value));
-                break;
-            case 'borderRadius':
-                Object.assign(result, (0, convert_1.cornerValue)('border', value, 'Radius'));
-                break;
-            case 'font':
-                Object.assign(result, (0, convert_1.font)(value));
-                break;
-            case 'textDecoration':
-                Object.assign(result, (0, convert_1.textDecoration)(value));
-                break;
-            case 'placeContent':
-                Object.assign(result, (0, convert_1.placeContent)(value));
-                break;
-            case 'flex':
-                Object.assign(result, (0, convert_1.flex)(value));
-                break;
-            case 'flexFlow':
-                Object.assign(result, (0, convert_1.flexFlow)(value));
-                break;
-            case 'transform':
-                Object.assign(result, (0, convert_1.transform)(value));
-                break;
-            case 'boxShadow':
-            case 'textShadow':
-                // We need to replace boxShadow by shadow
-                Object.assign(result, (0, convert_1.shadow)(key === 'boxShadow' ? 'shadow' : key, value));
-                break;
-            // Other keys don't require any special treatment
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            default: result[key] = value;
-        }
-    });
-    return result;
-}
-exports.default = cssToStyle;

package/dist/src/cssToRN/maths.d.ts

@@ -1,4 +0,0 @@
-/** Evaluate the string operation without relying on eval */
-export declare function calculate(string: string): number;
-export declare function min(string: string): number;
-export declare function max(string: string): number;

package/dist/src/cssToRN/maths.js

@@ -1,86 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.max = exports.min = exports.calculate = void 0;
-/** Evaluate the string operation without relying on eval */
-function calculate(string) {
-    function applyOperator(left, op, right) {
-        if (op === '+')
-            return left + right;
-        else if (op === '-')
-            return left - right;
-        else if (op === '*')
-            return left * right;
-        else if (op === '/')
-            return left / right;
-        else
-            return right || left;
-    }
-    function evaluate(root) {
-        switch (root.type) {
-            case 'group': return evaluate(root.right);
-            case 'additive':
-            case 'multiplicative':
-                return applyOperator(evaluate(root.left), root.operation, evaluate(root.right));
-            case 'number': return parseFloat(root.value);
-        }
-    }
-    const rootNode = { type: 'group' };
-    let currentNode = rootNode;
-    function openGroup() {
-        const newGroup = { type: 'group', parent: currentNode };
-        currentNode.right = newGroup;
-        currentNode = newGroup;
-    }
-    function closeGroup() {
-        while (currentNode.type !== 'group')
-            currentNode = currentNode.parent;
-        currentNode = currentNode.parent;
-    }
-    function addNumber(char) {
-        const currentNumber = currentNode.right;
-        if (currentNumber === undefined)
-            currentNode.right = { type: 'number', value: char };
-        else
-            currentNumber.value += char;
-    }
-    function addOperator(char) {
-        const additive = '+-'.includes(char);
-        const priority = additive ? 1 : 2;
-        // If it is a sign and not an operation, we add it to the comming number
-        if (additive && !currentNode.right)
-            return addNumber(char);
-        while (currentNode.priority && (currentNode.priority >= priority))
-            currentNode = currentNode.parent;
-        const operator = {
-            type: additive ? 'additive' : 'multiplicative',
-            priority,
-            parent: currentNode,
-            operation: char,
-            left: currentNode.right
-        };
-        currentNode.right = operator;
-        currentNode = operator;
-    }
-    string.split('').forEach(char => {
-        if (char === '(')
-            openGroup();
-        else if (char === ')')
-            closeGroup();
-        else if ('0123456789.'.includes(char))
-            addNumber(char);
-        else if ('+*-/'.includes(char))
-            addOperator(char);
-    });
-    return evaluate(rootNode);
-}
-exports.calculate = calculate;
-function min(string) {
-    const values = string.split(',').map(val => parseFloat(val.trim()));
-    return Math.min(...values);
-}
-exports.min = min;
-function max(string) {
-    const values = string.split(',').map(val => parseFloat(val.trim()));
-    return Math.max(...values);
-}
-exports.max = max;

package/dist/src/cssToRN/mediaQueries.d.ts

@@ -1,7 +0,0 @@
-import type { Units, Context } from '../types';
-export declare function createContext(units: Units): Context;
-export declare type Evaluation = (context: Context) => boolean;
-export declare const createMedia: (query: string) => {
-    css: string;
-    isValid: Evaluation;
-};