.changeset/config.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://unpkg.com/@changesets/config@1.6.0/schema.json",
+  "$schema": "https://unpkg.com/@changesets/config@3.0.2/schema.json",
   "changelog": [
     "@changesets/changelog-github",
     { "repo": "emotion-js/emotion" }
@@ -23,6 +23,7 @@
     ]
   ],
   "access": "public",
+  "privatePackages": false,
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true
   }

.eslintignore

@@ -4,8 +4,4 @@ coverage/
 node_modules/
 stylis.min.js
 /demo/dist
-flow-typed/
-
-# This is to prevent ESLint parsing errors in the website which is written in
-# TypeScript. TODO: Reenable once the codebase is converted to TypeScript.
-/site/
+/site/out

.github/workflows/main.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - ts-migration
   pull_request:
 
 permissions:
@@ -30,15 +31,15 @@ jobs:
         uses: codecov/codecov-action@v1
         if: ${{ matrix.platform == 'ubuntu-latest' && always() }}
 
-  flow:
-    name: Flow
+  typescript:
+    name: TypeScript
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/ci-setup
 
       - name: Check Types
-        run: yarn flow:check
+        run: yarn tsc:all
 
   test_react18:
     name: Test React 18
@@ -70,7 +71,7 @@ jobs:
       - name: ESLint
         run: yarn lint:check
 
-  typescript:
+  dtslint:
     name: dtslint
     runs-on: ubuntu-latest
     steps:

.gitignore

@@ -21,5 +21,5 @@ package-lock.json
 !.yarn/versions
 
 # Website
-site/out
-.next
+/site/out
+.next

.prettierrc.yaml

@@ -6,6 +6,3 @@ overrides:
   - files: 'docs/*.md'
     options:
       printWidth: 60
-  - files: '*.js'
-    options:
-      parser: flow

.yarn/patches/@definitelytyped-dtslint-npm-0.0.112-1e6b842976.patch

@@ -0,0 +1,17 @@
+diff --git a/dist/lint.js b/dist/lint.js
+index ae29f2a0936fe8e4dee9b4a607ed5c611872d30d..96746c55f2df24c6d09ee30ff85e404138ad0fbe 100644
+--- a/dist/lint.js
++++ b/dist/lint.js
+@@ -107,9 +107,9 @@ function startsWithDirectory(filePath, dirPath) {
+     return normalFilePath.startsWith(normalDirPath + "/") || normalFilePath.startsWith(normalDirPath + "\\");
+ }
+ function testNoTsIgnore(text) {
+-    const tsIgnore = "ts-ignore";
+-    const pos = text.indexOf(tsIgnore);
+-    return pos === -1 ? undefined : { pos, message: "'ts-ignore' is forbidden." };
++    // const tsIgnore = "ts-ignore";
++    // const pos = text.indexOf(tsIgnore);
++    // return pos === -1 ? undefined : { pos, message: "'ts-ignore' is forbidden." };
+ }
+ function testNoTslintDisables(text) {
+     const tslintDisable = "tslint:disable";

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.

__mocks__/react-native.js

@@ -1,4 +1,3 @@
-// @flow
 /* eslint-env jest */
 
 let components = [

__mocks__/react-primitives.js

@@ -1,2 +1 @@
-// @flow
 export * from 'react-primitives/lib/index.web'

babel.config.js

@@ -10,7 +10,7 @@ let isTestFile = filename =>
 module.exports = api => {
   api.cache(true)
   return {
-    presets: ['babel-preset-emotion-dev'],
+    presets: ['babel-preset-emotion-dev', '@babel/preset-typescript'],
     overrides: [
       {
         test: filename =>

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`
 

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

docs/docs.yaml

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