emotion-js · srmagura · Jul 13, 2022 · Jul 2, 2022 · Jul 2, 2022 · Jul 2, 2022
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -1,5 +1,5 @@
 {
   "packages": ["packages/*"],
   "sandboxes": ["pk1qjqpw67"],
-  "node": "12"
+  "node": "16"
 }
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+
+[*.{js,ts,tsx,json,yml}]
+indent_size = 2
diff --git a/.eslintignore b/.eslintignore
@@ -4,5 +4,8 @@ coverage/
 node_modules/
 stylis.min.js
 /demo/dist
-/packages/site/build
-flow-typed/
+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/
diff --git a/.github/actions/ci-setup/action.yml b/.github/actions/ci-setup/action.yml
@@ -2,7 +2,7 @@ name: 'CI setup'
 runs:
   using: 'composite'
   steps:
-    - name: Set Node.js 16.x
+    - name: Setup Node.js 16.x
       uses: actions/setup-node@v3
       with:
         node-version: 16.x

diff --git a/.gitignore b/.gitignore
@@ -4,12 +4,15 @@ dist/
 node_modules/
 *.log
 .idea
-site/build
 package-lock.json
 .DS_Store
 .cache
-public/
-!playgrounds/cra/public
 .env
 .vscode
-.parcel-cache/
+.parcel-cache/
+*.orig
+*.tsbuildinfo
+
+# Website
+site/out
+.next
diff --git a/.nvmrc b/.nvmrc
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -5,10 +5,6 @@
 
 ## Installation
 
-- (If using an M1 Mac) Install `vips` via Homebrew: `brew install vips`.
-  - This step can be removed from this document if we upgrade to the latest
-    version of Gatsby, which is compatible with sharp 0.28.0+ which does include
-    binaries for M1 Macs.
 - (If using Windows) Enable Developer Mode in the Windows settings app. On Windows 11, this can be done by searching the start menu for "Developer settings" and then enabling the Developer Mode toggle switch.
 - Run `yarn` in the repository's root directory to install everything you need for development.
 - Run `yarn build` in the root directory to build the modules.
@@ -27,9 +23,9 @@
 
 ## Documentation Website Development
 
-- Run above installation steps and then
-- Run `yarn start:site` to run a development server of gatsby.
-- Run `yarn build:site` to create a build of the assets for the documentation website.
+- Run above installation steps and then `cd` to the `site` directory.
+- Run `yarn dev` to run the Next.js development server.
+- Run `yarn build` to create a build of the assets for the documentation website.
 
 ## Changesets
 

