Improve error message for shorthand properties with missing units. (#841

)

* log error message if no units in shorthand prop

* use jest.fn() in tests

* Add changeset

.changeset/eight-rats-tan.md

@@ -0,0 +1,7 @@
+---
+'@emotion/native': patch
+'@emotion/primitives-core': patch
+'@emotion/primitives': patch
+---
+
+Improve error message for shorthand properties with missing units.

packages/native/test/native-styled.test.js

@@ -9,6 +9,8 @@ const StyleSheet = reactNative.StyleSheet
 
 jest.mock('react-native')
 
+console.error = jest.fn()
+
 const theme = { backgroundColor: 'magenta', display: 'flex' }
 
 describe('Emotion native styled', () => {
@@ -136,4 +138,17 @@ describe('Emotion native styled', () => {
 
     expect(tree).toMatchSnapshot()
   })
+
+  it('Log error message if units are not specified when using shorthand properties', () => {
+    const Text = styled.Text`
+      margin: 20px;
+      padding: 20;
+    `
+
+    renderer.create(<Text>Hello World</Text>)
+
+    expect(console.error).toBeCalledWith(
+      "'padding' shorthand property requires units for example - padding: 20px or padding: 10px 20px 40px 50px"
+    )
+  })
 })

packages/primitives-core/src/css.js

@@ -126,5 +126,25 @@ function convertStyles(str: string) {
 
   parsedString.forEach(convertPropertyValue, stylePairs)
 
-  return transform(stylePairs)
+  try {
+    return transform(stylePairs)
+  } catch (error) {
+    const msg = error.message
+
+    if (msg.includes('Failed to parse declaration')) {
+      const values = msg
+        .replace('Failed to parse declaration ', '')
+        .replace(/"/g, '')
+        .trim()
+        .split(':')
+
+      const errorMsg = `'${
+        values[0]
+      }' shorthand property requires units for example - ${
+        values[0]
+      }: 20px or ${values[0]}: 10px 20px 40px 50px`
+
+      console.error(errorMsg)
+    }
+  }
 }