units.js

import transformCss from '..'

// List of units from:
// https://developer.mozilla.org/en-US/docs/Web/CSS/length

describe.each([
  'ch',
  'em',
  'ex',
  'rem',
  'vh',
  'vw',
  'vmin',
  'vmax',
  'cm',
  'mm',
  'in',
  'pc',
  'pt',
])('Handles unit: %s', 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({
      borderTopWidth: value,
      borderRightWidth: value,
      borderBottomWidth: value,
      borderLeftWidth: value,
      borderTopColor: '#f00',
      borderRightColor: '#f00',
      borderBottomColor: '#f00',
      borderLeftColor: '#f00',
      borderStyle: 'dashed',
    })

    expect(transformCss([['border', `${value} solid`]])).toEqual({
      borderTopWidth: value,
      borderRightWidth: value,
      borderBottomWidth: value,
      borderLeftWidth: value,
      borderTopColor: 'black',
      borderRightColor: 'black',
      borderBottomColor: 'black',
      borderLeftColor: '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"'
  )
})