bootstrap-rn 0.3.0 → 0.3.1

package/src/style/parse/rules/declaration.js

@@ -0,0 +1,73 @@
+import isIdent from '../isIdent';
+import isWhitespace from '../isWhitespace';
+
+const breaksDeclaration = (char) =>
+  typeof char !== 'function' &&
+  char !== '$' &&
+  char !== ';' &&
+  char !== '}' &&
+  // char !== '(' &&
+  char !== '';
+
+const declaration = {
+  locate(input) {
+    return /[a-z_]/i.test(input.peek());
+  },
+  read(input) {
+    // Parse name.
+    const name = input.charsWhile(isIdent);
+
+    // Parse whitespaces, separator
+    input.charsWhile(isWhitespace);
+    input.read(':');
+    input.charsWhile(isWhitespace, true);
+
+    // Parse value.
+    const value = [];
+
+    do {
+      // Add function to resolve variable.
+      if (input.peek() === '$') {
+        input.read('$');
+
+        const variableName = input.charsWhile(isIdent);
+
+        value.push((variables) => {
+          if (variables[variableName] === undefined) {
+            throw new Error(`Variable $${variableName} is not defined.`);
+          }
+
+          return variables[variableName];
+        });
+      }
+
+      // Add function.
+      if (typeof input.peek() === 'function') {
+        value.push(input.read());
+      }
+
+      const part = input.charsWhile(breaksDeclaration, true);
+
+      // TODO: Parse functions
+      /* if (input.peek() === '(') {
+
+      } */
+
+      if (part.length > 0) {
+        value.push(part);
+      }
+    } while (input.peek() === '$' || typeof input.peek() === 'function');
+
+    if (input.peek() === ';') {
+      input.read(';');
+    }
+
+    return {
+      type: 'declaration',
+      name,
+      value,
+    };
+  },
+};
+
+export default declaration;

package/src/style/parse/rules/directive.js

@@ -0,0 +1,74 @@
+import isIdent from '../isIdent';
+import isWhitespace from '../isWhitespace';
+
+const consumeArgumentSeperator = (input) => {
+  if (input.peek() !== ',') {
+    return false;
+  }
+
+  input.read(',');
+
+  return true;
+};
+
+const directive = {
+  locate(input) {
+    return input.peek() === '@';
+  },
+  read(input, parseBlock) {
+    input.read('@');
+
+    const directiveName = input.charsWhile(isIdent);
+
+    if (directiveName !== 'include') {
+      throw new Error('Only @include directive is supported.');
+    }
+
+    input.charsWhile(isWhitespace);
+    const name = input.charsWhile(isIdent);
+
+    if (name.length === 0) {
+      throw new Error('No name.');
+    }
+
+    input.charsWhile(isWhitespace);
+    input.read('(');
+
+    const args = [];
+
+    do {
+      input.charsWhile(isWhitespace);
+      args.push(input.charsWhile(isIdent));
+      input.charsWhile(isWhitespace);
+    } while (consumeArgumentSeperator(input));
+
+    input.read(')');
+    input.charsWhile(isWhitespace);
+    input.read('{');
+
+    const children = [];
+
+    while (input.peek() !== '}') {
+      const block = parseBlock(input);
+
+      if (block) {
+        children.push(block);
+      }
+    }
+    input.read('}');
+
+    return {
+      type: 'block',
+      scopes: [
+        {
+          type: 'mixin',
+          name,
+          args,
+        },
+      ],
+      children,
+    };
+  },
+};
+
+export default directive;

package/src/style/parse/rules/selector.js