diff --git a/README.md b/README.md
@@ -16,7 +16,6 @@
 ![@emotion/styled size](https://img.shields.io/bundlephobia/min/@emotion/styled.svg?label=@emotion/styled%20size)
 ![@emotion/styled gzip size](https://img.shields.io/bundlephobia/minzip/@emotion/styled.svg?label=@emotion/styled%20gzip%20size)
 [![slack](https://img.shields.io/badge/join-slack-green)](https://join.slack.com/t/emotion-slack/shared_invite/zt-rmtwsy74-2uvyFdz5uxa8OiMguJJeuQ)
-[![spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/emotion)
 
 Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.
 

diff --git a/docs/babel.mdx b/docs/babel.mdx
@@ -2,26 +2,26 @@
 title: 'Babel Plugin'
 ---
 
-`@emotion/babel-plugin` is highly recommended. All of the options that can be provided to `@emotion/babel-plugin` are documented in [`@emotion/babel-plugin`'s README](https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin).
+`@emotion/babel-plugin` is highly recommended. All of the options that can be provided to `@emotion/babel-plugin` are documented in [`@emotion/babel-plugin`'s README](/docs/@emotion/babel-plugin).
 
-### Install
+## Install
 
 In `emotion` version 8 and above, installation is optional. In older versions, installation is required. See the [installation instructions](/docs/install.mdx).
 
-### Features which are enabled with the babel plugin
+## Features which are enabled with the babel plugin
 
-### Minification
+#### Minification
 
 Any leading/trailing space between properties in your `css` and `styled` blocks is removed. This can reduce the size of your final bundle.
 
-### Dead Code Elimination
+#### Dead Code Elimination
 
 Uglifyjs will use the injected `/*#__PURE__*/` flag comments to mark your `css` and `styled` blocks as candidates for dead code elimination.
 
-### Source Maps
+#### Source Maps
 
 When enabled, navigate directly to the style declaration in your javascript file.
 
-### Components as selectors
+#### Components as selectors
 
 The ability to refer to another component to apply override styles depending on nesting context. Learn more in the [styled docs](/docs/styled.mdx#targeting-another-emotion-component).
diff --git a/docs/cache-provider.mdx b/docs/cache-provider.mdx
@@ -6,8 +6,7 @@ It can be useful to customize emotion's options - i.e. to add custom Stylis plug
 
 ```jsx
 // @live
-/** @jsx jsx */
-import { CacheProvider, jsx, css } from '@emotion/react'
+import { CacheProvider, css } from '@emotion/react'
 import createCache from '@emotion/cache'
 import { prefixer } from 'stylis'
 
@@ -17,9 +16,10 @@ const myCache = createCache({
   key: 'my-prefix-key',
   stylisPlugins: [
     customPlugin,
-    // has to be included manually when customizing `stylisPlugins` if you want to have vendor prefixes added automatically
+    // has to be included manually when customizing `stylisPlugins` if you want
+    // to have vendor prefixes added automatically
     prefixer
-  ],
+  ]
 })
 
 render(

diff --git a/docs/community.mdx b/docs/community.mdx
@@ -0,0 +1,52 @@
+---
+title: 'Community'
+---
+
+> A curated list of awesome stuff related to Emotion.
+
+## Contents
+
+- [Libraries](#libraries)
+- [Component Libraries](#component-libraries)
+- [Examples In the Wild](#examples-in-the-wild)
+
+## Libraries
+
+- [facepaint](https://github.com/emotion-js/facepaint) - Responsive style values for css-in-js
+- [ember-emotion](https://github.com/alexlafroscia/ember-emotion) - Use emotion in Ember.js
+- [vue-emotion](https://github.com/egoist/vue-emotion) - Use emotion in Vue.js
+- [CSS to emotion transform](https://transform.now.sh/css-to-emotion/)
+- [ShevyJS](https://github.com/kyleshevlin/shevyjs) - Configurable Vertical Rhythm & Typography in CSS-in-JS
+- [design-system-utils](https://github.com/mrmartineau/design-system-utils) - Utilities to give better access to your design system.
+- [styled-map](https://github.com/scf4/styled-map) - Super simple lib to map props to styles
+- [polished](https://github.com/styled-components/polished) - Lightweight set of Sass/Compass-style mixins/helpers for writing styles in JavaScript
+- [styled-conditions](https://github.com/karolisgrinkevicius/styled-conditions) - Ultra-lightweight flag utility to conditionally apply css depending on React props
+- [manipulative](https://github.com/paulshen/manipulative) - React devtool to style emotion components from the browser
+- [emotion-tailwind-preflight](https://github.com/flogy/emotion-tailwind-preflight) - Merge the shiny TailwindCSS base styles into your CSS-in-JS project
+
+## Component Libraries
+
+- [react-select](https://github.com/JedWatson/react-select) ([Website](http://jedwatson.github.io/react-select/))
+- [reactivesearch](https://github.com/appbaseio/reactivesearch) ([Website](https://opensource.appbase.io/reactivesearch/))
+- [circuit-ui](https://github.com/sumup/circuit-ui) ([Storybook](https://sumup.github.io/circuit-ui/))
+- [govuk-react](https://github.com/govuk-react/govuk-react) ([Storybook](https://govuk-react.github.io/govuk-react/))
+- [smooth-ui](https://github.com/smooth-code/smooth-ui) ([Website](https://smooth-ui.smooth-code.com/))
+- [material-ui](https://github.com/mui-org/material-ui) ([Website](https://mui.com/))
+- [mineral-ui](https://mineral-ui.com) ([Website](https://mineral-ui.com))
+- [sancho-ui](https://sancho-ui.com) ([Website](https://sancho-ui.com))
+
+## Examples In the Wild
+
+- [healthline.com](https://www.healthline.com/health/body-aches)
+- [nytimes.com](https://www.nytimes.com)
+- [vault.crucible.gg](http://vault.crucible.gg/)
+- [saldotuc.com](https://saldotuc.com)
+- [gatsbythemes.com](https://gatsbythemes.com/)
+- [blazity.com](https://blazity.com/)
+- [postmates.com](https://postmates.com/)
+- [thedisconnect.co](https://thedisconnect.co/one)
+- [zefenify.com](https://zefenify.com/about.html)
+- [strelkamag.com](https://strelkamag.com/)
+- [rookout.com](https://www.rookout.com)
+- [figma.com](https://www.figma.com/)
+- [designsystems.com](https://www.designsystems.com/)
diff --git a/docs/composition.mdx b/docs/composition.mdx
@@ -6,8 +6,7 @@ Composition is one of the most powerful and useful patterns in Emotion. You can
 
 ```jsx
 // @live
-/** @jsx jsx */
-import { jsx, css } from '@emotion/react'
+import { css } from '@emotion/react'
 
 const base = css`
   color: hotpink;
@@ -54,8 +53,7 @@ With Emotion though, you can create styles and combine them.
 
 ```jsx
 // @live
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react'
+import { css } from '@emotion/react'
 
 const danger = css`
   color: red;

diff --git a/docs/css-prop.mdx b/docs/css-prop.mdx
@@ -14,10 +14,35 @@ There are 2 ways to get started with the `css` prop.
 Both methods result in the same compiled code.
 After adding the preset or setting the pragma as a comment, compiled jsx code will use emotion's `jsx` function instead of `React.createElement`.
 
-|        | Input                      | Output                                              |
-| ------ | -------------------------- | --------------------------------------------------- |
-| Before | `<img src="avatar.png" />` | `React.createElement('img', { src: 'avatar.png' })` |
-| After  | `<img src="avatar.png" />` | `jsx('img', { src: 'avatar.png' })`                 |
+<table>
+  <thead>
+    <tr>
+      <th></th>
+      <th>Input</th>
+      <th>Output</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Before</td>
+      <td>
+        <code>&lt;img src="avatar.png" /&gt;</code>
+      </td>
+      <td>
+        <code>React.createElement('img', &#123; src: 'avatar.png' &#125;)</code>
+      </td>
+    </tr>
+    <tr>
+      <td>After</td>
+      <td>
+        <code>&lt;img src="avatar.png" /&gt;</code>
+      </td>
+      <td>
+        <code>jsx('img', &#123; src: 'avatar.png' &#125;)</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
 
 #### Babel Preset
 
@@ -105,9 +130,6 @@ The `css` prop accepts object styles directly and does not require an additional
 
 ```jsx
 // @live
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-
 render(
   <div
     css={{
@@ -130,9 +152,7 @@ To pass string styles, you must use `css` which is exported by `@emotion/react`,
 
 ```jsx
 // @live
-// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react'
+import { css } from '@emotion/react'
 
 const color = 'darkgreen'
 
@@ -165,10 +185,7 @@ The precedence order may seem counter-intuitive, but it allows components with s
 
 The `P` component in this example has its default styles overridden in the `ArticleText` component.
 
-```js
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-
+```jsx
 const P = props => (
   <p
     css={{
@@ -196,10 +213,7 @@ const ArticleText = props => (
 
 The `ArticleText` component can be customized and the styles composed with its default styles. The result is passed `P` and the process repeats.
 
-```js
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-
+```jsx
 const P = props => (
   <p
     css={{

diff --git a/docs/docs.yaml b/docs/docs.yaml
@@ -23,6 +23,7 @@
     - cache-provider
     - performance
     - for-library-authors
+    - community # There is code to hide this from the menu since it has its own navbar link
 
 - title: Tooling
   items:

diff --git a/docs/emotion-11.mdx b/docs/emotion-11.mdx
@@ -4,7 +4,7 @@ title: 'Emotion 11'
 
 Emotion 11 is a slight evolution over the Emotion 10. It focuses mainly on the developer experience, TS types improvements, switches internals to hooks and to the new version of the parser that we use: [Stylis](https://github.com/thysultan/stylis.js).
 
-# Package renaming
+## Package renaming
 
 One of the most significant changes is that most of the user-facing packages have been renamed.
 
@@ -16,6 +16,7 @@ Most of this renaming can be done automatically via a codemod, following these s
 1. Run `eslint` with the `--fix` flag. For example: `yarn eslint --config .eslintrc --ext .js,.jsx "." --fix`
 
 The full list of renamed packages:
+
 - `@emotion/core` → `@emotion/react`
 - `emotion` → `@emotion/css`
 - `emotion-theming` → moved into ` @emotion/react`
@@ -26,13 +27,13 @@ The full list of renamed packages:
 - `eslint-plugin-emotion` → `@emotion/eslint-plugin`
 - `jest-emotion` → `@emotion/jest`
 
-# Hooks
+## Hooks
 
 Use hooks internally for improved bundle size and a better tree in React DevTools 🎉.
 
-# TypeScript
+## TypeScript
 
-## Types overhaul
+### Types overhaul
 
 TypeScript types have been significantly restructured.
 
@@ -45,7 +46,7 @@ TypeScript types have been significantly restructured.
 
 If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred.
 
-## Theme type
+### Theme type
 
 It's now easier to provide a type for `Theme`. Instead of creating custom instances (like before) you can augment the builtin `Theme` interface like this:
 
@@ -60,7 +61,7 @@ declare module '@emotion/react' {
 }
 ```
 
-## css prop types
+### css prop types
 
 The way in which we provide TypeScript support for the `css` prop has changed. Based on the usage of our JSX factories, we can add support for `css` prop only for components that support `className` prop (as our JSX factory functions take the provided `css` prop, resolve it and pass the generated `className` to the rendered component).
 
@@ -76,7 +77,7 @@ However, if you are stuck with older version of TypeScript or using the classic
 
 In this particular case we are forced to extend the existing `React.Attributes` interface. Previously we've been extending both `React.DOMAttributes` and `JSX.IntrinsicAttributes`. This change is really minor and shouldn't affect any consuming code.
 
-# Stylis v4
+## Stylis v4
 
 The parser we use ([Stylis](https://github.com/thysultan/stylis.js)) got upgraded. It fixes some long-standing parsing edge cases while being smaller and faster 🚀
 
@@ -87,13 +88,13 @@ It has been completely rewritten and comes with some breaking changes. The most
 - the prefixer is now just a plugin which happens to be included in the default `stylisPlugins`. If you plan to use custom `stylisPlugins` and you want to have your styles prefixed automatically you must include prefixer in your custom `stylisPlugins`. You can import `prefixer` from the `stylis` module to do that.
 - `@import` rules are no longer special-cased. The responsibility to put them first has been moved to the author of the styles. They also can't be nested within other rules now. It's only possible to write them at the top level of global styles.
 
-# Emotion's caches
+## Emotion's caches
 
 The `key` option is now required when creating a custom instance of a cache. Please make sure it's unique (and not equal to `'css'`) as it's used for linking styles to your cache. If multiple caches share the same key they might "fight" for each other's style elements.
 
 The new `prepend` option can make Emotion add style tags at the beginning of the specified DOM container instead of the end.
 
-# Other
+## Other
 
 There are a lot of less substantial changes than what has been described here, some of them might even be breaking changes but are not relevant to the majority of users. Therefore to learn more about all of the changes please read through the full list of changes contained in the respective changelogs: