fix some things

Author: Andarist

packages/react/__tests__/with-theme.js

@@ -35,10 +35,8 @@ test(`withTheme(Comp) hoists non-react static class properties`, () => {
 })
 
 test('should forward the ref', () => {
-  class SomeComponent extends React.Component {
-    render() {
-      return this.props.theme.color
-    }
+  function SomeComponent(props) {
+    return <div ref={props.ref}>{props.theme.color}</div>
   }
 
   const ComponentWithTheme = withTheme(SomeComponent)
@@ -48,5 +46,5 @@ test('should forward the ref', () => {
       <ComponentWithTheme ref={ref} />
     </ThemeProvider>
   )
-  expect(ref.current).toBeInstanceOf(SomeComponent)
+  expect(ref.current).toBeInstanceOf(HTMLDivElement)
 })

packages/react/src/emotion-element.tsx

@@ -109,82 +109,74 @@ const Insertion = ({
   return null
 }
 
-let Emotion = /* #__PURE__ */ withEmotionCache<EmotionProps>(
-  (props, cache, ref) => {
-    let cssProp = props.css as EmotionProps['css']
-
-    // so that using `css` from `emotion` and passing the result to the css prop works
-    // not passing the registered cache to serializeStyles because it would
-    // make certain babel optimisations not possible
-    if (
-      typeof cssProp === 'string' &&
-      cache.registered[cssProp] !== undefined
-    ) {
-      cssProp = cache.registered[cssProp]
-    }
+let Emotion = /* #__PURE__ */ withEmotionCache<EmotionProps>((props, cache) => {
+  let cssProp = props.css as EmotionProps['css']
+
+  // so that using `css` from `emotion` and passing the result to the css prop works
+  // not passing the registered cache to serializeStyles because it would
+  // make certain babel optimisations not possible
+  if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
+    cssProp = cache.registered[cssProp]
+  }
 
-    let WrappedComponent = props[
-      typePropName
-    ] as EmotionProps[typeof typePropName]
-    let registeredStyles = [cssProp]
-    let className = ''
-
-    if (typeof props.className === 'string') {
-      className = getRegisteredStyles(
-        cache.registered,
-        registeredStyles,
-        props.className
-      )
-    } else if (props.className != null) {
-      className = `${props.className} `
-    }
+  let WrappedComponent = props[
+    typePropName
+  ] as EmotionProps[typeof typePropName]
+  let registeredStyles = [cssProp]
+  let className = ''
 
-    let serialized = serializeStyles(
+  if (typeof props.className === 'string') {
+    className = getRegisteredStyles(
+      cache.registered,
       registeredStyles,
-      undefined,
-      React.useContext(ThemeContext)
+      props.className
     )
+  } else if (props.className != null) {
+    className = `${props.className} `
+  }
 
-    if (isDevelopment && serialized.name.indexOf('-') === -1) {
-      let labelFromStack = props[labelPropName]
-      if (labelFromStack) {
-        serialized = serializeStyles([
-          serialized,
-          'label:' + labelFromStack + ';'
-        ])
-      }
-    }
+  let serialized = serializeStyles(
+    registeredStyles,
+    undefined,
+    React.useContext(ThemeContext)
+  )
 
-    className += `${cache.key}-${serialized.name}`
-
-    const newProps: Record<string, unknown> = {}
-    for (let key in props) {
-      if (
-        hasOwn.call(props, key) &&
-        key !== 'css' &&
-        key !== typePropName &&
-        (!isDevelopment || key !== labelPropName)
-      ) {
-        newProps[key] = props[key]
-      }
-    }
-    newProps.className = className
-    if (ref) {
-      newProps.ref = ref
+  if (isDevelopment && serialized.name.indexOf('-') === -1) {
+    let labelFromStack = props[labelPropName]
+    if (labelFromStack) {
+      serialized = serializeStyles([
+        serialized,
+        'label:' + labelFromStack + ';'
+      ])
     }
+  }
 
-    return (
-      <>
-        <Insertion
-          cache={cache}
-          serialized={serialized}
-          isStringTag={typeof WrappedComponent === 'string'}
-        />
-        <WrappedComponent {...newProps} />
-      </>
-    )
+  className += `${cache.key}-${serialized.name}`
+
+  const newProps: Record<string, unknown> = {}
+  for (let key in props) {
+    if (
+      hasOwn.call(props, key) &&
+      key !== 'css' &&
+      key !== typePropName &&
+      (!isDevelopment || key !== labelPropName)
+    ) {
+      newProps[key] = props[key]
+    }
   }
-)
+  newProps.className = className
+
+  return (
+    <>
+      <Insertion
+        cache={cache}
+        serialized={serialized}
+        isStringTag={typeof WrappedComponent === 'string'}
+      />
+      <WrappedComponent {...newProps} />
+    </>
+  )
+})
 
 if (isDevelopment) {
   Emotion.displayName = 'EmotionCssPropInternal'

packages/styled/src/base.tsx

@@ -120,7 +120,7 @@ const createStyled = (tag: ElementType, options?: StyledOptions) => {
     }
 
     const Styled: ElementType = withEmotionCache(
-      (props: Record<string, unknown>, cache, ref) => {
+      (props: Record<string, unknown>, cache) => {
         const FinalTag =
           (shouldUseAs && (props.as as React.ElementType)) || baseTag
 
@@ -170,9 +170,6 @@ const createStyled = (tag: ElementType, options?: StyledOptions) => {
           }
         }
         newProps.className = className
-        if (ref) {
-          newProps.ref = ref
-        }
 
         return (
           <>