Add hasOwn into utils as safe replacement for hasOwnProperty

Author: iegik

packages/react/__tests__/babel/has-own-property copy.js

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react'
+console.error = jest.fn()
+
+test('hasOwnProperty', async () => {
+  'use strict'
+  // Freeze Object.prototype to not accidentally export its properties again
+  // see https://github.com/emotion-js/emotion/issues/3158
+  Object.freeze(Object.prototype)
+
+  // Previous version:
+  // const utils = (await import('../../dist/emotion-element-48d2c2e4.cjs.dev.js'))
+  //   .default
+
+  // Current version:
+  // const utils = (await import('../../dist/emotion-element-e909c831.cjs.dev'))
+  //   .default
+
+  // console.log(utils)
+  // expect(
+  //   Object.prototype.hasOwnProperty.call(utils, 'hasOwnProperty')
+  // ).toBeFalsy()
+
+  const element = await import('../../dist/emotion-react.worker.esm.js').default
+  console.log(element)
+  expect(
+    Object.prototype.hasOwnProperty.call(element, 'hasOwnProperty')
+  ).toBeFalsy()
+
+  // /** @jsx jsx */
+  // const { jsx } = await import('@emotion/react')
+  // // const { CacheProvider } = await import('@emotion/react')
+  // const { CacheProvider } = await import('../../dist/emotion-react.cjs.dev.js')
+  // const createCache = await (await import('@emotion/cache')).default
+
+  // const cache = createCache({ key: 'context' })
+  // render(<CacheProvider cache={cache} />)
+  expect(console.error).not.toHaveBeenCalled()
+})

packages/react/__tests__/babel/has-own-property.js

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react'
+console.error = jest.fn()
+
+test('hasOwnProperty', async () => {
+  // Freeze Object.prototype to not accidentally export its properties again
+  // see https://github.com/emotion-js/emotion/issues/3158
+  Object.freeze(Object.prototype)
+
+  // const utils = (await import('../../dist/emotion-react.cjs.dev.js')).default
+  // Previous version:
+  // const utils = (await import('../../dist/emotion-element-48d2c2e4.cjs.dev.js'))
+  //   .default
+
+  // Current version:
+  const utils = (await import('../../dist/emotion-element-e909c831.cjs.dev'))
+    .default
+
+  expect(
+    Object.prototype.hasOwnProperty.call(utils, 'hasOwnProperty')
+  ).toBeFalsy()
+
+  expect(console.error).not.toHaveBeenCalled()
+})

packages/react/src/emotion-element.js

@@ -7,7 +7,7 @@ import {
   insertStyles,
   registerStyles
 } from '@emotion/utils'
-import { isBrowser } from './utils'
+import { hasOwn, isBrowser } from './utils'
 import { serializeStyles } from '@emotion/serialize'
 import { getLabelFromStackTrace } from './get-label-from-stack-trace'
 import { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks'
@@ -31,7 +31,7 @@ export const createEmotionProps = (type: React.ElementType, props: Object) => {
   let newProps: any = {}
 
   for (let key in props) {
-    if (Object.hasOwn(props, key)) {
+    if (hasOwn(props, key)) {
       newProps[key] = props[key]
     }
   }
@@ -133,7 +133,7 @@ let Emotion = /* #__PURE__ */ withEmotionCache<any, any>(
     const newProps = {}
     for (let key in props) {
       if (
-        Object.hasOwn(props, key) &&
+        hasOwn(props, key) &&
         key !== 'css' &&
         key !== typePropName &&
         (process.env.NODE_ENV === 'production' || key !== labelPropName)

packages/react/src/jsx-dev-runtime.js

@@ -1,6 +1,7 @@
 // @flow
 import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime'
 import Emotion, { createEmotionProps } from './emotion-element'
+import { hasOwn } from './utils'
 
 export const Fragment = ReactJSXRuntimeDev.Fragment
 
@@ -12,7 +13,7 @@ export function jsxDEV(
   source: any,
   self: any
 ) {
-  if (!Object.hasOwn(props, 'css')) {
+  if (!hasOwn(props, 'css')) {
     return ReactJSXRuntimeDev.jsxDEV(
       type,
       props,

packages/react/src/jsx-runtime.js

@@ -1,19 +1,20 @@
 // @flow
 import * as ReactJSXRuntime from 'react/jsx-runtime'
 import Emotion, { createEmotionProps } from './emotion-element'
+import { hasOwn } from './utils'
 
 export const Fragment = ReactJSXRuntime.Fragment
 
 export function jsx(type: any, props: any, key: any) {
-  if (!Object.hasOwn(props, 'css')) {
+  if (!hasOwn(props, 'css')) {
     return ReactJSXRuntime.jsx(type, props, key)
   }
 
   return ReactJSXRuntime.jsx(Emotion, createEmotionProps(type, props), key)
 }
 
 export function jsxs(type: any, props: any, key: any) {
-  if (!Object.hasOwn(props, 'css')) {
+  if (!hasOwn(props, 'css')) {
     return ReactJSXRuntime.jsxs(type, props, key)
   }
 

packages/react/src/jsx.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
 import Emotion, { createEmotionProps } from './emotion-element'
+import { hasOwn } from './utils'
 
 // $FlowFixMe
 export const jsx: typeof React.createElement = function (
@@ -9,7 +10,7 @@ export const jsx: typeof React.createElement = function (
 ) {
   let args = arguments
 
-  if (props == null || !Object.hasOwn(props, 'css')) {
+  if (props == null || !hasOwn(props, 'css')) {
     // $FlowFixMe
     return React.createElement.apply(undefined, args)
   }

packages/react/src/utils.js

@@ -1,2 +1,4 @@
 // @flow
 export let isBrowser = typeof document !== 'undefined'
+
+export const hasOwn = Object.hasOwn