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

Author: Andarist

.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}}'

.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 }}

.yarn/releases/yarn-3.2.2.cjs renamed to .yarn/releases/yarn-3.2.3.cjs

@@ -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

.yarnrc.yml

@@ -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
 

CHANGELOG.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.

README.md

@@ -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`
 

SECURITY.md

@@ -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;
 }

docs/best-practices.mdx

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