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

package/src/__tests__/colors.js

@@ -0,0 +1,31 @@
+import transformCss from '..'
+
+it('transforms hex colors', () => {
+  expect(transformCss([['color', '#f00']])).toEqual({ color: '#f00' })
+})
+
+it('transforms rgb colors', () => {
+  expect(transformCss([['color', 'rgb(255, 0, 0)']])).toEqual({
+    color: 'rgb(255, 0, 0)',
+  })
+})
+
+it('transforms transparent color', () => {
+  expect(transformCss([['color', 'transparent']])).toEqual({
+    color: 'transparent',
+  })
+})
+
+it('transforms border shorthand with transparent color', () => {
+  expect(transformCss([['border', '2px dashed transparent']])).toEqual({
+    borderColor: 'transparent',
+    borderStyle: 'dashed',
+    borderWidth: 2,
+  })
+})
+
+it('transforms background shorthand with transparent color', () => {
+  expect(transformCss([['background', 'transparent']])).toEqual({
+    backgroundColor: 'transparent',
+  })
+})

package/src/__tests__/flex.js

@@ -0,0 +1,122 @@
+import transformCss from '..'
+
+it('transforms flex shorthand with 3 values', () => {
+  expect(transformCss([['flex', '1 2 3px']])).toEqual({
+    flexGrow: 1,
+    flexShrink: 2,
+    flexBasis: 3,
+  })
+})
+
+it('transforms flex shorthand with 3 values in reverse order', () => {
+  expect(transformCss([['flex', '3px 1 2']])).toEqual({
+    flexGrow: 1,
+    flexShrink: 2,
+    flexBasis: 3,
+  })
+})
+
+it('transforms flex shorthand with 2 values of flex-grow and flex-shrink', () => {
+  expect(transformCss([['flex', '1 2']])).toEqual({
+    flexGrow: 1,
+    flexShrink: 2,
+    flexBasis: 0,
+  })
+})
+
+it('transforms flex shorthand with 2 values of flex-grow and flex-basis', () => {
+  expect(transformCss([['flex', '2 2px']])).toEqual({
+    flexGrow: 2,
+    flexShrink: 1,
+    flexBasis: 2,
+  })
+})
+
+it('transforms flex shorthand with 2 values of flex-grow and flex-basis (reversed)', () => {
+  expect(transformCss([['flex', '2px 2']])).toEqual({
+    flexGrow: 2,
+    flexShrink: 1,
+    flexBasis: 2,
+  })
+})
+
+it('transforms flex shorthand with 1 value of flex-grow', () => {
+  expect(transformCss([['flex', '2']])).toEqual({
+    flexGrow: 2,
+    flexShrink: 1,
+    flexBasis: 0,
+  })
+})
+
+it('transforms flex shorthand with 1 value of flex-basis', () => {
+  expect(transformCss([['flex', '10px']])).toEqual({
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 10,
+  })
+})
+
+/*
+A unitless zero that is not already preceded by two flex factors must be interpreted as a flex
+factor. To avoid misinterpretation or invalid declarations, authors must specify a zero
+<‘flex-basis’> component with a unit or precede it by two flex factors.
+*/
+it('transforms flex shorthand with flex-grow/shrink taking priority over basis', () => {
+  expect(transformCss([['flex', '0 1 0']])).toEqual({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 0,
+  })
+})
+
+it('transforms flex shorthand with flex-basis set to auto', () => {
+  expect(transformCss([['flex', '0 1 auto']])).toEqual({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: '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,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  })
+})
+
+it('transforms flex auto keyword', () => {
+  expect(transformCss([['flex', 'auto']])).toEqual({
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  })
+})
+
+it('transforms flex none keyword', () => {
+  expect(transformCss([['flex', 'none']])).toEqual({
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+  })
+})
+
+it('does not transform invalid flex', () => {
+  expect(() => transformCss([['flex', '1 2px 3']])).toThrow()
+})

package/src/__tests__/flexFlow.js

@@ -0,0 +1,22 @@
+import transformCss from '..'
+
+it('transforms flexFlow shorthand with two values', () => {
+  expect(transformCss([['flex-flow', 'column wrap']])).toEqual({
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+  })
+})
+
+it('transforms flexFlow shorthand missing flexDirection', () => {
+  expect(transformCss([['flex-flow', 'wrap']])).toEqual({
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  })
+})
+
+it('transforms flexFlow shorthand missing flexWrap', () => {
+  expect(transformCss([['flex-flow', 'column']])).toEqual({
+    flexDirection: 'column',
+    flexWrap: 'nowrap',
+  })
+})

package/src/__tests__/font.js

@@ -0,0 +1,117 @@
+import transformCss from '..'
+
+it('transforms font', () => {
+  expect(
+    transformCss([['font', 'bold italic small-caps 16px/18px "Helvetica"']])
+  ).toEqual({
+    fontFamily: 'Helvetica',
+    fontSize: 16,
+    fontWeight: 'bold',
+    fontStyle: 'italic',
+    fontVariant: ['small-caps'],
+    lineHeight: 18,
+  })
+})
+
+it('transforms font missing font-variant', () => {
+  expect(transformCss([['font', 'bold italic 16px/18px "Helvetica"']])).toEqual(
+    {
+      fontFamily: 'Helvetica',
+      fontSize: 16,
+      fontWeight: 'bold',
+      fontStyle: 'italic',
+      fontVariant: [],
+      lineHeight: 18,
+    }
+  )
+})
+
+it('transforms font missing font-style', () => {
+  expect(
+    transformCss([['font', 'bold small-caps 16px/18px "Helvetica"']])
+  ).toEqual({
+    fontFamily: 'Helvetica',
+    fontSize: 16,
+    fontWeight: 'bold',
+    fontStyle: 'normal',
+    fontVariant: ['small-caps'],
+    lineHeight: 18,
+  })
+})
+
+it('transforms font missing font-weight', () => {
+  expect(
+    transformCss([['font', 'italic small-caps 16px/18px "Helvetica"']])
+  ).toEqual({
+    fontFamily: 'Helvetica',
+    fontSize: 16,
+    fontWeight: 'normal',
+    fontStyle: 'italic',
+    fontVariant: ['small-caps'],
+    lineHeight: 18,
+  })
+})
+
+it('transforms font with font-weight normal', () => {
+  expect(transformCss([['font', 'normal 16px/18px "Helvetica"']])).toEqual({
+    fontFamily: 'Helvetica',
+    fontSize: 16,
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    fontVariant: [],
+    lineHeight: 18,
+  })
+})
+
+it('transforms font with font-weight and font-style normal', () => {
+  expect(
+    transformCss([['font', 'normal normal 16px/18px "Helvetica"']])
+  ).toEqual({
+    fontFamily: 'Helvetica',
+    fontSize: 16,
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    fontVariant: [],
+    lineHeight: 18,
+  })
+})
+
+it('transforms font with no font-weight, font-style, and font-variant', () => {
+  expect(transformCss([['font', '16px/18px "Helvetica"']])).toEqual({
+    fontFamily: 'Helvetica',
+    fontSize: 16,
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    fontVariant: [],
+    lineHeight: 18,
+  })
+})
+
+it('omits line height if not specified', () => {
+  expect(transformCss([['font', '16px "Helvetica"']])).toEqual({
+    fontFamily: 'Helvetica',
+    fontSize: 16,
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    fontVariant: [],
+  })
+})
+
+it('does not allow line height as multiple', () => {
+  expect(() => {
+    transformCss([['font', '16px/1.5 "Helvetica"']])
+  }).toThrow()
+})
+
+it('transforms font without quotes', () => {
+  expect(
+    transformCss([['font', 'bold italic small-caps 16px/18px Helvetica Neue']])
+  ).toEqual({
+    fontFamily: 'Helvetica Neue',
+    fontSize: 16,
+    fontWeight: 'bold',
+    fontStyle: 'italic',
+    fontVariant: ['small-caps'],
+    lineHeight: 18,
+  })
+})

package/src/__tests__/fontFamily.js

@@ -0,0 +1,43 @@
+import transformCss from '..'
+
+it('transforms font-family with double quotes', () => {
+  expect(transformCss([['font-family', '"Helvetica Neue"']])).toEqual({
+    fontFamily: 'Helvetica Neue',
+  })
+})
+
+it('transforms font-family with single quotes', () => {
+  expect(transformCss([['font-family', "'Helvetica Neue'"]])).toEqual({
+    fontFamily: 'Helvetica Neue',
+  })
+})
+
+it('transforms font-family without quotes', () => {
+  expect(transformCss([['font-family', 'Helvetica Neue']])).toEqual({
+    fontFamily: 'Helvetica Neue',
+  })
+})
+
+it('transforms font-family with quotes with otherwise invalid values', () => {
+  expect(transformCss([['font-family', '"Goudy Bookletter 1911"']])).toEqual({
+    fontFamily: 'Goudy Bookletter 1911',
+  })
+})
+
+it('transforms font-family with quotes with escaped values', () => {
+  expect(transformCss([['font-family', '"test\\A test"']])).toEqual({
+    fontFamily: 'test\ntest',
+  })
+})
+
+it('transforms font-family with quotes with escaped quote', () => {
+  expect(transformCss([['font-family', '"test\\"test"']])).toEqual({
+    fontFamily: 'test"test',
+  })
+})
+
+it('does not transform invalid unquoted font-family', () => {
+  expect(() =>
+    transformCss([['font-family', 'Goudy Bookletter 1911']])
+  ).toThrow()
+})

package/src/__tests__/fontVariant.js

@@ -0,0 +1,15 @@
+import transformCss from '..'
+
+it('transforms font variant as an array', () => {
+  expect(transformCss([['font-variant', 'tabular-nums']])).toEqual({
+    fontVariant: ['tabular-nums'],
+  })
+})
+
+it('transforms multiple font variant as an array', () => {
+  expect(
+    transformCss([['font-variant', 'tabular-nums oldstyle-nums']])
+  ).toEqual({
+    fontVariant: ['tabular-nums', 'oldstyle-nums'],
+  })
+})

package/src/__tests__/fontWeight.js

@@ -0,0 +1,8 @@
+import transformCss from '..'
+
+it('transforms font weights as strings', () => {
+  expect(transformCss([['font-weight', '400']])).toEqual({ fontWeight: '400' })
+  expect(transformCss([['font-weight', 'bold']])).toEqual({
+    fontWeight: 'bold',
+  })
+})

package/src/__tests__/index.js

@@ -0,0 +1,238 @@
+import transformCss, { getStylesForProperty } from '..'
+
+it('transforms numbers', () => {
+  expect(transformCss([['z-index', '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('warns if adding etraneous units on unspecialized transform', () => {
+  const consoleSpy = jest
+    .spyOn(global.console, 'warn')
+    .mockImplementation(() => {
+      // Silence the warning from the test output
+    })
+
+  transformCss([['opacity', '1px']])
+  expect(consoleSpy).toHaveBeenCalledWith(
+    'Expected style "opacity: 1px" to be unitless'
+  )
+
+  consoleSpy.mockRestore()
+})
+
+it('does not warn for unitless 0 length on unitless transform', () => {
+  const consoleSpy = jest.spyOn(global.console, 'warn')
+
+  transformCss([['opacity', '0']])
+  expect(consoleSpy).not.toHaveBeenCalled()
+
+  consoleSpy.mockRestore()
+})
+
+it('allows pixels in unspecialized transform', () => {
+  expect(transformCss([['top', '0px']])).toEqual({ top: 0 })
+})
+
+it('allows boolean values', () => {
+  expect(
+    transformCss([
+      ['boolTrue1', 'true'],
+      ['boolTrue2', 'TRUE'],
+      ['boolFalse1', 'false'],
+      ['boolFalse2', 'FALSE'],
+    ])
+  ).toEqual({
+    boolTrue1: true,
+    boolTrue2: true,
+    boolFalse1: false,
+    boolFalse2: false,
+  })
+})
+
+it('allows null values', () => {
+  expect(transformCss([['null1', 'null'], ['null2', 'NULL']])).toEqual({
+    null1: null,
+    null2: null,
+  })
+})
+
+it('allows undefined values', () => {
+  expect(
+    transformCss([['undefined1', 'undefined'], ['undefined2', 'UNDEFINED']])
+  ).toEqual({
+    undefined1: undefined,
+    undefined2: undefined,
+  })
+})
+
+it('allows CSS custom properties to pass through', () => {
+  expect(transformCss([['--my-prop', '0%']])).toEqual({ '--my-prop': '0%' })
+})
+
+it('allows percent in unspecialized transform', () => {
+  expect(transformCss([['top', '0%']])).toEqual({ top: '0%' })
+})
+
+it('allows decimal values', () => {
+  expect(getStylesForProperty('margin', '0.5px').marginTop).toBe(0.5)
+  expect(getStylesForProperty('margin', '1.5px').marginTop).toBe(1.5)
+  expect(getStylesForProperty('margin', '10.5px').marginTop).toBe(10.5)
+  expect(getStylesForProperty('margin', '100.5px').marginTop).toBe(100.5)
+  expect(getStylesForProperty('margin', '-0.5px').marginTop).toBe(-0.5)
+  expect(getStylesForProperty('margin', '-1.5px').marginTop).toBe(-1.5)
+  expect(getStylesForProperty('margin', '-10.5px').marginTop).toBe(-10.5)
+  expect(getStylesForProperty('margin', '-100.5px').marginTop).toBe(-100.5)
+  expect(getStylesForProperty('margin', '.5px').marginTop).toBe(0.5)
+  expect(getStylesForProperty('margin', '-.5px').marginTop).toBe(-0.5)
+})
+
+it('allows decimal values in transformed values', () => {
+  expect(transformCss([['border-radius', '1.5px']])).toEqual({
+    borderTopLeftRadius: 1.5,
+    borderTopRightRadius: 1.5,
+    borderBottomRightRadius: 1.5,
+    borderBottomLeftRadius: 1.5,
+  })
+})
+
+it('allows negative values in transformed values', () => {
+  expect(transformCss([['border-radius', '-1.5px']])).toEqual({
+    borderTopLeftRadius: -1.5,
+    borderTopRightRadius: -1.5,
+    borderBottomRightRadius: -1.5,
+    borderBottomLeftRadius: -1.5,
+  })
+})
+
+it('allows uppercase units', () => {
+  expect(transformCss([['top', '0PX']])).toEqual({ top: 0 })
+  expect(transformCss([['transform', 'rotate(30DEG)']])).toEqual({
+    transform: [{ rotate: '30deg' }],
+  })
+})
+
+it('allows percent values in transformed values', () => {
+  expect(transformCss([['margin', '10%']])).toEqual({
+    marginTop: '10%',
+    marginRight: '10%',
+    marginBottom: '10%',
+    marginLeft: '10%',
+  })
+})
+
+it('allows color values in transformed border-color values', () => {
+  expect(transformCss([['border-color', 'red']])).toEqual({
+    borderTopColor: 'red',
+    borderRightColor: 'red',
+    borderBottomColor: 'red',
+    borderLeftColor: 'red',
+  })
+})
+
+it('allows omitting units for 0', () => {
+  expect(transformCss([['margin', '10px 0']])).toEqual({
+    marginTop: 10,
+    marginRight: 0,
+    marginBottom: 10,
+    marginLeft: 0,
+  })
+})
+
+it('transforms strings', () => {
+  expect(transformCss([['color', 'red']])).toEqual({ color: 'red' })
+})
+
+it('converts to camel-case', () => {
+  expect(transformCss([['background-color', 'red']])).toEqual({
+    backgroundColor: 'red',
+  })
+})
+
+it('transforms background to backgroundColor', () => {
+  expect(transformCss([['background', '#f00']])).toEqual({
+    backgroundColor: '#f00',
+  })
+})
+
+it('transforms background to backgroundColor with rgb', () => {
+  expect(transformCss([['background', 'rgb(255, 0, 0)']])).toEqual({
+    backgroundColor: 'rgb(255, 0, 0)',
+  })
+})
+
+it('transforms background to backgroundColor with named colour', () => {
+  expect(transformCss([['background', 'red']])).toEqual({
+    backgroundColor: 'red',
+  })
+})
+
+it('allows blacklisting shorthands', () => {
+  const actualStyles = transformCss(
+    [['border-radius', '50px']],
+    ['borderRadius']
+  )
+  expect(actualStyles).toEqual({ borderRadius: 50 })
+})
+
+it('throws useful errors', () => {
+  expect(() => transformCss([['margin', '10']])).toThrow(
+    'Failed to parse declaration "margin: 10"'
+  )
+})
+
+it('transforms background with var() for color', () => {
+  expect(transformCss([['background', 'var(--primary-color)']])).toEqual({
+    backgroundColor: 'var(--primary-color)',
+  })
+})
+
+it('transforms background with var() and named color fallback', () => {
+  expect(transformCss([['background', 'var(--primary-color, red)']])).toEqual({
+    backgroundColor: 'var(--primary-color, red)',
+  })
+})
+
+it('transforms background with var() and hex color fallback', () => {
+  expect(transformCss([['background', 'var(--primary-color, #f00)']])).toEqual({
+    backgroundColor: 'var(--primary-color, #f00)',
+  })
+})
+
+it('transforms background with var() and rgb color fallback', () => {
+  expect(
+    transformCss([['background', 'var(--primary-color, rgb(255, 0, 0))']])
+  ).toEqual({
+    backgroundColor: 'var(--primary-color, rgb(255,0,0))',
+  })
+})
+
+it('transforms background with var() and rgba color fallback', () => {
+  expect(
+    transformCss([['background', 'var(--primary-color, rgba(255, 0, 0, 0.5))']])
+  ).toEqual({
+    backgroundColor: 'var(--primary-color, rgba(255,0,0,0.5))',
+  })
+})

package/src/__tests__/placeContent.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-evenly']])).toThrow()
+})

package/src/__tests__/shadowOffsets.js

@@ -0,0 +1,13 @@
+import transformCss from '..'
+
+it('transforms shadow offsets', () => {
+  expect(transformCss([['shadow-offset', '10px 5px']])).toEqual({
+    shadowOffset: { width: 10, height: 5 },
+  })
+})
+
+it('transforms text shadow offsets', () => {
+  expect(transformCss([['text-shadow-offset', '10px 5px']])).toEqual({
+    textShadowOffset: { width: 10, height: 5 },
+  })
+})