emotion-js · Jun 7, 2023 · Jun 7, 2023 · Jun 16, 2023 · Jun 16, 2023 · Dec 11, 2023
diff --git a/SECURITY.md b/SECURITY.md
@@ -0,0 +1,9 @@
+# Security policy
+
+## Supported versions
+
+The latest version of the project is currently supported with security updates.
+
+## Reporting a vulnerability
+
+You can report a vulnerability by contacting maintainers via email.
diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md
@@ -1,5 +1,11 @@
 # emotion
 
+## 11.11.2
+
+### Patch Changes
+
+- [#3057](https://github.com/emotion-js/emotion/pull/3057) [`8f665262`](https://github.com/emotion-js/emotion/commit/8f66526244be77a29f04db2d4154664961beb3e6) Thanks [@emmatown](https://github.com/emmatown)! - Fix `@emotion/css/create-instance` types in TypeScript module resolution modes that support the `exports` field
+
 ## 11.11.0
 
 ### Minor Changes

diff --git a/packages/css/package.json b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/css",
-  "version": "11.11.0",
+  "version": "11.11.2",
   "description": "The Next Generation of CSS-in-JS.",
   "main": "dist/emotion-css.cjs.js",
   "module": "dist/emotion-css.esm.js",

diff --git a/packages/css/src/create-instance.d.ts b/packages/css/src/create-instance.d.ts
@@ -1,2 +1,2 @@
-export * from '../types'
-export { default } from '../types'
+export * from '../types/create-instance'
+export { default } from '../types/create-instance'
diff --git a/packages/is-prop-valid/CHANGELOG.md b/packages/is-prop-valid/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @emotion/is-prop-valid
 
+## 1.2.2
+
+### Patch Changes
+
+- [#3156](https://github.com/emotion-js/emotion/pull/3156) [`0bfa9786`](https://github.com/emotion-js/emotion/commit/0bfa97860d768905c88edcafac6e2554565352f8) Thanks [@nnguyen01](https://github.com/nnguyen01)! - Adds `disableRemotePlayback` to the list of allowed props.
+
 ## 1.2.1
 
 ### Patch Changes

diff --git a/packages/is-prop-valid/package.json b/packages/is-prop-valid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/is-prop-valid",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "A function to check whether a prop is valid for HTML and SVG elements",
   "main": "dist/emotion-is-prop-valid.cjs.js",
   "module": "dist/emotion-is-prop-valid.esm.js",

diff --git a/packages/is-prop-valid/src/props.js b/packages/is-prop-valid/src/props.js
@@ -65,6 +65,7 @@ const props = {
   dir: true,
   disabled: true,
   disablePictureInPicture: true,
+  disableRemotePlayback: true,
   download: true,
   draggable: true,
   encType: true,

diff --git a/packages/jest/package.json b/packages/jest/package.json
@@ -60,8 +60,8 @@
   },
   "devDependencies": {
     "@definitelytyped/dtslint": "0.0.112",
-    "@emotion/css": "11.11.0",
-    "@emotion/react": "11.11.0",
+    "@emotion/css": "11.11.2",
+    "@emotion/react": "11.11.4",
     "@types/jest": "^27.0.3",
     "enzyme-to-json": "^3.6.1",
     "pretty-format": "^22.4.3",

diff --git a/packages/primitives-core/package.json b/packages/primitives-core/package.json
@@ -17,7 +17,7 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@emotion/react": "11.11.0",
+    "@emotion/react": "11.11.4",
     "react": "16.14.0"
   },
   "homepage": "https://emotion.sh",

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,26 @@
 # @emotion/react
 
+## 11.11.4
+
+### Patch Changes
+
+- [#3159](https://github.com/emotion-js/emotion/pull/3159) [`5b82631d`](https://github.com/emotion-js/emotion/commit/5b82631d79a58e87e560024d724b849f3921b6e0) Thanks [@iegik](https://github.com/iegik)! - Renamed an internal `hasOwnProperty` to `hasOwn`. This avoids problems in CommonJS environments when the consumer tries to prevent prototype pollution with `Object.freeze(Object.prototype)`.
+
+## 11.11.3
+
+### Patch Changes
+
+- [#3101](https://github.com/emotion-js/emotion/pull/3101) [`49c20b4f`](https://github.com/emotion-js/emotion/commit/49c20b4faa3b9aec0ca96066c126cbaaabbf2d5c) Thanks [@kyvong](https://github.com/kyvong)! - Fix Theme import for newer Typescript module resolution modes
+
+- Updated dependencies [[`45c440fb`](https://github.com/emotion-js/emotion/commit/45c440fbc86b90750f275f497d11382f09ec1d2e)]:
+  - @emotion/serialize@1.1.3
+
+## 11.11.1
+
+### Patch Changes
+
+- [#3048](https://github.com/emotion-js/emotion/pull/3048) [`9357f337`](https://github.com/emotion-js/emotion/commit/9357f337200ef38f9c6df5d4dd7c20772478ea42) Thanks [@naari3](https://github.com/naari3)! - Added `ElementType` to the Emotion's `JSX` namespace. It's defined in the same way as the one in `@types/react` and should make it possible to use components that return `string`s, `Promise`s and other types that are valid in React.
+
 ## 11.11.0
 
 ### Minor Changes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/react",
-  "version": "11.11.0",
+  "version": "11.11.4",
   "main": "dist/emotion-react.cjs.js",
   "module": "dist/emotion-react.esm.js",
   "browser": {
@@ -73,7 +73,7 @@
     "@babel/runtime": "^7.18.3",
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/cache": "^11.11.0",
-    "@emotion/serialize": "^1.1.2",
+    "@emotion/serialize": "^1.1.4",
     "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
     "@emotion/utils": "^1.2.1",
     "@emotion/weak-memoize": "^0.3.1",
@@ -89,10 +89,10 @@
   },
   "devDependencies": {
     "@definitelytyped/dtslint": "0.0.112",
-    "@emotion/css": "11.11.0",
+    "@emotion/css": "11.11.2",
     "@emotion/css-prettifier": "1.1.3",
     "@emotion/server": "11.11.0",
-    "@emotion/styled": "11.11.0",
+    "@emotion/styled": "11.11.5",
     "html-tag-names": "^1.1.2",
     "react": "16.14.0",
     "svg-tag-names": "^1.1.1",

diff --git a/packages/react/src/emotion-element.js b/packages/react/src/emotion-element.js
@@ -7,7 +7,7 @@ import {
   insertStyles,
   registerStyles
 } from '@emotion/utils'
-import { hasOwnProperty, 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 (hasOwnProperty.call(props, key)) {
+    if (hasOwn.call(props, key)) {
       newProps[key] = props[key]
     }
   }
@@ -133,7 +133,7 @@ let Emotion = /* #__PURE__ */ withEmotionCache<any, any>(
     const newProps = {}
     for (let key in props) {
       if (
-        hasOwnProperty.call(props, key) &&
+        hasOwn.call(props, key) &&
         key !== 'css' &&
         key !== typePropName &&
         (process.env.NODE_ENV === 'production' || key !== labelPropName)

diff --git a/packages/react/src/jsx-dev-runtime.js b/packages/react/src/jsx-dev-runtime.js
@@ -1,7 +1,7 @@
 // @flow
 import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime'
 import Emotion, { createEmotionProps } from './emotion-element'
-import { hasOwnProperty } from './utils'
+import { hasOwn } from './utils'
 
 export const Fragment = ReactJSXRuntimeDev.Fragment
 
@@ -13,7 +13,7 @@ export function jsxDEV(
   source: any,
   self: any
 ) {
-  if (!hasOwnProperty.call(props, 'css')) {
+  if (!hasOwn.call(props, 'css')) {
     return ReactJSXRuntimeDev.jsxDEV(
       type,
       props,

diff --git a/packages/react/src/jsx-runtime.js b/packages/react/src/jsx-runtime.js
@@ -1,20 +1,20 @@
 // @flow
 import * as ReactJSXRuntime from 'react/jsx-runtime'
 import Emotion, { createEmotionProps } from './emotion-element'
-import { hasOwnProperty } from './utils'
+import { hasOwn } from './utils'
 
 export const Fragment = ReactJSXRuntime.Fragment
 
 export function jsx(type: any, props: any, key: any) {
-  if (!hasOwnProperty.call(props, 'css')) {
+  if (!hasOwn.call(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 (!hasOwnProperty.call(props, 'css')) {
+  if (!hasOwn.call(props, 'css')) {
     return ReactJSXRuntime.jsxs(type, props, key)
   }
 

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

diff --git a/packages/react/src/utils.js b/packages/react/src/utils.js
@@ -1,4 +1,4 @@
 // @flow
 export let isBrowser = typeof document !== 'undefined'
 
-export const hasOwnProperty = {}.hasOwnProperty
+export const hasOwn = {}.hasOwnProperty
diff --git a/packages/react/types/css-prop.d.ts b/packages/react/types/css-prop.d.ts
@@ -1,6 +1,6 @@
 import {} from 'react'
 import { Interpolation } from '@emotion/serialize'
-import { Theme } from '.'
+import { Theme } from '@emotion/react'
 
 declare module 'react' {
   interface Attributes {

diff --git a/packages/react/types/index.d.ts b/packages/react/types/index.d.ts
@@ -96,6 +96,7 @@ export function ClassNames(props: ClassNamesProps): ReactElement
 export const jsx: typeof createElement
 export namespace jsx {
   namespace JSX {
+    type ElementType = EmotionJSX.ElementType
     interface Element extends EmotionJSX.Element {}
     interface ElementClass extends EmotionJSX.ElementClass {}
     interface ElementAttributesProperty

diff --git a/packages/react/types/jsx-namespace.d.ts b/packages/react/types/jsx-namespace.d.ts
@@ -1,6 +1,6 @@
 import 'react'
 import { Interpolation } from '@emotion/serialize'
-import { Theme } from './index'
+import { Theme } from '@emotion/react'
 
 type WithConditionalCSSProp<P> = 'className' extends keyof P
   ? string extends P['className' & keyof P]
@@ -18,7 +18,12 @@ type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
 type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
 type ReactJSXIntrinsicElements = JSX.IntrinsicElements
 
+// based on the code from @types/react@18.2.8
+// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
+type ReactJSXElementType = string | React.JSXElementConstructor<any>
+
 export namespace EmotionJSX {
+  type ElementType = ReactJSXElementType
   interface Element extends ReactJSXElement {}
   interface ElementClass extends ReactJSXElementClass {}
   interface ElementAttributesProperty

diff --git a/packages/react/types/tests-css.tsx b/packages/react/types/tests-css.tsx
@@ -32,8 +32,10 @@ css`
 // $ExpectError
 css(() => 'height: 300px;')
 
-// $ExpectError
 css`
   position: relative;
-  flexgrow: ${() => 20};
+  flexgrow: ${
+    // $ExpectError
+    () => 20
+  };
 `
diff --git a/packages/react/types/tests.tsx b/packages/react/types/tests.tsx
@@ -9,6 +9,7 @@ import {
   withEmotionCache
 } from '@emotion/react'
 import { JSX as EmotionJSX } from '@emotion/react/jsx-runtime'
+import { CSSInterpolation } from '@emotion/serialize'
 
 declare module '@emotion/react' {
   // tslint:disable-next-line: strict-export-declare-modifiers
@@ -23,6 +24,9 @@ declare module '@emotion/react' {
 ;<Global styles={[]} />
 ;<Global styles={theme => [theme.primaryColor]} />
 
+declare const getStyles: () => CSSInterpolation
+;<Global styles={getStyles()} />
+
 declare const getRandomColor: () => string
 
 const ComponentWithCache = withEmotionCache((_props: {}, cache) => {
@@ -245,19 +249,3 @@ const anim1 = keyframes`
       ? true
       : false
 }
-
-// RMWC-like component test
-declare const OtherComponent: {
-  <Tag extends React.ElementType>(
-    props:
-      | React.AllHTMLAttributes<HTMLInputElement>
-      | React.ComponentPropsWithRef<Tag>,
-    ref: any
-  ): JSX.Element
-  displayName?: string
-}
-;<OtherComponent
-  onChange={ev => {
-    console.log(ev.currentTarget.value)
-  }}
-/>
diff --git a/packages/serialize/CHANGELOG.md b/packages/serialize/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @emotion/serialize
 
+## 1.1.4
+
+### Patch Changes
+
+- [#3164](https://github.com/emotion-js/emotion/pull/3164) [`c9b84dbe`](https://github.com/emotion-js/emotion/commit/c9b84dbe5bf5e054e6cd561d6da1e1548e1489d1) Thanks [@Cerber-Ursi](https://github.com/Cerber-Ursi)! - Make `ArrayInterpolation` to extend `ReadonlyArray` to match a similar recent change to `ArrayCSSInterpolation`. It fixes some compatibility issues when those 2 get mixed together.
+
+## 1.1.3
+
+### Patch Changes
+
+- [#3141](https://github.com/emotion-js/emotion/pull/3141) [`45c440fb`](https://github.com/emotion-js/emotion/commit/45c440fbc86b90750f275f497d11382f09ec1d2e) Thanks [@Cerber-Ursi](https://github.com/Cerber-Ursi)! - Replace arrays with readonly arrays in CSS type definitions, following changes in `csstype`
+
 ## 1.1.2
 
 ### Patch Changes

diff --git a/packages/serialize/package.json b/packages/serialize/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/serialize",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "serialization utils for emotion",
   "main": "dist/emotion-serialize.cjs.js",
   "module": "dist/emotion-serialize.esm.js",

diff --git a/packages/serialize/types/index.d.ts b/packages/serialize/types/index.d.ts
@@ -10,12 +10,13 @@ export type CSSProperties = CSS.PropertiesFallback<number | string>
 export type CSSPropertiesWithMultiValues = {
   [K in keyof CSSProperties]:
     | CSSProperties[K]
-    | Array<Extract<CSSProperties[K], string>>
+    | ReadonlyArray<Extract<CSSProperties[K], string>>
 }
 
 export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject }
 
-export interface ArrayCSSInterpolation extends Array<CSSInterpolation> {}
+export interface ArrayCSSInterpolation
+  extends ReadonlyArray<CSSInterpolation> {}
 
 export type InterpolationPrimitive =
   | null
@@ -51,7 +52,7 @@ export type Keyframes = {
 } & string
 
 export interface ArrayInterpolation<Props>
-  extends Array<Interpolation<Props>> {}
+  extends ReadonlyArray<Interpolation<Props>> {}
 
 export interface FunctionInterpolation<Props> {
   (props: Props): Interpolation<Props>

diff --git a/packages/serialize/types/tests.ts b/packages/serialize/types/tests.ts
@@ -48,8 +48,12 @@ serializeStyles({}, {})
 
 let cssObject: CSSObject = {
   fontWeight: 400,
+  background: ['red'],
+  otherProp: ['some-value'],
   ':hover': {
-    fontWeight: 700
+    fontWeight: 700,
+    background: ['red'] as const,
+    otherProp: ['some-value'] as const
   }
 }
 

diff --git a/packages/server/package.json b/packages/server/package.json
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@definitelytyped/dtslint": "0.0.112",
     "@emotion/babel-plugin": "11.11.0",
-    "@emotion/css": "11.11.0",
+    "@emotion/css": "11.11.2",
     "@emotion/css-prettifier": "1.1.3",
     "@types/node": "^12.20.37",
     "typescript": "^4.5.5"