Merge remote-tracking branch 'origin/main' into ts-migration

# Conflicts: # docs/docs.yaml # packages/babel-plugin/src/index.js # packages/cache/src/index.js # packages/css/package.json # packages/css/src/create-instance.d.ts # packages/primitives-core/package.json # packages/react/__tests__/warnings.js # packages/react/src/global.js # packages/react/src/jsx-dev-runtime.js # packages/react/src/jsx-runtime.js # packages/react/src/jsx.js # packages/serialize/types/index.d.ts # packages/styled/package.json # yarn.lock
emotion-js · May 11, 2024 · 1effaf9 · 1effaf9
2 parents 993557d + 73f6881
commit 1effaf9
Show file tree

Hide file tree

Showing 106 changed files with 2,521 additions and 962 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -7,6 +7,9 @@ on:
       - ts-migration
   pull_request:
 
+permissions:
+  contents: read # to fetch code (actions/checkout)
+
 jobs:
   test:
     name: 'Tests on ${{matrix.platform}}'

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -8,8 +8,14 @@ on:
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
+permissions: {}
 jobs:
   release:
+    permissions:
+      contents: write # to create release 
+      issues: write # to post issue comments
+      pull-requests: write # to create pull request 
+
     name: Release
     runs-on: ubuntu-latest
     steps:
@@ -20,6 +26,7 @@ jobs:
         uses: changesets/action@v1
         with:
           publish: yarn release
+          version: yarn version-packages
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.yarn/releases/yarn-3.2.2.cjs → .yarn/releases/yarn-3.2.3.cjs b/.yarn/releases/yarn-3.2.2.cjs → .yarn/releases/yarn-3.2.3.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,9 +1,9 @@
+nodeLinker: node-modules
+
+npmPublishAccess: public
+
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: "@yarnpkg/plugin-workspace-tools"
 
