@cssxjs/css-to-react-native 3.2.0-0

package/src/__tests__/textDecoration.js

@@ -0,0 +1,165 @@
+import transformCss from '..'
+
+it('transforms text-decoration into text-decoration- properties', () => {
+  expect(transformCss([['text-decoration', 'underline dotted red']])).toEqual({
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'dotted',
+    textDecorationColor: 'red',
+  })
+})
+
+it('transforms text-decoration without color', () => {
+  expect(transformCss([['text-decoration', 'underline dotted']])).toEqual({
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'dotted',
+    textDecorationColor: 'black',
+  })
+})
+
+it('transforms text-decoration without style', () => {
+  expect(transformCss([['text-decoration', 'underline red']])).toEqual({
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'red',
+  })
+})
+
+it('transforms text-decoration without style and color', () => {
+  expect(transformCss([['text-decoration', 'underline']])).toEqual({
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'black',
+  })
+})
+
+it('transforms text-decoration with two line properties', () => {
+  expect(
+    transformCss([['text-decoration', 'underline line-through dashed red']])
+  ).toEqual({
+    textDecorationLine: 'underline line-through',
+    textDecorationStyle: 'dashed',
+    textDecorationColor: 'red',
+  })
+})
+
+it('transforms text-decoration in different order', () => {
+  expect(
+    transformCss([['text-decoration', 'dashed red underline line-through']])
+  ).toEqual({
+    textDecorationLine: 'underline line-through',
+    textDecorationStyle: 'dashed',
+    textDecorationColor: 'red',
+  })
+})
+
+it('transforms text-decoration with ine in different order', () => {
+  expect(transformCss([['text-decoration', 'line-through underline']])).toEqual(
+    {
+      textDecorationLine: 'underline line-through',
+      textDecorationStyle: 'solid',
+      textDecorationColor: 'black',
+    }
+  )
+})
+
+it('transforms text-decoration with none', () => {
+  expect(transformCss([['text-decoration', 'none']])).toEqual({
+    textDecorationLine: 'none',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'black',
+  })
+})
+
+it('transforms text-decoration with none as part of multiple terms', () => {
+  expect(transformCss([['text-decoration', 'yellow none']])).toEqual({
+    textDecorationLine: 'none',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'yellow',
+  })
+})
+
+it('transforms text-decoration with none in capitals', () => {
+  expect(transformCss([['text-decoration', 'yellow NONE']])).toEqual({
+    textDecorationLine: 'none',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'yellow',
+  })
+})
+
+it('transforms text-decoration with style in capitals', () => {
+  expect(
+    transformCss([['text-decoration', 'yellow UNDERLINE LINE-THROUGH']])
+  ).toEqual({
+    textDecorationLine: 'underline line-through',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'yellow',
+  })
+})
+
+it('does not transform text-decoration if multiple colors are used', () => {
+  expect(() =>
+    transformCss([['text-decoration', 'underline red yellow']])
+  ).toThrow()
+})
+
+it('transforms text-decoration with var() for color', () => {
+  expect(
+    transformCss([['text-decoration', 'underline var(--primary-color)']])
+  ).toEqual({
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'var(--primary-color)',
+  })
+})
+
+it('transforms text-decoration with var() and style', () => {
+  expect(
+    transformCss([['text-decoration', 'underline dotted var(--primary-color)']])
+  ).toEqual({
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'dotted',
+    textDecorationColor: 'var(--primary-color)',
+  })
+})
+
+it('transforms text-decoration with var() and fallback', () => {
+  expect(
+    transformCss([['text-decoration', 'underline var(--primary-color, red)']])
+  ).toEqual({
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'var(--primary-color, red)',
+  })
+})
+
+it('transforms text-decoration with var() and hex fallback', () => {
+  expect(
+    transformCss([['text-decoration', 'underline var(--primary-color, #f00)']])
+  ).toEqual({
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'var(--primary-color, #f00)',
+  })
+})
+
+it('transforms text-decoration with var() and rgb fallback', () => {
+  expect(
+    transformCss([
+      ['text-decoration', 'underline var(--primary-color, rgb(255, 0, 0))'],
+    ])
+  ).toEqual({
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'solid',
+    textDecorationColor: 'var(--primary-color, rgb(255,0,0))',
+  })
+})
+
+it('transforms text-decoration with var() in different order', () => {
+  expect(
+    transformCss([['text-decoration', 'var(--primary-color) underline dotted']])
+  ).toEqual({
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'dotted',
+    textDecorationColor: 'var(--primary-color)',
+  })
+})

package/src/__tests__/textDecorationLine.js

@@ -0,0 +1,23 @@
+import transformCss from '..'
+
+it('transforms text-decoration-line with underline line-through', () => {
+  expect(
+    transformCss([['text-decoration-line', 'underline line-through']])
+  ).toEqual({
+    textDecorationLine: 'underline line-through',
+  })
+})
+
+it('transforms text-decoration-line with line-through underline', () => {
+  expect(
+    transformCss([['text-decoration-line', 'line-through underline']])
+  ).toEqual({
+    textDecorationLine: 'underline line-through',
+  })
+})
+
+it('transforms text-decoration-line with none', () => {
+  expect(transformCss([['text-decoration-line', 'none']])).toEqual({
+    textDecorationLine: 'none',
+  })
+})

package/src/__tests__/textShadow.js

@@ -0,0 +1,107 @@
+import transformCss from '..'
+
+it('textShadow with all values', () => {
+  expect(transformCss([['text-shadow', '10px 20px 30px red']])).toEqual({
+    textShadowOffset: { width: 10, height: 20 },
+    textShadowRadius: 30,
+    textShadowColor: 'red',
+  })
+})
+
+it('textShadow omitting blur', () => {
+  expect(transformCss([['text-shadow', '10px 20px red']])).toEqual({
+    textShadowOffset: { width: 10, height: 20 },
+    textShadowRadius: 0,
+    textShadowColor: 'red',
+  })
+})
+
+it('textShadow omitting color', () => {
+  expect(transformCss([['text-shadow', '10px 20px']])).toEqual({
+    textShadowOffset: { width: 10, height: 20 },
+    textShadowRadius: 0,
+    textShadowColor: 'black',
+  })
+})
+
+it('textShadow enforces offset-x and offset-y', () => {
+  expect(() => transformCss([['text-shadow', 'red']])).toThrow()
+  expect(() => transformCss([['text-shadow', '10px red']])).toThrow()
+})
+
+it('textShadow with var() for color', () => {
+  expect(
+    transformCss([['text-shadow', '10px 20px var(--primary-color)']])
+  ).toEqual({
+    textShadowOffset: { width: 10, height: 20 },
+    textShadowRadius: 0,
+    textShadowColor: 'var(--primary-color)',
+  })
+})
+
+it('textShadow with var() and blur-radius', () => {
+  expect(
+    transformCss([['text-shadow', '10px 20px 30px var(--primary-color)']])
+  ).toEqual({
+    textShadowOffset: { width: 10, height: 20 },
+    textShadowRadius: 30,
+    textShadowColor: 'var(--primary-color)',
+  })
+})
+
+it('textShadow with var() and named color fallback', () => {
+  expect(
+    transformCss([['text-shadow', '10px 20px var(--primary-color, red)']])
+  ).toEqual({
+    textShadowOffset: { width: 10, height: 20 },
+    textShadowRadius: 0,
+    textShadowColor: 'var(--primary-color, red)',
+  })
+})
+
+it('textShadow with var() and hex color fallback', () => {
+  expect(
+    transformCss([['text-shadow', '10px 20px var(--primary-color, #f00)']])
+  ).toEqual({
+    textShadowOffset: { width: 10, height: 20 },
+    textShadowRadius: 0,
+    textShadowColor: 'var(--primary-color, #f00)',
+  })
+})
+
+it('textShadow with var() and rgb color fallback', () => {
+  expect(
+    transformCss([
+      ['text-shadow', '10px 20px var(--primary-color, rgb(255, 0, 0))'],
+    ])
+  ).toEqual({
+    textShadowOffset: { width: 10, height: 20 },
+    textShadowRadius: 0,
+    textShadowColor: 'var(--primary-color, rgb(255,0,0))',
+  })
+})
+
+it('textShadow with var() and rgba color fallback', () => {
+  expect(
+    transformCss([
+      [
+        'text-shadow',
+        '10px 20px var(--primary-color, rgba(100, 100, 100, 0.5))',
+      ],
+    ])
+  ).toEqual({
+    textShadowOffset: { width: 10, height: 20 },
+    textShadowRadius: 0,
+    textShadowColor: 'var(--primary-color, rgba(100,100,100,0.5))',
+  })
+})
+
+it('textShadow with var() color before offset', () => {
+  expect(
+    transformCss([['text-shadow', 'var(--primary-color) 10px 20px 30px']])
+  ).toEqual({
+    textShadowOffset: { width: 10, height: 20 },
+    textShadowRadius: 30,
+    textShadowColor: 'var(--primary-color)',
+  })
+})

package/src/__tests__/transform.js

