taro-css-to-react-native 3.5.0-theta.0 → 3.5.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/css-to-react-native/index.js

@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.transformRawValue = exports.getStylesForProperty = exports.getPropertyName = exports["default"] = void 0;
 
-var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
-
 var _camelize = _interopRequireDefault(require("camelize"));
 
-var _index = _interopRequireDefault(require("./transforms/index"));
+var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
 
 var _TokenStream = _interopRequireDefault(require("./TokenStream"));
 
+var _index = _interopRequireDefault(require("./transforms/index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 // Note if this is wrong, you'll need to change tokenTypes.js too
-var numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?:px)?$/i;
+var numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)((?:px)|(?:vw$)|(?:vh$)|(?:vmin$)|(?:vmax$))?$/i;
 var boolRe = /^true|false$/i;
 var nullRe = /^null$/i;
 var undefinedRe = /^undefined$/i; // Undocumented export
@@ -29,8 +29,12 @@ var transformRawValue = function transformRawValue(input) {
 
   if (numberMatch !== null) {
     var num = Number(numberMatch[1]);
+    var unit = numberMatch[2];
+    var isViewportUnit = ['vw', 'vh', 'vmin', 'vmax'].includes(unit);
 
-    if (/(\d+)px/.test(value)) {
+    if (isViewportUnit) {
+      return "scaleVu2dp(".concat(num, ", '").concat(unit, "')");
+    } else if (/(\d+)px/.test(value)) {
       return "scalePx2dp(".concat(num, ")");
     } else {
       return num;

package/dist/css-to-react-native/tokenTypes.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tokens = exports.regExpToken = void 0;
 
-var _postcssValueParser = require("postcss-value-parser");
-
 var _cssColorKeywords = _interopRequireDefault(require("css-color-keywords"));
 
+var _postcssValueParser = require("postcss-value-parser");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint-disable react/display-name */
 var matchString = function matchString(node) {
   if (node.type !== 'string') return null;
   return node.value.replace(/\\([0-9a-f]{1,6})(?:\s|$)/gi, function (match, charCode) {
@@ -37,10 +38,11 @@ var identRe = /(^-?[_a-z][_a-z0-9-]*$)/i; // Note if these are wrong, you'll nee
 
 var numberRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)$/; // Note lengthRe is sneaky: you can omit units for 0
 
-var lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)((?=px$)|(?=Px$)|(?=PX$)|(?=pX$)))/;
-var unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|rem|vh|vw|vmin|vmax|cm|mm|in|pc|pt))$/;
+var lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)((?=px$)|(?=Px$)|(?=PX$)|(?=pX$)|(?=vw$)|(?=vh$)|(?=vmin$)|(?=vmax$)))/;
+var unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|rem|cm|mm|in|pc|pt))$/;
 var angleRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(?:deg|rad))$/;
 var percentRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?%)$/;
