Fix create-emotion-styled proxy with react-hot-loader and add appearance: none to search input

packages/create-emotion-styled/src/index.js

@@ -169,10 +169,21 @@ function createEmotionStyled(emotion: Emotion, view: ReactType) {
   if (process.env.NODE_ENV !== 'production' && typeof Proxy !== 'undefined') {
     createStyled = new Proxy(createStyled, {
       get(target, property) {
-        throw new Error(
-          `You're trying to use the styled shorthand without babel-plugin-emotion.` +
-            `\nPlease install and setup babel-plugin-emotion or use the function call syntax(\`styled('${property}')\` instead of \`styled.${property}\`)`
-        )
+        switch (property) {
+          // react-hot-loader tries to access this stuff
+          case '__proto__':
+          case 'name':
+          case 'prototype':
+          case 'displayName': {
+            return target[property]
+          }
+          default: {
+            throw new Error(
+              `You're trying to use the styled shorthand without babel-plugin-emotion.` +
+                `\nPlease install and setup babel-plugin-emotion or use the function call syntax(\`styled('${property}')\` instead of \`styled.${property}\`)`
+            )
+          }
+        }
       }
     })
   }

packages/emotion/test/no-babel/index.test.js

@@ -215,4 +215,15 @@ describe('css', () => {
       styled.div``
     }).toThrowErrorMatchingSnapshot()
   })
+  test('styled does not throw an error when certain properties are accessed', () => {
+    expect(() => {
+      /* eslint-disable no-unused-expressions */
+      // eslint-disable-next-line no-proto
+      styled.__proto__
+      styled.prototype
+      styled.name
+      styled.displayName
+      /* eslint-enable no-unused-expressions */
+    }).not.toThrow()
+  })
 })

packages/site/src/components/Search.js

@@ -91,6 +91,7 @@ class Search extends React.Component<Props, State> {
             outline: 0,
             width: 16,
             margin: 8,
+            appearance: 'none',
             transition:
               'width 200ms ease,padding 200ms ease, background-color 100ms ease',
             '@media (max-width: 600px)': {