Merge pull request #120 from styled-components/housekeeping

Housekeeping

Author: jacobp100

.babelrc

@@ -1 +1 @@
-{ "presets": ["es2015"] }
+{ "presets": [["@babel/preset-env", { "loose": true }]] }

.gitignore

@@ -1,3 +1,2 @@
 /node_modules
 /index.js
-/package-lock.json

.npmrc

@@ -1,8 +1,17 @@
+export type StyleTuple = [string, string]
+
 export interface Style {
-	[key: string]: string | number | Style;
+  [key: string]: string | number | Style
 }
 
-export function getPropertyName(name: string): string;
-export function getStylesForProperty(name: string, value: string, allowShorthand?: boolean): Style;
+export function getPropertyName(name: string): string
+export function getStylesForProperty(
+  name: string,
+  value: string,
+  allowShorthand?: boolean
+): Style
 
-export default function transform(css: Array<[string, string]>, shorthandBlacklist?: string[]): Style;
+export default function transform(
+  styleTuples: StyleTuple[],
+  shorthandBlacklist?: string[]
+): Style

index.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "css-to-react-native",
-  "version": "2.3.2",
+  "version": "3.0.0",
   "description": "Convert CSS text to a React Native stylesheet object",
   "main": "index.js",
   "scripts": {
@@ -37,22 +37,22 @@
     "testURL": "http://localhost"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
+    "@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": "^22.2.2",
+    "jest": "^24.9.0",
     "lint-staged": "^6.1.0",
-    "prettier": "^1.10.2",
-    "rollup": "^0.55.5"
+    "prettier": "^1.18.2",
+    "rollup": "^1.22.0"
   },
   "dependencies": {
     "camelize": "^1.0.0",
     "css-color-keywords": "^1.0.0",
-    "postcss-value-parser": "^3.3.0"
+    "postcss-value-parser": "^4.0.2"
   },
   "lint-staged": {
     "*.js": [

package.json

@@ -71,3 +71,15 @@ it('transforms border shorthand missing color & style', () => {
     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()
+})

src/__tests__/border.js

@@ -77,6 +77,22 @@ it('transforms flex shorthand with flex-basis set to 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,

src/__tests__/flex.js

@@ -1,14 +1,55 @@
 import transformCss, { getStylesForProperty } from '..'
 
 it('transforms numbers', () => {
-  expect(
-    transformCss([['top', '0'], ['left', '0'], ['right', '0'], ['bottom', '0']])
-  ).toEqual({
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  })
+  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', () => {
@@ -86,6 +127,13 @@ it('allows negative values in transformed values', () => {
   })
 })
 
+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%',

src/__tests__/index.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()
+})

src/__tests__/placeContent.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