+var viewportUnitRe = /(\d+)(vw|vh|vmin|vmax)/;
 
 var noopToken = function noopToken(predicate) {
   return function (node) {
@@ -75,12 +77,18 @@ var functionValueForTypeToken = function functionValueForTypeToken(type) {
 var regExpToken = function regExpToken(regExp) {
   var transform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : String;
   return function (node) {
+    var _node$value$match;
+
     if (node.type !== 'word') return null;
     var match = node.value.match(regExp);
     if (match === null) return null;
     var value = transform(match[1]);
+    var unit = (_node$value$match = node.value.match(viewportUnitRe)) === null || _node$value$match === void 0 ? void 0 : _node$value$match[2];
+    var isViewportUnit = ['vh', 'vw', 'vmin', 'vmax'].includes(unit);
 
-    if (/(\d+)px/.test(node.value)) {
+    if (isViewportUnit) {
+      return "scaleVu2dp(".concat(value, ", '").concat(unit, "')");
+    } else if (/(\d+)px/.test(node.value)) {
       return "scalePx2dp(".concat(value, ")");
     } else {
       return value;

package/dist/css-to-react-native/transforms/font.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _fontFamily = _interopRequireDefault(require("./fontFamily"));
-
 var _tokenTypes = require("../tokenTypes");
 
+var _fontFamily = _interopRequireDefault(require("./fontFamily"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var SPACE = _tokenTypes.tokens.SPACE,

package/dist/css-to-react-native/transforms/index.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _tokenTypes = require("../tokenTypes");
 
+var _border = require("./border");
+
 var _boxShadow = _interopRequireDefault(require("./boxShadow"));
 
 var _flex = _interopRequireDefault(require("./flex"));
@@ -15,15 +17,13 @@ var _font = _interopRequireDefault(require("./font"));
 
 var _fontFamily = _interopRequireDefault(require("./fontFamily"));
 
-var _textShadow = _interopRequireDefault(require("./textShadow"));
-
 var _textDecoration = _interopRequireDefault(require("./textDecoration"));
 
 var _textDecorationLine = _interopRequireDefault(require("./textDecorationLine"));
 
-var _transform = _interopRequireDefault(require("./transform"));
+var _textShadow = _interopRequireDefault(require("./textShadow"));
 
-var _border = require("./border");
+var _transform = _interopRequireDefault(require("./transform"));
 
 var _util = require("./util");
 

package/dist/index.js

@@ -11,12 +11,12 @@ Object.defineProperty(exports, "transformCSS", {
   }
 });
 
+var _parse = _interopRequireDefault(require("css/lib/parse"));
+
 var _cssMediaquery = _interopRequireDefault(require("css-mediaquery"));
 
 var _cssToReactNative = _interopRequireDefault(require("./css-to-react-native"));
 
-var _parse = _interopRequireDefault(require("css/lib/parse"));
-
 var _features = require("./transforms/media-queries/features");
 
 var _types = require("./transforms/media-queries/types");

package/dist/utils/camelCase.js

@@ -9,7 +9,7 @@ function camelCase(str) {
   // Lower cases the string
   return str.toLowerCase() // Replaces any - or _ characters with a space
   .replace(/[-_]+/g, ' ') // Removes any non alphanumeric characters
-  .replace(/[^\w\s]/g, '') // Uppercases the first character in each group immediately following a space
+  .replace(/[^\w\s]/g, '') // Uppercase the first character in each group immediately following a space
   // (delimited by spaces)
   .replace(/ (.)/g, function ($1) {
     return $1.toUpperCase();

package/package.json

@@ -1,20 +1,16 @@
 {
   "name": "taro-css-to-react-native",
   "description": "Convert CSS text to a React Native stylesheet object",
-  "version": "3.5.0-theta.0",
+  "version": "3.5.1",
   "main": "dist/index.js",
   "license": "MIT",
   "dependencies": {
     "camelize": "^1.0.0",
-    "css": "^2.2.4",
+    "css": "^3.0.0",
     "css-color-keywords": "^1.0.0",
     "css-mediaquery": "^0.1.2",
     "postcss-value-parser": "^3.3.0"
   },
-  "scripts": {
-    "build": "babel src --ignore *.spec.js --out-dir ./dist",
-    "test": "jest"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/NervJS/taro.git"
@@ -47,20 +43,15 @@
       "<rootDir>/node_modules"
     ]
   },
-  "lint-staged": {
-    "*.{js,json,md}": [
-      "prettier --write",
-      "git add"
-    ]
-  },
-  "prettier": {
-    "trailingComma": "all"
-  },
   "files": [
     "dist",
     "src",
     "index.d.ts",
     "CHANGELOG.md",
     "README.md"
-  ]
-}
+  ],
+  "scripts": {
+    "build": "babel src --ignore *.spec.js --out-dir ./dist",
+    "test": "jest"
+  }
+}

package/src/css-to-react-native/index.js

@@ -1,23 +1,29 @@
 /* eslint-disable no-param-reassign */
-import parse from 'postcss-value-parser'
 import camelizeStyleName from 'camelize'
-import transforms from './transforms/index'
+import parse from 'postcss-value-parser'
+
 import TokenStream from './TokenStream'
+import transforms from './transforms/index'
 
 // Note if this is wrong, you'll need to change tokenTypes.js too
-const numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?:px)?$/i
+const numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)((?:px)|(?:vw$)|(?:vh$)|(?:vmin$)|(?:vmax$))?$/i
 const boolRe = /^true|false$/i
 const nullRe = /^null$/i
 const undefinedRe = /^undefined$/i
 
 // Undocumented export
-export const transformRawValue = input => {
+export const transformRawValue = (input) => {
   const value = input.trim()
 
   const numberMatch = value.match(numberOrLengthRe)
   if (numberMatch !== null) {
     const num = Number(numberMatch[1])
-    if (/(\d+)px/.test(value)) {
+    const unit = numberMatch[2]
+    const isViewportUnit = ['vw', 'vh', 'vmin', 'vmax'].includes(unit)
+
+    if (isViewportUnit) {
+      return `scaleVu2dp(${num}, '${unit}')`
+    } else if (/(\d+)px/.test(value)) {
       return `scalePx2dp(${num})`
     } else {
       return num
@@ -47,7 +53,9 @@ const checkBaseTransformShorthandValue = (propName, inputValue) => {
   try {
     return baseTransformShorthandValue(propName, inputValue)
   } catch (e) {
-    throw new Error(`${e.message} Failed to parse declaration "${propName}: ${inputValue}"`)
+    throw new Error(
+      `${e.message} Failed to parse declaration "${propName}: ${inputValue}"`,
+    )
   }
 }
 
@@ -58,11 +66,15 @@ const transformShorthandValue =
 
 export const getStylesForProperty = (propName, inputValue, allowShorthand) => {
   const isRawValue = allowShorthand === false || !(propName in transforms)
-  const propValue = isRawValue ? transformRawValue(inputValue) : transformShorthandValue(propName, inputValue.trim())
-  return propValue && propValue.$merge ? propValue.$merge : { [propName]: propValue }
+  const propValue = isRawValue
+    ? transformRawValue(inputValue)
+    : transformShorthandValue(propName, inputValue.trim())
+  return propValue && propValue.$merge
+    ? propValue.$merge
+    : { [propName]: propValue }
 }
 
-export const getPropertyName = propName => {
+export const getPropertyName = (propName) => {
   const isCustomProp = /^--\w+/.test(propName)
   if (isCustomProp) {
     return propName
@@ -75,5 +87,8 @@ export default (rules, shorthandBlacklist = []) =>
     const propertyName = getPropertyName(rule[0])
     const value = rule[1]
     const allowShorthand = shorthandBlacklist.indexOf(propertyName) === -1
-    return Object.assign(accum, getStylesForProperty(propertyName, value, allowShorthand))
+    return Object.assign(
+      accum,
+      getStylesForProperty(propertyName, value, allowShorthand),
+    )
   }, {})

package/src/css-to-react-native/tokenTypes.js

@@ -1,20 +1,25 @@
-import { stringify } from 'postcss-value-parser'
+/* eslint-disable react/display-name */
 import cssColorKeywords from 'css-color-keywords'
+import { stringify } from 'postcss-value-parser'
 
-const matchString = node => {
+const matchString = (node) => {
   if (node.type !== 'string') return null
   return node.value
-    .replace(/\\([0-9a-f]{1,6})(?:\s|$)/gi, (match, charCode) => String.fromCharCode(parseInt(charCode, 16)))
+    .replace(/\\([0-9a-f]{1,6})(?:\s|$)/gi, (match, charCode) =>
+      String.fromCharCode(parseInt(charCode, 16)),
+    )
     .replace(/\\/g, '')
 }
 
 const hexColorRe = /^(#(?:[0-9a-f]{3,4}){1,2})$/i
 const cssFunctionNameRe = /^(rgba?|hsla?|hwb|lab|lch|gray|color)$/
 
-const matchColor = node => {
+const matchColor = (node) => {
   if (
     node.type === 'word' &&
-    (hexColorRe.test(node.value) || node.value in cssColorKeywords || node.value === 'transparent')
+    (hexColorRe.test(node.value) ||
+      node.value in cssColorKeywords ||
+      node.value === 'transparent')
   ) {
     return node.value
   } else if (node.type === 'function' && cssFunctionNameRe.test(node.value)) {
@@ -29,22 +34,24 @@ const identRe = /(^-?[_a-z][_a-z0-9-]*$)/i
 // Note if these are wrong, you'll need to change index.js too
 const numberRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)$/
 // Note lengthRe is sneaky: you can omit units for 0
-const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)((?=px$)|(?=Px$)|(?=PX$)|(?=pX$)))/
-const unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|rem|vh|vw|vmin|vmax|cm|mm|in|pc|pt))$/
+const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)((?=px$)|(?=Px$)|(?=PX$)|(?=pX$)|(?=vw$)|(?=vh$)|(?=vmin$)|(?=vmax$)))/
+const unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|rem|cm|mm|in|pc|pt))$/
 const angleRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(?:deg|rad))$/
 const percentRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?%)$/
+const viewportUnitRe = /(\d+)(vw|vh|vmin|vmax)/
 
-const noopToken = predicate => node => (predicate(node) ? '<token>' : null)
+const noopToken = (predicate) => (node) => predicate(node) ? '<token>' : null
 
-const valueForTypeToken = type => node => (node.type === type ? node.value : null)
+const valueForTypeToken = (type) => (node) =>
+  node.type === type ? node.value : null
 
-const functionValueForTypeToken = type => node => {
+const functionValueForTypeToken = (type) => (node) => {
   if (node.type === type) {
     // handle rgb(a) function value
     if (/^rgba?$/i.test(node.value)) {
       const result = node.nodes
-        .filter(token => token.type === 'word')
-        .map(token => token.value)
+        .filter((token) => token.type === 'word')
+        .map((token) => token.value)
 
       return `${node.value}(${result.join(', ')})`
     }
@@ -52,24 +59,31 @@ const functionValueForTypeToken = type => node => {
   return null
 }
 
-export const regExpToken = (regExp, transform = String) => node => {
-  if (node.type !== 'word') return null
+export const regExpToken =
+  (regExp, transform = String) =>
+    (node) => {
+      if (node.type !== 'word') return null
 
-  const match = node.value.match(regExp)
-  if (match === null) return null
+      const match = node.value.match(regExp)
+      if (match === null) return null
 
-  const value = transform(match[1])
-  if (/(\d+)px/.test(node.value)) {
-    return `scalePx2dp(${value})`
-  } else {
-    return value
-  }
-}
+      const value = transform(match[1])
+      const unit = node.value.match(viewportUnitRe)?.[2]
+      const isViewportUnit = ['vh', 'vw', 'vmin', 'vmax'].includes(unit)
+
+      if (isViewportUnit) {
+        return `scaleVu2dp(${value}, '${unit}')`
+      } else if (/(\d+)px/.test(node.value)) {
+        return `scalePx2dp(${value})`
+      } else {
+        return value
+      }
+    }
 
 export const tokens = {
-  SPACE: noopToken(node => node.type === 'space'),
-  SLASH: noopToken(node => node.type === 'div' && node.value === '/'),
-  COMMA: noopToken(node => node.type === 'div' && node.value === ','),
+  SPACE: noopToken((node) => node.type === 'space'),
+  SLASH: noopToken((node) => node.type === 'div' && node.value === '/'),
+  COMMA: noopToken((node) => node.type === 'div' && node.value === ','),
   WORD: valueForTypeToken('word'),
   FUNC: functionValueForTypeToken('function'),
   NONE: regExpToken(noneRe),
@@ -82,5 +96,5 @@ export const tokens = {
   IDENT: regExpToken(identRe),
   STRING: matchString,
   COLOR: matchColor,
-  LINE: regExpToken(/^(none|underline|line-through)$/i)
+  LINE: regExpToken(/^(none|underline|line-through)$/i),
 }

package/src/css-to-react-native/transforms/border.js

@@ -1,29 +1,23 @@
 import { regExpToken, tokens } from '../tokenTypes'
-import { directionFactory, anyOrderFactory } from './util'
+import { anyOrderFactory, directionFactory } from './util'
 
-const {
-  WORD,
-  FUNC,
-  COLOR,
-  LENGTH,
-  UNSUPPORTED_LENGTH_UNIT
-} = tokens
+const { WORD, FUNC, COLOR, LENGTH, UNSUPPORTED_LENGTH_UNIT } = tokens
 
 function borderDirectionFactory (direction = '') {
   const prefix = `border${direction}`
   return anyOrderFactory({
     [`${prefix}Width`]: {
       tokens: [LENGTH, UNSUPPORTED_LENGTH_UNIT],
-      default: 1
+      default: 1,
     },
     [`${prefix}Color`]: {
       tokens: [COLOR],
-      default: 'black'
+      default: 'black',
     },
     [`${prefix}Style`]: {
       tokens: [regExpToken(/^(solid|dashed|dotted)$/)],
-      default: 'solid'
-    }
+      default: 'solid',
+    },
   })
 }
 
@@ -37,13 +31,16 @@ export const borderLeft = borderDirectionFactory('Left')
 export const borderColor = directionFactory({
   types: [WORD, FUNC],
   prefix: 'border',
-  suffix: 'Color'
+  suffix: 'Color',
 })
 
 export const borderRadius = directionFactory({
   directions: ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft'],
   prefix: 'border',
-  suffix: 'Radius'
+  suffix: 'Radius',
 })
 
-export const borderWidth = directionFactory({ prefix: 'border', suffix: 'Width' })
+export const borderWidth = directionFactory({
+  prefix: 'border',
+  suffix: 'Width',
+})

package/src/css-to-react-native/transforms/font.js

@@ -1,5 +1,5 @@
-import parseFontFamily from './fontFamily'
 import { regExpToken, tokens } from '../tokenTypes'
+import parseFontFamily from './fontFamily'
 
 const { SPACE, LENGTH, UNSUPPORTED_LENGTH_UNIT, NUMBER, SLASH } = tokens
 const NORMAL = regExpToken(/^(normal)$/)
@@ -11,7 +11,7 @@ const defaultFontStyle = 'normal'
 const defaultFontWeight = 'normal'
 const defaultFontVariant = []
 
-export default tokenStream => {
+export default (tokenStream) => {
   let fontStyle
   let fontWeight
   let fontVariant
@@ -25,9 +25,15 @@ export default tokenStream => {
       /* pass */
     } else if (typeof fontStyle === 'undefined' && tokenStream.matches(STYLE)) {
       fontStyle = tokenStream.lastValue
-    } else if (typeof fontWeight === 'undefined' && tokenStream.matches(WEIGHT)) {
+    } else if (
+      typeof fontWeight === 'undefined' &&
+      tokenStream.matches(WEIGHT)
+    ) {
       fontWeight = tokenStream.lastValue
-    } else if (typeof fontVariant === 'undefined' && tokenStream.matches(VARIANT)) {
+    } else if (
+      typeof fontVariant === 'undefined' &&
+      tokenStream.matches(VARIANT)
+    ) {
       fontVariant = [tokenStream.lastValue]
     } else {
       break
@@ -41,7 +47,10 @@ export default tokenStream => {
 
   if (tokenStream.matches(SLASH)) {
     if (tokenStream.matches(NUMBER)) {
-      const size = typeof fontSize === 'string' ? fontSize.replace(/scalePx2dp\((\d+)\)/, '$1') : fontSize
+      const size =
+        typeof fontSize === 'string'
+          ? fontSize.replace(/scalePx2dp\((\d+)\)/, '$1')
+          : fontSize
       lineHeight = size * tokenStream.lastValue
     } else {
       lineHeight = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)

package/src/css-to-react-native/transforms/index.js

@@ -1,45 +1,47 @@
 import { regExpToken, tokens } from '../tokenTypes'
+import {
+  border,
+  borderBottom,
+  borderColor,
+  borderLeft,
+  borderRadius,
+  borderRight,
+  borderTop,
+  borderWidth,
+} from './border'
 import boxShadow from './boxShadow'
 import flex from './flex'
 import font from './font'
 import fontFamily from './fontFamily'
-import textShadow from './textShadow'
 import textDecoration from './textDecoration'
 import textDecorationLine from './textDecorationLine'
+import textShadow from './textShadow'
 import transform from './transform'
-import { border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius, borderWidth } from './border'
-import { directionFactory, anyOrderFactory, shadowOffsetFactory } from './util'
+import { anyOrderFactory, directionFactory, shadowOffsetFactory } from './util'
 
-const {
-  IDENT,
-  WORD,
-  COLOR,
-  LENGTH,
-  UNSUPPORTED_LENGTH_UNIT,
-  PERCENT,
-  AUTO
-} = tokens
+const { IDENT, WORD, COLOR, LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, AUTO } =
+  tokens
 
-const background = tokenStream => ({
-  $merge: { backgroundColor: tokenStream.expect(COLOR) }
+const background = (tokenStream) => ({
+  $merge: { backgroundColor: tokenStream.expect(COLOR) },
 })
 const margin = directionFactory({
   types: [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, AUTO],
-  prefix: 'margin'
+  prefix: 'margin',
 })
 const padding = directionFactory({ prefix: 'padding' })
 const flexFlow = anyOrderFactory({
   flexWrap: {
     tokens: [regExpToken(/(nowrap|wrap|wrap-reverse)/)],
-    default: 'nowrap'
+    default: 'nowrap',
   },
   flexDirection: {
     tokens: [regExpToken(/(row|row-reverse|column|column-reverse)/)],
-    default: 'row'
-  }
+    default: 'row',
+  },
 })
-const fontVariant = tokenStream => [tokenStream.expect(IDENT)]
-const fontWeight = tokenStream => tokenStream.expect(WORD) // Also match numbers as strings
+const fontVariant = (tokenStream) => [tokenStream.expect(IDENT)]
+const fontWeight = (tokenStream) => tokenStream.expect(WORD) // Also match numbers as strings
 const shadowOffset = shadowOffsetFactory()
 const textShadowOffset = shadowOffsetFactory()
 
@@ -67,5 +69,5 @@ export default {
   textShadowOffset,
   textDecoration,
   textDecorationLine,
-  transform
+  transform,
 }

package/src/index.js

@@ -1,9 +1,10 @@
+import parseCSS from 'css/lib/parse'
 import mediaQuery from 'css-mediaquery'
+
 import transformCSS from './css-to-react-native'
-import parseCSS from 'css/lib/parse'
 import {
   dimensionFeatures,
-  mediaQueryFeatures
+  mediaQueryFeatures,
 } from './transforms/media-queries/features'
 import { mediaQueryTypes } from './transforms/media-queries/types'
 import { remToPx } from './transforms/rem'
@@ -15,12 +16,13 @@ import { values } from './utils/values'
 const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?=px|rem$))/
 const viewportUnitRe = /^([+-]?[0-9.]+)(vh|vw|vmin|vmax)$/
 const percentRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?%)$/
-const unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|cm|mm|in|pc|pt))$/
+const unsupportedUnitRe =
+  /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|cm|mm|in|pc|pt))$/
 const shorthandBorderProps = [
   'border-radius',
   'border-width',
   'border-color',
-  'border-style'
+  'border-style',
 ]
 
 const transformDecls = (styles, declarations, result, options = {}) => {
@@ -103,7 +105,7 @@ const transform = (css, options) => {
 
           if (isAlreadyDefinedAsClass) {
             throw new Error(
-              `Failed to parse :export block because a CSS class in the same file is already using the name "${property}"`
+              `Failed to parse :export block because a CSS class in the same file is already using the name "${property}"`,
             )
           }
 
@@ -136,12 +138,12 @@ const transform = (css, options) => {
     ) {
       const parsed = mediaQuery.parse(rule.media)
 
-      parsed.forEach(mq => {
+      parsed.forEach((mq) => {
         if (mediaQueryTypes.indexOf(mq.type) === -1) {
           throw new Error(`Failed to parse media query type "${mq.type}"`)
         }
 
-        mq.expressions.forEach(e => {
+        mq.expressions.forEach((e) => {
           const mf = e.modifier ? `${e.modifier}-${e.feature}` : e.feature
           const val = e.value ? `: ${e.value}` : ''
 
@@ -154,7 +156,7 @@ const transform = (css, options) => {
             lengthRe.test(e.value) === false
           ) {
             throw new Error(
-              `Failed to parse media query expression "(${mf}${val})"`
+              `Failed to parse media query expression "(${mf}${val})"`,
             )
           }
         })
@@ -186,8 +188,6 @@ const transform = (css, options) => {
   return result
 }
 
-export {
-  transformCSS
-}
+export { transformCSS }
 
 export default transform

package/src/utils/camelCase.js

@@ -7,7 +7,7 @@ export function camelCase (str) {
       .replace(/[-_]+/g, ' ')
       // Removes any non alphanumeric characters
       .replace(/[^\w\s]/g, '')
-      // Uppercases the first character in each group immediately following a space
+      // Uppercase the first character in each group immediately following a space
       // (delimited by spaces)
       .replace(/ (.)/g, function ($1) {
         return $1.toUpperCase()