@@ -0,0 +1,69 @@
+import transformCss from '..'
+
+it('transforms a single transform value with number', () => {
+  expect(transformCss([['transform', 'scaleX(5)']])).toEqual({
+    transform: [{ scaleX: 5 }],
+  })
+})
+
+it('transforms a single transform value with string', () => {
+  expect(transformCss([['transform', 'rotate(5deg)']])).toEqual({
+    transform: [{ rotate: '5deg' }],
+  })
+})
+
+it('transforms a single transform value with percentage', () => {
+  expect(transformCss([['transform', 'translate(100%, 100%)']])).toEqual({
+    transform: [{ translateY: '100%' }, { translateX: '100%' }],
+  })
+})
+
+it('transforms multiple transform values with percentage', () => {
+  expect(
+    transformCss([['transform', 'translateY(100%) translateX(100%)']])
+  ).toEqual({
+    transform: [{ translateX: '100%' }, { translateY: '100%' }],
+  })
+})
+
+it('transforms multiple transform values', () => {
+  expect(transformCss([['transform', 'scaleX(5) skewX(1deg)']])).toEqual({
+    transform: [{ skewX: '1deg' }, { scaleX: 5 }],
+  })
+})
+
+it('transforms scale(number, number) to scaleX and scaleY', () => {
+  expect(transformCss([['transform', 'scale(2, 3)']])).toEqual({
+    transform: [{ scaleY: 3 }, { scaleX: 2 }],
+  })
+})
+
+it('transforms scale(number) to scale', () => {
+  expect(transformCss([['transform', 'scale(5)']])).toEqual({
+    transform: [{ scale: 5 }],
+  })
+})
+
+it('transforms translate(length, length) to translateX and translateY', () => {
+  expect(transformCss([['transform', 'translate(2px, 3px)']])).toEqual({
+    transform: [{ translateY: 3 }, { translateX: 2 }],
+  })
+})
+
+it('transforms translate(length) to translateX and translateY', () => {
+  expect(transformCss([['transform', 'translate(5px)']])).toEqual({
+    transform: [{ translateY: 0 }, { translateX: 5 }],
+  })
+})
+
+it('transforms skew(angle, angle) to skewX and skewY', () => {
+  expect(transformCss([['transform', 'skew(2deg, 3deg)']])).toEqual({
+    transform: [{ skewY: '3deg' }, { skewX: '2deg' }],
+  })
+})
+
+it('transforms skew(angle) to skewX and skewY', () => {
+  expect(transformCss([['transform', 'skew(5deg)']])).toEqual({
+    transform: [{ skewY: '0deg' }, { skewX: '5deg' }],
+  })
+})

package/src/__tests__/units.js

