From a6a05c11e1e9472c634f4e40a42e0d7a8bb5d592 Mon Sep 17 00:00:00 2001 From: Josh Goldberg Date: Mon, 24 May 2021 09:43:11 -0400 Subject: [PATCH] Undid .md, .mdx changes --- docs/cache-provider.mdx | 2 +- docs/composition.mdx | 4 ++-- docs/emotion-11.mdx | 1 - docs/flow.mdx | 29 +++++++++++------------------ docs/introduction.mdx | 1 - docs/media-queries.mdx | 8 ++++++-- docs/migrating-to-emotion-10.mdx | 8 ++++++-- docs/nested.mdx | 8 ++++++-- docs/object-styles.mdx | 31 ++++++++++++++++++++++--------- docs/package-summary.mdx | 2 +- docs/ssr.mdx | 22 +++++++++++++++------- docs/styled.mdx | 21 ++++++++++++++++----- docs/testing.mdx | 11 ++++++----- docs/theming.mdx | 13 ++++++++++--- docs/typescript.mdx | 31 +++++++++++++++++-------------- docs/with-props.mdx | 7 ++++--- site/CHANGELOG.md | 7 ++++++- site/README.md | 1 + 18 files changed, 130 insertions(+), 77 deletions(-) diff --git a/docs/cache-provider.mdx b/docs/cache-provider.mdx index 2bb4191b7..4d3f87264 100644 --- a/docs/cache-provider.mdx +++ b/docs/cache-provider.mdx @@ -17,7 +17,7 @@ const myCache = createCache({ customPlugin, // has to be included manually when customizing `stylisPlugins` if you want to have vendor prefixes added automatically prefixer - ] + ], }) render( diff --git a/docs/composition.mdx b/docs/composition.mdx index 71ea97595..b1eef27a9 100644 --- a/docs/composition.mdx +++ b/docs/composition.mdx @@ -70,8 +70,8 @@ render(
This will be turquoise
- This will be also be turquoise since the base styles overwrite the danger - styles. + This will be also be turquoise since the base styles + overwrite the danger styles.
This will be red
diff --git a/docs/emotion-11.mdx b/docs/emotion-11.mdx index 01c19bb3c..695b080b8 100644 --- a/docs/emotion-11.mdx +++ b/docs/emotion-11.mdx @@ -16,7 +16,6 @@ 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` diff --git a/docs/flow.mdx b/docs/flow.mdx index 0cf903e48..60ccc5579 100644 --- a/docs/flow.mdx +++ b/docs/flow.mdx @@ -18,20 +18,14 @@ alternatives: import styled from '@emotion/styled' // Option A -const A = - styled < - Props > - 'div'` +const A = styled('div')` color: red; ` // Option B -const B = - styled.div < - Props > - { - color: 'red' - } +const B = styled.div({ + color: 'red', +}) ``` Styled components are annotated the same way normal React components are: @@ -40,10 +34,7 @@ Styled components are annotated the same way normal React components are: import styled from '@emotion/styled' type Props = { a: string } -const Link = - styled < - Props > - 'a'` +const Link = styled('a')` color: red; ` @@ -65,6 +56,7 @@ Be aware, Flow infers the return type of your components by referencing their re this means you will need to annotate the properties of the root component in the case below: ```jsx + const Container = styled.div` ^^^^^^^^^^^ Missing type annotation for P. P is a type parameter declared in function type [1] and was implicitly instantiated at encaps tag [2]. @@ -81,16 +73,14 @@ any existing React component: import type { ElementConfig } from 'react' type Props = ElementConfig<'div'> -const Container = - styled < - Props > - 'div'` +const Container = styled('div')` color: red; ` export const App = () => ``` + ```jsx import type { ElementConfig } from 'react' import styled from '@emotion/styled' @@ -120,3 +110,6 @@ const Container = styled.div` export const App = (): Node => ``` + + + diff --git a/docs/introduction.mdx b/docs/introduction.mdx index 6193689d6..9b04638c0 100644 --- a/docs/introduction.mdx +++ b/docs/introduction.mdx @@ -60,7 +60,6 @@ The ["@emotion/react"](https://www.npmjs.com/package/@emotion/react) package req - Best when using React with a build environment that can be configured. - `css` prop support - - Similar to the `style` prop, but also has support for auto vendor-prefixing, nested selectors, and media queries. - Allows developers to skip the `styled` API abstraction and style components and elements directly. diff --git a/docs/media-queries.mdx b/docs/media-queries.mdx index ed3dc0a9d..6528d5bb6 100644 --- a/docs/media-queries.mdx +++ b/docs/media-queries.mdx @@ -34,7 +34,9 @@ import { jsx, css } from '@emotion/react' const breakpoints = [576, 768, 992, 1200] -const mq = breakpoints.map(bp => `@media (min-width: ${bp}px)`) +const mq = breakpoints.map( + bp => `@media (min-width: ${bp}px)` +) render(
@@ -90,7 +92,9 @@ import facepaint from 'facepaint' const breakpoints = [576, 768, 992, 1200] -const mq = facepaint(breakpoints.map(bp => `@media (min-width: ${bp}px)`)) +const mq = facepaint( + breakpoints.map(bp => `@media (min-width: ${bp}px)`) +) render(
( -
+
) ``` @@ -204,6 +206,7 @@ let element = ( - Replace `injectGlobal` with `Global` styles + ```jsx import { injectGlobal } from 'emotion' @@ -216,7 +219,8 @@ injectGlobal` // ↓ ↓ ↓ ↓ ↓ ↓ import { Global, css } from '@emotion/core' -;
-

This is green since it's inside a header

+

+ This is green since it's inside a header +

-

This is turquoise since it's not inside a header.

+

+ This is turquoise since it's not inside a header. +

) ``` diff --git a/docs/object-styles.mdx b/docs/object-styles.mdx index 0a5ca0e4a..91384ebec 100644 --- a/docs/object-styles.mdx +++ b/docs/object-styles.mdx @@ -40,7 +40,11 @@ const Button = styled.button( }) ) -render() +render( + +) ``` ### Child Selectors @@ -81,7 +85,8 @@ render( } }} > - This is orange on a big screen and darkorchid on a small screen. + This is orange on a big screen and darkorchid on a small + screen.
) ``` @@ -124,7 +129,8 @@ render( { padding: 8 } ]} > - This is darkorchid with a hotpink background and 8px of padding. + This is darkorchid with a hotpink background and 8px of + padding.
) ``` @@ -141,12 +147,16 @@ import { jsx } from '@emotion/react' render(
- This has a gradient background in browsers that support gradients and is red - in browsers that don't support gradients + This has a gradient background in browsers that support + gradients and is red in browsers that don't support + gradients
) ``` @@ -199,10 +209,13 @@ const hotpinkWithBlackBackground = css( render(

This is hotpink

- +

- This has a black background and is hotpink. Try moving where hotpink is in - the css call and see if the color changes. + This has a black background and is hotpink. Try moving + where hotpink is in the css call and see if the color + changes.

) diff --git a/docs/package-summary.mdx b/docs/package-summary.mdx index 0ae9fe5d6..85ca2fb68 100644 --- a/docs/package-summary.mdx +++ b/docs/package-summary.mdx @@ -1,5 +1,5 @@ --- -title: 'Package Summaries' +title: "Package Summaries" --- Below is a list of most of Emotion's packages and a summary of what it's for and how it relates to other Emotion packages. diff --git a/docs/ssr.mdx b/docs/ssr.mdx index f60128bfc..14ce17eb1 100644 --- a/docs/ssr.mdx +++ b/docs/ssr.mdx @@ -45,8 +45,7 @@ import createCache from '@emotion/cache' const key = 'custom' const cache = createCache({ key }) -const { extractCriticalToChunks, constructStyleTagsFromChunks } = - createEmotionServer(cache) +const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache) let element = ( @@ -56,7 +55,10 @@ let element = ( let { html, styles } = extractCriticalToChunks(renderToString(element)) -res.status(200).header('Content-Type', 'text/html').send(` +res + .status(200) + .header('Content-Type', 'text/html') + .send(` @@ -70,7 +72,7 @@ res.status(200).header('Content-Type', 'text/html').send(` -`) +`); ``` #### When using `@emotion/css` @@ -93,7 +95,10 @@ let element = ( let { html, css, ids } = extractCritical(renderToString(element)) -res.status(200).header('Content-Type', 'text/html').send(` +res + .status(200) + .header('Content-Type', 'text/html') + .send(` @@ -107,7 +112,7 @@ res.status(200).header('Content-Type', 'text/html').send(` -`) +`); ``` ### On client @@ -123,6 +128,8 @@ ReactDOM.hydrate( ) ``` + + In this approach you have to create your own cache and emotion server then use extractCritical ## API Reference @@ -159,6 +166,7 @@ This returns an object with the properties `html`, `ids` and `css`. It pulls out > > If you have dynamic global styles it's advised to create cache **per** single render to avoid global styles from different renders leaking into the extracted `css`. + ```jsx import { renderToString } from 'react-dom/server' import { extractCritical } from '@emotion/server' @@ -213,7 +221,7 @@ export const createMyCache = () => key: 'my-prefix-key', stylisPlugins: [ /* your plugins here */ - ] + ], }) export const myCache = createMyCache() diff --git a/docs/styled.mdx b/docs/styled.mdx index 6b1977508..19220201f 100644 --- a/docs/styled.mdx +++ b/docs/styled.mdx @@ -28,7 +28,8 @@ Any interpolations or arguments that are functions in `styled` are called with ` import styled from '@emotion/styled' const Button = styled.button` - color: ${props => (props.primary ? 'hotpink' : 'turquoise')}; + color: ${props => + props.primary ? 'hotpink' : 'turquoise'}; ` const Container = styled.div(props => ({ @@ -51,7 +52,9 @@ render( ```jsx // @live import styled from '@emotion/styled' -const Basic = ({ className }) =>
Some text
+const Basic = ({ className }) => ( +
Some text
+) const Fancy = styled(Basic)` color: hotpink; @@ -164,7 +167,8 @@ import isPropValid from '@emotion/is-prop-valid' import styled from '@emotion/styled' const H1 = styled('h1', { - shouldForwardProp: prop => isPropValid(prop) && prop !== 'color' + shouldForwardProp: prop => + isPropValid(prop) && prop !== 'color' })(props => ({ color: 'hotpink' })) @@ -189,7 +193,11 @@ const dynamicStyle = props => const Container = styled.div` ${dynamicStyle}; ` -render(This is lightgreen.) +render( + + This is lightgreen. + +) ``` ### `as` prop @@ -205,7 +213,10 @@ const Button = styled.button` ` render( - ) diff --git a/docs/testing.mdx b/docs/testing.mdx index 9caec5817..94d27121c 100644 --- a/docs/testing.mdx +++ b/docs/testing.mdx @@ -8,10 +8,7 @@ By diffing the serialized value of your React tree Jest can show you what change By default snapshots with emotion show generated class names. Adding [@emotion/jest](https://github.com/emotion-js/emotion/tree/main/packages/jest) allows you to output the actual styles being applied. - + ### Installation @@ -45,6 +42,7 @@ When using Enzyme, you can add `"@emotion/jest/enzyme-serializer"` instead. Or use `expect.addSnapshotSerializer` to add it like this: + ```javascript import { createEnzymeSerializer } from '@emotion/jest/enzyme-serializer' // also adds the enzyme-to-json serializer @@ -61,6 +59,7 @@ import React from 'react' import { jsx } from '@emotion/react' import renderer from 'react-test-renderer' + const Button = props => ( ).toJSON() + renderer + .create() + .toJSON() ).toMatchSnapshot() }) ``` diff --git a/docs/theming.mdx b/docs/theming.mdx index dcb9ae5bd..9228b851b 100644 --- a/docs/theming.mdx +++ b/docs/theming.mdx @@ -33,7 +33,9 @@ const theme = { render( -
({ color: theme.colors.primary })}>some other text
+
({ color: theme.colors.primary })}> + some other text +
) ``` @@ -76,9 +78,14 @@ const theme = { } } -function SomeText(props) { +function SomeText (props) { const theme = useTheme() - return
+ return ( +
+ ) } render( diff --git a/docs/typescript.mdx b/docs/typescript.mdx index 556d60c32..611b4a331 100644 --- a/docs/typescript.mdx +++ b/docs/typescript.mdx @@ -40,7 +40,8 @@ To make the css prop work with pure TypeScript (without babel plugin) you need t ```tsx /** @jsx jsx */ import { jsx } from '@emotion/react' -;
+ +
``` As a result you may be not able to use react fragment shorthand syntax - `<>`, but still you can use ``. @@ -50,7 +51,8 @@ You can still use the css helper and pass the className yourself (ensure you are ```tsx import { css } from '@emotion/css' -;
+ +
``` ### `css` prop @@ -58,7 +60,6 @@ import { css } from '@emotion/css' When using our JSX factories the support for `css` prop is being added only for components that accepts `className` prop as they take provided `css` prop, resolves it and pass the generated `className` to the rendered component. If using the automatic runtime you should just add this to your `tsconfig.json` to let TypeScript know where it should look for the `JSX` namespace: - ```json { "compilerOptions": { @@ -169,12 +170,13 @@ interface ComponentProps { label: string } -const Component: FC = ({ label, className }) => ( -
{label}
-) +const Component: FC = ({ + label, + className +}) =>
{label}
const StyledComponent0 = styled(Component)` - color: ${props => (label === 'Important' ? 'red' : 'green')}; + color: ${props => label === 'Important' ? 'red' : 'green'}; ` const StyledComponent1 = styled(Component)({ @@ -197,8 +199,8 @@ If you make `shouldForwardProp` a [type guard](https://www.typescriptlang.org/do For example: -```ts -const Original: React.FC<{ prop1: string; prop2: string }> = () => null +``` ts +const Original: React.FC<{ prop1: string, prop2: string }> = () => null interface StyledOriginalExtraProps { // This prop would conflict with the `prop2` on Original @@ -284,7 +286,7 @@ declare module '@emotion/react' { // You are also able to use a 3rd party theme this way: import '@emotion/react' -import { LibTheme } from 'some-lib' +import { LibTheme } from 'some-lib' declare module '@emotion/react' { export interface Theme extends LibTheme {} @@ -313,7 +315,7 @@ _emotion.d.ts_ import '@emotion/react' declare module '@emotion/react' { - export interface Theme extends Record {} + export interface Theme extends Record {} } ``` @@ -323,16 +325,17 @@ For Typescript <2.9, the generic type version only works with object styles due You can work around this by specifying the prop types in your style callback: -```ts +``` ts const StyledComponent0 = styled(Component)` color: red; - background: ${(props: StyledComponentProps) => props.bgColor}; + background: ${(props: StyledComponentProps) => + props.bgColor}; ` ``` NOTE: This approach you will have to perform the intersection with the component props yourself to get at the component props -```ts +``` ts const StyledComponent0 = styled(Component)` color: red; background: ${(props: StyledComponentProps & ComponentProps) => diff --git a/docs/with-props.mdx b/docs/with-props.mdx index 98ffb1bc3..cb760e2ff 100644 --- a/docs/with-props.mdx +++ b/docs/with-props.mdx @@ -4,7 +4,7 @@ title: 'Attaching Props' Some css-in-js libraries offer APIs to attach props to components, instead of having our own API to do that, we recommend creating a regular react component, using the css prop and attaching props like you would with any other React component. -Note that if css is passed down via props, it will take precedence over the css in the component. +Note that if css is passed down via props, it will take precedence over the css in the component. ```jsx // @live @@ -13,7 +13,7 @@ import { jsx, css } from '@emotion/react' const pinkInput = css` background-color: pink; -` +`; const RedPasswordInput = props => (
-) +); + ``` diff --git a/site/CHANGELOG.md b/site/CHANGELOG.md index 6d8b8a9fd..c1e881b53 100644 --- a/site/CHANGELOG.md +++ b/site/CHANGELOG.md @@ -4,4 +4,9 @@ ### Minor Changes -- [8c3fb9d9](https://github.com/emotion-js/emotion/commit/8c3fb9d9) [#1401](https://github.com/emotion-js/emotion/pull/1401) Thanks [@jordanoverbye](https://github.com/jordanoverbye)! - 1. Update document title when the user changes route 2. Update markup to me more semantic (nav, aside, main etc instead of just divs) 3. Fix overflow grid issue 4. Fix broken link on CacheProvider page 5. Remove h1 from pageheader, so there is only 1 h1 on all pages 6. Add more vertical spacing between nav groups in sidebar +- [8c3fb9d9](https://github.com/emotion-js/emotion/commit/8c3fb9d9) [#1401](https://github.com/emotion-js/emotion/pull/1401) Thanks [@jordanoverbye](https://github.com/jordanoverbye)! - 1. Update document title when the user changes route + 2. Update markup to me more semantic (nav, aside, main etc instead of just divs) + 3. Fix overflow grid issue + 4. Fix broken link on CacheProvider page + 5. Remove h1 from pageheader, so there is only 1 h1 on all pages + 6. Add more vertical spacing between nav groups in sidebar diff --git a/site/README.md b/site/README.md index 9b41b5204..2e0b4e7c5 100644 --- a/site/README.md +++ b/site/README.md @@ -7,6 +7,7 @@ All of the docs live in the `docs` in the root of this repository. They are in [ ```yaml title: 'Some Title' --- + ``` ### Code Blocks