'legacy__class' }}
26 | css={css`
27 | color: hotpink;
28 | `}
29 | />
30 | )
31 | .toJSON()
32 |
33 | expect(tree).toMatchSnapshot()
34 | })
35 |
--------------------------------------------------------------------------------
/packages/react/__tests__/prod.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { css, jsx } from '@emotion/react'
3 | import renderer from 'react-test-renderer'
4 |
5 | gate({ development: false }, ({ test }) => {
6 | test('css works', () => {
7 | // css has a different return in prod so this is just making sure that isn't broken
8 |
9 | expect(css({ color: 'hotpink' })).toMatchInlineSnapshot(`
10 | {
11 | "name": "1lrxbo5",
12 | "next": undefined,
13 | "styles": "color:hotpink;",
14 | }
15 | `)
16 | })
17 |
18 | test('props work', () => {
19 | let tree = renderer.create(
)
20 | expect(tree.toJSON().props.hidden).toBe(true)
21 | })
22 | })
23 |
--------------------------------------------------------------------------------
/packages/react/__tests__/ref.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { jsx } from '@emotion/react'
3 | import * as React from 'react'
4 | import { render, cleanup } from '@testing-library/react'
5 |
6 | afterEach(cleanup)
7 |
8 | test('ref works', () => {
9 | let ref = React.createRef()
10 | let { getByTestId } = render(
11 |
12 | )
13 |
14 | expect(getByTestId('test')).toBe(ref.current)
15 | })
16 |
--------------------------------------------------------------------------------
/packages/react/_isolated-hnrs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "dist/emotion-react-_isolated-hnrs.cjs.js",
3 | "module": "dist/emotion-react-_isolated-hnrs.esm.js",
4 | "umd:main": "dist/emotion-react-_isolated-hnrs.umd.min.js",
5 | "types": "dist/emotion-react-_isolated-hnrs.cjs.d.ts",
6 | "sideEffects": false,
7 | "preconstruct": {
8 | "umdName": "emotionHoistNonReactStatics"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react/jsx-dev-runtime/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "dist/emotion-react-jsx-dev-runtime.cjs.js",
3 | "module": "dist/emotion-react-jsx-dev-runtime.esm.js",
4 | "umd:main": "dist/emotion-react-jsx-dev-runtime.umd.min.js",
5 | "types": "dist/emotion-react-jsx-dev-runtime.cjs.d.ts",
6 | "sideEffects": false,
7 | "preconstruct": {
8 | "umdName": "emotionReactJSXDevRuntime"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react/jsx-runtime/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "dist/emotion-react-jsx-runtime.cjs.js",
3 | "module": "dist/emotion-react-jsx-runtime.esm.js",
4 | "umd:main": "dist/emotion-react-jsx-runtime.umd.min.js",
5 | "types": "dist/emotion-react-jsx-runtime.cjs.d.ts",
6 | "sideEffects": false,
7 | "preconstruct": {
8 | "umdName": "emotionReactJSXRuntime"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react/macro.d.mts:
--------------------------------------------------------------------------------
1 | export * from './macro.js'
2 |
--------------------------------------------------------------------------------
/packages/react/macro.d.ts:
--------------------------------------------------------------------------------
1 | export * from '@emotion/react'
2 |
--------------------------------------------------------------------------------
/packages/react/macro.js:
--------------------------------------------------------------------------------
1 | module.exports = require('@emotion/babel-plugin').macros.core
2 |
--------------------------------------------------------------------------------
/packages/react/src/_isolated-hnrs.ts:
--------------------------------------------------------------------------------
1 | // this file isolates this package that is not tree-shakeable
2 | // and allows it to be dropped - if it stays unused
3 | // it happens thanks to sideEffects: false in our package.json
4 | import hoistNonReactStatics from 'hoist-non-react-statics'
5 |
6 | // have to wrap it in a proxy function because Rollup is too damn smart
7 | // and if this module doesn't actually contain any logic of its own
8 | // then Rollup just use 'hoist-non-react-statics' directly in other chunks
9 | export default <
10 | T extends React.ComponentType
,
11 | S extends React.ComponentType
12 | >(
13 | targetComponent: T,
14 | sourceComponent: S
15 | ) => hoistNonReactStatics(targetComponent, sourceComponent)
16 |
--------------------------------------------------------------------------------
/packages/react/src/conditions/false.ts:
--------------------------------------------------------------------------------
1 | export default false
2 |
--------------------------------------------------------------------------------
/packages/react/src/conditions/is-browser.ts:
--------------------------------------------------------------------------------
1 | export default typeof document !== 'undefined'
2 |
--------------------------------------------------------------------------------
/packages/react/src/conditions/true.ts:
--------------------------------------------------------------------------------
1 | export default true
2 |
--------------------------------------------------------------------------------
/packages/react/src/css.ts:
--------------------------------------------------------------------------------
1 | import type { SerializedStyles } from '@emotion/utils'
2 | import type { CSSInterpolation } from '@emotion/serialize'
3 | import { serializeStyles } from '@emotion/serialize'
4 |
5 | function css(
6 | template: TemplateStringsArray,
7 | ...args: CSSInterpolation[]
8 | ): SerializedStyles
9 | function css(...args: CSSInterpolation[]): SerializedStyles
10 | function css(...args: CSSInterpolation[]) {
11 | return serializeStyles(args)
12 | }
13 |
14 | export default css
15 |
--------------------------------------------------------------------------------
/packages/react/src/keyframes.ts:
--------------------------------------------------------------------------------
1 | import { CSSInterpolation } from '@emotion/serialize'
2 | import css from './css'
3 |
4 | type Keyframes = {
5 | name: string
6 | styles: string
7 | anim: 1
8 | toString: () => string
9 | } & string
10 |
11 | export function keyframes(
12 | template: TemplateStringsArray,
13 | ...args: CSSInterpolation[]
14 | ): Keyframes
15 | export function keyframes(...args: CSSInterpolation[]): Keyframes
16 | export function keyframes(...args: CSSInterpolation[]) {
17 | let insertable = css(...args)
18 | const name = `animation-${insertable.name}`
19 | return {
20 | name,
21 | styles: `@keyframes ${name}{${insertable.styles}}`,
22 | anim: 1,
23 | toString() {
24 | return `_EMO_${this.name}_${this.styles}_EMO_`
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/react/src/types.ts:
--------------------------------------------------------------------------------
1 | import { ReactJSX } from './jsx-namespace'
2 |
3 | /**
4 | * @desc Utility type for getting props type of React component.
5 | * It takes `defaultProps` into an account - making props with defaults optional.
6 | */
7 | export type PropsOf<
8 | C extends keyof ReactJSX.IntrinsicElements | React.JSXElementConstructor
9 | > = ReactJSX.LibraryManagedAttributes>
10 |
11 | // We need to use this version of Omit as it's distributive (Will preserve unions)
12 | export type DistributiveOmit = T extends any
13 | ? Pick>
14 | : never
15 |
--------------------------------------------------------------------------------
/packages/react/src/utils.ts:
--------------------------------------------------------------------------------
1 | export const hasOwn = {}.hasOwnProperty
2 |
--------------------------------------------------------------------------------
/packages/react/types/css-prop.d.ts:
--------------------------------------------------------------------------------
1 | import {} from 'react'
2 | import { Interpolation } from '@emotion/serialize'
3 | import { Theme } from '@emotion/react'
4 |
5 | declare module 'react' {
6 | interface Attributes {
7 | css?: Interpolation
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/react/types/index.d.ts:
--------------------------------------------------------------------------------
1 | // TypeScript Version: 4.1
2 | export * from '..'
3 |
--------------------------------------------------------------------------------
/packages/react/types/resolved-condition.ts:
--------------------------------------------------------------------------------
1 | export default true as boolean
2 |
--------------------------------------------------------------------------------
/packages/react/types/tests-css.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react'
2 |
3 | // $ExpectType SerializedStyles
4 | css()
5 | // $ExpectType SerializedStyles
6 | css([])
7 | // $ExpectType SerializedStyles
8 | css('abc')
9 | // $ExpectType SerializedStyles
10 | css('width: 200px;')
11 | // $ExpectType SerializedStyles
12 | css('display: block;', {
13 | flexGrow: 1,
14 | backgroundColor: 'red'
15 | })
16 | // $ExpectType SerializedStyles
17 | css`
18 | position: relative;
19 | top: 20px;
20 | `
21 | // $ExpectType SerializedStyles
22 | css`
23 | position: relative;
24 | top: ${'20px'};
25 | `
26 | // $ExpectType SerializedStyles
27 | css`
28 | position: relative;
29 | top: ${'20px'};
30 | `
31 |
32 | // $ExpectError
33 | css(() => 'height: 300px;')
34 |
35 | css`
36 | position: relative;
37 | flexgrow: ${
38 | // $ExpectError
39 | () => 20
40 | };
41 | `
42 |
--------------------------------------------------------------------------------
/packages/react/types/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "../",
4 | "forceConsistentCasingInFileNames": true,
5 | "jsx": "react",
6 | "lib": ["es6", "dom"],
7 | "module": "commonjs",
8 | "esModuleInterop": true,
9 | "resolveJsonModule": true,
10 | "noEmit": true,
11 | "strict": true,
12 | "target": "es5",
13 | "typeRoots": ["../"],
14 | "types": [],
15 | "paths": {
16 | "#is-browser": ["./types/resolved-condition.ts"],
17 | "#is-development": ["./types/resolved-condition.ts"]
18 | }
19 | },
20 | "include": ["./*.ts", "./*.tsx"],
21 | "exclude": ["./css-prop.d.ts"]
22 | }
23 |
--------------------------------------------------------------------------------
/packages/react/types/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@definitelytyped/dtslint/dtslint.json",
3 | "rules": {
4 | "array-type": [true, "generic"],
5 | "callable-types": false,
6 | "file-name-casing": false,
7 | "import-spacing": false,
8 | "semicolon": false,
9 | "whitespace": [
10 | true,
11 | "check-branch",
12 | "check-decl",
13 | "check-operator",
14 | "check-module",
15 | "check-rest-spread",
16 | "check-type",
17 | "check-typecast",
18 | "check-type-operator",
19 | "check-preblock"
20 | ],
21 | "no-null-undefined-union": false,
22 | "no-object-literal-type-assertion": false,
23 | "no-unnecessary-generics": false,
24 | "no-empty-interface": false,
25 | "strict-export-declare-modifiers": false,
26 | "unnecessary-bind": false,
27 | "ban-ts-ignore": false
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/packages/serialize/src/conditions/false.ts:
--------------------------------------------------------------------------------
1 | export default false as boolean
2 |
--------------------------------------------------------------------------------
/packages/serialize/src/conditions/true.ts:
--------------------------------------------------------------------------------
1 | export default true as boolean
2 |
--------------------------------------------------------------------------------
/packages/serialize/types/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '..'
2 |
--------------------------------------------------------------------------------
/packages/serialize/types/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "../",
4 | "forceConsistentCasingInFileNames": true,
5 | "jsx": "react",
6 | "lib": ["es6", "dom"],
7 | "module": "commonjs",
8 | "noEmit": true,
9 | "strict": true,
10 | "target": "es5",
11 | "typeRoots": ["../"],
12 | "types": [],
13 | "paths": {
14 | "#is-browser": ["./src/conditions/true.ts"],
15 | "#is-development": ["./src/conditions/true.ts"]
16 | }
17 | },
18 | "include": ["./*.ts", "./*.tsx"]
19 | }
20 |
--------------------------------------------------------------------------------
/packages/serialize/types/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@definitelytyped/dtslint/dtslint.json",
3 | "rules": {
4 | "array-type": [true, "generic"],
5 | "semicolon": false,
6 | "no-null-undefined-union": false,
7 | "callable-types": false
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/server/README.md:
--------------------------------------------------------------------------------
1 | # @emotion/server
2 |
3 | > Extract and inline critical css with emotion.
4 |
5 | `@emotion/server` provides three APIs for doing server-side rendering with emotion to extract critical css, inline critical css in html to a string and inline critical css in html to a stream.
6 |
7 | [`@emotion/server`'s APIs are documented here.](https://emotion.sh/docs/ssr)
8 |
9 | ```bash
10 | npm install --save @emotion/css @emotion/server
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/server/create-instance/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "dist/emotion-server-create-instance.cjs.js",
3 | "module": "dist/emotion-server-create-instance.esm.js",
4 | "types": "../types/create-instance"
5 | }
6 |
--------------------------------------------------------------------------------
/packages/server/src/conditions/false.js:
--------------------------------------------------------------------------------
1 | export default false
2 |
--------------------------------------------------------------------------------
/packages/server/src/conditions/true.js:
--------------------------------------------------------------------------------
1 | export default true
2 |
--------------------------------------------------------------------------------
/packages/server/src/create-instance/construct-style-tags-from-chunks.js:
--------------------------------------------------------------------------------
1 | /* import type { EmotionCache } from '@emotion/utils' */
2 | import { generateStyleTag } from './utils'
3 |
4 | const createConstructStyleTagsFromChunks =
5 | (cache /*: EmotionCache */, nonceString /*: string */) =>
6 | (
7 | criticalData /*: {
8 | html: string,
9 | styles: Array<{ key: string, ids: Array, css: string }>
10 | } */
11 | ) => {
12 | let styleTagsString = ''
13 |
14 | criticalData.styles.forEach(item => {
15 | styleTagsString += generateStyleTag(
16 | item.key,
17 | item.ids.join(' '),
18 | item.css,
19 | nonceString
20 | )
21 | })
22 |
23 | return styleTagsString
24 | }
25 |
26 | export default createConstructStyleTagsFromChunks
27 |
--------------------------------------------------------------------------------
/packages/server/src/create-instance/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../../types/create-instance'
2 | export { default } from '../../types/create-instance'
3 |
--------------------------------------------------------------------------------
/packages/server/src/create-instance/utils.js:
--------------------------------------------------------------------------------
1 | export function generateStyleTag(
2 | cssKey /*: string */,
3 | ids /*: string */,
4 | styles /*: string */,
5 | nonceString /*: string */
6 | ) {
7 | return ``
8 | }
9 |
--------------------------------------------------------------------------------
/packages/server/src/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../types'
2 |
--------------------------------------------------------------------------------
/packages/server/src/index.js:
--------------------------------------------------------------------------------
1 | import createEmotionServer from './create-instance'
2 | import { cache } from '@emotion/css'
3 |
4 | export const {
5 | extractCritical,
6 | extractCriticalToChunks,
7 | renderStylesToString,
8 | renderStylesToNodeStream,
9 | constructStyleTagsFromChunks
10 | } = createEmotionServer(cache)
11 |
--------------------------------------------------------------------------------
/packages/server/types/create-instance.d.ts:
--------------------------------------------------------------------------------
1 | // Definitions by: Junyoung Clare Jang
2 | // TypeScript Version: 2.8
3 |
4 | ///
10 | css: string
11 | }
12 |
13 | export interface EmotionCriticalToChunks {
14 | html: string
15 | styles: Array<{ key: string; ids: Array; css: string }>
16 | }
17 |
18 | export interface EmotionServer {
19 | extractCritical(html: string): EmotionCritical
20 | extractCriticalToChunks(html: string): EmotionCriticalToChunks
21 | renderStylesToString(html: string): string
22 | renderStylesToNodeStream(): NodeJS.ReadWriteStream
23 | constructStyleTagsFromChunks(criticalData: EmotionCriticalToChunks): string
24 | }
25 |
26 | export default function createEmotionServer(cache: EmotionCache): EmotionServer
27 |
--------------------------------------------------------------------------------
/packages/server/types/index.d.ts:
--------------------------------------------------------------------------------
1 | // Definitions by: Junyoung Clare Jang
2 | // TypeScript Version: 2.8
3 |
4 | import { EmotionServer } from '@emotion/server/create-instance'
5 |
6 | export const extractCritical: EmotionServer['extractCritical']
7 | export const extractCriticalToChunks: EmotionServer['extractCriticalToChunks']
8 | export const renderStylesToString: EmotionServer['renderStylesToString']
9 | export const renderStylesToNodeStream: EmotionServer['renderStylesToNodeStream']
10 | export const constructStyleTagsFromChunks: EmotionServer['constructStyleTagsFromChunks']
11 |
--------------------------------------------------------------------------------
/packages/server/types/resolved-condition.ts:
--------------------------------------------------------------------------------
1 | export default true as boolean
2 |
--------------------------------------------------------------------------------
/packages/server/types/tests.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | extractCritical,
3 | renderStylesToNodeStream,
4 | renderStylesToString
5 | } from '@emotion/server'
6 |
7 | declare const renderedString: string
8 | declare const renderedNodeStream: NodeJS.ReadableStream
9 |
10 | // $ExpectType EmotionCritical
11 | extractCritical(renderedString)
12 | // $ExpectError
13 | extractCritical()
14 | // $ExpectError
15 | extractCritical(renderedString, undefined as any)
16 |
17 | // $ExpectType string
18 | renderStylesToString(renderedString)
19 | // $ExpectError
20 | renderStylesToString()
21 | // $ExpectError
22 | renderStylesToString(renderedString, undefined as any)
23 |
24 | // $ExpectType ReadWriteStream
25 | renderStylesToNodeStream()
26 | // $ExpectError
27 | renderStylesToNodeStream(undefined as any)
28 |
29 | renderedNodeStream.pipe(renderStylesToNodeStream())
30 |
--------------------------------------------------------------------------------
/packages/server/types/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "../",
4 | "forceConsistentCasingInFileNames": true,
5 | "jsx": "react",
6 | "lib": [
7 | "es6",
8 | // dom is needed here because @emotion/server depends on @emotion/css
9 | // which depends on @emotion/sheet, which depends on DOM types
10 | "dom"
11 | ],
12 | "module": "commonjs",
13 | "noEmit": true,
14 | "strict": true,
15 | "target": "es5",
16 | "typeRoots": ["../"],
17 | "types": [],
18 | "skipLibCheck": true,
19 | "paths": {
20 | "#is-browser": ["./types/resolved-condition.ts"],
21 | "#is-development": ["./types/resolved-condition.ts"]
22 | }
23 | },
24 | "include": ["./*.ts", "./*.tsx"]
25 | }
26 |
--------------------------------------------------------------------------------
/packages/server/types/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@definitelytyped/dtslint/dtslint.json",
3 | "rules": {
4 | "array-type": [true, "generic"],
5 | "semicolon": false,
6 | "file-name-casing": false,
7 | "unnecessary-bind": false
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/sheet/src/conditions/false.ts:
--------------------------------------------------------------------------------
1 | export default false
2 |
--------------------------------------------------------------------------------
/packages/sheet/src/conditions/true.ts:
--------------------------------------------------------------------------------
1 | export default true
2 |
--------------------------------------------------------------------------------
/packages/sheet/types/index.d.ts:
--------------------------------------------------------------------------------
1 | // TypeScript Version: 2.0
2 |
3 | export * from '..'
4 |
--------------------------------------------------------------------------------
/packages/sheet/types/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "../",
4 | "forceConsistentCasingInFileNames": true,
5 | "jsx": "react",
6 | "lib": ["es6", "dom"],
7 | "module": "commonjs",
8 | "noEmit": true,
9 | "strict": true,
10 | "target": "es5",
11 | "typeRoots": ["../"],
12 | "types": [],
13 | "paths": {
14 | "#is-development": ["./src/conditions/true.ts"]
15 | }
16 | },
17 | "include": ["./*.ts", "./*.tsx"]
18 | }
19 |
--------------------------------------------------------------------------------
/packages/sheet/types/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@definitelytyped/dtslint/dtslint.json",
3 | "rules": {
4 | "array-type": [true, "generic"],
5 | "semicolon": false,
6 | "unnecessary-bind": false
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/styled/README.md:
--------------------------------------------------------------------------------
1 | # @emotion/styled
2 |
3 | > The styled API for @emotion/react
4 |
5 | ## Install
6 |
7 | ```bash
8 | yarn add @emotion/react @emotion/styled
9 | ```
10 |
11 | ## Usage
12 |
13 | ```jsx
14 | import styled from '@emotion/styled'
15 |
16 | let SomeComp = styled.div({
17 | color: 'hotpink'
18 | })
19 |
20 | let AnotherComp = styled.div`
21 | color: ${props => props.color};
22 | `
23 |
24 | render(
25 |
26 |
28 | )
29 | ```
30 |
31 | More documentation is available at [https://emotion.sh/docs/styled](https://emotion.sh/docs/styled).
32 |
--------------------------------------------------------------------------------
/packages/styled/__tests__/__snapshots__/edge-cases.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`nested function using css 1`] = `
4 | .emotion-0 {
5 | color: blue;
6 | border: 2px solid #000;
7 | background-color: red;
8 | padding: 30px;
9 | }
10 |
11 |
14 | `;
15 |
16 | exports[`nested function using css and keyframes 1`] = `
17 | @keyframes animation-0 {
18 | from, to {
19 | color: green;
20 | }
21 |
22 | 50% {
23 | color: hotpink;
24 | }
25 | }
26 |
27 | .emotion-0 {
28 | -webkit-animation: animation-0;
29 | animation: animation-0;
30 | }
31 |
32 |
35 | `;
36 |
--------------------------------------------------------------------------------
/packages/styled/__tests__/edge-cases.js:
--------------------------------------------------------------------------------
1 | import 'test-utils/next-env'
2 | import * as React from 'react'
3 | import renderer from 'react-test-renderer'
4 | import styled from '@emotion/styled'
5 | import { css, keyframes } from '@emotion/react'
6 |
7 | test('nested function using css', () => {
8 | let Comp = styled.div`
9 | color: blue;
10 | border: 2px solid #000;
11 | ${() => css`
12 | background-color: red;
13 | `};
14 | padding: 30px;
15 | `
16 | const tree = renderer.create( {
16 | node = val
17 | }}
18 | id="thing"
19 | >
20 | hello world
21 |
22 | )
23 | expect(node).toBe(document.getElementById('thing'))
24 | })
25 |
--------------------------------------------------------------------------------
/packages/styled/base/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "dist/emotion-styled-base.cjs.js",
3 | "module": "dist/emotion-styled-base.esm.js",
4 | "umd:main": "dist/emotion-styled-base.umd.min.js",
5 | "types": "dist/emotion-styled-base.cjs.d.ts",
6 | "preconstruct": {
7 | "umdName": "emotionStyledBase"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/styled/macro.d.mts:
--------------------------------------------------------------------------------
1 | import styled from '@emotion/styled'
2 | export * from '@emotion/styled'
3 | export default styled
4 |
--------------------------------------------------------------------------------
/packages/styled/macro.d.ts:
--------------------------------------------------------------------------------
1 | import styled from '@emotion/styled'
2 | export * from '@emotion/styled'
3 | export default styled
4 |
--------------------------------------------------------------------------------
/packages/styled/macro.js:
--------------------------------------------------------------------------------
1 | module.exports = require('@emotion/babel-plugin').macros.webStyled
2 |
--------------------------------------------------------------------------------
/packages/styled/src/conditions/false.ts:
--------------------------------------------------------------------------------
1 | export default false
2 |
--------------------------------------------------------------------------------
/packages/styled/src/conditions/is-browser.ts:
--------------------------------------------------------------------------------
1 | export default typeof document !== 'undefined'
2 |
--------------------------------------------------------------------------------
/packages/styled/src/conditions/true.ts:
--------------------------------------------------------------------------------
1 | export default true
2 |
--------------------------------------------------------------------------------
/packages/styled/src/jsx-namespace.ts:
--------------------------------------------------------------------------------
1 | // this is basically a slimmed down copy of https://github.com/emotion-js/emotion/blob/main/packages/react/types/jsx-namespace.d.ts
2 | // it helps to avoid issues when combining newer `@emotion/styled` and older `@emotion/react` versions
3 | // in such setup, ReactJSX namespace won't exist in `@emotion/react` and that would lead to errors
4 | import 'react'
5 |
6 | type IsPreReact19 = 2 extends Parameters>['length']
7 | ? true
8 | : false
9 |
10 | // prettier-ignore
11 | /** @ts-ignore */
12 | export type ReactJSXIntrinsicElements = true extends IsPreReact19 ? JSX.IntrinsicElements : React.JSX.IntrinsicElements
13 |
--------------------------------------------------------------------------------
/packages/styled/test/__snapshots__/theming.dom.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`change theme 1`] = `
4 | .emotion-0 {
5 | color: green;
6 | }
7 |
8 |
9 |
12 | this will be green then pink
13 |
14 |
23 |
26 | this will be green then pink
27 |
28 |
`;
32 |
--------------------------------------------------------------------------------
/packages/styled/test/babel-plugin.test.js:
--------------------------------------------------------------------------------
1 | import 'test-utils/legacy-env'
2 | import React from 'react'
3 | import * as renderer from 'react-test-renderer'
4 | import styled from '@emotion/styled'
5 |
6 | test("config merging works even if it's referenced by variable", () => {
7 | const Button = ({ isRed, ...rest }) => (
8 | {isRed ? 'forwarded' : 'not forwarded'}
9 | )
10 |
11 | const cfg = { shouldForwardProp: p => p !== 'isRed' }
12 | const StyledButton = styled(Button, cfg)({})
13 | const tree = renderer.create((create: () => T) => create()
5 |
6 | const useInsertionEffect = React[
7 | ('useInsertion' + 'Effect') as 'useInsertionEffect'
8 | ]
9 | ? (React[('useInsertion' + 'Effect') as 'useInsertionEffect'] as (
10 | create: () => T
11 | ) => T | undefined)
12 | : false
13 |
14 | export const useInsertionEffectAlwaysWithSyncFallback: (
15 | create: () => T
16 | ) => T | undefined = !isBrowser
17 | ? syncFallback
18 | : useInsertionEffect || syncFallback
19 |
20 | export const useInsertionEffectWithLayoutFallback: typeof React.useLayoutEffect =
21 | useInsertionEffect || React.useLayoutEffect
22 |
--------------------------------------------------------------------------------
/packages/utils/src/conditions/false.ts:
--------------------------------------------------------------------------------
1 | export default false as boolean
2 |
--------------------------------------------------------------------------------
/packages/utils/src/conditions/is-browser.ts:
--------------------------------------------------------------------------------
1 | export default typeof document !== 'undefined'
2 |
--------------------------------------------------------------------------------
/packages/utils/src/conditions/true.ts:
--------------------------------------------------------------------------------
1 | export default true as boolean
2 |
--------------------------------------------------------------------------------
/packages/utils/src/types.ts:
--------------------------------------------------------------------------------
1 | import type { StyleSheet } from '@emotion/sheet'
2 |
3 | export type { StyleSheet }
4 |
5 | export type RegisteredCache = Record
6 |
7 | export type SerializedStyles = {
8 | name: string
9 | styles: string
10 | next?: SerializedStyles
11 | }
12 |
13 | export type EmotionCache = {
14 | inserted: Record
15 | registered: RegisteredCache
16 | sheet: StyleSheet
17 | key: string
18 | compat?: true
19 | nonce?: string
20 | insert: (
21 | selector: string,
22 | serialized: SerializedStyles,
23 | sheet: StyleSheet,
24 | shouldCache: boolean
25 | ) => string | void
26 | }
27 |
--------------------------------------------------------------------------------
/packages/utils/types/index.d.ts:
--------------------------------------------------------------------------------
1 | // TypeScript Version: 2.2
2 |
3 | export * from '..'
4 |
--------------------------------------------------------------------------------
/packages/utils/types/resolved-condition.ts:
--------------------------------------------------------------------------------
1 | export default true as boolean
2 |
--------------------------------------------------------------------------------
/packages/utils/types/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "../",
4 | "forceConsistentCasingInFileNames": true,
5 | "jsx": "react",
6 | "lib": ["es6", "dom"],
7 | "module": "commonjs",
8 | "noEmit": true,
9 | "strict": true,
10 | "target": "es5",
11 | "typeRoots": ["../"],
12 | "types": [],
13 | "paths": {
14 | "#is-browser": ["./types/resolved-condition.ts"],
15 | "#is-development": ["./src/conditions/true.ts"]
16 | }
17 | },
18 | "include": ["./*.ts", "./*.tsx"]
19 | }
20 |
--------------------------------------------------------------------------------
/packages/utils/types/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@definitelytyped/dtslint/dtslint.json",
3 | "rules": {
4 | "array-type": [true, "generic"],
5 | "semicolon": false
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/weak-memoize/README.md:
--------------------------------------------------------------------------------
1 | # @emotion/weak-memoize
2 |
3 | > A memoization function that uses a WeakMap
4 |
5 | ## Install
6 |
7 | ```bash
8 | yarn add @emotion/weak-memoize
9 | ```
10 |
11 | ## Usage
12 |
13 | Because @emotion/weak-memoize uses a WeakMap the argument must be a non primitive type, e.g. objects, functions, arrays and etc. The function passed to `weakMemoize` must also only accept a single argument.
14 |
15 | ```jsx
16 | import weakMemoize from '@emotion/weak-memoize'
17 |
18 | let doThing = weakMemoize(({ someProperty }) => {
19 | return { newName: someProperty }
20 | })
21 |
22 | let obj = { someProperty: true }
23 |
24 | let firstResult = doThing(obj)
25 |
26 | let secondResult = doThing(obj)
27 |
28 | firstResult === secondResult // true
29 |
30 | let newObj = { someProperty: true }
31 |
32 | let thirdResult = doThing(newObj)
33 |
34 | thirdResult === firstResult // false
35 | ```
36 |
--------------------------------------------------------------------------------
/packages/weak-memoize/__tests__/index.js:
--------------------------------------------------------------------------------
1 | import weakMemoize from '@emotion/weak-memoize'
2 |
3 | test('it works', () => {
4 | let doThing = weakMemoize(obj => {
5 | return {}
6 | })
7 |
8 | let firstArg = {}
9 |
10 | let firstResult = doThing(firstArg)
11 |
12 | let secondResult = doThing(firstArg)
13 |
14 | expect(firstResult).toBe(secondResult)
15 |
16 | let newObj = {}
17 |
18 | let newResult = doThing(newObj)
19 |
20 | expect(newResult).not.toBe(firstResult)
21 | })
22 |
--------------------------------------------------------------------------------
/packages/weak-memoize/src/index.ts:
--------------------------------------------------------------------------------
1 | let weakMemoize = function (
2 | func: (arg: Arg) => Return
3 | ): (arg: Arg) => Return {
4 | let cache = new WeakMap()
5 | return (arg: Arg) => {
6 | if (cache.has(arg)) {
7 | // Use non-null assertion because we just checked that the cache `has` it
8 | // This allows us to remove `undefined` from the return value
9 | return cache.get(arg)!
10 | }
11 | let ret = func(arg)
12 | cache.set(arg, ret)
13 | return ret
14 | }
15 | }
16 |
17 | export default weakMemoize
18 |
--------------------------------------------------------------------------------
/packages/weak-memoize/types/index.d.ts:
--------------------------------------------------------------------------------
1 | // TypeScript Version: 2.2
2 |
3 | export { default } from '..'
4 |
--------------------------------------------------------------------------------
/packages/weak-memoize/types/tests.ts:
--------------------------------------------------------------------------------
1 | import weakMemoize from '@emotion/weak-memoize'
2 |
3 | interface Foo {
4 | bar: 'xyz'
5 | }
6 |
7 | declare class Qwe {
8 | answer: number
9 | }
10 |
11 | // $ExpectType Foo[]
12 | weakMemoize((arg: Foo) => [arg])({ bar: 'xyz' })
13 |
14 | // $ExpectError
15 | weakMemoize((arg: string) => [arg])('foo')
16 |
17 | // $ExpectError
18 | weakMemoize((arg: Foo) => [arg])(42)
19 |
20 | // $ExpectError
21 | weakMemoize((arg: string) => [arg])
22 | // $ExpectError
23 | weakMemoize((arg: number) => [arg])
24 | // $ExpectError
25 | weakMemoize((arg: boolean) => [arg])
26 | // $ExpectError
27 | weakMemoize((arg: symbol) => [arg])
28 | // $ExpectError
29 | weakMemoize((arg: null) => [arg])
30 | // $ExpectError
31 | weakMemoize((arg: undefined) => [arg])
32 |
33 | weakMemoize((arg: () => void) => [arg])
34 | weakMemoize((arg: Map) => [arg])
35 | weakMemoize((arg: Set) => [arg])
36 | weakMemoize((arg: Qwe) => [arg])
37 |
--------------------------------------------------------------------------------
/packages/weak-memoize/types/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "../",
4 | "forceConsistentCasingInFileNames": true,
5 | "lib": ["es6", "dom"],
6 | "module": "commonjs",
7 | "noEmit": true,
8 | "strict": true,
9 | "target": "es5",
10 | "typeRoots": ["../"],
11 | "types": []
12 | },
13 | "include": ["./*.ts", "./*.tsx"]
14 | }
15 |
--------------------------------------------------------------------------------
/packages/weak-memoize/types/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@definitelytyped/dtslint/dtslint.json",
3 | "rules": {
4 | "array-type": [true, "generic"],
5 | "import-spacing": false,
6 | "semicolon": false,
7 | "whitespace": [
8 | true,
9 | "check-branch",
10 | "check-decl",
11 | "check-operator",
12 | "check-module",
13 | "check-rest-spread",
14 | "check-type",
15 | "check-typecast",
16 | "check-type-operator",
17 | "check-preblock"
18 | ],
19 |
20 | "no-unnecessary-generics": false,
21 | "strict-export-declare-modifiers": false,
22 | "no-default-import": false,
23 | "unnecessary-bind": false
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/playgrounds/README.md:
--------------------------------------------------------------------------------
1 | # Emotion Development Playgrounds
2 |
3 | These are intended to be places to experiment with behaviour that is hard to do in tests or a CodeSandbox. These are not intended to be perfect examples of how you would write emotion code with these other libraries as they will generally be focused on edge cases.
4 |
5 | ## Getting Started
6 |
7 | In the root of the repository, run this command to start building emotion
8 |
9 | ```bash
10 | yarn build:watch
11 | ```
12 |
13 | Then choose the playground you want to use and run the commands in the given package.json
14 |
--------------------------------------------------------------------------------
/playgrounds/cra/.env:
--------------------------------------------------------------------------------
1 | # Necessary because we might have a different version of babel-jest, .etc than
2 | # what react-scripts wants
3 | SKIP_PREFLIGHT_CHECK=true
4 |
5 | # Uncomment if you want to test stuff with the old JSX transform.
6 | # You also need to change the `@jsxImportSource @emotion/react` line
7 | # to `@jsx jsx` and import `jsx` from @emotion/react.
8 | # DISABLE_NEW_JSX_TRANSFORM=true
--------------------------------------------------------------------------------
/playgrounds/cra/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/playgrounds/cra/README.md:
--------------------------------------------------------------------------------
1 | # CRA Playground
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
--------------------------------------------------------------------------------
/playgrounds/cra/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cra-playground",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "16.14.0",
7 | "react-dom": "16.14.0",
8 | "react-scripts": "4.0.3",
9 | "theme-ui": "^0.12.0"
10 | },
11 | "scripts": {
12 | "start": "react-scripts start",
13 | "build": "react-scripts build",
14 | "test": "react-scripts test",
15 | "eject": "react-scripts eject"
16 | },
17 | "browserslist": {
18 | "production": [
19 | ">0.2%",
20 | "not dead",
21 | "not op_mini all"
22 | ],
23 | "development": [
24 | "last 1 chrome version",
25 | "last 1 firefox version",
26 | "last 1 safari version"
27 | ]
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/playgrounds/cra/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emotion-js/emotion/cce67ec6b2fc94261028b4f4778aae8c3d6c5fd6/playgrounds/cra/public/favicon.ico
--------------------------------------------------------------------------------
/playgrounds/cra/src/App.js:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 | import React from 'react'
3 | import { Global } from '@emotion/react'
4 |
5 | function App() {
6 | return (
7 |
8 |
19 |
20 |
CRA Playground
21 |
Some colored text
22 |
7 | ,
9 | document.getElementById('root')
10 | )
11 |
--------------------------------------------------------------------------------
/playgrounds/nextjs/.babelrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | [
4 | 'next/babel',
5 | {
6 | 'preset-react': {
7 | runtime: 'automatic',
8 | importSource: '@emotion/react'
9 | }
10 | }
11 | ]
12 | ],
13 | plugins: ['@emotion/babel-plugin']
14 | }
15 |
--------------------------------------------------------------------------------
/playgrounds/nextjs/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | # vercel
34 | .vercel
35 |
--------------------------------------------------------------------------------
/playgrounds/nextjs/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | reactStrictMode: true
3 | }
4 |
--------------------------------------------------------------------------------
/playgrounds/nextjs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nextjs-playground",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev -p 4000",
7 | "build": "next build",
8 | "start": "next start"
9 | },
10 | "dependencies": {
11 | "next": "^12.2.0",
12 | "react": "16.14.0",
13 | "react-dom": "16.14.0"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/playgrounds/nextjs/pages/_app.js:
--------------------------------------------------------------------------------
1 | function MyApp({ Component, pageProps }) {
2 | return
17 | max: number
18 | min: number
19 | median: number
20 | mean: number
21 | stdDev: number
22 | }
23 |
24 | export type SampleTimingType = {
25 | scriptingStart: number
26 | scriptingEnd?: number
27 | layoutStart?: number
28 | layoutEnd?: number
29 | }
30 | */
31 |
--------------------------------------------------------------------------------
/scripts/benchmarks/src/app/Text.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 |
3 | import { bool } from 'prop-types'
4 | import React from 'react'
5 | import { StyleSheet, Text } from 'react-native'
6 | import { colors } from './theme'
7 |
8 | class AppText extends React.Component {
9 | static displayName = '@app/Text'
10 |
11 | static contextTypes = {
12 | isInAParentText: bool
13 | }
14 |
15 | render() {
16 | const { style, ...rest } = this.props
17 | const { isInAParentText } = this.context
18 | return (
19 |
15 | {children}
16 |
17 | )
18 |
19 | const styles = {
20 | root: css({
21 | position: 'absolute',
22 | cursor: 'pointer',
23 | width: 0,
24 | height: 0,
25 | borderColor: 'transparent',
26 | borderStyle: 'solid',
27 | borderTopWidth: 0,
28 | transform: 'translate(50%, 50%)'
29 | })
30 | }
31 |
32 | export default Dot
33 |
--------------------------------------------------------------------------------
/scripts/benchmarks/src/implementations/emotion-css-func/Provider.js:
--------------------------------------------------------------------------------
1 | import View from './View'
2 | export default View
3 |
--------------------------------------------------------------------------------
/scripts/benchmarks/src/implementations/emotion-css-func/View.js:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/css'
2 | import React from 'react'
3 |
4 | const View = ({ style, ...other }) => {
5 | return
6 | }
7 |
8 | export const viewStyle = css({
9 | alignItems: 'stretch',
10 | borderWidth: 0,
11 | borderStyle: 'solid',
12 | boxSizing: 'border-box',
13 | display: 'flex',
14 | flexBasis: 'auto',
15 | flexDirection: 'column',
16 | flexShrink: 0,
17 | margin: 0,
18 | padding: 0,
19 | position: 'relative',
20 | // fix flexbox bugs
21 | minHeight: 0,
22 | minWidth: 0
23 | })
24 |
25 | export default View
26 |
--------------------------------------------------------------------------------
/scripts/benchmarks/src/implementations/emotion-css-func/index.js:
--------------------------------------------------------------------------------
1 | export { default as Box } from './Box'
2 | export { default as Dot } from './Dot'
3 | export { default as Provider } from './Provider'
4 | export { default as View } from './View'
5 |
--------------------------------------------------------------------------------
/scripts/benchmarks/src/implementations/emotion-css-prop/Dot.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { css, jsx } from '@emotion/react'
3 |
4 | const Dot = ({ size, x, y, children, color }) => (
5 |
15 | {children}
16 |
17 | )
18 |
19 | const styles = {
20 | root: css({
21 | position: 'absolute',
22 | cursor: 'pointer',
23 | width: 0,
24 | height: 0,
25 | borderColor: 'transparent',
26 | borderStyle: 'solid',
27 | borderTopWidth: 0,
28 | transform: 'translate(50%, 50%)'
29 | })
30 | }
31 |
32 | export default Dot
33 |
--------------------------------------------------------------------------------
/scripts/benchmarks/src/implementations/emotion-css-prop/Provider.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { CacheProvider } from '@emotion/react'
3 | import createCache from '@emotion/cache'
4 |
5 | let cache = createCache({ key: 'emo' })
6 |
7 | export default props => {
8 | return {props.children}
9 | }
10 |
--------------------------------------------------------------------------------
/scripts/benchmarks/src/implementations/emotion-css-prop/View.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { css, jsx } from '@emotion/react'
3 |
4 | const View = ({ style, ...other }) => {
5 | return
6 | }
7 |
8 | export const viewStyle = css({
9 | alignItems: 'stretch',
10 | borderWidth: 0,
11 | borderStyle: 'solid',
12 | boxSizing: 'border-box',
13 | display: 'flex',
14 | flexBasis: 'auto',
15 | flexDirection: 'column',
16 | flexShrink: 0,
17 | margin: 0,
18 | padding: 0,
19 | position: 'relative',
20 | // fix flexbox bugs
21 | minHeight: 0,
22 | minWidth: 0
23 | })
24 |
25 | export default View
26 |
--------------------------------------------------------------------------------
/scripts/benchmarks/src/implementations/emotion-css-prop/index.js:
--------------------------------------------------------------------------------
1 | export { default as Box } from './Box'
2 | export { default as Dot } from './Dot'
3 | export { default as Provider } from './Provider'
4 | export { default as View } from './View'
5 |
--------------------------------------------------------------------------------
/scripts/benchmarks/src/implementations/emotion-styled/Box.js:
--------------------------------------------------------------------------------
1 | import styled from '@emotion/styled'
2 | import View from './View'
3 |
4 | const getColor = ({ color }) => {
5 | switch (color) {
6 | case 0:
7 | return '#14171A'
8 | case 1:
9 | return '#AAB8C2'
10 | case 2:
11 | return '#E6ECF0'
12 | case 3:
13 | return '#FFAD1F'
14 | case 4:
15 | return '#F45D22'
16 | case 5:
17 | return '#E0245E'
18 | default:
19 | return 'transparent'
20 | }
21 | }
22 |
23 | const Box = styled(View)`
24 | align-self: flex-start;
25 | flex-direction: ${props => (props.layout === 'column' ? 'column' : 'row')};
26 | padding: ${props => (props.outer ? '4px' : '0')};
27 | ${props => props.fixed && 'height:6px;width:6px;'};
28 | background-color: ${getColor};
29 | `
30 |
31 | export default Box
32 |
--------------------------------------------------------------------------------
/scripts/benchmarks/src/implementations/emotion-styled/Dot.js:
--------------------------------------------------------------------------------
1 | import styled from '@emotion/styled'
2 | import { css } from '@emotion/react'
3 | import View from './View'
4 |
5 | const Dot = styled(View)`
6 | position: absolute;
7 | cursor: pointer;
8 | width: 0;
9 | height: 0;
10 | border-color: transparent;
11 | border-style: solid;
12 | border-top-width: 0;
13 | transform: translate(50%, 50%);
14 | ${props => css`
15 | margin-left: ${props.x}px;
16 | margin-top: ${props.y}px;
17 | border-right-width: ${props.size / 2}px;
18 | border-bottom-width: ${props.size / 2}px;
19 | border-left-width: ${props.size / 2}px;
20 | border-bottom-color: ${props.color};
21 | `};
22 | `
23 |
24 | export default Dot
25 |
--------------------------------------------------------------------------------
/scripts/benchmarks/src/implementations/emotion-styled/Provider.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { CacheProvider } from '@emotion/react'
3 | import createCache from '@emotion/cache'
4 |
5 | let cache = createCache({ key: 'emo' })
6 |
7 | export default props => {
8 | return {props.children}
9 | }
10 |
--------------------------------------------------------------------------------
/scripts/benchmarks/src/implementations/emotion-styled/View.js:
--------------------------------------------------------------------------------
1 | import styled from '@emotion/styled'
2 |
3 | const View = styled.div`
4 | align-items: stretch;
5 | border-width: 0;
6 | border-style: solid;
7 | box-sizing: border-box;
8 | display: flex;
9 | flex-basis: auto;
10 | flex-direction: column;
11 | flex-shrink: 0;
12 | margin: 0;
13 | padding: 0;
14 | position: relative;
15 | min-height: 0;
16 | min-width: 0;
17 | `
18 |
19 | export default View
20 |
--------------------------------------------------------------------------------
/scripts/benchmarks/src/implementations/emotion-styled/index.js:
--------------------------------------------------------------------------------
1 | export { default as Box } from './Box'
2 | export { default as Dot } from './Dot'
3 | export { default as Provider } from './Provider'
4 | export { default as View } from './View'
5 |
--------------------------------------------------------------------------------
/scripts/benchmarks/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Performance tests
6 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/scripts/ensure-yarn.js:
--------------------------------------------------------------------------------
1 | if (!/yarn\//.test(process.env.npm_config_user_agent)) {
2 | throw new Error('Please use `yarn` for installs.')
3 | }
4 |
--------------------------------------------------------------------------------
/scripts/replace-slack-link.js:
--------------------------------------------------------------------------------
1 | // slack invite links expire after 30 days and you can't(at least as far as i can tell) create tokens for things like slackin anymore
2 |
3 | const fs = require('fs')
4 |
5 | const slackInviteLink = process.argv[2]
6 |
7 | const siteHeaderPath = `${__dirname}/../site/src/components/SiteHeader.js`
8 | const readmePath = `${__dirname}/../README.md`
9 |
10 | const slackInviteLinkRegex =
11 | /https:\/\/join\.slack\.com\/t\/emotion-slack\/shared_invite\/[^/]+\//
12 |
13 | const siteHeader = fs.readFileSync(siteHeaderPath, 'utf8')
14 |
15 | fs.writeFileSync(
16 | siteHeaderPath,
17 | siteHeader.replace(slackInviteLinkRegex, slackInviteLink)
18 | )
19 |
20 | const readme = fs.readFileSync(readmePath, 'utf8')
21 |
22 | fs.writeFileSync(
23 | readmePath,
24 | readme.replace(slackInviteLinkRegex, slackInviteLink)
25 | )
26 |
--------------------------------------------------------------------------------
/scripts/ssr-benchmarks/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-react"]
3 | }
4 |
--------------------------------------------------------------------------------
/scripts/ssr-benchmarks/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "name": "ssr-benchmarks",
4 | "version": "0.8.13",
5 | "type": "module",
6 | "scripts": {
7 | "start": "NODE_ENV=production node bench.js",
8 | "start-basic": "NODE_ENV=production node basic.js"
9 | },
10 | "dependencies": {
11 | "benchmark": "^2.1.4",
12 | "d3-scale-chromatic": "^3.0.0",
13 | "react": "16.14.0",
14 | "react-dom": "16.14.0"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/scripts/test-utils/enzyme-env.js:
--------------------------------------------------------------------------------
1 | import Enzyme from 'enzyme'
2 | import Adapter from 'enzyme-adapter-react-16'
3 |
4 | Enzyme.configure({ adapter: new Adapter() })
5 |
--------------------------------------------------------------------------------
/scripts/test-utils/index.d.ts:
--------------------------------------------------------------------------------
1 | ///
6 | }
7 | */
8 |
9 | export default {
10 | test: val => val && val.tags !== undefined && Array.isArray(val.tags),
11 | serialize(
12 | val /* : StyleSheet */,
13 | config,
14 | indentation /* : string */,
15 | depth /* : number */,
16 | refs,
17 | printer /* : Function */
18 | ) {
19 | let styles = val.tags.map(tag => tag.textContent || '').join('')
20 | return printer(
21 | prettify(styles, config.indent),
22 | config,
23 | indentation,
24 | depth,
25 | refs
26 | )
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/scripts/test-utils/resolved-conditions/false.js:
--------------------------------------------------------------------------------
1 | export default false
2 |
--------------------------------------------------------------------------------
/scripts/test-utils/resolved-conditions/true.js:
--------------------------------------------------------------------------------
1 | export default true
2 |
--------------------------------------------------------------------------------
/site/.babelrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | [
4 | 'next/babel',
5 | {
6 | 'preset-react': {
7 | runtime: 'automatic',
8 | importSource: '@emotion/react'
9 | }
10 | }
11 | ]
12 | ],
13 | plugins: ['@emotion/babel-plugin']
14 | }
15 |
--------------------------------------------------------------------------------
/site/components/container.tsx:
--------------------------------------------------------------------------------
1 | import { PropsWithChildren, ReactElement } from 'react'
2 | import { mediaQueries } from '../util'
3 |
4 | type ContainerProps = PropsWithChildren<{
5 | className?: string
6 | }>
7 |
8 | export function Container({
9 | className,
10 | children
11 | }: PropsWithChildren): ReactElement {
12 | return (
13 |
27 | {children}
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/site/components/global-styles.tsx:
--------------------------------------------------------------------------------
1 | import { Global, css } from '@emotion/react'
2 | import { ReactElement } from 'react'
3 | import { colors, draculaPrism } from '../util'
4 |
5 | const globalCss = css({
6 | a: {
7 | color: colors.pink,
8 | textDecoration: 'none'
9 | },
10 | 'a:hover': {
11 | color: colors.hightlight,
12 | textDecoration: 'underline'
13 | }
14 | })
15 |
16 | export function GlobalStyles(): ReactElement {
17 | return {
8 | componentDidCatch(error: unknown): void {
9 | this.props.onError(error)
10 | }
11 |
12 | render(): ReactNode {
13 | return this.props.children
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/site/components/live-editor/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './live-editor'
2 | export * from './live-provider'
3 | export * from './live-error'
4 | export * from './live-preview'
5 | export type { Scope } from './render-element-async'
6 |
--------------------------------------------------------------------------------
/site/components/live-editor/components/live-context.ts:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from 'react'
2 |
3 | export interface LiveContextData {
4 | code: string
5 | onCodeChange(code: string): void
6 |
7 | element: ReactElement | undefined
8 | errorMessage: string | undefined
9 | }
10 |
11 | export const LiveContext = React.createContext({
12 | code: '',
13 | onCodeChange: () => {},
14 |
15 | element: undefined,
16 | errorMessage: undefined
17 | })
18 |
--------------------------------------------------------------------------------
/site/components/live-editor/components/live-error.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, ReactElement } from 'react'
2 | import { LiveContext } from './live-context'
3 |
4 | interface LiveErrorProps {
5 | className?: string
6 | }
7 |
8 | export function LiveError({ className }: LiveErrorProps): ReactElement | null {
9 | const { errorMessage } = useContext(LiveContext)
10 |
11 | if (!errorMessage) return null
12 |
13 | return {errorMessage}
14 | }
15 |
--------------------------------------------------------------------------------
/site/components/live-editor/components/live-preview.tsx:
--------------------------------------------------------------------------------
1 | import { ReactElement, useContext } from 'react'
2 | import { LiveContext } from './live-context'
3 |
4 | interface LivePreviewProps {
5 | className?: string
6 | }
7 |
8 | export function LivePreview({ className }: LivePreviewProps): ReactElement {
9 | const { element } = useContext(LiveContext)
10 |
11 | return {element}
12 | }
13 |
--------------------------------------------------------------------------------
/site/components/live-editor/index.ts:
--------------------------------------------------------------------------------
1 | export * from './remark-live-editor'
2 | export * from './emotion-live-editor'
3 |
--------------------------------------------------------------------------------
/site/components/title.tsx:
--------------------------------------------------------------------------------
1 | import { PropsWithChildren, ReactElement } from 'react'
2 |
3 | type TitleProps = PropsWithChildren<{ className?: string }>
4 |
5 | export function Title({ className, children }: TitleProps): ReactElement {
6 | return (
7 |
14 | {children}
15 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/site/misc.d.ts:
--------------------------------------------------------------------------------
1 | declare module '@emotion/babel-plugin' // TODO Remove as part of TS migration
2 |
--------------------------------------------------------------------------------
/site/module-stubs/README.md:
--------------------------------------------------------------------------------
1 | `@emotion/babel-plugin` depends on some modules which require `fs` which obviously cannot be imported in the browser. (Furthermore, it's unclear if Next.js will allow you to require `fs` during SSR, if the require is located in code that is shared between client and server.)
2 |
3 | So to get `@emotion/babel-plugin` to work in the browser / Next.js, we have to stub out any dependencies which require `fs`. This works via Webpack `require.alias` in `next.config.js`.
4 |
5 | This is a very hacky workaround that could easily break things in the future.
6 |
--------------------------------------------------------------------------------
/site/module-stubs/cosmiconfig.cjs:
--------------------------------------------------------------------------------
1 | module.exports = () => ({})
2 |
--------------------------------------------------------------------------------
/site/module-stubs/find-root.cjs:
--------------------------------------------------------------------------------
1 | module.exports = function findRoot() {
2 | return ''
3 | }
4 |
--------------------------------------------------------------------------------
/site/module-stubs/resolve.cjs:
--------------------------------------------------------------------------------
1 | module.exports = () => 'FAKE_PATH'
2 |
--------------------------------------------------------------------------------
/site/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// {title}
12 |
13 | {title}
14 |
15 | You just hit a route that doesn't exist... the sadness. 😢
16 |
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/site/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '../public/bootstrap-reboot.min.css'
2 | import '@docsearch/css'
3 | import Head from 'next/head'
4 | import type { AppProps } from 'next/app'
5 | import '../util/prism-customizations'
6 | import { SiteHeader, GlobalStyles, Container } from '../components'
7 |
8 | export default function MyApp({ Component, pageProps }: AppProps) {
9 | return (
10 | <>
11 |
12 |
17 |
19 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/site/public/logo-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emotion-js/emotion/cce67ec6b2fc94261028b4f4778aae8c3d6c5fd6/site/public/logo-32x32.png
--------------------------------------------------------------------------------
/site/public/logo-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emotion-js/emotion/cce67ec6b2fc94261028b4f4778aae8c3d6c5fd6/site/public/logo-48x48.png
--------------------------------------------------------------------------------
/site/public/logo-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emotion-js/emotion/cce67ec6b2fc94261028b4f4778aae8c3d6c5fd6/site/public/logo-96x96.png
--------------------------------------------------------------------------------
/site/queries/index.ts:
--------------------------------------------------------------------------------
1 | export * from './docQueries'
2 |
--------------------------------------------------------------------------------
/site/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2018",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "Bundler",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "jsxImportSource": "@emotion/react",
17 | "incremental": true
18 | },
19 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
20 | "exclude": ["node_modules"]
21 | }
22 |
--------------------------------------------------------------------------------
/site/util/index.ts:
--------------------------------------------------------------------------------
1 | export * from './style-constants'
2 | export * from './dracula-prism'
3 |
--------------------------------------------------------------------------------
/site/util/remark-fix-links.ts:
--------------------------------------------------------------------------------
1 | import { visit } from 'unist-util-visit'
2 |
3 | export function remarkFixLinks() {
4 | return (markdownAST: any) => {
5 | visit(markdownAST, 'link', (node: { url: string }) => {
6 | node.url = node.url.replace(/^https?:\/\/emotion.sh/i, '')
7 | node.url = node.url.replace(
8 | /^https?:\/\/github.com\/emotion-js\/emotion\/tree\/main/i,
9 | ''
10 | )
11 |
12 | if (!node.url.startsWith('http')) {
13 | node.url = node.url
14 | .replace(/\.mdx?(#.*)?$/, (_, hash) => {
15 | return hash || ''
16 | })
17 | .replace(/^\/packages\//, '/docs/@emotion/')
18 | }
19 | })
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "esModuleInterop": true,
4 | "forceConsistentCasingInFileNames": true,
5 | "isolatedModules": true,
6 | "jsx": "react",
7 | "lib": ["es6", "dom"],
8 | "moduleResolution": "Node16",
9 | "module": "Node16",
10 | "noEmit": true,
11 | "skipLibCheck": true,
12 | "skipDefaultLibCheck": true,
13 | "resolveJsonModule": true,
14 | "strict": true,
15 | "target": "es5",
16 | "types": []
17 | },
18 | "include": ["packages", "scripts", "test", "playgrounds"],
19 | "exclude": [
20 | "node_modules",
21 | "packages/*/types/test/*",
22 | "packages/*/types/test*",
23 | "packages/native"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------