Warn on extraeous units

Author: jacobp100

Diff for: src/__tests__/index.js

@@ -1,7 +1,7 @@
 import transformCss, { getStylesForProperty } from '..'
 
 it('transforms numbers', () => {
-  expect(transformCss([['zIndex', '0']])).toEqual({ zIndex: 0 })
+  expect(transformCss([['z-index', '0']])).toEqual({ zIndex: 0 })
 })
 
 it('warns if missing units on unspecialized transform', () => {
@@ -28,6 +28,30 @@ it('does not warn for unitless 0 length on unspecialized transform', () => {
   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 })
 })

Diff for: src/index.js

@@ -15,13 +15,16 @@ const undefinedRe = /^undefined$/i
 // Undocumented export
 export const transformRawValue = (propName, value) => {
   if (process.env.NODE_ENV !== 'production') {
-    if (
-      !devPropertiesWithoutUnitsRegExp.test(propName) &&
-      numberOnlyRe.test(value)
-    ) {
+    const needsUnit = !devPropertiesWithoutUnitsRegExp.test(propName)
+    const isNumberWithoutUnit = numberOnlyRe.test(value)
+    if (needsUnit && isNumberWithoutUnit) {
       // eslint-disable-next-line no-console
       console.warn(`Expected style "${propName}: ${value}" to contain units`)
     }
+    if (!needsUnit && value !== '0' && !isNumberWithoutUnit) {
+      // eslint-disable-next-line no-console
+      console.warn(`Expected style "${propName}: ${value}" to be unitless`)
+    }
   }
 
   const numberMatch = value.match(numberOrLengthRe)