Housekeeping

Author: jacobp100

.babelrc

@@ -1 +1 @@
-{ "presets": ["es2015"] }
+{ "presets": ["@babel/preset-env"] }

.gitignore

@@ -1,3 +1,2 @@
 /node_modules
 /index.js
-/package-lock.json

.npmrc

@@ -1,8 +1,17 @@
+export type StyleTuple = [string, string]
+
 export interface Style {
-	[key: string]: string | number | Style;
+  [key: string]: string | number | Style
 }
 
-export function getPropertyName(name: string): string;
-export function getStylesForProperty(name: string, value: string, allowShorthand?: boolean): Style;
+export function getPropertyName(name: string): string
+export function getStylesForProperty(
+  name: string,
+  value: string,
+  allowShorthand?: boolean
+): Style
 
-export default function transform(css: Array<[string, string]>, shorthandBlacklist?: string[]): Style;
+export default function transform(
+  styleTuples: StyleTuple[],
+  shorthandBlacklist?: string[]
+): Style

index.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "css-to-react-native",
-  "version": "2.3.2",
+  "version": "3.0.0",
   "description": "Convert CSS text to a React Native stylesheet object",
   "main": "index.js",
   "scripts": {
@@ -37,22 +37,22 @@
     "testURL": "http://localhost"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
+    "@babel/cli": "^6.26.0",
+    "@babel/preset-env": "^6.24.1",
     "eslint": "^4.17.0",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-prettier": "^2.6.0",
-    "jest": "^22.2.2",
+    "jest": "^24.9.0",
     "lint-staged": "^6.1.0",
-    "prettier": "^1.10.2",
-    "rollup": "^0.55.5"
+    "prettier": "^1.18.2",
+    "rollup": "^1.22.0"
   },
   "dependencies": {
     "camelize": "^1.0.0",
     "css-color-keywords": "^1.0.0",
-    "postcss-value-parser": "^3.3.0"
+    "postcss-value-parser": "^4.0.2"
   },
   "lint-staged": {
     "*.js": [

package.json

@@ -71,3 +71,15 @@ it('transforms border shorthand missing color & style', () => {
     borderStyle: 'solid',
   })
 })
+
+it('transforms border for unsupported units', () => {
+  expect(transformCss([['border', '3em solid black']])).toEqual({
+    borderWidth: '3em',
+    borderColor: 'black',
+    borderStyle: 'solid',
+  })
+})
+
+it('does not transform border with percentage width', () => {
+  expect(() => transformCss([['border', '3% solid black']])).toThrow()
+})

src/__tests__/border.js

@@ -77,6 +77,22 @@ it('transforms flex shorthand with flex-basis set to auto', () => {
   })
 })
 