@@ -0,0 +1,47 @@
+import isIdent from '../isIdent';
+import isWhitespace from '../isWhitespace';
+
+const SELECTOR_TYPES = ['hover', 'focus', 'focus-visible', 'active'];
+
+const selector = {
+  locate(input) {
+    return input.peek() === '&' && input.peek(1) === ':';
+  },
+  read(input, parseBlock) {
+    input.read('&');
+    input.read(':');
+
+    const name = input.charsWhile(isIdent);
+
+    if (!SELECTOR_TYPES.includes(name)) {
+      throw new Error(`CSS syntax error: Unexpected selector name "${name}".`);
+    }
+
+    input.charsWhile(isWhitespace);
+    input.read('{');
+
+    const children = [];
+
+    while (input.peek() !== '}') {
+      const block = parseBlock(input);
+
+      if (block) {
+        children.push(block);
+      }
+    }
+    input.read('}');
+
+    return {
+      type: 'block',
+      scopes: [
+        {
+          type: 'selector',
+          name,
+        },
+      ],
+      children,
+    };
+  },
+};
+
+export default selector;

package/src/style/parse/rules/variable.js

@@ -0,0 +1,24 @@
+import declaration from './declaration';
+
+const variable = {
+  locate(input) {
+    return input.peek() === '$';
+  },
+  read(input) {
+    input.read('$');
+
+    if (!declaration.locate(input)) {
+      throw new Error(`CSS syntax error: Unexpected char after $.`);
+    }
+
+    const { name, value } = declaration.read(input);
+
+    return {
+      type: 'variable',
+      name,
+      value,
+    };
+  },
+};
+
+export default variable;

package/src/style/transform/formula.js

@@ -0,0 +1,28 @@
+import { calculate } from '../math';
+
+const formulaRE = /([+-]+)?([\d.Ee]+)(rem|px|%)?\s*(\+|-|\*|%)\s*([+-]+)?([\d.Ee]+)(rem|px|%)?/g;
+
+function formula(value) {
+  // Naïve approach to calculate simple formulas.
+  // TODO: Support more complex formulas including parenthesis.
+  return value.replace(
+    formulaRE,
+    (
+      _,
+      leftUnary = '',
+      leftNumber,
+      leftUnit = '',
+      operator,
+      rightUnary = '',
+      rightNumber,
+      rightUnit = '',
+    ) => {
+      const leftValue = `${leftUnary}${leftNumber}${leftUnit}`;
+      const rightValue = `${rightUnary}${rightNumber}${rightUnit}`;
+
+      return calculate(leftValue, operator, rightValue);
+    },
+  );
+}
+
+export default formula;

package/src/style/transform/index.js