-yarnPath: .yarn/releases/yarn-3.2.2.cjs
-
-nodeLinker: node-modules
-
-npmPublishAccess: public
+yarnPath: .yarn/releases/yarn-3.2.3.cjs
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
@@ -92,6 +92,7 @@ Look here 👉 _[emotion babel plugin feature table and documentation](https://g
 
 ### In the Wild
 
+- [feathery.io](https://feathery.io)
 - [frontity.org](https://frontity.org)
 - [abacusfi.com](https://abacusfi.com)
 - [healthline.com](https://www.healthline.com)
@@ -109,6 +110,7 @@ Look here 👉 _[emotion babel plugin feature table and documentation](https://g
 - [cyberhaven.com](https://cyberhaven.com)
 - [CommercialRealEstate.com.au](https://www.commercialrealestate.com.au)
 - [codecademy.com](https://www.codecademy.com)
+- [Apache Superset](https://superset.apache.org/)
 
 ## Sponsors
 

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/docs/best-practices.mdx b/docs/best-practices.mdx
@@ -93,29 +93,29 @@ Advantages of sharing styles via component reuse include:
 
 The css prop or `styled` should be used for static styles, while the `style` prop (inline styles) should be used for truly dynamic styles. By dynamic styles, we mean styles that change frequently or are unique to a single element.
 
-Imagine you are displaying a list of user avatars in a forum application. Every avatar shares certain static CSS, like `width: 40px` and `border-radius: 50%`, but the avatar image is set via a `background-style` rule whose value is different for each avatar. If you pass all of this CSS through the CSS prop, you'll end up with a lot of nearly-duplicate CSS in the document. With 3 avatars, Emotion will create something like:
+Imagine you are displaying a list of user avatars in a forum application. Every avatar shares certain static CSS, like `width: 40px` and `border-radius: 50%`, but the avatar image is set via a `background-image` rule whose value is different for each avatar. If you pass all of this CSS through the CSS prop, you'll end up with a lot of nearly-duplicate CSS in the document. With 3 avatars, Emotion will create something like:
 
 ```html
 <style>
   .css-1udhswa {
     border-radius: 50%;
     width: 40px;
     height: 40px;
-    background-style: url(https://i.pravatar.cc/150?u=0);
+    background-image: url(https://i.pravatar.cc/150?u=0);
   }
 
   .css-1cpwmbr {
     border-radius: 50%;
     width: 40px;
     height: 40px;
-    background-style: url(https://i.pravatar.cc/150?u=1);
+    background-image: url(https://i.pravatar.cc/150?u=1);
   }
 
   .css-am987o {
     border-radius: 50%;
     width: 40px;
     height: 40px;
-    background-style: url(https://i.pravatar.cc/150?u=2);
+    background-image: url(https://i.pravatar.cc/150?u=2);
   }
 </style>
 ```
@@ -141,19 +141,19 @@ CSS variables can be used with the `style` prop to keep the CSS in a single plac
   border-radius: 50%;
   width: 40px;
   height: 40px;
-  background-style: var(--background-style);
+  background-image: var(--background-image);
 }
 ```
 
-Then, for each avatar, you render an element which sets the value of the `--background-style` CSS variable:
+Then, for each avatar, you render an element which sets the value of the `--background-image` CSS variable:
 
 ```tsx
 function Avatar({ imageUrl }) {
-  return <div className="avatar" style={{ '--background-style': imageUrl }} />
+  return <div className="avatar" style={{ '--background-image': imageUrl }} />
 }
 ```
 
-If you're using TypeScript, you'll have to use a type assertion like `style={{ ['--background-style' as any]: imageUrl }}` as explained [here](https://stackoverflow.com/a/52013197/752601).
+If you're using TypeScript, you'll have to use a type assertion like `style={{ ['--background-image' as any]: imageUrl }}` as explained [here](https://stackoverflow.com/a/52013197/752601).
 
 ### If using React, prefer `@emotion/react` or `@emotion/styled` over `@emotion/css`
 

diff --git a/docs/css-prop.mdx b/docs/css-prop.mdx
@@ -241,8 +241,8 @@ The styles are concatenated together and inserted via `insertRule`.
 
 ```css
 .css-2 {
-  font-size: 14px,
-  font-family: Georgia, serif,
+  font-size: 14px;
+  font-family: Georgia, serif;
   color: darkgray;
 }
 ```
@@ -264,8 +264,8 @@ The styles are concatenated together and inserted via `insertRule`.
 + line-height: 1.5;
 - font-family: 'sans-serif';
 - color: black;
-- font-size: 14px,
-+ font-family: Georgia, serif,
+- font-size: 14px;
++ font-family: Georgia, serif;
 + color: darkgray;
 + font-size: 10px;
 }

diff --git a/docs/docs.yaml b/docs/docs.yaml
@@ -32,6 +32,7 @@
     - source-maps
     - testing
     - typescript
+    - eslint-plugin-react
 
 # This loads the READMEs instead of files in docs/
 - title: Packages

diff --git a/docs/eslint-plugin-react.mdx b/docs/eslint-plugin-react.mdx
@@ -0,0 +1,15 @@
+---
+title: 'eslint-plugin-react'
+---
+
+The [`react/no-unknown-property` rule](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md) from [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) will produce an error if the `css` prop is passed to a DOM element. This violation of the rule can be safely ignored because `@emotion/react` intercepts the `css` prop before it is applied to the DOM element.
+
+The rule can be configured to ignore the `css` prop like so:
+
+```json
+{
+  "rules": {
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }]
+  }
+}
+```
diff --git a/docs/introduction.mdx b/docs/introduction.mdx
@@ -28,7 +28,7 @@ The [@emotion/css](https://www.npmjs.com/package/@emotion/css) package is framew
 
 ```jsx
 // @live
-import { css, cx } from '@emotion/css'
+import { css } from '@emotion/css'
 
 const color = 'white'
 
@@ -129,7 +129,7 @@ render(<Button>This my button component.</Button>)
 
 ### Browser requirements
 
-Emotion supports all popular browsers, including Internet Explorer 11.
+Emotion supports all popular browsers and Internet Explorer 11.
 
 ### Libraries that Inspired Us
 

diff --git a/docs/ssr.mdx b/docs/ssr.mdx
@@ -25,7 +25,7 @@ const MyDiv = styled('div')({ fontSize: 12 })
 <div class="css-21cs4">Text</div>
 ```
 
-> Warning: This approach can interfere with nth child and similar selectors as it is inserts style tags directly into your markup. You will get a warning if you use such selectors when using this approach.
+> Warning: This approach can interfere with nth child and similar selectors as it inserts style tags directly into your markup. You will get a warning if you use such selectors when using this approach.
 
 ## Advanced Approach
 

diff --git a/flow-typed/npm/vitest_vx.x.x.js b/flow-typed/npm/vitest_vx.x.x.js
@@ -0,0 +1 @@
+declare var vi: {}
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "preinstall": "node ./scripts/ensure-yarn.js",
     "postinstall": "preconstruct dev && manypkg check",
     "changeset": "changeset",
-    "version-packages": "changeset version",
+    "version-packages": "changeset version && yarn --mode=\"update-lockfile\"",
     "release": "yarn build && changeset publish"
   },
   "author": "Kye Hohenberger",
@@ -129,9 +129,8 @@
       "react/jsx-runtime": "ReactJSX",
       "react/jsx-dev-runtime": "ReactJSXDev"
     },
-    "exports": true,
-    "___experimentalFlags_WILL_CHANGE_IN_PATCH": {
-      "exports": true
+    "exports": {
+      "importConditionDefaultExport": "default"
     }
   },
   "bugs": {
@@ -181,7 +180,7 @@
     "@changesets/changelog-github": "^0.4.0",
     "@changesets/cli": "^2.16.0",
     "@manypkg/cli": "^0.19.1",
-    "@preconstruct/cli": "^2.2.1",
+    "@preconstruct/cli": "^2.6.2",
     "@testing-library/react": "13.0.0-alpha.5",
     "@types/jest": "^27.0.3",
     "@types/node": "^12.20.37",
@@ -240,7 +239,7 @@
     "unified": "^6.1.6",
     "webpack-bundle-analyzer": "3.3.2"
   },
-  "packageManager": "yarn@3.2.2",
+  "packageManager": "yarn@3.2.3",
   "resolutions": {
     "jest-snapshot@27.4.5": "patch:jest-snapshot@npm:27.4.5#.yarn/patches/jest-snapshot-npm-27.4.5-6ace6bf68e.patch"
   }

diff --git a/packages/babel-plugin-jsx-pragmatic/CHANGELOG.md b/packages/babel-plugin-jsx-pragmatic/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @emotion/babel-plugin-jsx-pragmatic
 
+## 0.2.1
+
+### Patch Changes
+
+- [#3029](https://github.com/emotion-js/emotion/pull/3029) [`eed5e6cf`](https://github.com/emotion-js/emotion/commit/eed5e6cf00f94f3011b93825ccce43cb2270c247) Thanks [@Andarist](https://github.com/Andarist)! - Fixed importing in Node ESM
+
 ## 0.2.0
 
 ### Minor Changes
@@ -22,4 +28,4 @@
 
 ### Patch Changes
 
-- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool
+- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@emmatown](https://github.com/emmatown)! - Update build tool
diff --git a/packages/babel-plugin-jsx-pragmatic/package.json b/packages/babel-plugin-jsx-pragmatic/package.json
@@ -1,12 +1,13 @@
 {
   "name": "@emotion/babel-plugin-jsx-pragmatic",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Insert code to load a module corresponding to JSX pragma.",
   "main": "dist/emotion-babel-plugin-jsx-pragmatic.cjs.js",
   "module": "dist/emotion-babel-plugin-jsx-pragmatic.esm.js",
   "exports": {
     ".": {
       "module": "./dist/emotion-babel-plugin-jsx-pragmatic.esm.js",
+      "import": "./dist/emotion-babel-plugin-jsx-pragmatic.cjs.mjs",
       "default": "./dist/emotion-babel-plugin-jsx-pragmatic.cjs.js"
     },
     "./package.json": "./package.json"