@@ -0,0 +1,132 @@
+import transformCss from '..'
+
+// List of units from:
+// https://developer.mozilla.org/en-US/docs/Web/CSS/length
+const lengthUnits = [
+  'ch',
+  'em',
+  'ex',
+  'rem',
+  'vh',
+  'vw',
+  'vmin',
+  'vmax',
+  'cm',
+  'mm',
+  'in',
+  'pc',
+  'pt',
+]
+
+lengthUnits.forEach(unit => {
+  const value = `2${unit}`
+
+  it('allows CSS length units in transformed values', () => {
+    expect(transformCss([['margin', value]])).toEqual({
+      marginTop: value,
+      marginRight: value,
+      marginBottom: value,
+      marginLeft: value,
+    })
+    expect(transformCss([['padding', value]])).toEqual({
+      paddingTop: value,
+      paddingRight: value,
+      paddingBottom: value,
+      paddingLeft: value,
+    })
+  })
+
+  it('allows CSS length units with 0 and unit', () => {
+    expect(transformCss([['padding', `0${unit}`]])).toEqual({
+      paddingTop: `0${unit}`,
+      paddingRight: `0${unit}`,
+      paddingBottom: `0${unit}`,
+      paddingLeft: `0${unit}`,
+    })
+  })
+
+  it('allows mixed units in transformed values', () => {
+    expect(transformCss([['margin', `10px ${value}`]])).toEqual({
+      marginTop: 10,
+      marginRight: value,
+      marginBottom: 10,
+      marginLeft: value,
+    })
+  })
+
+  it('allows units to be used with border shorthand property', () => {
+    expect(transformCss([['border', `#f00 ${value} dashed`]])).toEqual({
+      borderWidth: value,
+      borderColor: '#f00',
+      borderStyle: 'dashed',
+    })
+
+    expect(transformCss([['border', value]])).toEqual({
+      borderWidth: value,
+      borderColor: 'black',
+      borderStyle: 'solid',
+    })
+  })
+
+  it('allows units to be used with border-width', () => {
+    expect(transformCss([['border-width', `1px 2px ${value} 4px`]])).toEqual({
+      borderTopWidth: 1,
+      borderRightWidth: 2,
+      borderBottomWidth: value,
+      borderLeftWidth: 4,
+    })
+  })
+
+  it('allows units to be used with border-radius', () => {
+    expect(transformCss([['border-radius', `1px ${value} 3px 4px`]])).toEqual({
+      borderTopLeftRadius: 1,
+      borderTopRightRadius: value,
+      borderBottomRightRadius: 3,
+      borderBottomLeftRadius: 4,
+    })
+  })
+
+  it('allows units to be used with font-size', () => {
+    expect(transformCss([['font-size', value]])).toEqual({
+      fontSize: value,
+    })
+  })
+
+  it('allows units to be used with font shorthand property', () => {
+    expect(
+      transformCss([['font', `bold italic ${value}/${value} "Helvetica"`]])
+    ).toEqual({
+      fontFamily: 'Helvetica',
+      fontSize: value,
+      fontWeight: 'bold',
+      fontStyle: 'italic',
+      fontVariant: [],
+      lineHeight: value,
+    })
+  })
+
+  it('allows untis to be used with text-shadow ', () => {
+    expect(transformCss([['text-shadow', `10px ${value} red`]])).toEqual({
+      textShadowOffset: { width: 10, height: value },
+      textShadowRadius: 0,
+      textShadowColor: 'red',
+    })
+  })
+
+  it('allows untis to be used with box-shadow', () => {
+    expect(
+      transformCss([['box-shadow', `10px ${value} ${value} red`]])
+    ).toEqual({
+      shadowOffset: { width: 10, height: value },
+      shadowRadius: value,
+      shadowColor: 'red',
+      shadowOpacity: 1,
+    })
+  })
+})
+
+it('throws for unit that is not supported', () => {
+  expect(() => transformCss([['margin', '10ic']])).toThrow(
+    'Failed to parse declaration "margin: 10ic"'
+  )
+})

package/src/devPropertiesWithoutUnitsRegExp.js

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

package/src/index.js

@@ -0,0 +1,90 @@
+/* eslint-disable no-param-reassign */
+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+(?:e[+-]?\d+)?)(?:px)?$/i
+const numberOnlyRe = /^[+-]?(?:\d*\.\d*|[1-9]\d*)(?:e[+-]?\d+)?$/i
+const boolRe = /^true|false$/i
+const nullRe = /^null$/i
+const undefinedRe = /^undefined$/i
+
+// Undocumented export
+export const transformRawValue = (propName, value) => {
+  if (process.env.NODE_ENV !== 'production') {
+    const needsUnit = !devPropertiesWithoutUnitsRegExp.test(propName)
+    const isNumberWithoutUnit = numberOnlyRe.test(value)
+    if (needsUnit && isNumberWithoutUnit) {
+      // eslint-disable-next-line no-console
+      console.warn(`Expected style "${propName}: ${value}" to contain units`)
+    }
+    if (!needsUnit && value !== '0' && !isNumberWithoutUnit) {
+      // eslint-disable-next-line no-console
+      console.warn(`Expected style "${propName}: ${value}" to be unitless`)
+    }
+  }
+
+  const numberMatch = value.match(numberOrLengthRe)
+  if (numberMatch !== null) return Number(numberMatch[1])
+
+  const boolMatch = value.match(boolRe)
+  if (boolMatch !== null) return boolMatch[0].toLowerCase() === 'true'
+
+  const nullMatch = value.match(nullRe)
+  if (nullMatch !== null) return null
+
+  const undefinedMatch = value.match(undefinedRe)
+  if (undefinedMatch !== null) return undefined
+
+  return value
+}
+
+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, value) => {
+        try {
+          return baseTransformShorthandValue(propName, value)
+        } catch (e) {
+          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(propName, value) }
+    : transformShorthandValue(propName, value)
+
+  return propValues
+}
+
+export const getPropertyName = propName => {
+  const isCustomProp = /^--\w+/.test(propName)
+  if (isCustomProp) {
+    return propName
+  }
+  return camelizeStyleName(propName)
+}
+
+export default (rules, shorthandBlacklist = []) =>
+  rules.reduce((accum, rule) => {
+    const propertyName = getPropertyName(rule[0])
+    const value = rule[1]
+    const allowShorthand = shorthandBlacklist.indexOf(propertyName) === -1
+    return Object.assign(
+      accum,
+      getStylesForProperty(propertyName, value, allowShorthand)
+    )
+  }, {})