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

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@cssxjs/css-to-react-native",
+  "version": "3.2.0-0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Convert CSS text to a React Native stylesheet object",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "rollup ./src/index.js -o index.js --f cjs && babel index.js -o index.js",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "lint": "eslint src",
+    "prepublish": "npm run build",
+    "precommit": "lint-staged",
+    "lint-staged": "lint-staged"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/styled-components/css-to-react-native.git"
+  },
+  "keywords": [
+    "styled-components",
+    "React",
+    "ReactNative",
+    "styles",
+    "CSS"
+  ],
+  "author": "Jacob Parker",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/styled-components/css-to-react-native/issues"
+  },
+  "homepage": "https://github.com/styled-components/css-to-react-native#readme",
+  "jest": {
+    "testURL": "http://localhost"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
+    "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": "^24.9.0",
+    "lint-staged": "^6.1.0",
+    "prettier": "^1.18.2",
+    "rollup": "^1.22.0"
+  },
+  "dependencies": {
+    "camelize": "^1.0.0",
+    "css-color-keywords": "^1.0.0",
+    "postcss-value-parser": "^4.0.2"
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ]
+  }
+}

package/src/TokenStream.js

@@ -0,0 +1,74 @@
+const SYMBOL_MATCH = 'SYMBOL_MATCH'
+
+export default class TokenStream {
+  constructor(nodes, parent) {
+    this.index = 0
+    this.nodes = nodes
+    this.functionName = parent != null ? parent.value : null
+    this.lastValue = null
+    this.rewindIndex = -1
+  }
+
+  hasTokens() {
+    return this.index <= this.nodes.length - 1
+  }
+
+  [SYMBOL_MATCH](...tokenDescriptors) {
+    if (!this.hasTokens()) return null
+
+    const node = this.nodes[this.index]
+
+    for (let i = 0; i < tokenDescriptors.length; i += 1) {
+      const tokenDescriptor = tokenDescriptors[i]
+      const value = tokenDescriptor(node)
+      if (value !== null) {
+        this.index += 1
+        this.lastValue = value
+        return value
+      }
+    }
+
+    return null
+  }
+
+  matches(...tokenDescriptors) {
+    return this[SYMBOL_MATCH](...tokenDescriptors) !== null
+  }
+
+  expect(...tokenDescriptors) {
+    const value = this[SYMBOL_MATCH](...tokenDescriptors)
+    return value !== null ? value : this.throw()
+  }
+
+  matchesFunction() {
+    const node = this.nodes[this.index]
+    if (node.type !== 'function') return null
+    const value = new TokenStream(node.nodes, node)
+    this.index += 1
+    this.lastValue = null
+    return value
+  }
+
+  expectFunction() {
+    const value = this.matchesFunction()
+    return value !== null ? value : this.throw()
+  }
+
+  expectEmpty() {
+    if (this.hasTokens()) this.throw()
+  }
+
+  throw() {
+    throw new Error(`Unexpected token type: ${this.nodes[this.index].type}`)
+  }
+
+  saveRewindPoint() {
+    this.rewindIndex = this.index
+  }
+
+  rewind() {
+    if (this.rewindIndex === -1) throw new Error('Internal error')
+    this.index = this.rewindIndex
+    this.lastValue = null
+  }
+}

package/src/__tests__/aspectRatio.js

@@ -0,0 +1,23 @@
+import transformCss from '..'
+
+it('handles regular aspect ratio values', () => {
+  expect(transformCss([['aspect-ratio', '1.5']])).toEqual({
+    aspectRatio: 1.5,
+  })
+})
+
+it('handles CSS-style aspect ratios', () => {
+  expect(transformCss([['aspect-ratio', '3 / 2']])).toEqual({
+    aspectRatio: 1.5,
+  })
+})
+
+it('handles CSS-style aspect ratios without spaces', () => {
+  expect(transformCss([['aspect-ratio', '3/2']])).toEqual({
+    aspectRatio: 1.5,
+  })
+})
+
+it('throws when omitting second value after slash', () => {
+  expect(() => transformCss([['aspect-ratio', '3/']])).toThrow()
+})