+it('transforms flex shorthand with flex-basis set to percent', () => {
+  expect(transformCss([['flex', '1 2 30%']])).toEqual({
+    flexGrow: 1,
+    flexShrink: 2,
+    flexBasis: '30%',
+  })
+})
+
+it('transforms flex shorthand with flex-basis set to unsupported unit', () => {
+  expect(transformCss([['flex', '1 2 30em']])).toEqual({
+    flexGrow: 1,
+    flexShrink: 2,
+    flexBasis: '30em',
+  })
+})
+
 it('transforms flex shorthand with flex-basis set to auto appearing first', () => {
   expect(transformCss([['flex', 'auto 0 1']])).toEqual({
     flexGrow: 0,

src/__tests__/flex.js

@@ -1,14 +1,31 @@
 import transformCss, { getStylesForProperty } from '..'
 
 it('transforms numbers', () => {
-  expect(
-    transformCss([['top', '0'], ['left', '0'], ['right', '0'], ['bottom', '0']])
-  ).toEqual({
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  })
+  expect(transformCss([['zIndex', '0']])).toEqual({ zIndex: 0 })
+})
+
+it('warns if missing units on unspecialized transform', () => {
+  const consoleSpy = jest
+    .spyOn(global.console, 'warn')
+    .mockImplementation(() => {
+      // Silence the warning from the test output
+    })
+
+  transformCss([['top', '1']])
+  expect(consoleSpy).toHaveBeenCalledWith(
+    'Expected style "top: 1" to contain units'
+  )
+
+  consoleSpy.mockRestore()
+})
+
+it('does not warn for unitless 0 length on unspecialized transform', () => {
+  const consoleSpy = jest.spyOn(global.console, 'warn')
+
+  transformCss([['top', '0']])
+  expect(consoleSpy).not.toHaveBeenCalled()
+
+  consoleSpy.mockRestore()
 })
 
 it('allows pixels in unspecialized transform', () => {

src/__tests__/index.js

@@ -0,0 +1,19 @@
+import transformCss from '..'
+
+it('transforms place content', () => {
+  expect(transformCss([['place-content', 'center center']])).toEqual({
+    alignContent: 'center',
+    justifyContent: 'center',
+  })
+})
+
+it('transforms place content with one value', () => {
+  expect(transformCss([['place-content', 'center']])).toEqual({
+    alignContent: 'center',
+    justifyContent: 'stretch',
+  })
+})
+
+it('does not allow justify content without align content', () => {
+  expect(() => transformCss([['place-content', 'space-everly']])).toThrow()
+})

src/__tests__/placeContent.js

@@ -0,0 +1,19 @@
+let propertiesWitouthUnits
+if (process.env.NODE_ENV !== 'production') {
+  propertiesWitouthUnits = [
+    'aspectRatio',
+    'elevation',
+    'flexGrow',
+    'flexShrink',
+    'opacity',
+    'shadowOpacity',
+    'zIndex',
+  ]
+}
+
+const devPropertiesWithUnitsRegExp =
+  propertiesWitouthUnits != null
+    ? new RegExp(propertiesWitouthUnits.join('|'))
+    : null
+
+export default devPropertiesWithUnitsRegExp

src/devPropertiesWithoutUnitsRegExp.js

@@ -2,57 +2,67 @@
 import parse from 'postcss-value-parser'
 import camelizeStyleName from 'camelize'
 import transforms from './transforms/index'
+import devPropertiesWithoutUnitsRegExp from './devPropertiesWithoutUnitsRegExp'
 import TokenStream from './TokenStream'
 
 // Note if this is wrong, you'll need to change tokenTypes.js too
 const numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?:px)?$/i
 const boolRe = /^true|false$/i
 const nullRe = /^null$/i
 const undefinedRe = /^undefined$/i
+const numberOnlyRe = /^[1-9.-][\d.Ee+-]*$/
 
 // Undocumented export
-export const transformRawValue = input => {
-  const value = input.trim()
+export const transformRawValue = (propName, value) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (
+      !devPropertiesWithoutUnitsRegExp.test(propName) &&
+      numberOnlyRe.test(value)
+    ) {
+      // eslint-disable-next-line no-console
+      console.warn(`Expected style "${propName}: ${value}" to contain units`)
+    }
+  }
 
   const numberMatch = value.match(numberOrLengthRe)
   if (numberMatch !== null) return Number(numberMatch[1])
 
-  const boolMatch = input.match(boolRe)
+  const boolMatch = value.match(boolRe)
   if (boolMatch !== null) return boolMatch[0].toLowerCase() === 'true'
 
-  const nullMatch = input.match(nullRe)
+  const nullMatch = value.match(nullRe)
   if (nullMatch !== null) return null
 
-  const undefinedMatch = input.match(undefinedRe)
+  const undefinedMatch = value.match(undefinedRe)
   if (undefinedMatch !== null) return undefined
 
   return value
 }
 
-const baseTransformShorthandValue = (propName, inputValue) => {
-  const ast = parse(inputValue.trim())
+const baseTransformShorthandValue = (propName, value) => {
+  const ast = parse(value)
   const tokenStream = new TokenStream(ast.nodes)
   return transforms[propName](tokenStream)
 }
 
 const transformShorthandValue =
   process.env.NODE_ENV === 'production'
     ? baseTransformShorthandValue
-    : (propName, inputValue) => {
+    : (propName, value) => {
         try {
-          return baseTransformShorthandValue(propName, inputValue)
+          return baseTransformShorthandValue(propName, value)
         } catch (e) {
-          throw new Error(
-            `Failed to parse declaration "${propName}: ${inputValue}"`
-          )
+          throw new Error(`Failed to parse declaration "${propName}: ${value}"`)
         }
       }
 
 export const getStylesForProperty = (propName, inputValue, allowShorthand) => {
   const isRawValue = allowShorthand === false || !(propName in transforms)
+  const value = inputValue.trim()
+
   const propValues = isRawValue
-    ? { [propName]: transformRawValue(inputValue) }
-    : transformShorthandValue(propName, inputValue.trim())
+    ? { [propName]: transformRawValue(propName, value) }
+    : transformShorthandValue(propName, value)
 
   return propValues
 }

src/index.js

@@ -23,8 +23,8 @@ export default tokenStream => {
     if (partsParsed !== 0) tokenStream.expect(SPACE)
 
     if (
-      (borderWidth === undefined && tokenStream.matches(LENGTH)) ||
-      tokenStream.matches(UNSUPPORTED_LENGTH_UNIT)
+      borderWidth === undefined &&
+      tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
     ) {
       borderWidth = tokenStream.lastValue
     } else if (borderColor === undefined && tokenStream.matches(COLOR)) {

src/transforms/border.js

@@ -1,6 +1,14 @@
 import { tokens } from '../tokenTypes'
 
-const { NONE, AUTO, NUMBER, LENGTH, SPACE } = tokens
+const {
+  NONE,
+  AUTO,
+  NUMBER,
+  LENGTH,
+  UNSUPPORTED_LENGTH_UNIT,
+  PERCENT,
+  SPACE,
+} = tokens
 
 const defaultFlexGrow = 1
 const defaultFlexShrink = 1
@@ -35,7 +43,10 @@ export default tokenStream => {
       } else {
         tokenStream.rewind()
       }
-    } else if (flexBasis === undefined && tokenStream.matches(LENGTH)) {
+    } else if (
+      flexBasis === undefined &&
+      tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT)
+    ) {
       flexBasis = tokenStream.lastValue
     } else if (flexBasis === undefined && tokenStream.matches(AUTO)) {
       flexBasis = 'auto'

src/transforms/flex.js

@@ -5,6 +5,7 @@ import flex from './flex'
 import flexFlow from './flexFlow'
 import font from './font'
 import fontFamily from './fontFamily'
+import placeContent from './placeContent'
 import textDecoration from './textDecoration'
 import textDecorationLine from './textDecorationLine'
 import textShadow from './textShadow'
@@ -68,6 +69,7 @@ export default {
   fontWeight,
   margin,
   padding,
+  placeContent,
   shadowOffset,
   textShadow,
   textShadowOffset,

src/transforms/index.js

@@ -0,0 +1,26 @@
+import { regExpToken, tokens } from '../tokenTypes'
+
+const { SPACE } = tokens
+
+const ALIGN_CONTENT = regExpToken(
+  /(flex-(?:start|end)|center|stretch|space-(?:between|around))/
+)
+const JUSTIFY_CONTENT = regExpToken(
+  /(flex-(?:start|end)|center|space-(?:between|around|evenly))/
+)
+
+export default tokenStream => {
+  const alignContent = tokenStream.expect(ALIGN_CONTENT)
+
+  let justifyContent
+  if (tokenStream.hasTokens()) {
+    tokenStream.expect(SPACE)
+    justifyContent = tokenStream.expect(JUSTIFY_CONTENT)
+  } else {
+    justifyContent = 'stretch'
+  }
+
+  tokenStream.expectEmpty()
+
+  return { alignContent, justifyContent }
+}