Merge branch 'main' into ts-migration

Author: emmatown

.changeset/sweet-hotels-explain.md

@@ -0,0 +1,5 @@
+---
+'@emotion/react': patch
+---
+
+Changed the implementation of the runtime label extraction in elements using the css prop (that only happens in development) to one that should yield more consistent results across browsers. This fixes some minor issues with React reporting hydration mismatches that wouldn't happen in production.

package.json

@@ -253,7 +253,6 @@
     "react-native": "^0.63.2",
     "react-primitives": "^0.8.1",
     "react-router-dom": "^4.2.2",
-    "react-scripts": "1.1.5",
     "react-test-renderer": "16.8.6",
     "react18": "npm:react@alpha",
     "react18-dom": "npm:react-dom@alpha",

packages/react/__tests__/get-label-from-stack-trace.js

@@ -4,11 +4,7 @@ import { ThemeContext } from './theming'
 import { getRegisteredStyles, insertStyles } from '@emotion/utils'
 import { hasOwnProperty, isBrowser } from './utils'
 import { serializeStyles } from '@emotion/serialize'
-
-// those identifiers come from error stacks, so they have to be valid JS identifiers
-// thus we only need to replace what is a valid character for JS, but not for CSS
-const sanitizeIdentifier = (identifier /*: string */) =>
-  identifier.replace(/\$/g, '-')
+import { getLabelFromStackTrace } from './get-label-from-stack-trace'
 
 let typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__'
 
@@ -39,21 +35,17 @@ export const createEmotionProps = (
 
   newProps[typePropName] = type
 
-  if (process.env.NODE_ENV !== 'production') {
-    const error = new Error()
-    if (error.stack) {
-      // chrome
-      let match = error.stack.match(
-        /at (?:Object\.|Module\.|)(?:jsx|createEmotionProps).*\n\s+at (?:Object\.|)([A-Z][A-Za-z0-9$]+) /
-      )
-      if (!match) {
-        // safari and firefox
-        match = error.stack.match(/.*\n([A-Z][A-Za-z0-9$]+)@/)
-      }
-      if (match) {
-        newProps[labelPropName] = sanitizeIdentifier(match[1])
-      }
-    }
+  // For performance, only call getLabelFromStackTrace in development and when
+  // the label hasn't already been computed
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    !!props.css &&
+    (typeof props.css !== 'object' ||
+      typeof props.css.name !== 'string' ||
+      props.css.name.indexOf('-') === -1)
+  ) {
+    const label = getLabelFromStackTrace(new Error().stack)
+    if (label) newProps[labelPropName] = label
   }
 
   return newProps

packages/react/src/emotion-element.js

@@ -0,0 +1,52 @@
+// @flow
+
+const getFunctionNameFromStackTraceLine = line => {
+  // V8
+  let match = /^\s+at\s+([A-Za-z0-9$.]+)\s/.exec(line)
+
+  if (match) {
+    // The match may be something like 'Object.createEmotionProps'
+    const parts = match[1].split('.')
+    return parts[parts.length - 1]
+  }
+
+  // Safari / Firefox
+  match = /^([A-Za-z0-9$.]+)@/.exec(line)
+  if (match) return match[1]
+
+  return undefined
+}
+
+const internalReactFunctionNames = /* #__PURE__ */ new Set([
+  'renderWithHooks',
+  'processChild',
+  'finishClassComponent',
+  'renderToString'
+])
+
+// These identifiers come from error stacks, so they have to be valid JS
+// identifiers, thus we only need to replace what is a valid character for JS,
+// but not for CSS.
+const sanitizeIdentifier = identifier => identifier.replace(/\$/g, '-')
+
+export const getLabelFromStackTrace = stackTrace => {
+  if (!stackTrace) return undefined
+
+  const lines = stackTrace.split('\n')
+
+  for (let i = 0; i < lines.length; i++) {
+    const functionName = getFunctionNameFromStackTraceLine(lines[i])
+
+    // The first line of V8 stack traces is just "Error"
+    if (!functionName) continue
+
+    // If we reach one of these, we have gone too far and should quit
+    if (internalReactFunctionNames.has(functionName)) break
+
+    // The component name is the first function in the stack that starts with an
+    // uppercase letter
+    if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName)
+  }
+
+  return undefined
+}

packages/react/src/get-label-from-stack-trace.js

@@ -1,6 +1,6 @@
 # Emotion Development Playgrounds
 
-These are intended to be places to experiment with behaviour that is hard to do in tests or a CodeSandbox. These are not intended to be perfect examples of how you would write emotion code with these other libraries as they will generally be focussed on edge cases.
+These are intended to be places to experiment with behaviour that is hard to do in tests or a CodeSandbox. These are not intended to be perfect examples of how you would write emotion code with these other libraries as they will generally be focused on edge cases.
 
 ## Getting Started
 

playgrounds/README.md

@@ -0,0 +1,8 @@
+# Necessary because we might have a different version of babel-jest, .etc than
+# what react-scripts wants
+SKIP_PREFLIGHT_CHECK=true
+
+# Uncomment if you want to test stuff with the old JSX transform.
+# You also need to change the `@jsxImportSource @emotion/react` line
+# to `@jsx jsx` and import `jsx` from @emotion/react.
+# DISABLE_NEW_JSX_TRANSFORM=true

playgrounds/cra/.env

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*