package/src/__tests__/border.js

@@ -0,0 +1,141 @@
+import transformCss from '..'
+
+it('transforms border none', () => {
+  expect(transformCss([['border', 'none']])).toEqual({
+    borderWidth: 0,
+    borderColor: 'black',
+    borderStyle: 'solid',
+  })
+})
+
+it('transforms border shorthand', () => {
+  expect(transformCss([['border', '2px dashed #f00']])).toEqual({
+    borderWidth: 2,
+    borderColor: '#f00',
+    borderStyle: 'dashed',
+  })
+})
+
+it('transforms border shorthand in other order', () => {
+  expect(transformCss([['border', '#f00 2px dashed']])).toEqual({
+    borderWidth: 2,
+    borderColor: '#f00',
+    borderStyle: 'dashed',
+  })
+})
+
+it('transforms border shorthand missing color', () => {
+  expect(transformCss([['border', '2px dashed']])).toEqual({
+    borderWidth: 2,
+    borderColor: 'black',
+    borderStyle: 'dashed',
+  })
+})
+
+it('transforms border shorthand missing style', () => {
+  expect(transformCss([['border', '2px #f00']])).toEqual({
+    borderWidth: 2,
+    borderColor: '#f00',
+    borderStyle: 'solid',
+  })
+})
+
+it('transforms border shorthand missing width', () => {
+  expect(transformCss([['border', '#f00 dashed']])).toEqual({
+    borderWidth: 1,
+    borderColor: '#f00',
+    borderStyle: 'dashed',
+  })
+})
+
+it('transforms border shorthand missing color & width', () => {
+  expect(transformCss([['border', 'dashed']])).toEqual({
+    borderWidth: 1,
+    borderColor: 'black',
+    borderStyle: 'dashed',
+  })
+})
+
+it('transforms border shorthand missing style & width', () => {
+  expect(transformCss([['border', '#f00']])).toEqual({
+    borderWidth: 1,
+    borderColor: '#f00',
+    borderStyle: 'solid',
+  })
+})
+
+it('transforms border shorthand missing color & style', () => {
+  expect(transformCss([['border', '2px']])).toEqual({
+    borderWidth: 2,
+    borderColor: 'black',
+    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()
+})
+
+it('transforms border with var() for color', () => {
+  expect(transformCss([['border', '2px solid var(--primary-color)']])).toEqual({
+    borderWidth: 2,
+    borderColor: 'var(--primary-color)',
+    borderStyle: 'solid',
+  })
+})
+
+it('transforms border with var() and named color fallback', () => {
+  expect(
+    transformCss([['border', '2px solid var(--primary-color, red)']])
+  ).toEqual({
+    borderWidth: 2,
+    borderColor: 'var(--primary-color, red)',
+    borderStyle: 'solid',
+  })
+})
+
+it('transforms border with var() and hex color fallback', () => {
+  expect(
+    transformCss([['border', '2px solid var(--primary-color, #f00)']])
+  ).toEqual({
+    borderWidth: 2,
+    borderColor: 'var(--primary-color, #f00)',
+    borderStyle: 'solid',
+  })
+})
+
+it('transforms border with var() and rgb color fallback', () => {
+  expect(
+    transformCss([['border', '2px solid var(--primary-color, rgb(255, 0, 0))']])
+  ).toEqual({
+    borderWidth: 2,
+    borderColor: 'var(--primary-color, rgb(255,0,0))',
+    borderStyle: 'solid',
+  })
+})
+
+it('transforms border with var() in different order', () => {
+  expect(transformCss([['border', 'var(--primary-color) 2px dashed']])).toEqual(
+    {
+      borderWidth: 2,
+      borderColor: 'var(--primary-color)',
+      borderStyle: 'dashed',
+    }
+  )
+})
+
+it('transforms border with only var() color', () => {
+  expect(transformCss([['border', 'var(--primary-color)']])).toEqual({
+    borderWidth: 1,
+    borderColor: 'var(--primary-color)',
+    borderStyle: 'solid',
+  })
+})

package/src/__tests__/borderColor.js

@@ -0,0 +1,92 @@
+import transformCss from '..'
+
+it('transforms border color with multiple values', () => {
+  expect(transformCss([['border-color', 'red yellow green blue']])).toEqual({
+    borderTopColor: 'red',
+    borderRightColor: 'yellow',
+    borderBottomColor: 'green',
+    borderLeftColor: 'blue',
+  })
+})
+
+it('transforms border color with hex color', () => {
+  expect(transformCss([['border-color', '#f00']])).toEqual({
+    borderBottomColor: '#f00',
+    borderLeftColor: '#f00',
+    borderRightColor: '#f00',
+    borderTopColor: '#f00',
+  })
+})
+
+it('transforms border color with rgb color', () => {
+  expect(transformCss([['border-color', 'rgb(255, 0, 0)']])).toEqual({
+    borderBottomColor: 'rgb(255, 0, 0)',
+    borderLeftColor: 'rgb(255, 0, 0)',
+    borderRightColor: 'rgb(255, 0, 0)',
+    borderTopColor: 'rgb(255, 0, 0)',
+  })
+})
+
+it('transforms border color with rgba color', () => {
+  expect(transformCss([['border-color', 'rgba(255, 0, 0, 0.1)']])).toEqual({
+    borderBottomColor: 'rgba(255, 0, 0, 0.1)',
+    borderLeftColor: 'rgba(255, 0, 0, 0.1)',
+    borderRightColor: 'rgba(255, 0, 0, 0.1)',
+    borderTopColor: 'rgba(255, 0, 0, 0.1)',
+  })
+})
+
+it('transforms border color with var()', () => {
+  expect(transformCss([['border-color', 'var(--primary-color)']])).toEqual({
+    borderBottomColor: 'var(--primary-color)',
+    borderLeftColor: 'var(--primary-color)',
+    borderRightColor: 'var(--primary-color)',
+    borderTopColor: 'var(--primary-color)',
+  })
+})
+
+it('transforms border color with var() and fallback', () => {
+  expect(transformCss([['border-color', 'var(--primary-color, red)']])).toEqual(
+    {
+      borderBottomColor: 'var(--primary-color, red)',
+      borderLeftColor: 'var(--primary-color, red)',
+      borderRightColor: 'var(--primary-color, red)',
+      borderTopColor: 'var(--primary-color, red)',
+    }
+  )
+})
+
+it('transforms border color with multiple var() values', () => {
+  expect(
+    transformCss([
+      ['border-color', 'var(--top) var(--right) var(--bottom) var(--left)'],
+    ])
+  ).toEqual({
+    borderTopColor: 'var(--top)',
+    borderRightColor: 'var(--right)',
+    borderBottomColor: 'var(--bottom)',
+    borderLeftColor: 'var(--left)',
+  })
+})
+
+it('transforms border color with var() and hex fallback', () => {
+  expect(
+    transformCss([['border-color', 'var(--primary-color, #f00)']])
+  ).toEqual({
+    borderBottomColor: 'var(--primary-color, #f00)',
+    borderLeftColor: 'var(--primary-color, #f00)',
+    borderRightColor: 'var(--primary-color, #f00)',
+    borderTopColor: 'var(--primary-color, #f00)',
+  })
+})
+
+it('transforms border color with var() and rgb fallback', () => {
+  expect(
+    transformCss([['border-color', 'var(--primary-color, rgb(255, 0, 0))']])
+  ).toEqual({
+    borderBottomColor: 'var(--primary-color, rgb(255,0,0))',
+    borderLeftColor: 'var(--primary-color, rgb(255,0,0))',
+    borderRightColor: 'var(--primary-color, rgb(255,0,0))',
+    borderTopColor: 'var(--primary-color, rgb(255,0,0))',
+  })
+})

package/src/__tests__/boxModel.js

@@ -0,0 +1,136 @@
+import transformCss from '..'
+
+it('transforms margin, padding with 1 value', () => {
+  expect(transformCss([['margin', '1px']])).toEqual({
+    marginTop: 1,
+    marginRight: 1,
+    marginBottom: 1,
+    marginLeft: 1,
+  })
+  expect(transformCss([['padding', '1px']])).toEqual({
+    paddingTop: 1,
+    paddingRight: 1,
+    paddingBottom: 1,
+    paddingLeft: 1,
+  })
+})
+
+it('transforms margin, padding with 2 values', () => {
+  expect(transformCss([['margin', '1px 2px']])).toEqual({
+    marginTop: 1,
+    marginRight: 2,
+    marginBottom: 1,
+    marginLeft: 2,
+  })
+  expect(transformCss([['padding', '1px 2px']])).toEqual({
+    paddingTop: 1,
+    paddingRight: 2,
+    paddingBottom: 1,
+    paddingLeft: 2,
+  })
+})
+
+it('transforms margin, padding with 3 values', () => {
+  expect(transformCss([['margin', '1px 2px 3px']])).toEqual({
+    marginTop: 1,
+    marginRight: 2,
+    marginBottom: 3,
+    marginLeft: 2,
+  })
+  expect(transformCss([['padding', '1px 2px 3px']])).toEqual({
+    paddingTop: 1,
+    paddingRight: 2,
+    paddingBottom: 3,
+    paddingLeft: 2,
+  })
+})
+
+it('transforms margin, padding with 4 values', () => {
+  expect(transformCss([['margin', '1px 2px 3px 4px']])).toEqual({
+    marginTop: 1,
+    marginRight: 2,
+    marginBottom: 3,
+    marginLeft: 4,
+  })
+  expect(transformCss([['padding', '1px 2px 3px 4px']])).toEqual({
+    paddingTop: 1,
+    paddingRight: 2,
+    paddingBottom: 3,
+    paddingLeft: 4,
+  })
+})
+
+it('transforms margin, allowing unitless zero, percentages', () => {
+  expect(transformCss([['margin', '0 0% 10% 100%']])).toEqual({
+    marginTop: 0,
+    marginRight: '0%',
+    marginBottom: '10%',
+    marginLeft: '100%',
+  })
+  expect(transformCss([['padding', '0 0% 10% 100%']])).toEqual({
+    paddingTop: 0,
+    paddingRight: '0%',
+    paddingBottom: '10%',
+    paddingLeft: '100%',
+  })
+})
+
+it('transforms shorthand and overrides previous values', () => {
+  expect(transformCss([['margin-top', '2px'], ['margin', '1px']])).toEqual({
+    marginTop: 1,
+    marginRight: 1,
+    marginBottom: 1,
+    marginLeft: 1,
+  })
+})
+
+it('transforms margin shorthand with auto', () => {
+  expect(transformCss([['margin', 'auto']])).toEqual({
+    marginTop: 'auto',
+    marginRight: 'auto',
+    marginBottom: 'auto',
+    marginLeft: 'auto',
+  })
+  expect(transformCss([['margin', '0 auto']])).toEqual({
+    marginTop: 0,
+    marginRight: 'auto',
+    marginBottom: 0,
+    marginLeft: 'auto',
+  })
+  expect(transformCss([['margin', 'auto 0']])).toEqual({
+    marginTop: 'auto',
+    marginRight: 0,
+    marginBottom: 'auto',
+    marginLeft: 0,
+  })
+  expect(transformCss([['margin', '2px 3px auto']])).toEqual({
+    marginTop: 2,
+    marginRight: 3,
+    marginBottom: 'auto',
+    marginLeft: 3,
+  })
+  expect(transformCss([['margin', '10px auto 4px']])).toEqual({
+    marginTop: 10,
+    marginRight: 'auto',
+    marginBottom: 4,
+    marginLeft: 'auto',
+  })
+})
+
+it('transforms border width', () => {
+  expect(transformCss([['border-width', '1px 2px 3px 4px']])).toEqual({
+    borderTopWidth: 1,
+    borderRightWidth: 2,
+    borderBottomWidth: 3,
+    borderLeftWidth: 4,
+  })
+})
+
+it('transforms border radius', () => {
+  expect(transformCss([['border-radius', '1px 2px 3px 4px']])).toEqual({
+    borderTopLeftRadius: 1,
+    borderTopRightRadius: 2,
+    borderBottomRightRadius: 3,
+    borderBottomLeftRadius: 4,
+  })
+})

package/src/__tests__/boxShadow.js

@@ -0,0 +1,167 @@
+import transformCss from '..'
+
+it('transforms box-shadow into shadow- properties', () => {
+  expect(transformCss([['box-shadow', '10px 20px 30px red']])).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 30,
+    shadowColor: 'red',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow without blur-radius', () => {
+  expect(transformCss([['box-shadow', '10px 20px red']])).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'red',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow without color', () => {
+  expect(transformCss([['box-shadow', '10px 20px']])).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'black',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow with rgb color', () => {
+  expect(
+    transformCss([['box-shadow', '10px 20px rgb(100, 100, 100)']])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'rgb(100, 100, 100)',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow with rgba color', () => {
+  expect(
+    transformCss([['box-shadow', '10px 20px rgba(100, 100, 100, 0.5)']])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'rgba(100, 100, 100, 0.5)',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow with hsl color', () => {
+  expect(
+    transformCss([['box-shadow', '10px 20px hsl(120, 100%, 50%)']])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'hsl(120, 100%, 50%)',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow with hsla color', () => {
+  expect(
+    transformCss([['box-shadow', '10px 20px hsla(120, 100%, 50%, 0.7)']])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'hsla(120, 100%, 50%, 0.7)',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow and throws if multiple colors are used', () => {
+  expect(() =>
+    transformCss([['box-shadow', '0 0 0 red yellow green blue']])
+  ).toThrow()
+})
+
+it('transforms box-shadow enforces offset to be present', () => {
+  expect(() => transformCss([['box-shadow', 'red']])).toThrow()
+  expect(() => transformCss([['box-shadow', '10px red']])).toThrow()
+})
+
+it('transforms box-shadow with var() for color', () => {
+  expect(
+    transformCss([['box-shadow', '10px 20px var(--primary-color)']])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'var(--primary-color)',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow with var() and blur-radius', () => {
+  expect(
+    transformCss([['box-shadow', '10px 20px 30px var(--primary-color)']])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 30,
+    shadowColor: 'var(--primary-color)',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow with var() and named color fallback', () => {
+  expect(
+    transformCss([['box-shadow', '10px 20px var(--primary-color, red)']])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'var(--primary-color, red)',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow with var() and hex color fallback', () => {
+  expect(
+    transformCss([['box-shadow', '10px 20px var(--primary-color, #f00)']])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'var(--primary-color, #f00)',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow with var() and rgb color fallback', () => {
+  expect(
+    transformCss([
+      ['box-shadow', '10px 20px var(--primary-color, rgb(255, 0, 0))'],
+    ])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'var(--primary-color, rgb(255,0,0))',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow with var() and rgba color fallback', () => {
+  expect(
+    transformCss([
+      [
+        'box-shadow',
+        '10px 20px var(--primary-color, rgba(100, 100, 100, 0.5))',
+      ],
+    ])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 0,
+    shadowColor: 'var(--primary-color, rgba(100,100,100,0.5))',
+    shadowOpacity: 1,
+  })
+})
+
+it('transforms box-shadow with var() color before offset', () => {
+  expect(
+    transformCss([['box-shadow', 'var(--primary-color) 10px 20px 30px']])
+  ).toEqual({
+    shadowOffset: { width: 10, height: 20 },
+    shadowRadius: 30,
+    shadowColor: 'var(--primary-color)',
+    shadowOpacity: 1,
+  })
+})