@@ -0,0 +1,155 @@
+import { Platform } from 'react-native';
+import { getPropertyName, getStylesForProperty } from 'css-to-react-native';
+import rem from './rem';
+import formula from './formula';
+import rgba from './rgba';
+import backgroundSize from './properties/backgroundSize';
+import backgroundPosition from './properties/backgroundPosition';
+import backgroundPositionX from './properties/backgroundPositionX';
+import backgroundPositionY from './properties/backgroundPositionY';
+
+const urlRE = /^url\(.*?\)$/g;
+
+const applyVariables = (variables, key, value) =>
+  typeof value === 'function' ? value(variables, key) : value;
+
+const applyTransforms = (result) => {
+  // Do not transform values that belong to an url().
+  if (result.match(urlRE)) {
+    return result;
+  }
+
+  return rgba(formula(rem(result)));
+};
+
+const resolveValue = (value, definition, theme, options) => {
+  const variables = options.preferTheme
+    ? { ...definition.variables, ...theme }
+    : { ...theme, ...definition.variables };
+
+  // If there is only one part, we allow other results than strings as well.
+  if (value.length === 1) {
+    const result = applyVariables(variables, options.key, value[0]);
+
+    return typeof result === 'string' ? applyTransforms(result) : result;
+  }
+
+  const stringifiedResult = value.reduce(
+    (previous, current) =>
+      `${previous}${applyVariables(variables, options.key, current)}`,
+    '',
+  );
+
+  return applyTransforms(stringifiedResult);
+};
+
+export default function transform(
+  children,
+  theme,
+  options = {},
+  scopes = [],
+  variables = {},
+) {
+  let definitions = [
+    {
+      scopes,
+      declarations: {},
+      variables: { ...variables },
+    },
+  ];
+
+  children.forEach((child) => {
+    if (child.type === 'variable' || child.type === 'declaration') {
+      // Transform value to react native compatible value.
+      const value = resolveValue(child.value, definitions[0], theme, options);
+
+      if (child.type === 'variable') {
+        definitions[0].variables[child.name] = value;
+      }
+
+      // Only add value if value is not null.
+      if (child.type === 'declaration' && value !== 'null') {
+        if (child.name === 'box-shadow') {
+          if (Platform.OS === 'web') {
+            Object.assign(definitions[0].declarations, {
+              boxShadow: value,
+            });
+          }
+        } else if (child.name === 'margin-vertical') {
+          Object.assign(definitions[0].declarations, {
+            ...getStylesForProperty('marginTop', value),
+            ...getStylesForProperty('marginBottom', value),
+          });
+        } else if (child.name === 'margin-horizontal') {
+          // Among other things workaround for react-native issue #350
+          // https://github.com/facebook/react-native/issues/350#issuecomment-375238958
+          Object.assign(definitions[0].declarations, {
+            ...getStylesForProperty('marginLeft', value),
+            ...getStylesForProperty('marginRight', value),
+          });
+        } else if (child.name === 'padding-vertical') {
+          Object.assign(definitions[0].declarations, {
+            ...getStylesForProperty('paddingTop', value),
+            ...getStylesForProperty('paddingBottom', value),
+          });
+        } else if (child.name === 'padding-horizontal') {
+          Object.assign(definitions[0].declarations, {
+            ...getStylesForProperty('paddingLeft', value),
+            ...getStylesForProperty('paddingRight', value),
+          });
+        } else if (child.name === 'background-size') {
+          Object.assign(definitions[0].declarations, backgroundSize(value));
+        } else if (child.name === 'background-position') {
+          Object.assign(definitions[0].declarations, backgroundPosition(value));
+        } else if (child.name === 'background-position-x') {
+          Object.assign(
+            definitions[0].declarations,
+            backgroundPositionX(value),
+          );
+        } else if (child.name === 'background-position-y') {
+          Object.assign(
+            definitions[0].declarations,
+            backgroundPositionY(value),
+          );
+        } else if (
+          child.name === 'border-color' &&
+          value.split(' ').length === 1
+        ) {
+          // Workaround for react-native issue #19981
+          // https://github.com/facebook/react-native/issues/19981
+          Object.assign(definitions[0].declarations, {
+            borderColor: value,
+          });
+        } else {
+          // TODO: Pre-process css-to-react-native transformation, so that we only
+          // need to insert theme variables here.
+          Object.assign(
+            definitions[0].declarations,
+            getStylesForProperty(getPropertyName(child.name), value),
+          );
+        }
+      }
+    }
+
+    if (child.type === 'block') {
+      definitions = definitions.concat(
+        transform(
+          child.children,
+          theme,
+          options,
+          // Add child scopes to current scopes.
+          [...scopes, ...child.scopes],
+          // Pass down variables, so that we can extend them.
+          definitions[0].variables,
+        ),
+      );
+    }
+  });
+
+  // Filter empty definitions and return.
+  return definitions.filter(
+    (definition) =>
+      Object.keys(definition.declarations).length > 0 ||
+      Object.keys(definition.variables).length > 0,
+  );
+}

package/src/style/transform/properties/backgroundPosition.js

@@ -0,0 +1,59 @@
+import { transformRawValue } from 'css-to-react-native';
+
+const positionRE = /(top|right|bottom|left|center)/;
+
+const sortPairs = (first, second) => {
+  const firstValue = {
+    position: first[0],
+    offset: first[1]
+      ? transformRawValue('backgroundPosition', first[1])
+      : undefined,
+  };
+  const secondValue = {
+    position: second[0],
+    offset: second[1]
+      ? transformRawValue('backgroundPosition', second[1])
+      : undefined,
+  };
+
+  const shouldReversePairs =
+    first[0] === 'top' ||
+    first[0] === 'bottom' ||
+    second[0] === 'left' ||
+    second[0] === 'right';
+
+  return shouldReversePairs
+    ? [secondValue, firstValue]
+    : [firstValue, secondValue];
+};
+
+// Spec: https://w3c.github.io/csswg-drafts/css-backgrounds-3/#background-position
+export default function backgroundPosition(value) {
+  const values = value.split(' ');
+  const [first, second = 'center', third, fourth] = values;
+
+  if (values.length <= 2) {
+    const [x, y] = sortPairs(
+      first.match(positionRE) ? [first] : ['left', first],
+      second.match(positionRE) ? [second] : ['top', second],
+    );
+
+    return {
+      backgroundPositionX: x,
+      backgroundPositionY: y,
+    };
+  }
+
+  if (values.length <= 4) {
+    const [x, y] = second.match(positionRE)
+      ? sortPairs([first], [second, third])
+      : sortPairs([first, second], [third, fourth]);
+
+    return {
+      backgroundPositionX: x,
+      backgroundPositionY: y,
+    };
+  }
+
+  return null;
+}

package/src/style/transform/properties/backgroundPositionX.js

@@ -0,0 +1,23 @@
+import { transformRawValue } from 'css-to-react-native';
+
+export default function backgroundPositionX(value) {
+  const values = value.split(' ');
+  const [first, second = 'auto'] = values;
+
+  if (values.length === 1) {
+    return {
+      backgroundPositionX: transformRawValue('backgroundPositionX', first),
+    };
+  }
+
+  if (values.length === 2) {
+    return {
+      backgroundPositionX: {
+        position: transformRawValue('backgroundPositionX', first),
+        offset: transformRawValue('backgroundPositionX', second),
+      },
+    };
+  }
+
+  return null;
+}

package/src/style/transform/properties/backgroundPositionY.js

@@ -0,0 +1,23 @@
+import { transformRawValue } from 'css-to-react-native';
+
+export default function backgroundPositionY(value) {
+  const values = value.split(' ');
+  const [first, second = 'auto'] = values;
+
+  if (values.length === 1) {
+    return {
+      backgroundPositionY: transformRawValue('backgroundPositionY', first),
+    };
+  }
+
+  if (values.length === 2) {
+    return {
+      backgroundPositionY: {
+        position: transformRawValue('backgroundPositionY', first),
+        offset: transformRawValue('backgroundPositionY', second),
+      },
+    };
+  }
+
+  return null;
+}

package/src/style/transform/properties/backgroundSize.js

@@ -0,0 +1,24 @@
+import { transformRawValue } from 'css-to-react-native';
+
+// Spec: https://w3c.github.io/csswg-drafts/css-backgrounds/#the-background-size
+export default function backgroundSize(value) {
+  const values = value.split(' ');
+  const [first, second = 'auto'] = values;
+
+  if (values.length === 1) {
+    return {
+      backgroundSize: transformRawValue('backgroundSize', first),
+    };
+  }
+
+  if (values.length === 2) {
+    return {
+      backgroundSize: {
+        width: transformRawValue('backgroundSize', first),
+        height: transformRawValue('backgroundSize', second),
+      },
+    };
+  }
+
+  return null;
+}

package/src/style/transform/rem.js

@@ -0,0 +1,18 @@
+import { Platform, PixelRatio } from 'react-native';
+
+const transformREMUnitRE = /([+-]+)?([\d.Ee]+)rem/g;
+
+const convertRemToPx = (value) => PixelRatio.getFontScale() * 16 * value;
+
+function rem(value) {
+  if (Platform.OS === 'web') {
+    return value;
+  }
+
+  return value.replace(
+    transformREMUnitRE,
+    (_, unary = '', number) => `${unary}${convertRemToPx(number)}px`,
+  );
+}
+
+export default rem;

package/src/style/transform/rgba.js

@@ -0,0 +1,11 @@
+import { rgba as transform } from '../functions';
+
+const transformRgbaRE = /rgba\(\s*([#0-9a-z]+)\s*,\s*([\d.Ee]+)\s*\)/g;
+
+function rgba(value) {
+  return value.replace(transformRgbaRE, (_, hex, alpha) =>
+    transform(hex, alpha),
+  );
+}
+
+export default rgba;

package/src/style/types/RgbaValue.js

@@ -0,0 +1,111 @@
+// Copied from https://github.com/styled-components/polished/blob/main/src/color/parseToRgb.js
+const hexRE = /^#[a-fA-F0-9]{6}$/;
+const hexRgbaRE = /^#[a-fA-F0-9]{8}$/;
+const shortHexRE = /^#[a-fA-F0-9]{3}$/;
+const shortRgbaHexRE = /^#[a-fA-F0-9]{4}$/;
+const rgbRE = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
+const rgbaRE = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+const hslRE = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+const hslaRE = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+
+// Copied from https://reactnative.dev/docs/colors
+// prettier-ignore
+const colorNames = { aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aqua: '#00ffff', aquamarine: '#7fffd4', azure: '#f0ffff', beige: '#f5f5dc', bisque: '#ffe4c4', black: '#000000', blanchedalmond: '#ffebcd', blue: '#0000ff', blueviolet: '#8a2be2', brown: '#a52a2a', burlywood: '#deb887', cadetblue: '#5f9ea0', chartreuse: '#7fff00', chocolate: '#d2691e', coral: '#ff7f50', cornflowerblue: '#6495ed', cornsilk: '#fff8dc', crimson: '#dc143c', cyan: '#00ffff', darkblue: '#00008b', darkcyan: '#008b8b', darkgoldenrod: '#b8860b', darkgray: '#a9a9a9', darkgreen: '#006400', darkgrey: '#a9a9a9', darkkhaki: '#bdb76b', darkmagenta: '#8b008b', darkolivegreen: '#556b2f', darkorange: '#ff8c00', darkorchid: '#9932cc', darkred: '#8b0000', darksalmon: '#e9967a', darkseagreen: '#8fbc8f', darkslateblue: '#483d8b', darkslategrey: '#2f4f4f', darkturquoise: '#00ced1', darkviolet: '#9400d3', deeppink: '#ff1493', deepskyblue: '#00bfff', dimgray: '#696969', dimgrey: '#696969', dodgerblue: '#1e90ff', firebrick: '#b22222', floralwhite: '#fffaf0', forestgreen: '#228b22', fuchsia: '#ff00ff', gainsboro: '#dcdcdc', ghostwhite: '#f8f8ff', gold: '#ffd700', goldenrod: '#daa520', gray: '#808080', green: '#008000', greenyellow: '#adff2f', grey: '#808080', honeydew: '#f0fff0', hotpink: '#ff69b4', indianred: '#cd5c5c', indigo: '#4b0082', ivory: '#fffff0', khaki: '#f0e68c', lavender: '#e6e6fa', lavenderblush: '#fff0f5', lawngreen: '#7cfc00', lemonchiffon: '#fffacd', lightblue: '#add8e6', lightcoral: '#f08080', lightcyan: '#e0ffff', lightgoldenrodyellow: '#fafad2', lightgray: '#d3d3d3', lightgreen: '#90ee90', lightgrey: '#d3d3d3', lightpink: '#ffb6c1', lightsalmon: '#ffa07a', lightseagreen: '#20b2aa', lightskyblue: '#87cefa', lightslategrey: '#778899', lightsteelblue: '#b0c4de', lightyellow: '#ffffe0', lime: '#00ff00', limegreen: '#32cd32', linen: '#faf0e6', magenta: '#ff00ff', maroon: '#800000', mediumaquamarine: '#66cdaa', mediumblue: '#0000cd', mediumorchid: '#ba55d3', mediumpurple: '#9370db', mediumseagreen: '#3cb371', mediumslateblue: '#7b68ee', mediumspringgreen: '#00fa9a', mediumturquoise: '#48d1cc', mediumvioletred: '#c71585', midnightblue: '#191970', mintcream: '#f5fffa', mistyrose: '#ffe4e1', moccasin: '#ffe4b5', navajowhite: '#ffdead', navy: '#000080', oldlace: '#fdf5e6', olive: '#808000', olivedrab: '#6b8e23', orange: '#ffa500', orangered: '#ff4500', orchid: '#da70d6', palegoldenrod: '#eee8aa', palegreen: '#98fb98', paleturquoise: '#afeeee', palevioletred: '#db7093', papayawhip: '#ffefd5', peachpuff: '#ffdab9', peru: '#cd853f', pink: '#ffc0cb', plum: '#dda0dd', powderblue: '#b0e0e6', purple: '#800080', rebeccapurple: '#663399', red: '#ff0000', rosybrown: '#bc8f8f', royalblue: '#4169e1', saddlebrown: '#8b4513', salmon: '#fa8072', sandybrown: '#f4a460', seagreen: '#2e8b57', seashell: '#fff5ee', sienna: '#a0522d', silver: '#c0c0c0', skyblue: '#87ceeb', slateblue: '#6a5acd', slategray: '#708090', snow: '#fffafa', springgreen: '#00ff7f', steelblue: '#4682b4', tan: '#d2b48c', teal: '#008080', thistle: '#d8bfd8', tomato: '#ff6347', turquoise: '#40e0d0', violet: '#ee82ee', wheat: '#f5deb3', white: '#ffffff', whitesmoke: '#f5f5f5', yellow: '#ffff00', yellowgreen: '#9acd32' };
+
+const hslToRgb = (h, s, l) => {
+  const a = s * Math.min(l, 1 - l);
+  const f = (n, k = (n + h / 30) % 12) =>
+    l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+  return [f(0), f(8), f(4)];
+};
+
+export default class RgbaValue {
+  red;
+
+  green;
+
+  blue;
+
+  alpha;
+
+  constructor(red, green, blue, alpha = 1) {
+    this.red = red;
+    this.green = green;
+    this.blue = blue;
+    this.alpha = alpha;
+  }
+
+  static parse(value) {
+    if (value instanceof RgbaValue) {
+      return value;
+    }
+
+    const color = colorNames[value] || value;
+
+    // Handle hex value
+    const hexMatch =
+      color.match(hexRE) ||
+      color.match(hexRgbaRE) ||
+      color.match(shortHexRE) ||
+      color.match(shortRgbaHexRE);
+    if (hexMatch) {
+      const params = (hexMatch[0].length <= 4
+        ? hexMatch[0].match(/\w/g).map((x) => `${x}${x}`)
+        : hexMatch[0].match(/\w\w/g)
+      ).map((hex, key) => {
+        const x = parseInt(hex, 16);
+        const alpha = key === 3;
+        return alpha ? (x / 255).toFixed(2) : x;
+      });
+
+      return new RgbaValue(...params);
+    }
+
+    // Handle rgb(a) value
+    const rgbMatch = color.match(rgbRE) || color.match(rgbaRE);
+    if (rgbMatch) {
+      const params = rgbMatch.slice(1).map((x, key) => {
+        const alpha = key === 3;
+        return alpha ? parseFloat(x) : parseInt(x, 10);
+      });
+
+      return new RgbaValue(...params);
+    }
+
+    // Handle hsl(a) value
+    const hslMatch = color.match(hslRE) || color.match(hslaRE);
+    if (hslMatch) {
+      const h = parseInt(hslMatch[1], 10);
+      const s = parseInt(hslMatch[2], 10) / 100;
+      const l = parseInt(hslMatch[3], 10) / 100;
+      const alpha = hslMatch[4] && parseFloat(hslMatch[4]);
+
+      return new RgbaValue(...[...hslToRgb(h, s, l), alpha]);
+    }
+
+    throw new Error(`Unknown color "${value}".`);
+  }
+
+  toRgb() {
+    return [this.red, this.green, this.blue];
+  }
+
+  toRgba() {
+    return [...this.toRgb(), this.alpha];
+  }
+
+  toHex() {
+    const [...values] = this.toRgb();
+
+    if (this.alpha < 1) {
+      values.push(this.alpha);
+    }
+
+    return `#${values
+      .map((x) => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? `0${hex}` : hex;
+      })
+      .join('')}`;
+  }
+}