Merge pull request #71 from styled-components/text-shadow

Implement text shadow, unify text & box shadow, improve spec complian…

Author: jacobp100

.eslintrc.js

@@ -4,4 +4,10 @@ module.exports = {
   rules: {
     'prettier/prettier': 2,
   },
+  overrides: [
+    {
+      files: '**/__tests__/*.js',
+      env: { jest: true },
+    },
+  ],
 }

package.json

@@ -34,14 +34,14 @@
   },
   "homepage": "https://github.com/styled-components/css-to-react-native#readme",
   "devDependencies": {
-    "babel-cli": "^6.18.0",
-    "babel-preset-es2015": "^6.18.0",
-    "eslint": "^3.9.1",
-    "eslint-config-airbnb-base": "^10.0.1",
+    "babel-cli": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "eslint": "^4.17.0",
+    "eslint-config-airbnb-base": "^12.1.0",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-prettier": "^2.6.0",
-    "jest": "^17.0.0",
+    "jest": "^22.2.2",
     "lint-staged": "^6.1.0",
     "prettier": "^1.10.2"
   },

src/index.test.js

@@ -1,4 +1,4 @@
-/* global jest it, expect */
+/* global it, expect */
 import transformCss, { getStylesForProperty } from '.'
 
 const runTest = (inputCss, expectedStyles) => {
@@ -490,14 +490,6 @@ it('transforms box-shadow without blur-radius', () =>
   }))
 
 it('transforms box-shadow without color', () =>
-  runTest([['box-shadow', '10px 20px 30px']], {
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 30,
-    shadowColor: 'black',
-    shadowOpacity: 1,
-  }))
-
-it('transforms box-shadow without blur-radius, color', () =>
   runTest([['box-shadow', '10px 20px']], {
     shadowOffset: { width: 10, height: 20 },
     shadowRadius: 0,
@@ -540,21 +532,12 @@ it('transforms box-shadow with hsla color', () =>
 it('transforms box-shadow and throws if multiple colors are used', () => {
   expect(() =>
     transformCss([['box-shadow', '0 0 0 red yellow green blue']])
-  ).toThrow(
-    'Failed to parse declaration "boxShadow: 0 0 0 red yellow green blue"'
-  )
+  ).toThrow()
 })
 
 it('transforms box-shadow enforces offset to be present', () => {
-  expect(() => transformCss([['box-shadow', 'red']])).toThrow(
-    'Failed to parse declaration "boxShadow: red"'
-  )
-})
-
-it('transforms box-shadow and enforces offset-y if offset-x present', () => {
-  expect(() => transformCss([['box-shadow', '10px']])).toThrow(
-    'Failed to parse declaration "boxShadow: 10px"'
-  )
+  expect(() => transformCss([['box-shadow', 'red']])).toThrow()
+  expect(() => transformCss([['box-shadow', '10px red']])).toThrow()
 })
 
 it('transforms text-decoration into text-decoration- properties', () =>

src/transforms/__tests__/textShadow.js

@@ -0,0 +1,30 @@
+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()
+})

src/transforms/boxShadow.js

@@ -1,56 +1,13 @@
-const { tokens } = require('../tokenTypes')
-
-const { NONE, SPACE, COLOR, LENGTH } = tokens
+const { parseShadow } = require('./util')
 
 module.exports = tokenStream => {
-  let offsetX
-  let offsetY
-  let blurRadius
-  let color
-
-  if (tokenStream.matches(NONE)) {
-    tokenStream.expectEmpty()
-    return {
-      $merge: {
-        shadowOffset: { width: 0, height: 0 },
-        shadowRadius: 0,
-        shadowColor: 'black',
-        shadowOpacity: 1,
-      },
-    }
-  }
-
-  let didParseFirst = false
-  while (tokenStream.hasTokens()) {
-    if (didParseFirst) tokenStream.expect(SPACE)
-
-    if (offsetX === undefined && tokenStream.matches(LENGTH)) {
-      offsetX = tokenStream.lastValue
-      tokenStream.expect(SPACE)
-      offsetY = tokenStream.expect(LENGTH)
-
-      tokenStream.saveRewindPoint()
-      if (tokenStream.matches(SPACE) && tokenStream.matches(LENGTH)) {
-        blurRadius = tokenStream.lastValue
-      } else {
-        tokenStream.rewind()
-      }
-    } else if (color === undefined && tokenStream.matches(COLOR)) {
-      color = tokenStream.lastValue
-    } else {
-      tokenStream.throw()
-    }
-
-    didParseFirst = true
-  }
-
-  if (offsetX === undefined) tokenStream.throw()
-
-  const $merge = {
-    shadowOffset: { width: offsetX, height: offsetY },
-    shadowRadius: blurRadius !== undefined ? blurRadius : 0,
-    shadowColor: color !== undefined ? color : 'black',
-    shadowOpacity: 1,
+  const { offset, radius, color } = parseShadow(tokenStream)
+  return {
+    $merge: {
+      shadowOffset: offset,
+      shadowRadius: radius,
+      shadowColor: color,
+      shadowOpacity: 1,
+    },
   }
-  return { $merge }
 }

src/transforms/index.js

@@ -3,6 +3,7 @@ const boxShadow = require('./boxShadow')
 const flex = require('./flex')
 const font = require('./font')
 const fontFamily = require('./fontFamily')
+const textShadow = require('./textShadow')
 const textDecoration = require('./textDecoration')
 const textDecorationLine = require('./textDecorationLine')
 const transform = require('./transform')
@@ -75,6 +76,7 @@ module.exports = {
   margin,
   padding,
   shadowOffset,
+  textShadow,
   textShadowOffset,
   textDecoration,
   textDecorationLine,

src/transforms/textShadow.js

@@ -0,0 +1,12 @@
+const { parseShadow } = require('./util')
+
+module.exports = tokenStream => {
+  const { offset, radius, color } = parseShadow(tokenStream)
+  return {
+    $merge: {
+      textShadowOffset: offset,
+      textShadowRadius: radius,
+      textShadowColor: color,
+    },
+  }
+}

src/transforms/util.js

@@ -1,6 +1,6 @@
 const { tokens } = require('../tokenTypes')
 
-const { LENGTH, PERCENT, SPACE } = tokens
+const { LENGTH, PERCENT, COLOR, SPACE, NONE } = tokens
 
 module.exports.directionFactory = ({
   types = [LENGTH, PERCENT],
@@ -76,3 +76,51 @@ module.exports.shadowOffsetFactory = () => tokenStream => {
   tokenStream.expectEmpty()
   return { width, height }
 }
+
+module.exports.parseShadow = tokenStream => {
+  let offsetX
+  let offsetY
+  let radius
+  let color
+
+  if (tokenStream.matches(NONE)) {
+    tokenStream.expectEmpty()
+    return {
+      offset: { width: 0, height: 0 },
+      radius: 0,
+      color: 'black',
+    }
+  }
+
+  let didParseFirst = false
+  while (tokenStream.hasTokens()) {
+    if (didParseFirst) tokenStream.expect(SPACE)
+
+    if (offsetX === undefined && tokenStream.matches(LENGTH)) {
+      offsetX = tokenStream.lastValue
+      tokenStream.expect(SPACE)
+      offsetY = tokenStream.expect(LENGTH)
+
+      tokenStream.saveRewindPoint()
+      if (tokenStream.matches(SPACE) && tokenStream.matches(LENGTH)) {
+        radius = tokenStream.lastValue
+      } else {
+        tokenStream.rewind()
+      }
+    } else if (color === undefined && tokenStream.matches(COLOR)) {
+      color = tokenStream.lastValue
+    } else {
+      tokenStream.throw()
+    }
+
+    didParseFirst = true
+  }
+
+  if (offsetX === undefined) tokenStream.throw()
+
+  return {
+    offset: { width: offsetX, height: offsetY },
+    radius: radius !== undefined ? radius : 0,
+    color: color !== undefined ? color : 'black',
+  }
+}