react-native-css 2.1.1 → 3.0.0-nightly.19372e8

package/src/index.js

@@ -1,184 +0,0 @@
-import ParseCSS from 'css/lib/parse';
-import toCamelCase from 'to-camel-case';
-import _get from 'lodash.get';
-import _set from 'lodash.set';
-import utils, { handleTags } from './utils';
-
-export default function toJSS(css, ...values) {
-  const stylesheetString = Array.isArray(css) ? handleTags(css, ...values) : css;
-  const { stylesheet } = ParseCSS(utils.clean(stylesheetString));
-
-  const directions = ['top', 'right', 'bottom', 'left'];
-  const changeArr = ['margin', 'padding', 'border-width', 'border-radius'];
-  const numberize = ['width', 'height', 'font-size', 'line-height'].concat(directions);
-  // special properties and shorthands that need to be broken down separately
-  const specialProperties = {};
-  ['border', 'border-top', 'border-right', 'border-bottom', 'border-left'].forEach((name) => {
-    specialProperties[name] = {
-      regex: /^\s*([0-9]+)(px)?\s+(solid|dotted|dashed)?\s*([a-z0-9#,\(\)\.\s]+)\s*$/i,
-      map: {
-        1: `${name}-width`,
-        3: name === 'border' ? `${name}-style` : null,
-        4: `${name}-color`,
-      },
-    };
-  });
-
-  directions.forEach((dir) => {
-    numberize.push(`border-${dir}-width`);
-    changeArr.forEach((prop) => {
-      numberize.push(`${prop}-${dir}`);
-    });
-  });
-
-  // map of properties that when expanded
-  // use different directions than the default Top,Right,Bottom,Left.
-  const directionMaps = {
-    'border-radius': {
-      Top: 'top-left',
-      Right: 'top-right',
-      Bottom: 'bottom-right',
-      Left: 'bottom-left',
-    },
-  };
-
-  // Convert the shorthand property to the individual directions, handles edge cases,
-  // i.e. border-width and border-radius
-  function directionToPropertyName(property, direction) {
-    const names = property.split('-');
-    names.splice(1, 0, directionMaps[property] ? directionMaps[property][direction] : direction);
-    return toCamelCase(names.join('-'));
-  }
-
-  // CSS properties that are not supported by React Native
-  // The list of supported properties is at:
-  // https://facebook.github.io/react-native/docs/style.html#supported-properties
-  const unsupported = ['display'];
-
-  const nonMatching = {
-    'flex-grow': 'flex',
-    'text-decoration': 'textDecorationLine',
-    'vertical-align': 'textVerticalAlign',
-  };
-
-  const JSONResult = {};
-
-  for (const rule of stylesheet.rules) {
-    if (rule.type !== 'rule') continue;
-
-    for (let selector of rule.selectors) {
-      selector = selector.replace(/\.|#/g, '');
-
-      let styles;
-      // check if there are any selectors with empty spaces, meaning they should be nested
-      const composedSelector = selector.match(/\s+(\S)+/g);
-
-      if (composedSelector) {
-        // get the first selector from the nested selector
-        let selectorPath = selector.match(/^\S+/)[0];
-        while (composedSelector.length) {
-          const currentSelector = composedSelector.shift().replace(/\s+/, '');
-          selectorPath += `[${currentSelector}]`;
-        }
-
-        // we don't have to be smart here. It's either an object or undefined.
-        if (!_get(JSONResult, selectorPath)) {
-          _set(JSONResult, selectorPath, {});
-        }
-        styles = _get(JSONResult, selectorPath);
-      } else {
-        styles = JSONResult[selector] = JSONResult[selector] || {};
-      }
-
-      for (const declaration of rule.declarations) {
-        if (declaration.type !== 'declaration') continue;
-
-        const value = declaration.value;
-        const property = declaration.property;
-
-        if (specialProperties[property]) {
-          const special = specialProperties[property];
-          const matches = special.regex.exec(value);
-          if (matches) {
-            if (typeof special.map === 'function') {
-              special.map(matches, styles, rule.declarations);
-            } else {
-              for (const key in special.map) {
-                if (matches[key] && special.map[key]) {
-                  rule.declarations.push({
-                    property: special.map[key],
-                    value: matches[key],
-                    type: 'declaration',
-                  });
-                }
-              }
-            }
-            continue;
-          }
-        }
-
-        if (utils.arrayContains(property, unsupported)) continue;
-
-        if (nonMatching[property]) {
-          rule.declarations.push({
-            property: nonMatching[property],
-            value,
-            type: 'declaration',
-          });
-          continue;
-        }
-
-        if (utils.arrayContains(property, numberize)) {
-          const valueReplaced = value.replace(/px|\s*/g, '');
-          styles[toCamelCase(property)] = parseFloat(valueReplaced);
-        } else if (utils.arrayContains(property, changeArr)) {
-          const values = value.replace(/px/g, '').split(/[\s,]+/);
-
-          values.forEach((v, index, arr) => {
-            arr[index] = parseInt(v);
-            return arr;
-          });
-
-          const length = values.length;
-
-          if (length === 1) {
-            styles[toCamelCase(property)] = values[0];
-          }
-
-          if (length === 2) {
-            for (const prop of ['Top', 'Bottom']) {
-              styles[directionToPropertyName(property, prop)] = values[0];
-            }
-
-            for (const prop of ['Left', 'Right']) {
-              styles[directionToPropertyName(property, prop)] = values[1];
-            }
-          }
-
-          if (length === 3) {
-            for (const prop of ['Left', 'Right']) {
-              styles[directionToPropertyName(property, prop)] = values[1];
-            }
-
-            styles[directionToPropertyName(property, 'Top')] = values[0];
-            styles[directionToPropertyName(property, 'Bottom')] = values[2];
-          }
-
-          if (length === 4) {
-            ['Top', 'Right', 'Bottom', 'Left'].forEach((prop, index) => {
-              styles[directionToPropertyName(property, prop)] = values[index];
-            });
-          }
-        } else {
-          if (!isNaN(declaration.value) && property !== 'font-weight') {
-            declaration.value = parseFloat(declaration.value);
-          }
-
-          styles[toCamelCase(property)] = declaration.value;
-        }
-      }
-    }
-  }
-
-  return JSONResult;
-}

package/src/utils.js

@@ -1,32 +0,0 @@
-export default class Utils {
-  static arrayContains(value, arr) {
-    for (let i = 0; i < arr.length; i++) {
-      if (value === arr[i]) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  static clean(string) {
-    return string.replace(/\r?\n|\r/g, '');
-  }
-
-  static contains(string, needle) {
-    const search = string.match(needle);
-    return search && search.length > 0;
-  }
-}
-
-export const handleTags = (strings, ...values) => {
-  let result = '';
-
-  for (let i = 0; i < strings.length; i++) {
-    result += strings[i];
-    if (i < values.length) {
-      result += values[i];
-    }
-  }
-
-  return result;
-};

package/test/rnc.test.js

@@ -1,258 +0,0 @@
-import { test as it } from 'babel-tap';
-import expect from 'expect';
-import reactNativeCSS from '../src/index';
-
-it('Parse CSS', (t) => {
-  const data = reactNativeCSS`
-    main {
-      background: #000;
-    }
-  `;
-  expect(data).toEqual({ main: { background: '#000' } });
-
-  t.end();
-});
-
-it('Parse complex css', (t) => {
-  const data = reactNativeCSS`
-
-      description {
-        flex: 102;
-        margin: 2, 3, 4;
-        font-size: 18;
-        text-align: center;
-        color: #656656;
-      }
-
-      container {
-        padding: 30;
-        margin-top: 65;
-        align-items: center;
-      }
-  `;
-
-  expect(data).toEqual({
-    description: {
-      flex: 102,
-      marginLeft: 3,
-      marginRight: 3,
-      marginTop: 2,
-      marginBottom: 4,
-      fontSize: 18,
-      textAlign: 'center',
-      color: '#656656',
-    },
-    container: {
-      padding: 30,
-      marginTop: 65,
-      alignItems: 'center',
-    },
-  });
-  t.end();
-});
-
-it('Parse CSS and ignore unsupported property', (t) => {
-  const data = reactNativeCSS`
-  container {
-    display: block;
-    background: white;
-  }
-  `;
-
-  expect(data).toEqual({ container: { background: 'white' } });
-
-  t.end();
-});
-
-it('Parse CSS and turn properties into numbers', (t) => {
-  const data = reactNativeCSS(`
-  text {
-  font-size: 12px;
-  width: 100px;
-}
-
-  `);
-  expect(data).toEqual({
-    text: {
-      fontSize: 12,
-      width: 100,
-    },
-  });
-  t.end();
-});
-
-it('Regression test for issue #26', (t) => {
-  const data = reactNativeCSS`
-    row {
-      top: 50px;
-      padding: 10px 10px 10px 5px;
-      flex-direction: row;
-      margin: 10px;
-      margin-bottom: 2px;
-      border-bottom-width: 5px;
-      opacity: 0.6;
-    }
-    `;
-
-  expect(data).toEqual({
-    row: {
-      top: 50,
-      paddingTop: 10,
-      paddingBottom: 10,
-      paddingRight: 10,
-      paddingLeft: 5,
-      flexDirection: 'row',
-      margin: 10,
-      marginBottom: 2,
-      borderBottomWidth: 5,
-      opacity: 0.6,
-    },
-  });
-
-  t.end();
-});
-
-it('Argument --literal generates a javascript literal object', (t) => {
-  const data = reactNativeCSS`
-        maincontainer {
-            flex: 1;
-            justify-content: center;
-            align-items: center;
-            background-color: #F5FCFF;
-        }
-        rootcontainer {
-            flex: 1;
-            font-size: 18;
-        }
-    `;
-
-  expect(data.maincontainer.backgroundColor).toEqual('#F5FCFF');
-  t.end();
-});
-
-it('Parse CSS and expand shorthand properties', (t) => {
-  const data = reactNativeCSS`
-        container {
-          padding: 10px 20px;
-          margin: 10px 15px 30px;
-          border-width: 10px 30px;
-          border-radius: 10px 30px;
-        }
-
-        second {
-          margin: 10px;
-          padding: 1px 2px 3px 4px;
-          border-width: 1px 2px 3px 4px;
-          border-radius: 1px 2px 3px 4px;
-        }
-
-        borderSimple {
-          border: 1px solid #eee;
-        }
-
-        borderNoStyle {
-          border: 1px #eee;
-        }
-
-        borderNoUnit {
-          border: 1 solid #eee;
-        }
-
-        borderNamedColor {
-          border: 1px solid blue;
-        }
-
-        borderRGBColor {
-          border: 1px solid rgb(100, 32, 250);
-        }
-
-        borderRGBAColor {
-          border: 1px solid rgba(100, 32, 250, .5);
-        }
-    `;
-
-  expect(data).toEqual({
-    container: {
-      paddingTop: 10,
-      paddingBottom: 10,
-      paddingLeft: 20,
-      paddingRight: 20,
-      marginLeft: 15,
-      marginRight: 15,
-      marginTop: 10,
-      marginBottom: 30,
-      borderTopWidth: 10,
-      borderBottomWidth: 10,
-      borderLeftWidth: 30,
-      borderRightWidth: 30,
-      borderTopLeftRadius: 10,
-      borderBottomRightRadius: 10,
-      borderBottomLeftRadius: 30,
-      borderTopRightRadius: 30,
-    },
-    second: {
-      margin: 10,
-      paddingTop: 1,
-      paddingRight: 2,
-      paddingBottom: 3,
-      paddingLeft: 4,
-      borderTopWidth: 1,
-      borderRightWidth: 2,
-      borderBottomWidth: 3,
-      borderLeftWidth: 4,
-      borderTopLeftRadius: 1,
-      borderTopRightRadius: 2,
-      borderBottomRightRadius: 3,
-      borderBottomLeftRadius: 4,
-    },
-    borderSimple: { borderWidth: 1, borderStyle: 'solid', borderColor: '#eee' },
-    borderNoStyle: { borderWidth: 1, borderColor: '#eee' },
-    borderNoUnit: { borderWidth: 1, borderStyle: 'solid', borderColor: '#eee' },
-    borderNamedColor: { borderWidth: 1, borderStyle: 'solid', borderColor: 'blue' },
-    borderRGBColor: { borderWidth: 1, borderStyle: 'solid', borderColor: 'rgb(100, 32, 250)' },
-    borderRGBAColor: {
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: 'rgba(100, 32, 250, .5)',
-    },
-  });
-  t.end();
-});
-
-it('Parse CSS and transform properties', (t) => {
-  const data = reactNativeCSS`
-    container {
-      flex-grow: unset;
-      text-decoration: none;
-      vertical-align: bottom;
-    }
-  `;
-
-  expect(data).toEqual({
-    container: {
-      flex: 'unset',
-      textDecorationLine: 'none',
-      textVerticalAlign: 'bottom',
-    },
-  });
-  t.end();
-});
-it('Parse CSS and template literals', (t) => {
-  const bottom = 'bottom';
-  const data = reactNativeCSS`
-    container {
-      flex-grow: unset;
-      text-decoration: none;
-      vertical-align: ${bottom};
-    }
-  `;
-
-  expect(data).toEqual({
-    container: {
-      flex: 'unset',
-      textDecorationLine: 'none',
-      textVerticalAlign: 'bottom',
-    },
-  });
-  t.end();
-});