0.2.0 - Mid migration

This commit is contained in:
Daniel Mason 2022-04-25 14:47:15 +12:00
parent 139e6a915e
commit 7e38fdbd7d
42393 changed files with 5358157 additions and 62 deletions

536
web/node_modules/@emotion/react/CHANGELOG.md generated vendored Normal file
View file

@ -0,0 +1,536 @@
# @emotion/react
## 11.4.1
### Patch Changes
- [#2441](https://github.com/emotion-js/emotion/pull/2441) [`24557d9d`](https://github.com/emotion-js/emotion/commit/24557d9d6409db453fdbaa031cb635820305f137) Thanks [@garronej](https://github.com/garronej)! - Exposed `__unsafe_useEmotionCache` which can be used to access the current Emotion's cache in an easier way than before. Using this might break 0-config SSR and is not recommended to be used unless there you know what you are doing and you are OK with the mentioned downside.
* [#2424](https://github.com/emotion-js/emotion/pull/2424) [`cd25b62d`](https://github.com/emotion-js/emotion/commit/cd25b62da80119bfb1c74a8d0a3516fcd2f62e0e) Thanks [@tills13](https://github.com/tills13)! - Use theme context when rendering components at all times. This removes a conditional usage of a React hook that could break [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html) in some scenarios.
- [#2428](https://github.com/emotion-js/emotion/pull/2428) [`a69929d6`](https://github.com/emotion-js/emotion/commit/a69929d6ab47e834a3535525657829c81dd97b4a) Thanks [@eps1lon](https://github.com/eps1lon)! - Added display names to public React contexts in development builds. This helps to recognize them in React Developer Tools.
- Updated dependencies [[`405af5ca`](https://github.com/emotion-js/emotion/commit/405af5ca01dcc0cac64227db082ce3f483e1bb46)]:
- @emotion/sheet@1.0.2
## 11.4.0
### Patch Changes
- [#2334](https://github.com/emotion-js/emotion/pull/2334) [`7d9e74f8`](https://github.com/emotion-js/emotion/commit/7d9e74f8f0d0e0ea60573a19965eded61dc41024) Thanks [@Andarist](https://github.com/Andarist)! - The Global component no longer replaces style elements from server-rendering on first mount and instead reuses the server-side rendered style element
- Updated dependencies [[`38f9d44f`](https://github.com/emotion-js/emotion/commit/38f9d44f919dccbf66c835ccde3f08ab927a4940)]:
- @emotion/cache@11.4.0
## 11.1.5
### Patch Changes
- [`4d2e732e`](https://github.com/emotion-js/emotion/commit/4d2e732e9f0c8385c77c7bc43d4ccea7b30b9d37) [#2206](https://github.com/emotion-js/emotion/pull/2206) Thanks [@jimmydief](https://github.com/jimmydief)! - Added export for `SerializedStyles` Flow type.
## 11.1.4
### Patch Changes
- [`71ca9be3`](https://github.com/emotion-js/emotion/commit/71ca9be3368ddb0a95ef5b2db7a97c67ab440593) [#2181](https://github.com/emotion-js/emotion/pull/2181) Thanks [@101arrowz](https://github.com/101arrowz)! - Fixed some typing issues with React components with custom generic render functions.
## 11.1.3
### Patch Changes
- [`704b0092`](https://github.com/emotion-js/emotion/commit/704b0092ebba648c3937cc281e4d549565968201) [#2180](https://github.com/emotion-js/emotion/pull/2180) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with global styles containing pseudo selectors in at-rules not being able to be inserted.
- Updated dependencies [[`704b0092`](https://github.com/emotion-js/emotion/commit/704b0092ebba648c3937cc281e4d549565968201)]:
- @emotion/cache@11.1.3
## 11.1.2
### Patch Changes
- [`3f8bf70e`](https://github.com/emotion-js/emotion/commit/3f8bf70e995267ace1e04b6a97df35ae23902fed) [#2132](https://github.com/emotion-js/emotion/pull/2132) Thanks [@dcastil](https://github.com/dcastil)! - `displayName`s have been added to `Global` and `ClassNames` components so React Developer Tools should display those better now.
* [`1ee34005`](https://github.com/emotion-js/emotion/commit/1ee34005a5e02c9041b36f73395700f1965388eb) [#2122](https://github.com/emotion-js/emotion/pull/2122) Thanks [@dcastil](https://github.com/dcastil)! - Improved label extraction from the stack traces to handle components with numbers in their names.
- [`e5843530`](https://github.com/emotion-js/emotion/commit/e58435308d880a69c6ccfde15d745e6c95d3c333) [#2140](https://github.com/emotion-js/emotion/pull/2140) Thanks [@hasparus](https://github.com/hasparus)! - Fixed an issue with `css` prop type not being added to all components that accept a string `className` correctly.
- Updated dependencies [[`5469d003`](https://github.com/emotion-js/emotion/commit/5469d0034d055a34587e9d05332f6da4d4722b1c)]:
- @emotion/sheet@1.0.1
## 11.1.1
### Patch Changes
- [`fdd46bdf`](https://github.com/emotion-js/emotion/commit/fdd46bdf71f6a0aa9c8401ca91b38d48849cece5) [#2112](https://github.com/emotion-js/emotion/pull/2112) Thanks [@Andarist](https://github.com/Andarist)! - Fixed the latest tree-shakeability improvements by adding `"sideEffects": false` to all internal `package.json` files as well. This fixes [`hoist-non-react-statics`](https://github.com/mridgway/hoist-non-react-statics) not being dropped correctly despite of the latest improvements.
## 11.1.0
### Patch Changes
- [`0e465d1c`](https://github.com/emotion-js/emotion/commit/0e465d1c46619409f8f9a5123451243dd3b31e9b) [#2101](https://github.com/emotion-js/emotion/pull/2101) Thanks [@Andarist](https://github.com/Andarist)! - Improved tree-shakeability of the package. The main benefit is that bundlers should be able now to drop [`hoist-non-react-statics`](https://github.com/mridgway/hoist-non-react-statics) if you don't actually use our `withTheme` export.
## 11.0.0
### Major Changes
- [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1) [#1675](https://github.com/emotion-js/emotion/pull/1675) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Rename `@emotion/core` to `@emotion/react`. Please change any imports of `@emotion/core` to import `@emotion/react` or use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin`.
* [`cbb8b796`](https://github.com/emotion-js/emotion/commit/cbb8b7965c2923cf1922d724de556374323bff61) [#1628](https://github.com/emotion-js/emotion/pull/1628) Thanks [@Andarist](https://github.com/Andarist)! - `emotion-theming` has been removed and all its exports were moved to `@emotion/react` package. Please import them like this `import { useTheme, ThemeProvider, withTheme } from '@emotion/react'` from now on.
- [`a72e6dc`](https://github.com/emotion-js/emotion/commit/a72e6dc0f326b7d3d6067698d433018ee8c4cbf1) [#1501](https://github.com/emotion-js/emotion/pull/1501) Thanks [@JakeGinnivan](https://github.com/JakeGinnivan)! - TypeScript types have been significantly restructured. These changes:
- reduce build times when using Emotion, especially in larger projects
- it's no longer necessary to manually specify generic parameters for your Emotion components in many cases
- union types as props are better supported and should be inferred properly
- the `css` function has been restricted to prevent passing invalid types
- `styled`'s generic parameter has been changed, if you were specifying the `ComponentType` you will need to remove that generic parameter
- `styled` no longer takes a second `ExtraProps` parameter - instead of that move it to after the `styled` call. So instead of writing `styled<typeof MyComponent, ExtraProps>(MyComponent)({})` you should now be writing `styled(MyComponent)<ExtraProps>({})`
If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred.
* [`c6431074`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b) [#1609](https://github.com/emotion-js/emotion/pull/1609) Thanks [@tomsseisums](https://github.com/tomsseisums)! - 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:
```ts
import '@emotion/react'
declare module '@emotion/react' {
export interface Theme {
primaryColor: string
secondaryColor: string
}
}
```
- [`f57a7229`](https://github.com/emotion-js/emotion/commit/f57a72299cd4025a725bd5bd1b966a8f9df16cd8) [#1941](https://github.com/emotion-js/emotion/pull/1941) Thanks [@Andarist](https://github.com/Andarist)! - 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).
For the classic runtime this has been implemented using technique described [here](https://www.typescriptlang.org/docs/handbook/jsx.html#factory-functions). What is important - we no longer extend any global interfaces, so people shouldn't bump anymore into type conflicts for the `css` prop when using different libraries with `css` prop support, such as `styled-components`.
For the automatic runtime this has been implemented by exporting `JSX` namespace from the appropriate entries but this is only supported in **TypeScript 4.1 or higher**.
However, if you are stuck with older version of TypeScript or using the classic runtime implicitly by using our `@emotion/babel-preset-css-prop` then it's not possible to leverage leverage `css` prop support being added conditionally based on a type of rendered component. For those cases we have added a special file that can be imported once to add support for the `css` prop globally, for all components. Use it like this:
```ts
/// <reference types="@emotion/react/types/css-prop" />
```
In this particular case we are forced to extend the existing `React.Attributes` interface. Previously we've been extending both `React.DOMAttributes<T>` and `JSX.IntrinsicAttributes`. This change is really minor and shouldn't affect any consuming code.
- [`843bfb11`](https://github.com/emotion-js/emotion/commit/843bfb1153ee0dbe33d005fdd5c5be185daa5c41) [#1630](https://github.com/emotion-js/emotion/pull/1630) Thanks [@Andarist](https://github.com/Andarist)! - Removed default export from `@emotion/css` - it's main purpose was to allow `css` to be a Babel macro, but since babel-plugin-macros allows us to keep imports nowadays this is no longer needed. `@emotion/react/macro` has been added to account for this use case and appropriate changes has been made to `@emotion/babel-plugin` to facilitate those changes.
If you have used `@emotion/css` directly (it was always reexported from `@emotion/react`) or you have been using its macro then you should update your code like this:
```diff
-import css from '@emotion/css'
+import { css } from '@emotion/react'
// or
-import css from '@emotion/css/macro'
+import { css } from '@emotion/react/macro'
```
You can also use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin` to do this for you.
* [`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use hooks internally for improved bundle size and a better tree in React DevTools
- [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - 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 🚀
It has been completely rewritten and comes with some breaking changes. The most notable ones that might affect Emotion users are:
- plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its [README](https://github.com/thysultan/stylis.js#middleware) and the source code of core plugins.
- vendor-prefixing was previously customizable using `prefix` option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The `prefix` option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.
- 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.
* [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - `[data-emotion]` attribute on SSRed styled has changed. You should never rely on it though.
* [`cf56694`](https://github.com/emotion-js/emotion/commit/cf56694d54d0b2bd6208f561d8ce829da4918952) [#2088](https://github.com/emotion-js/emotion/pull/2088) Thanks [@Andarist](https://github.com/Andarist)! - UMD filenames have been changed.
### Minor Changes
- [`c672175b`](https://github.com/emotion-js/emotion/commit/c672175b52e86de43b3d4092a8fe34b2023ceae8) [#1130](https://github.com/emotion-js/emotion/pull/1130) Thanks [@jtmthf](https://github.com/jtmthf)! - Support functions in arrays passed to `css` prop and `Global`'s styles prop. This allows for composition of theme-accepting functions.
* [`828111cd`](https://github.com/emotion-js/emotion/commit/828111cd32d3fe8c984231201e518d1b6000bffd) [#1639](https://github.com/emotion-js/emotion/pull/1639) Thanks [@Andarist](https://github.com/Andarist)! - `Global` imported from macro entry (`@emotion/react/macro`) gets source maps generated now when inline css-less expression is used as value of the `styles` prop.
- [`5d692a6a`](https://github.com/emotion-js/emotion/commit/5d692a6a8102b3faabefb773dd0145b123668a07) [#1956](https://github.com/emotion-js/emotion/pull/1956) Thanks [@eps1lon](https://github.com/eps1lon)! - Upgraded [`csstype`](https://www.npmjs.com/package/csstype) dependency to its v3. This is what we use to provide TypeScript typings for object styles. The upgrade should not affect any consuming code but it's worth mentioning if any edge case scenarios arise.
### Patch Changes
- [`7dea6d7a`](https://github.com/emotion-js/emotion/commit/7dea6d7a9a87f00cf9b695b58a2f65b67e17fabd) [#1734](https://github.com/emotion-js/emotion/pull/1734) Thanks [@Andarist](https://github.com/Andarist)! - Fixed styles inserted by `<Global/>` component not inheriting `speedy` option from a cache passed to a wrapping `<CacheProvider/>`.
- [`5c55fd17`](https://github.com/emotion-js/emotion/commit/5c55fd17dcaec84d1f5d5d13ae90dd336d7e4403) [#1653](https://github.com/emotion-js/emotion/pull/1653) Thanks [@Andarist](https://github.com/Andarist)! - Fix to what location generated source maps are pointing in case of composed styles.
* [`75e2f9e1`](https://github.com/emotion-js/emotion/commit/75e2f9e1848bc0161f8db3c663438ada3042ae66) [#1810](https://github.com/emotion-js/emotion/pull/1810) Thanks [@Andarist](https://github.com/Andarist)! - Add a dev-only warning about styles created with `css` from `@emotion/react` being passed to `cx` from `<ClassNames/>`.
- [`d62d9101`](https://github.com/emotion-js/emotion/commit/d62d9101bc75e6bc9644ae588d2a6e4bf4d69285) [#1677](https://github.com/emotion-js/emotion/pull/1677) Thanks [@ajs139](https://github.com/ajs139)! - Warn if `@emotion/react` is initialized more than once in the same development environment.
- [`a085003d`](https://github.com/emotion-js/emotion/commit/a085003d4c8ca284c116668d7217fb747802ed85) [#1613](https://github.com/emotion-js/emotion/pull/1613) Thanks [@Andarist](https://github.com/Andarist)! - Add missing `#__PURE__` annotations
* [`58dc08a6`](https://github.com/emotion-js/emotion/commit/58dc08a6a013fb5cfa10bb85e06e53a8ff7eeb51) [#1837](https://github.com/emotion-js/emotion/pull/1837) Thanks [@arcanis](https://github.com/arcanis)! - Fixed TS compatibility under [PnP](https://classic.yarnpkg.com/en/docs/pnp/) environments by making `@types/react` an optional peer dependency.
- Updated dependencies [[`a8eb4e75`](https://github.com/emotion-js/emotion/commit/a8eb4e75eed26763dc4f82ddd9bb49af4552768b), [`e3d7db87`](https://github.com/emotion-js/emotion/commit/e3d7db87deaac95817404760112417ac1fa1b56d), [`8a896a31`](https://github.com/emotion-js/emotion/commit/8a896a31434a1d2f69e1f1467c446c884c929387), [`42df3f3b`](https://github.com/emotion-js/emotion/commit/42df3f3bc01526eed61cedba106d86b9e3807f9d), [`4a891bf6`](https://github.com/emotion-js/emotion/commit/4a891bf6a30e3bb37f8f32031fa75a571c637d9c), [`1e4a741d`](https://github.com/emotion-js/emotion/commit/1e4a741de6424d3d9c1f3ca9695e1953bed3a194), [`debaad9a`](https://github.com/emotion-js/emotion/commit/debaad9ab4bd6c80312092826d9146f3d29c0899), [`5c55fd17`](https://github.com/emotion-js/emotion/commit/5c55fd17dcaec84d1f5d5d13ae90dd336d7e4403), [`a085003d`](https://github.com/emotion-js/emotion/commit/a085003d4c8ca284c116668d7217fb747802ed85), [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71), [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d), [`39be057b`](https://github.com/emotion-js/emotion/commit/39be057b1a0c6b76f2cb7a455cb8bc35fe875ba0), [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d), [`5d692a6a`](https://github.com/emotion-js/emotion/commit/5d692a6a8102b3faabefb773dd0145b123668a07), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`c6431074`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf)]:
- @emotion/cache@11.0.0
- @emotion/serialize@1.0.0
- @emotion/sheet@1.0.0
- @emotion/utils@1.0.0
## 11.0.0-rc.0
### Major Changes
- [`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63) [#2030](https://github.com/emotion-js/emotion/pull/2030) Thanks [@Andarist](https://github.com/Andarist)! - Release candidate version.
### Patch Changes
- Updated dependencies [[`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63)]:
- @emotion/cache@11.0.0-rc.0
- @emotion/serialize@1.0.0-rc.0
- @emotion/sheet@1.0.0-rc.0
- @emotion/utils@1.0.0-rc.0
## 11.0.0-next.19
### Patch Changes
- Updated dependencies [[`42df3f3b`](https://github.com/emotion-js/emotion/commit/42df3f3bc01526eed61cedba106d86b9e3807f9d), [`42df3f3b`](https://github.com/emotion-js/emotion/commit/42df3f3bc01526eed61cedba106d86b9e3807f9d)]:
- @emotion/sheet@1.0.0-next.5
- @emotion/cache@11.0.0-next.19
## 11.0.0-next.17
### Patch Changes
- Updated dependencies [[`76e3dc4d`](https://github.com/emotion-js/emotion/commit/76e3dc4dd3e76423aa5d527b3e66fe3be1722e5a)]:
- @emotion/serialize@1.0.0-next.5
## 11.0.0-next.16
### Patch Changes
- [`58b2bbca`](https://github.com/emotion-js/emotion/commit/58b2bbcad63f8ea22389ccdc2a8f6c5064984e82) [#1981](https://github.com/emotion-js/emotion/pull/1981) Thanks [@Andarist](https://github.com/Andarist)! - Changed the key of the global flag that helps us identify that `@emotion/react` has been loaded more than once to include the current major version of `@emotion/react`.
- Updated dependencies [[`a8eb4e75`](https://github.com/emotion-js/emotion/commit/a8eb4e75eed26763dc4f82ddd9bb49af4552768b), [`dfe98028`](https://github.com/emotion-js/emotion/commit/dfe98028451a27c5190fa1ba138e51ef3d6d9be1), [`debaad9a`](https://github.com/emotion-js/emotion/commit/debaad9ab4bd6c80312092826d9146f3d29c0899), [`39be057b`](https://github.com/emotion-js/emotion/commit/39be057b1a0c6b76f2cb7a455cb8bc35fe875ba0), [`39be057b`](https://github.com/emotion-js/emotion/commit/39be057b1a0c6b76f2cb7a455cb8bc35fe875ba0)]:
- @emotion/cache@11.0.0-next.16
- @emotion/utils@1.0.0-next.1
- @emotion/sheet@1.0.0-next.4
- @emotion/serialize@0.11.15-next.4
## 11.0.0-next.15
### Minor Changes
- [`5d692a6a`](https://github.com/emotion-js/emotion/commit/5d692a6a8102b3faabefb773dd0145b123668a07) [#1956](https://github.com/emotion-js/emotion/pull/1956) Thanks [@eps1lon](https://github.com/eps1lon)! - Upgraded [`csstype`](https://www.npmjs.com/package/csstype) dependency to its v3. This is what we use to provide TypeScript typings for object styles. The upgrade should not affect any consuming code but it's worth mentioning if any edge case scenarios arise.
### Patch Changes
- Updated dependencies [[`dc1a0c5e`](https://github.com/emotion-js/emotion/commit/dc1a0c5ed78b27fb7ce49b6296f2ca8631654cd1), [`5d692a6a`](https://github.com/emotion-js/emotion/commit/5d692a6a8102b3faabefb773dd0145b123668a07)]:
- @emotion/sheet@1.0.0-next.3
- @emotion/serialize@1.0.0-next.3
- @emotion/cache@11.0.0-next.15
## 11.0.0-next.14
### Patch Changes
- [`58dc08a6`](https://github.com/emotion-js/emotion/commit/58dc08a6a013fb5cfa10bb85e06e53a8ff7eeb51) [#1837](https://github.com/emotion-js/emotion/pull/1837) Thanks [@arcanis](https://github.com/arcanis)! - Fixed TS compatibility under [PnP](https://classic.yarnpkg.com/en/docs/pnp/) environments by making `@types/react` an optional peer dependency.
* [`f57a7229`](https://github.com/emotion-js/emotion/commit/f57a72299cd4025a725bd5bd1b966a8f9df16cd8) [#1941](https://github.com/emotion-js/emotion/pull/1941) Thanks [@Andarist](https://github.com/Andarist)! - The way in which we provide TypeScript support for `css` prop has changed. Based on usage of our jsx pragma we are able to add support for `css` prop only for components that support `className` prop (as our `jsx` factory function takes provided `css` prop, resolves it and pass the generated `className` to the rendered component). This has been implemented using technique described [here](https://www.typescriptlang.org/docs/handbook/jsx.html#factory-functions). What is important - we no longer extend any global interfaces, so people shouldn't bump anymore into type conflicts for the `css` prop when using different libraries with the `css` prop support, such as `styled-components`.
However, it's not possible to leverage `css` prop support being added conditionally based on a type of rendered component when one is not using our jsx pragma. For those cases when people use our pragma implicitly (for example when using our `@emotion/babel-preset-css-prop`) we have added special file that can be imported once to add support for the `css` prop globally, for all components. Use it like this:
```ts
import {} from '@emotion/react/types/css-prop'
```
In this particular case we are forced to extend the existing `React.Attributes` interface. Previously we've been extending both `React.DOMAttributes<T>` and `JSX.IntrinsicAttributes`. This change is really minor and shouldn't affect any consuming code.
* Updated dependencies [[`4d3b60d0`](https://github.com/emotion-js/emotion/commit/4d3b60d0d448a61d762ee150e6cb7a2c995ccc2f), [`58dc08a6`](https://github.com/emotion-js/emotion/commit/58dc08a6a013fb5cfa10bb85e06e53a8ff7eeb51), [`6d32d82b`](https://github.com/emotion-js/emotion/commit/6d32d82beb45b18e5f18a37932b862ad19b17044)]:
- @emotion/styled@11.0.0-next.14
- @emotion/css@11.0.0-next.14
- @emotion/server@11.0.0-next.14
## 11.0.0-next.13
### Major Changes
- [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - 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 🚀
It has been completely rewritten and comes with some breaking changes. Most notable ones that might affect Emotion users are:
- plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its [README](https://github.com/thysultan/stylis.js#middleware) and the source code of core plugins.
- vendor-prefixing was previously customizable using `prefix` option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The `prefix` option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.
- Prefixer is now just a plugin which happens to be put in 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.
### Patch Changes
- Updated dependencies [[`91046a8c`](https://github.com/emotion-js/emotion/commit/91046a8c188327a65daac61583ef3c4458f30afb), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf)]:
- @emotion/sheet@1.0.0-next.2
- @emotion/cache@11.0.0-next.13
- @emotion/css@11.0.0-next.13
- @emotion/styled@11.0.0-next.13
- @emotion/utils@1.0.0-next.0
- @emotion/server@11.0.0-next.13
- @emotion/serialize@0.11.15-next.2
## 11.0.0-next.12
### Major Changes
- [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - `[data-emotion]` attribute on SSRed styled has changed. You should never rely on it though.
### Patch Changes
- [`7dea6d7a`](https://github.com/emotion-js/emotion/commit/7dea6d7a9a87f00cf9b695b58a2f65b67e17fabd) [#1734](https://github.com/emotion-js/emotion/pull/1734) Thanks [@Andarist](https://github.com/Andarist)! - Fixed styles inserted by `<Global/>` component not inheriting `speedy` option from a cache passed to a wrapping `<CacheProvider/>`.
* [`be2eb614`](https://github.com/emotion-js/emotion/commit/be2eb614d2bc369a382dbc6aa347f66801605f3b) [#1806](https://github.com/emotion-js/emotion/pull/1806) Thanks [@Andarist](https://github.com/Andarist)! - Do not warn about `@emotion/react` being loaded twice in Jest. For some reason Jest sometimes evaluates modules twice when `jest.mock` is being called.
- [`75e2f9e1`](https://github.com/emotion-js/emotion/commit/75e2f9e1848bc0161f8db3c663438ada3042ae66) [#1810](https://github.com/emotion-js/emotion/pull/1810) Thanks [@Andarist](https://github.com/Andarist)! - Add a dev-only warning about styles created with `css` from `@emotion/react` being passed to `cx` from `<ClassNames/>`.
- Updated dependencies [[`e3d7db87`](https://github.com/emotion-js/emotion/commit/e3d7db87deaac95817404760112417ac1fa1b56d), [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d), [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d), [`5bea60b1`](https://github.com/emotion-js/emotion/commit/5bea60b1ffab85fbc965532006c3a94ea139f0bf), [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d), [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d)]:
- @emotion/serialize@1.0.0-next.1
- @emotion/server@11.0.0-next.12
- @emotion/styled@11.0.0-next.12
- @emotion/cache@11.0.0-next.12
- @emotion/css@11.0.0-next.12
## 11.0.0-next.11
### Patch Changes
- Updated dependencies [[`f08ef5a3`](https://github.com/emotion-js/emotion/commit/f08ef5a316c1d05bff8e7f3690781e1089a263c6), [`b79781f8`](https://github.com/emotion-js/emotion/commit/b79781f81ccf100e83f533e2edb641816f85e5e1)]:
- @emotion/serialize@0.11.15-next.4
- @emotion/styled@11.0.0-next.11
- @emotion/css@11.0.0-next.11
## 11.0.0-next.10
### Major Changes
- [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1) [#1675](https://github.com/emotion-js/emotion/pull/1675) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Rename `@emotion/core` to `@emotion/react`. Please change any imports of `@emotion/core` to import `@emotion/react` or use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin`.
### Patch Changes
- [`affed3dd`](https://github.com/emotion-js/emotion/commit/affed3ddf03671835356632f26a064f59811852f) [#1702](https://github.com/emotion-js/emotion/pull/1702) Thanks [@Andarist](https://github.com/Andarist)! - Fix issue with published TypeScript test files augmenting Theme interface.
* [`d62d9101`](https://github.com/emotion-js/emotion/commit/d62d9101bc75e6bc9644ae588d2a6e4bf4d69285) [#1677](https://github.com/emotion-js/emotion/pull/1677) Thanks [@ajs139](https://github.com/ajs139)! - Warn if @emotion/react is initialized more than once in the same development environment.
* Updated dependencies [[`1e4a741d`](https://github.com/emotion-js/emotion/commit/1e4a741de6424d3d9c1f3ca9695e1953bed3a194), [`2fa7a213`](https://github.com/emotion-js/emotion/commit/2fa7a213222fc2bb99ca0a01078148f1a1c6458d), [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1), [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71), [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1), [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1), [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1), [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71)]:
- @emotion/sheet@0.10.0-next.1
- @emotion/styled@11.0.0-next.10
- @emotion/css@11.0.0-next.10
- @emotion/server@11.0.0-next.10
- @emotion/cache@11.0.0-next.10
## 11.0.0-next.7
### Patch Changes
- [`5c55fd17`](https://github.com/emotion-js/emotion/commit/5c55fd17dcaec84d1f5d5d13ae90dd336d7e4403) [#1653](https://github.com/emotion-js/emotion/pull/1653) Thanks [@Andarist](https://github.com/Andarist)! - Fix to what location generated source maps are pointing in case of composed styles.
- Updated dependencies [[`5c55fd17`](https://github.com/emotion-js/emotion/commit/5c55fd17dcaec84d1f5d5d13ae90dd336d7e4403), [`729ef9d8`](https://github.com/emotion-js/emotion/commit/729ef9d8408af82c7a63effc1b8728f79c66bed1)]:
- @emotion/serialize@0.11.15-next.2
- @emotion/styled@11.0.0-next.7
## 11.0.0-next.6
### Major Changes
- [`843bfb11`](https://github.com/emotion-js/emotion/commit/843bfb1153ee0dbe33d005fdd5c5be185daa5c41) [#1630](https://github.com/emotion-js/emotion/pull/1630) Thanks [@Andarist](https://github.com/Andarist)! - Removed `@emotion/css` - it's main purpose was to allow `css` to be a Babel macro, but since babel-plugin-macros allows us to keep imports nowadays this is no longer needed. `@emotion/core/macro` has been added to account for this use case and appropriate changes has been made to `babel-plugin-emotion` to facilitate those changes.
If you have used `@emotion/css` directly (it was always reexported from `@emotion/core`) or you have been using its macro then you should update your code like this:
```diff
-import css from '@emotion/css'
+import { css } from '@emotion/core'
// or
-import css from '@emotion/css/macro'
+import { css } from '@emotion/core/macro'
```
- [`cbb8b796`](https://github.com/emotion-js/emotion/commit/cbb8b7965c2923cf1922d724de556374323bff61) [#1628](https://github.com/emotion-js/emotion/pull/1628) Thanks [@Andarist](https://github.com/Andarist)! - `emotion-theming` has been removed and all its exports were moved to `@emotion/core` package. Please import them like this `import { useTheme, ThemeProvider, withTheme } from '@emotion/core'` from now on.
### Minor Changes
- [`828111cd`](https://github.com/emotion-js/emotion/commit/828111cd32d3fe8c984231201e518d1b6000bffd) [#1639](https://github.com/emotion-js/emotion/pull/1639) Thanks [@Andarist](https://github.com/Andarist)! - `Global` imported from macro entry (`@emotion/core/macro`) gets source maps generated now when inline css-less expression is used as value of the `styles` prop.
### Patch Changes
- Updated dependencies [[`923ded01`](https://github.com/emotion-js/emotion/commit/923ded01e2399a242206d590f6646f13aba110e4), [`4a891bf6`](https://github.com/emotion-js/emotion/commit/4a891bf6a30e3bb37f8f32031fa75a571c637d9c), [`843bfb11`](https://github.com/emotion-js/emotion/commit/843bfb1153ee0dbe33d005fdd5c5be185daa5c41)]:
- @emotion/styled@11.0.0-next.6
- @emotion/cache@11.0.0-next.6
- @emotion/sheet@0.10.0-next.0
- @emotion/css@11.0.0-next.6
## 11.0.0-next.5
### Patch Changes
- Updated dependencies [[`ad77ed24`](https://github.com/emotion-js/emotion/commit/ad77ed24b4bfe62d6c80f0498cd7e76863e2f28e), [`99c6b7e2`](https://github.com/emotion-js/emotion/commit/99c6b7e2f65fb7eddb2863b393e2110dbc4810d8)]:
- @emotion/styled@11.0.0-next.5
- emotion-theming@11.0.0-next.5
## 11.0.0-next.4
### Patch Changes
- Updated dependencies [[`e6e079c3`](https://github.com/emotion-js/emotion/commit/e6e079c35074f027ac0586792e4f19595ac18c55)]:
- @emotion/styled@11.0.0-next.4
- emotion-theming@11.0.0-next.4
## 11.0.0-next.3
### Patch Changes
- [`a085003d`](https://github.com/emotion-js/emotion/commit/a085003d4c8ca284c116668d7217fb747802ed85) [#1613](https://github.com/emotion-js/emotion/pull/1613) Thanks [@Andarist](https://github.com/Andarist)! - Add missing `#__PURE__` annotations
- Updated dependencies [[`8a896a31`](https://github.com/emotion-js/emotion/commit/8a896a31434a1d2f69e1f1467c446c884c929387), [`a085003d`](https://github.com/emotion-js/emotion/commit/a085003d4c8ca284c116668d7217fb747802ed85), [`f9feab1a`](https://github.com/emotion-js/emotion/commit/f9feab1a5d1ca88e53c3f7a063be5d5871cc93e8)]:
- @emotion/serialize@0.11.15-next.1
- @emotion/styled@11.0.0-next.3
- @emotion/css@11.0.0-next.3
- emotion-theming@11.0.0-next.3
## 11.0.0-next.2
### Major Changes
- [`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use hooks internally for improved bundle size and a better tree in React DevTools
### Patch Changes
- Updated dependencies [[`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967), [`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967)]:
- @emotion/styled@11.0.0-next.2
- emotion-theming@11.0.0-next.2
## 11.0.0-next.1
### Patch Changes
- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6), [`22935470`](https://github.com/emotion-js/emotion/commit/2293547000ce78d044d054d17564f6c2aa670687)]:
- @emotion/css@11.0.0-next.1
- emotion-theming@11.0.0-next.1
- @emotion/serialize@1.0.0-next.0
- @emotion/styled@11.0.0-next.1
## 11.0.0-next.0
### Major Changes
- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number
### Patch Changes
- Updated dependencies [[`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]:
- @emotion/cache@11.0.0-next.0
- @emotion/css@11.0.0-next.0
- emotion@11.0.0-next.0
- emotion-server@11.0.0-next.0
- emotion-theming@11.0.0-next.0
- @emotion/styled@11.0.0-next.0
## 10.1.1
### Patch Changes
- [`fe30cbd6`](https://github.com/emotion-js/emotion/commit/fe30cbd60b131bd7017d574cc25215dcd04d1f46) [#2066](https://github.com/emotion-js/emotion/pull/2066) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with React giving warning about static children not having unique keys when using the classic `jsx` factory. This example illustrates the situation in which this has been incorrectly happening:
```js
<div css={{ color: 'hotpink' }}>
<div />
<div />
</div>
```
## 10.1.0
### Minor Changes
- [`71514b06`](https://github.com/emotion-js/emotion/commit/71514b06fe172517168f98321499f05e74388de6) [#1970](https://github.com/emotion-js/emotion/pull/1970) Thanks [@FLGMwt](https://github.com/FLGMwt)! - Support for [the new JSX runtimes](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) has been added. They require compatible React versions and shouldn't be manually used.
To use them you can use the new `@jsxImportSource @emotion/core` pragma instead of the old `@jsx jsx` or you can use `@emotion/babel-preset-css-prop` with `{ runtime: 'automatic' }` option to have it handled automatically for you for the whole project.
## 10.0.35
### Patch Changes
- [`2cf3b16b`](https://github.com/emotion-js/emotion/commit/2cf3b16b94eb7bad8d745b135fb2bfa99154980d) [#1973](https://github.com/emotion-js/emotion/pull/1973) Thanks [@santialbo](https://github.com/santialbo)! - Fixed label extraction from the stack traces in node for components wrapped in `React.forwardRef`. This has affected only development builds.
## 10.0.34
### Patch Changes
- [`4979ebb2`](https://github.com/emotion-js/emotion/commit/4979ebb2f9db94fa291384213e4f37e4a58a294a) [#1966](https://github.com/emotion-js/emotion/pull/1966) Thanks [@chnakamura](https://github.com/chnakamura)! - Fixed label extraction from the stack traces in Chrome in certain scenarios. This has affected only development builds.
## 10.0.28
### Patch Changes
- [`d0b2a94`](https://github.com/emotion-js/emotion/commit/d0b2a94ab9d5648667447dbd78e7a2e3e93de42a) [#1714](https://github.com/emotion-js/emotion/pull/1714) Thanks [@Andarist](https://github.com/Andarist)! - Fixed label extraction from the stack traces in FireFox and Safari. We have failed to match a label in Emotion wrappers like Theme UI which caused SSR mismatches in mentioned browsers. This has affected only development builds.
## 10.0.27
### Patch Changes
- [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file
- Updated dependencies [[`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968)]:
- @emotion/cache@10.0.27
- @emotion/css@10.0.27
- emotion-server@10.0.27
- emotion-theming@10.0.27
- emotion@10.0.27
- @emotion/serialize@0.11.15
- @emotion/sheet@0.9.4
- @emotion/styled@10.0.27
- @emotion/utils@0.11.3
## 10.0.22
### Patch Changes
- [`4fc5657a`](https://github.com/emotion-js/emotion/commit/4fc5657ac8d0002322321cfbfc254b7196d27387) [#1219](https://github.com/emotion-js/emotion/pull/1219) Thanks [@Andarist](https://github.com/Andarist)! - Add dev hint about css object being stringified by accident
* [`2fc75f26`](https://github.com/emotion-js/emotion/commit/2fc75f266b23cf48fb842953bc47eebcb5241cbd) [#1548](https://github.com/emotion-js/emotion/pull/1548) Thanks [@Andarist](https://github.com/Andarist)! - Accept objects as `className` in jsx-created components (they are stringified) to match React behavior
- [`10211951`](https://github.com/emotion-js/emotion/commit/10211951051729b149930a8646de14bae9ae1bbc) [#1553](https://github.com/emotion-js/emotion/pull/1553) Thanks [@Andarist](https://github.com/Andarist)! - Add dev warning about keyframes being interpolated into plain strings.
* [`57a767ea`](https://github.com/emotion-js/emotion/commit/57a767ea3dd18eefbbdc7269cc13128caad65286) [#1560](https://github.com/emotion-js/emotion/pull/1560) Thanks [@Andarist](https://github.com/Andarist)! - Fix composition of styles without a final semicolon in a declaration block
* Updated dependencies [[`4fc5657a`](https://github.com/emotion-js/emotion/commit/4fc5657ac8d0002322321cfbfc254b7196d27387), [`10211951`](https://github.com/emotion-js/emotion/commit/10211951051729b149930a8646de14bae9ae1bbc), [`57a767ea`](https://github.com/emotion-js/emotion/commit/57a767ea3dd18eefbbdc7269cc13128caad65286), [`c3f0bc10`](https://github.com/emotion-js/emotion/commit/c3f0bc101833fff1ee4e27c7a730b821a7df4a15), [`11bea3a8`](https://github.com/emotion-js/emotion/commit/11bea3a89f38f9052c692c3df050ad802b6b954c)]:
- @emotion/serialize@0.11.12
- @emotion/styled@10.0.22
- @emotion/css@10.0.22
## 10.0.21
### Patch Changes
- [7855db4a](https://github.com/emotion-js/emotion/commit/7855db4ae379f212e7b972b9108419154e17ed45) [#1537](https://github.com/emotion-js/emotion/pull/1537) Thanks [@Andarist](https://github.com/Andarist)! - Add missing `/* #__PURE__ */` annotation to creation of EmotionCssPropInternal
## 10.0.20
### Patch Changes
- [38bb2b19](https://github.com/emotion-js/emotion/commit/38bb2b19d4ff1552116829e068664516d167a3f8) [#1530](https://github.com/emotion-js/emotion/pull/1530) Thanks [@Andarist](https://github.com/Andarist)! - Fix class not being applied when putting nil as css prop value on wrapper component
## 10.0.17
### Patch Changes
- [66cda641](https://github.com/emotion-js/emotion/commit/66cda64128631790b81e3c9df273a972358ea593) [#1478](https://github.com/emotion-js/emotion/pull/1478) Thanks [@Andarist](https://github.com/Andarist)! - Add warnings about using illegal escape sequences
- [10514a86](https://github.com/emotion-js/emotion/commit/10514a8635dcaa55b85c7bff90e2a9e14d1ba61f) [#1482](https://github.com/emotion-js/emotion/pull/1482) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Remove react native bundles in favour of different isBrowser detection
- [66cda641](https://github.com/emotion-js/emotion/commit/66cda64128631790b81e3c9df273a972358ea593) [#1478](https://github.com/emotion-js/emotion/pull/1478) Thanks [@Andarist](https://github.com/Andarist)! - Update Babel dependencies
## 10.0.16
### Patch Changes
- [47262b64](https://github.com/emotion-js/emotion/commit/47262b64) - Fix labels from stack traces in some cases
## 10.0.15
### Patch Changes
- [188dc0e7](https://github.com/emotion-js/emotion/commit/188dc0e7) [#1443](https://github.com/emotion-js/emotion/pull/1443) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Extract styles rather than inline them in compat mode with the Global component
- [4a3b18a2](https://github.com/emotion-js/emotion/commit/4a3b18a2) [#1451](https://github.com/emotion-js/emotion/pull/1451) Thanks [@Andarist](https://github.com/Andarist)! - Fixed issue with auto-labelling crashing on \$ at runtime
## 10.0.14
### Patch Changes
- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool

21
web/node_modules/@emotion/react/LICENSE generated vendored Normal file
View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) Emotion team and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

48
web/node_modules/@emotion/react/README.md generated vendored Normal file
View file

@ -0,0 +1,48 @@
# @emotion/react
> Simple styling in React.
## Install
```bash
yarn add @emotion/react
```
## Usage
```jsx
/** @jsx jsx */
import { jsx, css, Global, ClassNames } from '@emotion/react'
render(
<div css={{ color: 'hotpink' }}>
<div
css={css`
color: green;
`}
/>
<Global
styles={{
body: {
margin: 0,
padding: 0
}
}}
/>
<ClassNames>
{({ css, cx }) => (
<div
className={cx(
'some-class',
css`
color: yellow;
`
)}
/>
)}
</ClassNames>
</div>
)
```
More documentation is available at https://emotion.sh.

View file

@ -0,0 +1,211 @@
'use strict';
var React = require('react');
var createCache = require('@emotion/cache');
var _extends = require('@babel/runtime/helpers/extends');
var weakMemoize = require('@emotion/weak-memoize');
var isolatedHoistNonReactStaticsDoNotUseThisInYourCode_dist_emotionReactIsolatedHoistNonReactStaticsDoNotUseThisInYourCode = require('../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.browser.cjs.js');
var utils = require('@emotion/utils');
var serialize = require('@emotion/serialize');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var createCache__default = /*#__PURE__*/_interopDefault(createCache);
var _extends__default = /*#__PURE__*/_interopDefault(_extends);
var weakMemoize__default = /*#__PURE__*/_interopDefault(weakMemoize);
var hasOwnProperty = Object.prototype.hasOwnProperty;
var EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
// because this module is primarily intended for the browser and node
// but it's also required in react native and similar environments sometimes
// and we could have a special build just for that
// but this is much easier and the native packages
// might use a different theme context in the future anyway
typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache__default['default']({
key: 'css'
}) : null);
if (process.env.NODE_ENV !== 'production') {
EmotionCacheContext.displayName = 'EmotionCacheContext';
}
var CacheProvider = EmotionCacheContext.Provider;
var __unsafe_useEmotionCache = function useEmotionCache() {
return React.useContext(EmotionCacheContext);
};
var withEmotionCache = function withEmotionCache(func) {
// $FlowFixMe
return /*#__PURE__*/React.forwardRef(function (props, ref) {
// the cache will never be null in the browser
var cache = React.useContext(EmotionCacheContext);
return func(props, cache, ref);
});
};
var ThemeContext = /* #__PURE__ */React.createContext({});
if (process.env.NODE_ENV !== 'production') {
ThemeContext.displayName = 'EmotionThemeContext';
}
var useTheme = function useTheme() {
return React.useContext(ThemeContext);
};
var getTheme = function getTheme(outerTheme, theme) {
if (typeof theme === 'function') {
var mergedTheme = theme(outerTheme);
if (process.env.NODE_ENV !== 'production' && (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme))) {
throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');
}
return mergedTheme;
}
if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) {
throw new Error('[ThemeProvider] Please make your theme prop a plain object');
}
return _extends__default['default']({}, outerTheme, theme);
};
var createCacheWithTheme = /* #__PURE__ */weakMemoize__default['default'](function (outerTheme) {
return weakMemoize__default['default'](function (theme) {
return getTheme(outerTheme, theme);
});
});
var ThemeProvider = function ThemeProvider(props) {
var theme = React.useContext(ThemeContext);
if (props.theme !== theme) {
theme = createCacheWithTheme(theme)(props.theme);
}
return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
value: theme
}, props.children);
};
function withTheme(Component) {
var componentName = Component.displayName || Component.name || 'Component';
var render = function render(props, ref) {
var theme = React.useContext(ThemeContext);
return /*#__PURE__*/React.createElement(Component, _extends__default['default']({
theme: theme,
ref: ref
}, props));
}; // $FlowFixMe
var WithTheme = /*#__PURE__*/React.forwardRef(render);
WithTheme.displayName = "WithTheme(" + componentName + ")";
return isolatedHoistNonReactStaticsDoNotUseThisInYourCode_dist_emotionReactIsolatedHoistNonReactStaticsDoNotUseThisInYourCode['default'](WithTheme, Component);
}
// thus we only need to replace what is a valid character for JS, but not for CSS
var sanitizeIdentifier = function sanitizeIdentifier(identifier) {
return identifier.replace(/\$/g, '-');
};
var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
var createEmotionProps = function createEmotionProps(type, props) {
if (process.env.NODE_ENV !== 'production' && typeof props.css === 'string' && // check if there is a css declaration
props.css.indexOf(':') !== -1) {
throw new Error("Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`" + props.css + "`");
}
var newProps = {};
for (var key in props) {
if (hasOwnProperty.call(props, key)) {
newProps[key] = props[key];
}
}
newProps[typePropName] = type;
if (process.env.NODE_ENV !== 'production') {
var error = new Error();
if (error.stack) {
// chrome
var match = error.stack.match(/at (?:Object\.|Module\.|)(?:jsx|createEmotionProps).*\n\s+at (?:Object\.|)([A-Z][A-Za-z0-9$]+) /);
if (!match) {
// safari and firefox
match = error.stack.match(/.*\n([A-Z][A-Za-z0-9$]+)@/);
}
if (match) {
newProps[labelPropName] = sanitizeIdentifier(match[1]);
}
}
}
return newProps;
};
var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
// not passing the registered cache to serializeStyles because it would
// make certain babel optimisations not possible
if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
cssProp = cache.registered[cssProp];
}
var type = props[typePropName];
var registeredStyles = [cssProp];
var className = '';
if (typeof props.className === 'string') {
className = utils.getRegisteredStyles(cache.registered, registeredStyles, props.className);
} else if (props.className != null) {
className = props.className + " ";
}
var serialized = serialize.serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));
if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
var labelFromStack = props[labelPropName];
if (labelFromStack) {
serialized = serialize.serializeStyles([serialized, 'label:' + labelFromStack + ';']);
}
}
var rules = utils.insertStyles(cache, serialized, typeof type === 'string');
className += cache.key + "-" + serialized.name;
var newProps = {};
for (var key in props) {
if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {
newProps[key] = props[key];
}
}
newProps.ref = ref;
newProps.className = className;
var ele = /*#__PURE__*/React.createElement(type, newProps);
return ele;
});
if (process.env.NODE_ENV !== 'production') {
Emotion.displayName = 'EmotionCssPropInternal';
}
exports.CacheProvider = CacheProvider;
exports.Emotion = Emotion;
exports.ThemeContext = ThemeContext;
exports.ThemeProvider = ThemeProvider;
exports.__unsafe_useEmotionCache = __unsafe_useEmotionCache;
exports.createEmotionProps = createEmotionProps;
exports.hasOwnProperty = hasOwnProperty;
exports.useTheme = useTheme;
exports.withEmotionCache = withEmotionCache;
exports.withTheme = withTheme;

View file

@ -0,0 +1,235 @@
import { createContext, useContext, forwardRef, createElement, Fragment } from 'react';
import createCache from '@emotion/cache';
import _extends from '@babel/runtime/helpers/esm/extends';
import weakMemoize from '@emotion/weak-memoize';
import hoistNonReactStatics from '../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.esm.js';
import { getRegisteredStyles, insertStyles } from '@emotion/utils';
import { serializeStyles } from '@emotion/serialize';
var isBrowser = typeof document !== 'undefined';
var hasOwnProperty = Object.prototype.hasOwnProperty;
var EmotionCacheContext = /* #__PURE__ */createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
// because this module is primarily intended for the browser and node
// but it's also required in react native and similar environments sometimes
// and we could have a special build just for that
// but this is much easier and the native packages
// might use a different theme context in the future anyway
typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
key: 'css'
}) : null);
if (process.env.NODE_ENV !== 'production') {
EmotionCacheContext.displayName = 'EmotionCacheContext';
}
var CacheProvider = EmotionCacheContext.Provider;
var __unsafe_useEmotionCache = function useEmotionCache() {
return useContext(EmotionCacheContext);
};
var withEmotionCache = function withEmotionCache(func) {
// $FlowFixMe
return /*#__PURE__*/forwardRef(function (props, ref) {
// the cache will never be null in the browser
var cache = useContext(EmotionCacheContext);
return func(props, cache, ref);
});
};
if (!isBrowser) {
withEmotionCache = function withEmotionCache(func) {
return function (props) {
var cache = useContext(EmotionCacheContext);
if (cache === null) {
// yes, we're potentially creating this on every render
// it doesn't actually matter though since it's only on the server
// so there will only every be a single render
// that could change in the future because of suspense and etc. but for now,
// this works and i don't want to optimise for a future thing that we aren't sure about
cache = createCache({
key: 'css'
});
return /*#__PURE__*/createElement(EmotionCacheContext.Provider, {
value: cache
}, func(props, cache));
} else {
return func(props, cache);
}
};
};
}
var ThemeContext = /* #__PURE__ */createContext({});
if (process.env.NODE_ENV !== 'production') {
ThemeContext.displayName = 'EmotionThemeContext';
}
var useTheme = function useTheme() {
return useContext(ThemeContext);
};
var getTheme = function getTheme(outerTheme, theme) {
if (typeof theme === 'function') {
var mergedTheme = theme(outerTheme);
if (process.env.NODE_ENV !== 'production' && (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme))) {
throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');
}
return mergedTheme;
}
if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) {
throw new Error('[ThemeProvider] Please make your theme prop a plain object');
}
return _extends({}, outerTheme, theme);
};
var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
return weakMemoize(function (theme) {
return getTheme(outerTheme, theme);
});
});
var ThemeProvider = function ThemeProvider(props) {
var theme = useContext(ThemeContext);
if (props.theme !== theme) {
theme = createCacheWithTheme(theme)(props.theme);
}
return /*#__PURE__*/createElement(ThemeContext.Provider, {
value: theme
}, props.children);
};
function withTheme(Component) {
var componentName = Component.displayName || Component.name || 'Component';
var render = function render(props, ref) {
var theme = useContext(ThemeContext);
return /*#__PURE__*/createElement(Component, _extends({
theme: theme,
ref: ref
}, props));
}; // $FlowFixMe
var WithTheme = /*#__PURE__*/forwardRef(render);
WithTheme.displayName = "WithTheme(" + componentName + ")";
return hoistNonReactStatics(WithTheme, Component);
}
// thus we only need to replace what is a valid character for JS, but not for CSS
var sanitizeIdentifier = function sanitizeIdentifier(identifier) {
return identifier.replace(/\$/g, '-');
};
var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
var createEmotionProps = function createEmotionProps(type, props) {
if (process.env.NODE_ENV !== 'production' && typeof props.css === 'string' && // check if there is a css declaration
props.css.indexOf(':') !== -1) {
throw new Error("Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`" + props.css + "`");
}
var newProps = {};
for (var key in props) {
if (hasOwnProperty.call(props, key)) {
newProps[key] = props[key];
}
}
newProps[typePropName] = type;
if (process.env.NODE_ENV !== 'production') {
var error = new Error();
if (error.stack) {
// chrome
var match = error.stack.match(/at (?:Object\.|Module\.|)(?:jsx|createEmotionProps).*\n\s+at (?:Object\.|)([A-Z][A-Za-z0-9$]+) /);
if (!match) {
// safari and firefox
match = error.stack.match(/.*\n([A-Z][A-Za-z0-9$]+)@/);
}
if (match) {
newProps[labelPropName] = sanitizeIdentifier(match[1]);
}
}
}
return newProps;
};
var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
// not passing the registered cache to serializeStyles because it would
// make certain babel optimisations not possible
if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
cssProp = cache.registered[cssProp];
}
var type = props[typePropName];
var registeredStyles = [cssProp];
var className = '';
if (typeof props.className === 'string') {
className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
} else if (props.className != null) {
className = props.className + " ";
}
var serialized = serializeStyles(registeredStyles, undefined, useContext(ThemeContext));
if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
var labelFromStack = props[labelPropName];
if (labelFromStack) {
serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);
}
}
var rules = insertStyles(cache, serialized, typeof type === 'string');
className += cache.key + "-" + serialized.name;
var newProps = {};
for (var key in props) {
if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {
newProps[key] = props[key];
}
}
newProps.ref = ref;
newProps.className = className;
var ele = /*#__PURE__*/createElement(type, newProps);
if (!isBrowser && rules !== undefined) {
var _ref;
var serializedNames = serialized.name;
var next = serialized.next;
while (next !== undefined) {
serializedNames += ' ' + next.name;
next = next.next;
}
return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
__html: rules
}, _ref.nonce = cache.sheet.nonce, _ref)), ele);
}
return ele;
});
if (process.env.NODE_ENV !== 'production') {
Emotion.displayName = 'EmotionCssPropInternal';
}
export { CacheProvider as C, Emotion as E, ThemeContext as T, __unsafe_useEmotionCache as _, ThemeProvider as a, withTheme as b, createEmotionProps as c, hasOwnProperty as h, isBrowser as i, useTheme as u, withEmotionCache as w };

View file

@ -0,0 +1,99 @@
"use strict";
var React = require("react"), createCache = require("@emotion/cache"), _extends = require("@babel/runtime/helpers/extends"), weakMemoize = require("@emotion/weak-memoize"), isolatedHoistNonReactStaticsDoNotUseThisInYourCode_dist_emotionReactIsolatedHoistNonReactStaticsDoNotUseThisInYourCode = require("../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.cjs.prod.js"), utils = require("@emotion/utils"), serialize = require("@emotion/serialize");
function _interopDefault(e) {
return e && e.__esModule ? e : {
default: e
};
}
var createCache__default = _interopDefault(createCache), _extends__default = _interopDefault(_extends), weakMemoize__default = _interopDefault(weakMemoize), isBrowser = "undefined" != typeof document, hasOwnProperty = Object.prototype.hasOwnProperty, EmotionCacheContext = React.createContext("undefined" != typeof HTMLElement ? createCache__default.default({
key: "css"
}) : null);
var CacheProvider = EmotionCacheContext.Provider, __unsafe_useEmotionCache = function() {
return React.useContext(EmotionCacheContext);
};
exports.withEmotionCache = function(func) {
return React.forwardRef((function(props, ref) {
var cache = React.useContext(EmotionCacheContext);
return func(props, cache, ref);
}));
}, isBrowser || (exports.withEmotionCache = function(func) {
return function(props) {
var cache = React.useContext(EmotionCacheContext);
return null === cache ? (cache = createCache__default.default({
key: "css"
}), React.createElement(EmotionCacheContext.Provider, {
value: cache
}, func(props, cache))) : func(props, cache);
};
});
var ThemeContext = React.createContext({});
var useTheme = function() {
return React.useContext(ThemeContext);
}, getTheme = function(outerTheme, theme) {
if ("function" == typeof theme) {
var mergedTheme = theme(outerTheme);
return mergedTheme;
}
return _extends__default.default({}, outerTheme, theme);
}, createCacheWithTheme = weakMemoize__default.default((function(outerTheme) {
return weakMemoize__default.default((function(theme) {
return getTheme(outerTheme, theme);
}));
})), ThemeProvider = function(props) {
var theme = React.useContext(ThemeContext);
return props.theme !== theme && (theme = createCacheWithTheme(theme)(props.theme)),
React.createElement(ThemeContext.Provider, {
value: theme
}, props.children);
};
function withTheme(Component) {
var componentName = Component.displayName || Component.name || "Component", render = function(props, ref) {
var theme = React.useContext(ThemeContext);
return React.createElement(Component, _extends__default.default({
theme: theme,
ref: ref
}, props));
}, WithTheme = React.forwardRef(render);
return WithTheme.displayName = "WithTheme(" + componentName + ")", isolatedHoistNonReactStaticsDoNotUseThisInYourCode_dist_emotionReactIsolatedHoistNonReactStaticsDoNotUseThisInYourCode.default(WithTheme, Component);
}
var sanitizeIdentifier = function(identifier) {
return identifier.replace(/\$/g, "-");
}, typePropName = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__", labelPropName = "__EMOTION_LABEL_PLEASE_DO_NOT_USE__", createEmotionProps = function(type, props) {
var newProps = {};
for (var key in props) hasOwnProperty.call(props, key) && (newProps[key] = props[key]);
return newProps[typePropName] = type, newProps;
}, Emotion = exports.withEmotionCache((function(props, cache, ref) {
var cssProp = props.css;
"string" == typeof cssProp && void 0 !== cache.registered[cssProp] && (cssProp = cache.registered[cssProp]);
var type = props[typePropName], registeredStyles = [ cssProp ], className = "";
"string" == typeof props.className ? className = utils.getRegisteredStyles(cache.registered, registeredStyles, props.className) : null != props.className && (className = props.className + " ");
var serialized = serialize.serializeStyles(registeredStyles, void 0, React.useContext(ThemeContext)), rules = utils.insertStyles(cache, serialized, "string" == typeof type);
className += cache.key + "-" + serialized.name;
var newProps = {};
for (var key in props) hasOwnProperty.call(props, key) && "css" !== key && key !== typePropName && (newProps[key] = props[key]);
newProps.ref = ref, newProps.className = className;
var ele = React.createElement(type, newProps);
if (!isBrowser && void 0 !== rules) {
for (var _ref, serializedNames = serialized.name, next = serialized.next; void 0 !== next; ) serializedNames += " " + next.name,
next = next.next;
return React.createElement(React.Fragment, null, React.createElement("style", ((_ref = {})["data-emotion"] = cache.key + " " + serializedNames,
_ref.dangerouslySetInnerHTML = {
__html: rules
}, _ref.nonce = cache.sheet.nonce, _ref)), ele);
}
return ele;
}));
exports.CacheProvider = CacheProvider, exports.Emotion = Emotion, exports.ThemeContext = ThemeContext,
exports.ThemeProvider = ThemeProvider, exports.__unsafe_useEmotionCache = __unsafe_useEmotionCache,
exports.createEmotionProps = createEmotionProps, exports.hasOwnProperty = hasOwnProperty,
exports.isBrowser = isBrowser, exports.useTheme = useTheme, exports.withTheme = withTheme;

View file

@ -0,0 +1,194 @@
import { createContext, useContext, forwardRef, createElement } from 'react';
import createCache from '@emotion/cache';
import _extends from '@babel/runtime/helpers/esm/extends';
import weakMemoize from '@emotion/weak-memoize';
import hoistNonReactStatics from '../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.browser.esm.js';
import { getRegisteredStyles, insertStyles } from '@emotion/utils';
import { serializeStyles } from '@emotion/serialize';
var hasOwnProperty = Object.prototype.hasOwnProperty;
var EmotionCacheContext = /* #__PURE__ */createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
// because this module is primarily intended for the browser and node
// but it's also required in react native and similar environments sometimes
// and we could have a special build just for that
// but this is much easier and the native packages
// might use a different theme context in the future anyway
typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
key: 'css'
}) : null);
if (process.env.NODE_ENV !== 'production') {
EmotionCacheContext.displayName = 'EmotionCacheContext';
}
var CacheProvider = EmotionCacheContext.Provider;
var __unsafe_useEmotionCache = function useEmotionCache() {
return useContext(EmotionCacheContext);
};
var withEmotionCache = function withEmotionCache(func) {
// $FlowFixMe
return /*#__PURE__*/forwardRef(function (props, ref) {
// the cache will never be null in the browser
var cache = useContext(EmotionCacheContext);
return func(props, cache, ref);
});
};
var ThemeContext = /* #__PURE__ */createContext({});
if (process.env.NODE_ENV !== 'production') {
ThemeContext.displayName = 'EmotionThemeContext';
}
var useTheme = function useTheme() {
return useContext(ThemeContext);
};
var getTheme = function getTheme(outerTheme, theme) {
if (typeof theme === 'function') {
var mergedTheme = theme(outerTheme);
if (process.env.NODE_ENV !== 'production' && (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme))) {
throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');
}
return mergedTheme;
}
if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) {
throw new Error('[ThemeProvider] Please make your theme prop a plain object');
}
return _extends({}, outerTheme, theme);
};
var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
return weakMemoize(function (theme) {
return getTheme(outerTheme, theme);
});
});
var ThemeProvider = function ThemeProvider(props) {
var theme = useContext(ThemeContext);
if (props.theme !== theme) {
theme = createCacheWithTheme(theme)(props.theme);
}
return /*#__PURE__*/createElement(ThemeContext.Provider, {
value: theme
}, props.children);
};
function withTheme(Component) {
var componentName = Component.displayName || Component.name || 'Component';
var render = function render(props, ref) {
var theme = useContext(ThemeContext);
return /*#__PURE__*/createElement(Component, _extends({
theme: theme,
ref: ref
}, props));
}; // $FlowFixMe
var WithTheme = /*#__PURE__*/forwardRef(render);
WithTheme.displayName = "WithTheme(" + componentName + ")";
return hoistNonReactStatics(WithTheme, Component);
}
// thus we only need to replace what is a valid character for JS, but not for CSS
var sanitizeIdentifier = function sanitizeIdentifier(identifier) {
return identifier.replace(/\$/g, '-');
};
var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
var createEmotionProps = function createEmotionProps(type, props) {
if (process.env.NODE_ENV !== 'production' && typeof props.css === 'string' && // check if there is a css declaration
props.css.indexOf(':') !== -1) {
throw new Error("Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`" + props.css + "`");
}
var newProps = {};
for (var key in props) {
if (hasOwnProperty.call(props, key)) {
newProps[key] = props[key];
}
}
newProps[typePropName] = type;
if (process.env.NODE_ENV !== 'production') {
var error = new Error();
if (error.stack) {
// chrome
var match = error.stack.match(/at (?:Object\.|Module\.|)(?:jsx|createEmotionProps).*\n\s+at (?:Object\.|)([A-Z][A-Za-z0-9$]+) /);
if (!match) {
// safari and firefox
match = error.stack.match(/.*\n([A-Z][A-Za-z0-9$]+)@/);
}
if (match) {
newProps[labelPropName] = sanitizeIdentifier(match[1]);
}
}
}
return newProps;
};
var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
// not passing the registered cache to serializeStyles because it would
// make certain babel optimisations not possible
if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
cssProp = cache.registered[cssProp];
}
var type = props[typePropName];
var registeredStyles = [cssProp];
var className = '';
if (typeof props.className === 'string') {
className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
} else if (props.className != null) {
className = props.className + " ";
}
var serialized = serializeStyles(registeredStyles, undefined, useContext(ThemeContext));
if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
var labelFromStack = props[labelPropName];
if (labelFromStack) {
serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);
}
}
var rules = insertStyles(cache, serialized, typeof type === 'string');
className += cache.key + "-" + serialized.name;
var newProps = {};
for (var key in props) {
if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {
newProps[key] = props[key];
}
}
newProps.ref = ref;
newProps.className = className;
var ele = /*#__PURE__*/createElement(type, newProps);
return ele;
});
if (process.env.NODE_ENV !== 'production') {
Emotion.displayName = 'EmotionCssPropInternal';
}
export { CacheProvider as C, Emotion as E, ThemeContext as T, __unsafe_useEmotionCache as _, ThemeProvider as a, withTheme as b, createEmotionProps as c, hasOwnProperty as h, useTheme as u, withEmotionCache as w };

View file

@ -0,0 +1,252 @@
'use strict';
var React = require('react');
var createCache = require('@emotion/cache');
var _extends = require('@babel/runtime/helpers/extends');
var weakMemoize = require('@emotion/weak-memoize');
var isolatedHoistNonReactStaticsDoNotUseThisInYourCode_dist_emotionReactIsolatedHoistNonReactStaticsDoNotUseThisInYourCode = require('../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.cjs.dev.js');
var utils = require('@emotion/utils');
var serialize = require('@emotion/serialize');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var createCache__default = /*#__PURE__*/_interopDefault(createCache);
var _extends__default = /*#__PURE__*/_interopDefault(_extends);
var weakMemoize__default = /*#__PURE__*/_interopDefault(weakMemoize);
var isBrowser = typeof document !== 'undefined';
var hasOwnProperty = Object.prototype.hasOwnProperty;
var EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
// because this module is primarily intended for the browser and node
// but it's also required in react native and similar environments sometimes
// and we could have a special build just for that
// but this is much easier and the native packages
// might use a different theme context in the future anyway
typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache__default['default']({
key: 'css'
}) : null);
if (process.env.NODE_ENV !== 'production') {
EmotionCacheContext.displayName = 'EmotionCacheContext';
}
var CacheProvider = EmotionCacheContext.Provider;
var __unsafe_useEmotionCache = function useEmotionCache() {
return React.useContext(EmotionCacheContext);
};
exports.withEmotionCache = function withEmotionCache(func) {
// $FlowFixMe
return /*#__PURE__*/React.forwardRef(function (props, ref) {
// the cache will never be null in the browser
var cache = React.useContext(EmotionCacheContext);
return func(props, cache, ref);
});
};
if (!isBrowser) {
exports.withEmotionCache = function withEmotionCache(func) {
return function (props) {
var cache = React.useContext(EmotionCacheContext);
if (cache === null) {
// yes, we're potentially creating this on every render
// it doesn't actually matter though since it's only on the server
// so there will only every be a single render
// that could change in the future because of suspense and etc. but for now,
// this works and i don't want to optimise for a future thing that we aren't sure about
cache = createCache__default['default']({
key: 'css'
});
return /*#__PURE__*/React.createElement(EmotionCacheContext.Provider, {
value: cache
}, func(props, cache));
} else {
return func(props, cache);
}
};
};
}
var ThemeContext = /* #__PURE__ */React.createContext({});
if (process.env.NODE_ENV !== 'production') {
ThemeContext.displayName = 'EmotionThemeContext';
}
var useTheme = function useTheme() {
return React.useContext(ThemeContext);
};
var getTheme = function getTheme(outerTheme, theme) {
if (typeof theme === 'function') {
var mergedTheme = theme(outerTheme);
if (process.env.NODE_ENV !== 'production' && (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme))) {
throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');
}
return mergedTheme;
}
if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) {
throw new Error('[ThemeProvider] Please make your theme prop a plain object');
}
return _extends__default['default']({}, outerTheme, theme);
};
var createCacheWithTheme = /* #__PURE__ */weakMemoize__default['default'](function (outerTheme) {
return weakMemoize__default['default'](function (theme) {
return getTheme(outerTheme, theme);
});
});
var ThemeProvider = function ThemeProvider(props) {
var theme = React.useContext(ThemeContext);
if (props.theme !== theme) {
theme = createCacheWithTheme(theme)(props.theme);
}
return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
value: theme
}, props.children);
};
function withTheme(Component) {
var componentName = Component.displayName || Component.name || 'Component';
var render = function render(props, ref) {
var theme = React.useContext(ThemeContext);
return /*#__PURE__*/React.createElement(Component, _extends__default['default']({
theme: theme,
ref: ref
}, props));
}; // $FlowFixMe
var WithTheme = /*#__PURE__*/React.forwardRef(render);
WithTheme.displayName = "WithTheme(" + componentName + ")";
return isolatedHoistNonReactStaticsDoNotUseThisInYourCode_dist_emotionReactIsolatedHoistNonReactStaticsDoNotUseThisInYourCode['default'](WithTheme, Component);
}
// thus we only need to replace what is a valid character for JS, but not for CSS
var sanitizeIdentifier = function sanitizeIdentifier(identifier) {
return identifier.replace(/\$/g, '-');
};
var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
var createEmotionProps = function createEmotionProps(type, props) {
if (process.env.NODE_ENV !== 'production' && typeof props.css === 'string' && // check if there is a css declaration
props.css.indexOf(':') !== -1) {
throw new Error("Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`" + props.css + "`");
}
var newProps = {};
for (var key in props) {
if (hasOwnProperty.call(props, key)) {
newProps[key] = props[key];
}
}
newProps[typePropName] = type;
if (process.env.NODE_ENV !== 'production') {
var error = new Error();
if (error.stack) {
// chrome
var match = error.stack.match(/at (?:Object\.|Module\.|)(?:jsx|createEmotionProps).*\n\s+at (?:Object\.|)([A-Z][A-Za-z0-9$]+) /);
if (!match) {
// safari and firefox
match = error.stack.match(/.*\n([A-Z][A-Za-z0-9$]+)@/);
}
if (match) {
newProps[labelPropName] = sanitizeIdentifier(match[1]);
}
}
}
return newProps;
};
var Emotion = /* #__PURE__ */exports.withEmotionCache(function (props, cache, ref) {
var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
// not passing the registered cache to serializeStyles because it would
// make certain babel optimisations not possible
if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
cssProp = cache.registered[cssProp];
}
var type = props[typePropName];
var registeredStyles = [cssProp];
var className = '';
if (typeof props.className === 'string') {
className = utils.getRegisteredStyles(cache.registered, registeredStyles, props.className);
} else if (props.className != null) {
className = props.className + " ";
}
var serialized = serialize.serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));
if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
var labelFromStack = props[labelPropName];
if (labelFromStack) {
serialized = serialize.serializeStyles([serialized, 'label:' + labelFromStack + ';']);
}
}
var rules = utils.insertStyles(cache, serialized, typeof type === 'string');
className += cache.key + "-" + serialized.name;
var newProps = {};
for (var key in props) {
if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {
newProps[key] = props[key];
}
}
newProps.ref = ref;
newProps.className = className;
var ele = /*#__PURE__*/React.createElement(type, newProps);
if (!isBrowser && rules !== undefined) {
var _ref;
var serializedNames = serialized.name;
var next = serialized.next;
while (next !== undefined) {
serializedNames += ' ' + next.name;
next = next.next;
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
__html: rules
}, _ref.nonce = cache.sheet.nonce, _ref)), ele);
}
return ele;
});
if (process.env.NODE_ENV !== 'production') {
Emotion.displayName = 'EmotionCssPropInternal';
}
exports.CacheProvider = CacheProvider;
exports.Emotion = Emotion;
exports.ThemeContext = ThemeContext;
exports.ThemeProvider = ThemeProvider;
exports.__unsafe_useEmotionCache = __unsafe_useEmotionCache;
exports.createEmotionProps = createEmotionProps;
exports.hasOwnProperty = hasOwnProperty;
exports.isBrowser = isBrowser;
exports.useTheme = useTheme;
exports.withTheme = withTheme;

View file

@ -0,0 +1,355 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
require('@emotion/cache');
var emotionElement = require('./emotion-element-35a6e288.browser.cjs.js');
require('@babel/runtime/helpers/extends');
require('@emotion/weak-memoize');
require('hoist-non-react-statics');
require('../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.browser.cjs.js');
var utils = require('@emotion/utils');
var serialize = require('@emotion/serialize');
var sheet = require('@emotion/sheet');
var pkg = {
name: "@emotion/react",
version: "11.4.1",
main: "dist/emotion-react.cjs.js",
module: "dist/emotion-react.esm.js",
browser: {
"./dist/emotion-react.cjs.js": "./dist/emotion-react.browser.cjs.js",
"./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js"
},
types: "types/index.d.ts",
files: [
"src",
"dist",
"jsx-runtime",
"jsx-dev-runtime",
"isolated-hoist-non-react-statics-do-not-use-this-in-your-code",
"types/*.d.ts",
"macro.js",
"macro.d.ts",
"macro.js.flow"
],
sideEffects: false,
author: "mitchellhamilton <mitchell@mitchellhamilton.me>",
license: "MIT",
scripts: {
"test:typescript": "dtslint types"
},
dependencies: {
"@babel/runtime": "^7.13.10",
"@emotion/cache": "^11.4.0",
"@emotion/serialize": "^1.0.2",
"@emotion/sheet": "^1.0.2",
"@emotion/utils": "^1.0.0",
"@emotion/weak-memoize": "^0.2.5",
"hoist-non-react-statics": "^3.3.1"
},
peerDependencies: {
"@babel/core": "^7.0.0",
react: ">=16.8.0"
},
peerDependenciesMeta: {
"@babel/core": {
optional: true
},
"@types/react": {
optional: true
}
},
devDependencies: {
"@babel/core": "^7.13.10",
"@emotion/css": "11.1.3",
"@emotion/css-prettifier": "1.0.0",
"@emotion/server": "11.4.0",
"@emotion/styled": "11.3.0",
"@types/react": "^16.9.11",
dtslint: "^0.3.0",
"html-tag-names": "^1.1.2",
react: "16.14.0",
"svg-tag-names": "^1.1.1"
},
repository: "https://github.com/emotion-js/emotion/tree/main/packages/react",
publishConfig: {
access: "public"
},
"umd:main": "dist/emotion-react.umd.min.js",
preconstruct: {
entrypoints: [
"./index.js",
"./jsx-runtime.js",
"./jsx-dev-runtime.js",
"./isolated-hoist-non-react-statics-do-not-use-this-in-your-code.js"
],
umdName: "emotionReact"
}
};
var jsx = function jsx(type, props) {
var args = arguments;
if (props == null || !emotionElement.hasOwnProperty.call(props, 'css')) {
// $FlowFixMe
return React.createElement.apply(undefined, args);
}
var argsLength = args.length;
var createElementArgArray = new Array(argsLength);
createElementArgArray[0] = emotionElement.Emotion;
createElementArgArray[1] = emotionElement.createEmotionProps(type, props);
for (var i = 2; i < argsLength; i++) {
createElementArgArray[i] = args[i];
} // $FlowFixMe
return React.createElement.apply(null, createElementArgArray);
};
var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
// initial client-side render from SSR, use place of hydrating tag
var Global = /* #__PURE__ */emotionElement.withEmotionCache(function (props, cache) {
if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is
// probably using the custom createElement which
// means it will be turned into a className prop
// $FlowFixMe I don't really want to add it to the type since it shouldn't be used
props.className || props.css)) {
console.error("It looks like you're using the css prop on Global, did you mean to use the styles prop instead?");
warnedAboutCssPropForGlobal = true;
}
var styles = props.styles;
var serialized = serialize.serializeStyles([styles], undefined, React.useContext(emotionElement.ThemeContext));
// but it is based on a constant that will never change at runtime
// it's effectively like having two implementations and switching them out
// so it's not actually breaking anything
var sheetRef = React.useRef();
React.useLayoutEffect(function () {
var key = cache.key + "-global";
var sheet$1 = new sheet.StyleSheet({
key: key,
nonce: cache.sheet.nonce,
container: cache.sheet.container,
speedy: cache.sheet.isSpeedy
});
var rehydrating = false; // $FlowFixMe
var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]");
if (cache.sheet.tags.length) {
sheet$1.before = cache.sheet.tags[0];
}
if (node !== null) {
rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
node.setAttribute('data-emotion', key);
sheet$1.hydrate([node]);
}
sheetRef.current = [sheet$1, rehydrating];
return function () {
sheet$1.flush();
};
}, [cache]);
React.useLayoutEffect(function () {
var sheetRefCurrent = sheetRef.current;
var sheet = sheetRefCurrent[0],
rehydrating = sheetRefCurrent[1];
if (rehydrating) {
sheetRefCurrent[1] = false;
return;
}
if (serialized.next !== undefined) {
// insert keyframes
utils.insertStyles(cache, serialized.next, true);
}
if (sheet.tags.length) {
// if this doesn't exist then it will be null so the style element will be appended
var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
sheet.before = element;
sheet.flush();
}
cache.insert("", serialized, sheet, false);
}, [cache, serialized.name]);
return null;
});
if (process.env.NODE_ENV !== 'production') {
Global.displayName = 'EmotionGlobal';
}
function css() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return serialize.serializeStyles(args);
}
var keyframes = function keyframes() {
var insertable = css.apply(void 0, arguments);
var name = "animation-" + insertable.name; // $FlowFixMe
return {
name: name,
styles: "@keyframes " + name + "{" + insertable.styles + "}",
anim: 1,
toString: function toString() {
return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
}
};
};
var classnames = function classnames(args) {
var len = args.length;
var i = 0;
var cls = '';
for (; i < len; i++) {
var arg = args[i];
if (arg == null) continue;
var toAdd = void 0;
switch (typeof arg) {
case 'boolean':
break;
case 'object':
{
if (Array.isArray(arg)) {
toAdd = classnames(arg);
} else {
if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {
console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.');
}
toAdd = '';
for (var k in arg) {
if (arg[k] && k) {
toAdd && (toAdd += ' ');
toAdd += k;
}
}
}
break;
}
default:
{
toAdd = arg;
}
}
if (toAdd) {
cls && (cls += ' ');
cls += toAdd;
}
}
return cls;
};
function merge(registered, css, className) {
var registeredStyles = [];
var rawClassName = utils.getRegisteredStyles(registered, registeredStyles, className);
if (registeredStyles.length < 2) {
return className;
}
return rawClassName + css(registeredStyles);
}
var ClassNames = /* #__PURE__ */emotionElement.withEmotionCache(function (props, cache) {
var hasRendered = false;
var css = function css() {
if (hasRendered && process.env.NODE_ENV !== 'production') {
throw new Error('css can only be used during render');
}
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var serialized = serialize.serializeStyles(args, cache.registered);
{
utils.insertStyles(cache, serialized, false);
}
return cache.key + "-" + serialized.name;
};
var cx = function cx() {
if (hasRendered && process.env.NODE_ENV !== 'production') {
throw new Error('cx can only be used during render');
}
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return merge(cache.registered, css, classnames(args));
};
var content = {
css: css,
cx: cx,
theme: React.useContext(emotionElement.ThemeContext)
};
var ele = props.children(content);
hasRendered = true;
return ele;
});
if (process.env.NODE_ENV !== 'production') {
ClassNames.displayName = 'EmotionClassNames';
}
if (process.env.NODE_ENV !== 'production') {
var isBrowser = "object" !== 'undefined'; // #1727 for some reason Jest evaluates modules twice if some consuming module gets mocked with jest.mock
var isJest = typeof jest !== 'undefined';
if (isBrowser && !isJest) {
var globalContext = isBrowser ? window : global;
var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__";
if (globalContext[globalKey]) {
console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');
}
globalContext[globalKey] = true;
}
}
exports.CacheProvider = emotionElement.CacheProvider;
exports.ThemeContext = emotionElement.ThemeContext;
exports.ThemeProvider = emotionElement.ThemeProvider;
exports.__unsafe_useEmotionCache = emotionElement.__unsafe_useEmotionCache;
exports.useTheme = emotionElement.useTheme;
exports.withEmotionCache = emotionElement.withEmotionCache;
exports.withTheme = emotionElement.withTheme;
exports.ClassNames = ClassNames;
exports.Global = Global;
exports.createElement = jsx;
exports.css = css;
exports.jsx = jsx;
exports.keyframes = keyframes;

View file

@ -0,0 +1,340 @@
import { createElement, useContext, useRef, useLayoutEffect } from 'react';
import '@emotion/cache';
import { h as hasOwnProperty, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext } from './emotion-element-99289b21.browser.esm.js';
export { C as CacheProvider, T as ThemeContext, a as ThemeProvider, _ as __unsafe_useEmotionCache, u as useTheme, w as withEmotionCache, b as withTheme } from './emotion-element-99289b21.browser.esm.js';
import '@babel/runtime/helpers/extends';
import '@emotion/weak-memoize';
import 'hoist-non-react-statics';
import '../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.browser.esm.js';
import { insertStyles, getRegisteredStyles } from '@emotion/utils';
import { serializeStyles } from '@emotion/serialize';
import { StyleSheet } from '@emotion/sheet';
var pkg = {
name: "@emotion/react",
version: "11.4.1",
main: "dist/emotion-react.cjs.js",
module: "dist/emotion-react.esm.js",
browser: {
"./dist/emotion-react.cjs.js": "./dist/emotion-react.browser.cjs.js",
"./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js"
},
types: "types/index.d.ts",
files: [
"src",
"dist",
"jsx-runtime",
"jsx-dev-runtime",
"isolated-hoist-non-react-statics-do-not-use-this-in-your-code",
"types/*.d.ts",
"macro.js",
"macro.d.ts",
"macro.js.flow"
],
sideEffects: false,
author: "mitchellhamilton <mitchell@mitchellhamilton.me>",
license: "MIT",
scripts: {
"test:typescript": "dtslint types"
},
dependencies: {
"@babel/runtime": "^7.13.10",
"@emotion/cache": "^11.4.0",
"@emotion/serialize": "^1.0.2",
"@emotion/sheet": "^1.0.2",
"@emotion/utils": "^1.0.0",
"@emotion/weak-memoize": "^0.2.5",
"hoist-non-react-statics": "^3.3.1"
},
peerDependencies: {
"@babel/core": "^7.0.0",
react: ">=16.8.0"
},
peerDependenciesMeta: {
"@babel/core": {
optional: true
},
"@types/react": {
optional: true
}
},
devDependencies: {
"@babel/core": "^7.13.10",
"@emotion/css": "11.1.3",
"@emotion/css-prettifier": "1.0.0",
"@emotion/server": "11.4.0",
"@emotion/styled": "11.3.0",
"@types/react": "^16.9.11",
dtslint: "^0.3.0",
"html-tag-names": "^1.1.2",
react: "16.14.0",
"svg-tag-names": "^1.1.1"
},
repository: "https://github.com/emotion-js/emotion/tree/main/packages/react",
publishConfig: {
access: "public"
},
"umd:main": "dist/emotion-react.umd.min.js",
preconstruct: {
entrypoints: [
"./index.js",
"./jsx-runtime.js",
"./jsx-dev-runtime.js",
"./isolated-hoist-non-react-statics-do-not-use-this-in-your-code.js"
],
umdName: "emotionReact"
}
};
var jsx = function jsx(type, props) {
var args = arguments;
if (props == null || !hasOwnProperty.call(props, 'css')) {
// $FlowFixMe
return createElement.apply(undefined, args);
}
var argsLength = args.length;
var createElementArgArray = new Array(argsLength);
createElementArgArray[0] = Emotion;
createElementArgArray[1] = createEmotionProps(type, props);
for (var i = 2; i < argsLength; i++) {
createElementArgArray[i] = args[i];
} // $FlowFixMe
return createElement.apply(null, createElementArgArray);
};
var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
// initial client-side render from SSR, use place of hydrating tag
var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is
// probably using the custom createElement which
// means it will be turned into a className prop
// $FlowFixMe I don't really want to add it to the type since it shouldn't be used
props.className || props.css)) {
console.error("It looks like you're using the css prop on Global, did you mean to use the styles prop instead?");
warnedAboutCssPropForGlobal = true;
}
var styles = props.styles;
var serialized = serializeStyles([styles], undefined, useContext(ThemeContext));
// but it is based on a constant that will never change at runtime
// it's effectively like having two implementations and switching them out
// so it's not actually breaking anything
var sheetRef = useRef();
useLayoutEffect(function () {
var key = cache.key + "-global";
var sheet = new StyleSheet({
key: key,
nonce: cache.sheet.nonce,
container: cache.sheet.container,
speedy: cache.sheet.isSpeedy
});
var rehydrating = false; // $FlowFixMe
var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]");
if (cache.sheet.tags.length) {
sheet.before = cache.sheet.tags[0];
}
if (node !== null) {
rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
node.setAttribute('data-emotion', key);
sheet.hydrate([node]);
}
sheetRef.current = [sheet, rehydrating];
return function () {
sheet.flush();
};
}, [cache]);
useLayoutEffect(function () {
var sheetRefCurrent = sheetRef.current;
var sheet = sheetRefCurrent[0],
rehydrating = sheetRefCurrent[1];
if (rehydrating) {
sheetRefCurrent[1] = false;
return;
}
if (serialized.next !== undefined) {
// insert keyframes
insertStyles(cache, serialized.next, true);
}
if (sheet.tags.length) {
// if this doesn't exist then it will be null so the style element will be appended
var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
sheet.before = element;
sheet.flush();
}
cache.insert("", serialized, sheet, false);
}, [cache, serialized.name]);
return null;
});
if (process.env.NODE_ENV !== 'production') {
Global.displayName = 'EmotionGlobal';
}
function css() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return serializeStyles(args);
}
var keyframes = function keyframes() {
var insertable = css.apply(void 0, arguments);
var name = "animation-" + insertable.name; // $FlowFixMe
return {
name: name,
styles: "@keyframes " + name + "{" + insertable.styles + "}",
anim: 1,
toString: function toString() {
return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
}
};
};
var classnames = function classnames(args) {
var len = args.length;
var i = 0;
var cls = '';
for (; i < len; i++) {
var arg = args[i];
if (arg == null) continue;
var toAdd = void 0;
switch (typeof arg) {
case 'boolean':
break;
case 'object':
{
if (Array.isArray(arg)) {
toAdd = classnames(arg);
} else {
if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {
console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.');
}
toAdd = '';
for (var k in arg) {
if (arg[k] && k) {
toAdd && (toAdd += ' ');
toAdd += k;
}
}
}
break;
}
default:
{
toAdd = arg;
}
}
if (toAdd) {
cls && (cls += ' ');
cls += toAdd;
}
}
return cls;
};
function merge(registered, css, className) {
var registeredStyles = [];
var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
if (registeredStyles.length < 2) {
return className;
}
return rawClassName + css(registeredStyles);
}
var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
var hasRendered = false;
var css = function css() {
if (hasRendered && process.env.NODE_ENV !== 'production') {
throw new Error('css can only be used during render');
}
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var serialized = serializeStyles(args, cache.registered);
{
insertStyles(cache, serialized, false);
}
return cache.key + "-" + serialized.name;
};
var cx = function cx() {
if (hasRendered && process.env.NODE_ENV !== 'production') {
throw new Error('cx can only be used during render');
}
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return merge(cache.registered, css, classnames(args));
};
var content = {
css: css,
cx: cx,
theme: useContext(ThemeContext)
};
var ele = props.children(content);
hasRendered = true;
return ele;
});
if (process.env.NODE_ENV !== 'production') {
ClassNames.displayName = 'EmotionClassNames';
}
if (process.env.NODE_ENV !== 'production') {
var isBrowser = "object" !== 'undefined'; // #1727 for some reason Jest evaluates modules twice if some consuming module gets mocked with jest.mock
var isJest = typeof jest !== 'undefined';
if (isBrowser && !isJest) {
var globalContext = isBrowser ? window : global;
var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__";
if (globalContext[globalKey]) {
console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');
}
globalContext[globalKey] = true;
}
}
export { ClassNames, Global, jsx as createElement, css, jsx, keyframes };

View file

@ -0,0 +1,408 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
require('@emotion/cache');
var emotionElement = require('./emotion-element-ce965253.cjs.dev.js');
require('@babel/runtime/helpers/extends');
require('@emotion/weak-memoize');
require('hoist-non-react-statics');
require('../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.cjs.dev.js');
var utils = require('@emotion/utils');
var serialize = require('@emotion/serialize');
var sheet = require('@emotion/sheet');
var pkg = {
name: "@emotion/react",
version: "11.4.1",
main: "dist/emotion-react.cjs.js",
module: "dist/emotion-react.esm.js",
browser: {
"./dist/emotion-react.cjs.js": "./dist/emotion-react.browser.cjs.js",
"./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js"
},
types: "types/index.d.ts",
files: [
"src",
"dist",
"jsx-runtime",
"jsx-dev-runtime",
"isolated-hoist-non-react-statics-do-not-use-this-in-your-code",
"types/*.d.ts",
"macro.js",
"macro.d.ts",
"macro.js.flow"
],
sideEffects: false,
author: "mitchellhamilton <mitchell@mitchellhamilton.me>",
license: "MIT",
scripts: {
"test:typescript": "dtslint types"
},
dependencies: {
"@babel/runtime": "^7.13.10",
"@emotion/cache": "^11.4.0",
"@emotion/serialize": "^1.0.2",
"@emotion/sheet": "^1.0.2",
"@emotion/utils": "^1.0.0",
"@emotion/weak-memoize": "^0.2.5",
"hoist-non-react-statics": "^3.3.1"
},
peerDependencies: {
"@babel/core": "^7.0.0",
react: ">=16.8.0"
},
peerDependenciesMeta: {
"@babel/core": {
optional: true
},
"@types/react": {
optional: true
}
},
devDependencies: {
"@babel/core": "^7.13.10",
"@emotion/css": "11.1.3",
"@emotion/css-prettifier": "1.0.0",
"@emotion/server": "11.4.0",
"@emotion/styled": "11.3.0",
"@types/react": "^16.9.11",
dtslint: "^0.3.0",
"html-tag-names": "^1.1.2",
react: "16.14.0",
"svg-tag-names": "^1.1.1"
},
repository: "https://github.com/emotion-js/emotion/tree/main/packages/react",
publishConfig: {
access: "public"
},
"umd:main": "dist/emotion-react.umd.min.js",
preconstruct: {
entrypoints: [
"./index.js",
"./jsx-runtime.js",
"./jsx-dev-runtime.js",
"./isolated-hoist-non-react-statics-do-not-use-this-in-your-code.js"
],
umdName: "emotionReact"
}
};
var jsx = function jsx(type, props) {
var args = arguments;
if (props == null || !emotionElement.hasOwnProperty.call(props, 'css')) {
// $FlowFixMe
return React.createElement.apply(undefined, args);
}
var argsLength = args.length;
var createElementArgArray = new Array(argsLength);
createElementArgArray[0] = emotionElement.Emotion;
createElementArgArray[1] = emotionElement.createEmotionProps(type, props);
for (var i = 2; i < argsLength; i++) {
createElementArgArray[i] = args[i];
} // $FlowFixMe
return React.createElement.apply(null, createElementArgArray);
};
var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
// initial client-side render from SSR, use place of hydrating tag
var Global = /* #__PURE__ */emotionElement.withEmotionCache(function (props, cache) {
if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is
// probably using the custom createElement which
// means it will be turned into a className prop
// $FlowFixMe I don't really want to add it to the type since it shouldn't be used
props.className || props.css)) {
console.error("It looks like you're using the css prop on Global, did you mean to use the styles prop instead?");
warnedAboutCssPropForGlobal = true;
}
var styles = props.styles;
var serialized = serialize.serializeStyles([styles], undefined, React.useContext(emotionElement.ThemeContext));
if (!emotionElement.isBrowser) {
var _ref;
var serializedNames = serialized.name;
var serializedStyles = serialized.styles;
var next = serialized.next;
while (next !== undefined) {
serializedNames += ' ' + next.name;
serializedStyles += next.styles;
next = next.next;
}
var shouldCache = cache.compat === true;
var rules = cache.insert("", {
name: serializedNames,
styles: serializedStyles
}, cache.sheet, shouldCache);
if (shouldCache) {
return null;
}
return /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + "-global " + serializedNames, _ref.dangerouslySetInnerHTML = {
__html: rules
}, _ref.nonce = cache.sheet.nonce, _ref));
} // yes, i know these hooks are used conditionally
// but it is based on a constant that will never change at runtime
// it's effectively like having two implementations and switching them out
// so it's not actually breaking anything
var sheetRef = React.useRef();
React.useLayoutEffect(function () {
var key = cache.key + "-global";
var sheet$1 = new sheet.StyleSheet({
key: key,
nonce: cache.sheet.nonce,
container: cache.sheet.container,
speedy: cache.sheet.isSpeedy
});
var rehydrating = false; // $FlowFixMe
var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]");
if (cache.sheet.tags.length) {
sheet$1.before = cache.sheet.tags[0];
}
if (node !== null) {
rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
node.setAttribute('data-emotion', key);
sheet$1.hydrate([node]);
}
sheetRef.current = [sheet$1, rehydrating];
return function () {
sheet$1.flush();
};
}, [cache]);
React.useLayoutEffect(function () {
var sheetRefCurrent = sheetRef.current;
var sheet = sheetRefCurrent[0],
rehydrating = sheetRefCurrent[1];
if (rehydrating) {
sheetRefCurrent[1] = false;
return;
}
if (serialized.next !== undefined) {
// insert keyframes
utils.insertStyles(cache, serialized.next, true);
}
if (sheet.tags.length) {
// if this doesn't exist then it will be null so the style element will be appended
var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
sheet.before = element;
sheet.flush();
}
cache.insert("", serialized, sheet, false);
}, [cache, serialized.name]);
return null;
});
if (process.env.NODE_ENV !== 'production') {
Global.displayName = 'EmotionGlobal';
}
function css() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return serialize.serializeStyles(args);
}
var keyframes = function keyframes() {
var insertable = css.apply(void 0, arguments);
var name = "animation-" + insertable.name; // $FlowFixMe
return {
name: name,
styles: "@keyframes " + name + "{" + insertable.styles + "}",
anim: 1,
toString: function toString() {
return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
}
};
};
var classnames = function classnames(args) {
var len = args.length;
var i = 0;
var cls = '';
for (; i < len; i++) {
var arg = args[i];
if (arg == null) continue;
var toAdd = void 0;
switch (typeof arg) {
case 'boolean':
break;
case 'object':
{
if (Array.isArray(arg)) {
toAdd = classnames(arg);
} else {
if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {
console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.');
}
toAdd = '';
for (var k in arg) {
if (arg[k] && k) {
toAdd && (toAdd += ' ');
toAdd += k;
}
}
}
break;
}
default:
{
toAdd = arg;
}
}
if (toAdd) {
cls && (cls += ' ');
cls += toAdd;
}
}
return cls;
};
function merge(registered, css, className) {
var registeredStyles = [];
var rawClassName = utils.getRegisteredStyles(registered, registeredStyles, className);
if (registeredStyles.length < 2) {
return className;
}
return rawClassName + css(registeredStyles);
}
var ClassNames = /* #__PURE__ */emotionElement.withEmotionCache(function (props, cache) {
var rules = '';
var serializedHashes = '';
var hasRendered = false;
var css = function css() {
if (hasRendered && process.env.NODE_ENV !== 'production') {
throw new Error('css can only be used during render');
}
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var serialized = serialize.serializeStyles(args, cache.registered);
if (emotionElement.isBrowser) {
utils.insertStyles(cache, serialized, false);
} else {
var res = utils.insertStyles(cache, serialized, false);
if (res !== undefined) {
rules += res;
}
}
if (!emotionElement.isBrowser) {
serializedHashes += " " + serialized.name;
}
return cache.key + "-" + serialized.name;
};
var cx = function cx() {
if (hasRendered && process.env.NODE_ENV !== 'production') {
throw new Error('cx can only be used during render');
}
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return merge(cache.registered, css, classnames(args));
};
var content = {
css: css,
cx: cx,
theme: React.useContext(emotionElement.ThemeContext)
};
var ele = props.children(content);
hasRendered = true;
if (!emotionElement.isBrowser && rules.length !== 0) {
var _ref;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedHashes.substring(1), _ref.dangerouslySetInnerHTML = {
__html: rules
}, _ref.nonce = cache.sheet.nonce, _ref)), ele);
}
return ele;
});
if (process.env.NODE_ENV !== 'production') {
ClassNames.displayName = 'EmotionClassNames';
}
if (process.env.NODE_ENV !== 'production') {
var isBrowser = typeof document !== 'undefined'; // #1727 for some reason Jest evaluates modules twice if some consuming module gets mocked with jest.mock
var isJest = typeof jest !== 'undefined';
if (isBrowser && !isJest) {
var globalContext = isBrowser ? window : global;
var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__";
if (globalContext[globalKey]) {
console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');
}
globalContext[globalKey] = true;
}
}
exports.CacheProvider = emotionElement.CacheProvider;
exports.ThemeContext = emotionElement.ThemeContext;
exports.ThemeProvider = emotionElement.ThemeProvider;
exports.__unsafe_useEmotionCache = emotionElement.__unsafe_useEmotionCache;
exports.useTheme = emotionElement.useTheme;
Object.defineProperty(exports, 'withEmotionCache', {
enumerable: true,
get: function () {
return emotionElement.withEmotionCache;
}
});
exports.withTheme = emotionElement.withTheme;
exports.ClassNames = ClassNames;
exports.Global = Global;
exports.createElement = jsx;
exports.css = css;
exports.jsx = jsx;
exports.keyframes = keyframes;

View file

@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === "production") {
module.exports = require("./emotion-react.cjs.prod.js");
} else {
module.exports = require("./emotion-react.cjs.dev.js");
}

View file

@ -0,0 +1,2 @@
// @flow
export * from "../src/index.js";

View file

@ -0,0 +1,198 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
});
var React = require("react");
require("@emotion/cache");
var emotionElement = require("./emotion-element-94e2cf49.cjs.prod.js");
require("@babel/runtime/helpers/extends"), require("@emotion/weak-memoize"), require("hoist-non-react-statics"),
require("../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.cjs.prod.js");
var utils = require("@emotion/utils"), serialize = require("@emotion/serialize"), sheet = require("@emotion/sheet"), pkg = {
name: "@emotion/react",
version: "11.4.1",
main: "dist/emotion-react.cjs.js",
module: "dist/emotion-react.esm.js",
browser: {
"./dist/emotion-react.cjs.js": "./dist/emotion-react.browser.cjs.js",
"./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js"
},
types: "types/index.d.ts",
files: [ "src", "dist", "jsx-runtime", "jsx-dev-runtime", "isolated-hoist-non-react-statics-do-not-use-this-in-your-code", "types/*.d.ts", "macro.js", "macro.d.ts", "macro.js.flow" ],
sideEffects: !1,
author: "mitchellhamilton <mitchell@mitchellhamilton.me>",
license: "MIT",
scripts: {
"test:typescript": "dtslint types"
},
dependencies: {
"@babel/runtime": "^7.13.10",
"@emotion/cache": "^11.4.0",
"@emotion/serialize": "^1.0.2",
"@emotion/sheet": "^1.0.2",
"@emotion/utils": "^1.0.0",
"@emotion/weak-memoize": "^0.2.5",
"hoist-non-react-statics": "^3.3.1"
},
peerDependencies: {
"@babel/core": "^7.0.0",
react: ">=16.8.0"
},
peerDependenciesMeta: {
"@babel/core": {
optional: !0
},
"@types/react": {
optional: !0
}
},
devDependencies: {
"@babel/core": "^7.13.10",
"@emotion/css": "11.1.3",
"@emotion/css-prettifier": "1.0.0",
"@emotion/server": "11.4.0",
"@emotion/styled": "11.3.0",
"@types/react": "^16.9.11",
dtslint: "^0.3.0",
"html-tag-names": "^1.1.2",
react: "16.14.0",
"svg-tag-names": "^1.1.1"
},
repository: "https://github.com/emotion-js/emotion/tree/main/packages/react",
publishConfig: {
access: "public"
},
"umd:main": "dist/emotion-react.umd.min.js",
preconstruct: {
entrypoints: [ "./index.js", "./jsx-runtime.js", "./jsx-dev-runtime.js", "./isolated-hoist-non-react-statics-do-not-use-this-in-your-code.js" ],
umdName: "emotionReact"
}
}, jsx = function(type, props) {
var args = arguments;
if (null == props || !emotionElement.hasOwnProperty.call(props, "css")) return React.createElement.apply(void 0, args);
var argsLength = args.length, createElementArgArray = new Array(argsLength);
createElementArgArray[0] = emotionElement.Emotion, createElementArgArray[1] = emotionElement.createEmotionProps(type, props);
for (var i = 2; i < argsLength; i++) createElementArgArray[i] = args[i];
return React.createElement.apply(null, createElementArgArray);
}, warnedAboutCssPropForGlobal = !1, Global = emotionElement.withEmotionCache((function(props, cache) {
var styles = props.styles, serialized = serialize.serializeStyles([ styles ], void 0, React.useContext(emotionElement.ThemeContext));
if (!emotionElement.isBrowser) {
for (var _ref, serializedNames = serialized.name, serializedStyles = serialized.styles, next = serialized.next; void 0 !== next; ) serializedNames += " " + next.name,
serializedStyles += next.styles, next = next.next;
var shouldCache = !0 === cache.compat, rules = cache.insert("", {
name: serializedNames,
styles: serializedStyles
}, cache.sheet, shouldCache);
return shouldCache ? null : React.createElement("style", ((_ref = {})["data-emotion"] = cache.key + "-global " + serializedNames,
_ref.dangerouslySetInnerHTML = {
__html: rules
}, _ref.nonce = cache.sheet.nonce, _ref));
}
var sheetRef = React.useRef();
return React.useLayoutEffect((function() {
var key = cache.key + "-global", sheet$1 = new sheet.StyleSheet({
key: key,
nonce: cache.sheet.nonce,
container: cache.sheet.container,
speedy: cache.sheet.isSpeedy
}), rehydrating = !1, node = document.querySelector('style[data-emotion="' + key + " " + serialized.name + '"]');
return cache.sheet.tags.length && (sheet$1.before = cache.sheet.tags[0]), null !== node && (rehydrating = !0,
node.setAttribute("data-emotion", key), sheet$1.hydrate([ node ])), sheetRef.current = [ sheet$1, rehydrating ],
function() {
sheet$1.flush();
};
}), [ cache ]), React.useLayoutEffect((function() {
var sheetRefCurrent = sheetRef.current, sheet = sheetRefCurrent[0];
if (sheetRefCurrent[1]) sheetRefCurrent[1] = !1; else {
if (void 0 !== serialized.next && utils.insertStyles(cache, serialized.next, !0),
sheet.tags.length) {
var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
sheet.before = element, sheet.flush();
}
cache.insert("", serialized, sheet, !1);
}
}), [ cache, serialized.name ]), null;
}));
function css() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
return serialize.serializeStyles(args);
}
var keyframes = function() {
var insertable = css.apply(void 0, arguments), name = "animation-" + insertable.name;
return {
name: name,
styles: "@keyframes " + name + "{" + insertable.styles + "}",
anim: 1,
toString: function() {
return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
}
};
}, classnames = function classnames(args) {
for (var len = args.length, i = 0, cls = ""; i < len; i++) {
var arg = args[i];
if (null != arg) {
var toAdd = void 0;
switch (typeof arg) {
case "boolean":
break;
case "object":
if (Array.isArray(arg)) toAdd = classnames(arg); else for (var k in toAdd = "",
arg) arg[k] && k && (toAdd && (toAdd += " "), toAdd += k);
break;
default:
toAdd = arg;
}
toAdd && (cls && (cls += " "), cls += toAdd);
}
}
return cls;
};
function merge(registered, css, className) {
var registeredStyles = [], rawClassName = utils.getRegisteredStyles(registered, registeredStyles, className);
return registeredStyles.length < 2 ? className : rawClassName + css(registeredStyles);
}
var isBrowser, isJest, globalContext, globalKey, ClassNames = emotionElement.withEmotionCache((function(props, cache) {
var _ref, rules = "", serializedHashes = "", css = function() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
var serialized = serialize.serializeStyles(args, cache.registered);
if (emotionElement.isBrowser) utils.insertStyles(cache, serialized, !1); else {
var res = utils.insertStyles(cache, serialized, !1);
void 0 !== res && (rules += res);
}
return emotionElement.isBrowser || (serializedHashes += " " + serialized.name),
cache.key + "-" + serialized.name;
}, content = {
css: css,
cx: function() {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) args[_key2] = arguments[_key2];
return merge(cache.registered, css, classnames(args));
},
theme: React.useContext(emotionElement.ThemeContext)
}, ele = props.children(content);
return !0, emotionElement.isBrowser || 0 === rules.length ? ele : React.createElement(React.Fragment, null, React.createElement("style", ((_ref = {})["data-emotion"] = cache.key + " " + serializedHashes.substring(1),
_ref.dangerouslySetInnerHTML = {
__html: rules
}, _ref.nonce = cache.sheet.nonce, _ref)), ele);
}));
exports.CacheProvider = emotionElement.CacheProvider, exports.ThemeContext = emotionElement.ThemeContext,
exports.ThemeProvider = emotionElement.ThemeProvider, exports.__unsafe_useEmotionCache = emotionElement.__unsafe_useEmotionCache,
exports.useTheme = emotionElement.useTheme, Object.defineProperty(exports, "withEmotionCache", {
enumerable: !0,
get: function() {
return emotionElement.withEmotionCache;
}
}), exports.withTheme = emotionElement.withTheme, exports.ClassNames = ClassNames,
exports.Global = Global, exports.createElement = jsx, exports.css = css, exports.jsx = jsx,
exports.keyframes = keyframes;

View file

@ -0,0 +1,388 @@
import { createElement, useContext, useRef, useLayoutEffect, Fragment } from 'react';
import '@emotion/cache';
import { h as hasOwnProperty, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext, i as isBrowser$1 } from './emotion-element-8d26346b.esm.js';
export { C as CacheProvider, T as ThemeContext, a as ThemeProvider, _ as __unsafe_useEmotionCache, u as useTheme, w as withEmotionCache, b as withTheme } from './emotion-element-8d26346b.esm.js';
import '@babel/runtime/helpers/extends';
import '@emotion/weak-memoize';
import 'hoist-non-react-statics';
import '../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.esm.js';
import { insertStyles, getRegisteredStyles } from '@emotion/utils';
import { serializeStyles } from '@emotion/serialize';
import { StyleSheet } from '@emotion/sheet';
var pkg = {
name: "@emotion/react",
version: "11.4.1",
main: "dist/emotion-react.cjs.js",
module: "dist/emotion-react.esm.js",
browser: {
"./dist/emotion-react.cjs.js": "./dist/emotion-react.browser.cjs.js",
"./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js"
},
types: "types/index.d.ts",
files: [
"src",
"dist",
"jsx-runtime",
"jsx-dev-runtime",
"isolated-hoist-non-react-statics-do-not-use-this-in-your-code",
"types/*.d.ts",
"macro.js",
"macro.d.ts",
"macro.js.flow"
],
sideEffects: false,
author: "mitchellhamilton <mitchell@mitchellhamilton.me>",
license: "MIT",
scripts: {
"test:typescript": "dtslint types"
},
dependencies: {
"@babel/runtime": "^7.13.10",
"@emotion/cache": "^11.4.0",
"@emotion/serialize": "^1.0.2",
"@emotion/sheet": "^1.0.2",
"@emotion/utils": "^1.0.0",
"@emotion/weak-memoize": "^0.2.5",
"hoist-non-react-statics": "^3.3.1"
},
peerDependencies: {
"@babel/core": "^7.0.0",
react: ">=16.8.0"
},
peerDependenciesMeta: {
"@babel/core": {
optional: true
},
"@types/react": {
optional: true
}
},
devDependencies: {
"@babel/core": "^7.13.10",
"@emotion/css": "11.1.3",
"@emotion/css-prettifier": "1.0.0",
"@emotion/server": "11.4.0",
"@emotion/styled": "11.3.0",
"@types/react": "^16.9.11",
dtslint: "^0.3.0",
"html-tag-names": "^1.1.2",
react: "16.14.0",
"svg-tag-names": "^1.1.1"
},
repository: "https://github.com/emotion-js/emotion/tree/main/packages/react",
publishConfig: {
access: "public"
},
"umd:main": "dist/emotion-react.umd.min.js",
preconstruct: {
entrypoints: [
"./index.js",
"./jsx-runtime.js",
"./jsx-dev-runtime.js",
"./isolated-hoist-non-react-statics-do-not-use-this-in-your-code.js"
],
umdName: "emotionReact"
}
};
var jsx = function jsx(type, props) {
var args = arguments;
if (props == null || !hasOwnProperty.call(props, 'css')) {
// $FlowFixMe
return createElement.apply(undefined, args);
}
var argsLength = args.length;
var createElementArgArray = new Array(argsLength);
createElementArgArray[0] = Emotion;
createElementArgArray[1] = createEmotionProps(type, props);
for (var i = 2; i < argsLength; i++) {
createElementArgArray[i] = args[i];
} // $FlowFixMe
return createElement.apply(null, createElementArgArray);
};
var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
// initial client-side render from SSR, use place of hydrating tag
var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is
// probably using the custom createElement which
// means it will be turned into a className prop
// $FlowFixMe I don't really want to add it to the type since it shouldn't be used
props.className || props.css)) {
console.error("It looks like you're using the css prop on Global, did you mean to use the styles prop instead?");
warnedAboutCssPropForGlobal = true;
}
var styles = props.styles;
var serialized = serializeStyles([styles], undefined, useContext(ThemeContext));
if (!isBrowser$1) {
var _ref;
var serializedNames = serialized.name;
var serializedStyles = serialized.styles;
var next = serialized.next;
while (next !== undefined) {
serializedNames += ' ' + next.name;
serializedStyles += next.styles;
next = next.next;
}
var shouldCache = cache.compat === true;
var rules = cache.insert("", {
name: serializedNames,
styles: serializedStyles
}, cache.sheet, shouldCache);
if (shouldCache) {
return null;
}
return /*#__PURE__*/createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + "-global " + serializedNames, _ref.dangerouslySetInnerHTML = {
__html: rules
}, _ref.nonce = cache.sheet.nonce, _ref));
} // yes, i know these hooks are used conditionally
// but it is based on a constant that will never change at runtime
// it's effectively like having two implementations and switching them out
// so it's not actually breaking anything
var sheetRef = useRef();
useLayoutEffect(function () {
var key = cache.key + "-global";
var sheet = new StyleSheet({
key: key,
nonce: cache.sheet.nonce,
container: cache.sheet.container,
speedy: cache.sheet.isSpeedy
});
var rehydrating = false; // $FlowFixMe
var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]");
if (cache.sheet.tags.length) {
sheet.before = cache.sheet.tags[0];
}
if (node !== null) {
rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
node.setAttribute('data-emotion', key);
sheet.hydrate([node]);
}
sheetRef.current = [sheet, rehydrating];
return function () {
sheet.flush();
};
}, [cache]);
useLayoutEffect(function () {
var sheetRefCurrent = sheetRef.current;
var sheet = sheetRefCurrent[0],
rehydrating = sheetRefCurrent[1];
if (rehydrating) {
sheetRefCurrent[1] = false;
return;
}
if (serialized.next !== undefined) {
// insert keyframes
insertStyles(cache, serialized.next, true);
}
if (sheet.tags.length) {
// if this doesn't exist then it will be null so the style element will be appended
var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
sheet.before = element;
sheet.flush();
}
cache.insert("", serialized, sheet, false);
}, [cache, serialized.name]);
return null;
});
if (process.env.NODE_ENV !== 'production') {
Global.displayName = 'EmotionGlobal';
}
function css() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return serializeStyles(args);
}
var keyframes = function keyframes() {
var insertable = css.apply(void 0, arguments);
var name = "animation-" + insertable.name; // $FlowFixMe
return {
name: name,
styles: "@keyframes " + name + "{" + insertable.styles + "}",
anim: 1,
toString: function toString() {
return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
}
};
};
var classnames = function classnames(args) {
var len = args.length;
var i = 0;
var cls = '';
for (; i < len; i++) {
var arg = args[i];
if (arg == null) continue;
var toAdd = void 0;
switch (typeof arg) {
case 'boolean':
break;
case 'object':
{
if (Array.isArray(arg)) {
toAdd = classnames(arg);
} else {
if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {
console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.');
}
toAdd = '';
for (var k in arg) {
if (arg[k] && k) {
toAdd && (toAdd += ' ');
toAdd += k;
}
}
}
break;
}
default:
{
toAdd = arg;
}
}
if (toAdd) {
cls && (cls += ' ');
cls += toAdd;
}
}
return cls;
};
function merge(registered, css, className) {
var registeredStyles = [];
var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
if (registeredStyles.length < 2) {
return className;
}
return rawClassName + css(registeredStyles);
}
var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
var rules = '';
var serializedHashes = '';
var hasRendered = false;
var css = function css() {
if (hasRendered && process.env.NODE_ENV !== 'production') {
throw new Error('css can only be used during render');
}
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var serialized = serializeStyles(args, cache.registered);
if (isBrowser$1) {
insertStyles(cache, serialized, false);
} else {
var res = insertStyles(cache, serialized, false);
if (res !== undefined) {
rules += res;
}
}
if (!isBrowser$1) {
serializedHashes += " " + serialized.name;
}
return cache.key + "-" + serialized.name;
};
var cx = function cx() {
if (hasRendered && process.env.NODE_ENV !== 'production') {
throw new Error('cx can only be used during render');
}
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return merge(cache.registered, css, classnames(args));
};
var content = {
css: css,
cx: cx,
theme: useContext(ThemeContext)
};
var ele = props.children(content);
hasRendered = true;
if (!isBrowser$1 && rules.length !== 0) {
var _ref;
return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedHashes.substring(1), _ref.dangerouslySetInnerHTML = {
__html: rules
}, _ref.nonce = cache.sheet.nonce, _ref)), ele);
}
return ele;
});
if (process.env.NODE_ENV !== 'production') {
ClassNames.displayName = 'EmotionClassNames';
}
if (process.env.NODE_ENV !== 'production') {
var isBrowser = typeof document !== 'undefined'; // #1727 for some reason Jest evaluates modules twice if some consuming module gets mocked with jest.mock
var isJest = typeof jest !== 'undefined';
if (isBrowser && !isJest) {
var globalContext = isBrowser ? window : global;
var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__";
if (globalContext[globalKey]) {
console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');
}
globalContext[globalKey] = true;
}
}
export { ClassNames, Global, jsx as createElement, css, jsx, keyframes };

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,19 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var hoistNonReactStatics$1 = require('hoist-non-react-statics');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var hoistNonReactStatics__default = /*#__PURE__*/_interopDefault(hoistNonReactStatics$1);
// this file isolates this package that is not tree-shakeable
// and if this module doesn't actually contain any logic of its own
// then Rollup just use 'hoist-non-react-statics' directly in other chunks
var hoistNonReactStatics = (function (targetComponent, sourceComponent) {
return hoistNonReactStatics__default['default'](targetComponent, sourceComponent);
});
exports.default = hoistNonReactStatics;

View file

@ -0,0 +1,11 @@
import hoistNonReactStatics$1 from 'hoist-non-react-statics';
// this file isolates this package that is not tree-shakeable
// and if this module doesn't actually contain any logic of its own
// then Rollup just use 'hoist-non-react-statics' directly in other chunks
var hoistNonReactStatics = (function (targetComponent, sourceComponent) {
return hoistNonReactStatics$1(targetComponent, sourceComponent);
});
export default hoistNonReactStatics;

View file

@ -0,0 +1,19 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var hoistNonReactStatics$1 = require('hoist-non-react-statics');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var hoistNonReactStatics__default = /*#__PURE__*/_interopDefault(hoistNonReactStatics$1);
// this file isolates this package that is not tree-shakeable
// and if this module doesn't actually contain any logic of its own
// then Rollup just use 'hoist-non-react-statics' directly in other chunks
var hoistNonReactStatics = (function (targetComponent, sourceComponent) {
return hoistNonReactStatics__default['default'](targetComponent, sourceComponent);
});
exports.default = hoistNonReactStatics;

View file

@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === "production") {
module.exports = require("./emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.cjs.prod.js");
} else {
module.exports = require("./emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.cjs.dev.js");
}

View file

@ -0,0 +1,19 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
});
var hoistNonReactStatics$1 = require("hoist-non-react-statics");
function _interopDefault(e) {
return e && e.__esModule ? e : {
default: e
};
}
var hoistNonReactStatics__default = _interopDefault(hoistNonReactStatics$1), hoistNonReactStatics = function(targetComponent, sourceComponent) {
return hoistNonReactStatics__default.default(targetComponent, sourceComponent);
};
exports.default = hoistNonReactStatics;

View file

@ -0,0 +1,11 @@
import hoistNonReactStatics$1 from 'hoist-non-react-statics';
// this file isolates this package that is not tree-shakeable
// and if this module doesn't actually contain any logic of its own
// then Rollup just use 'hoist-non-react-statics' directly in other chunks
var hoistNonReactStatics = (function (targetComponent, sourceComponent) {
return hoistNonReactStatics$1(targetComponent, sourceComponent);
});
export default hoistNonReactStatics;

View file

@ -0,0 +1,2 @@
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).emotionHoistNonReactStatics=t()}(this,(function(){"use strict";function e(e,t,r){return e(r={path:t,exports:{},require:function(e,t){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}(null==t&&r.path)}},r.exports),r.exports}var t=e((function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&Symbol.for,o=r?Symbol.for("react.element"):60103,n=r?Symbol.for("react.portal"):60106,f=r?Symbol.for("react.fragment"):60107,c=r?Symbol.for("react.strict_mode"):60108,i=r?Symbol.for("react.profiler"):60114,a=r?Symbol.for("react.provider"):60109,s=r?Symbol.for("react.context"):60110,u=r?Symbol.for("react.async_mode"):60111,p=r?Symbol.for("react.concurrent_mode"):60111,y=r?Symbol.for("react.forward_ref"):60112,l=r?Symbol.for("react.suspense"):60113,m=r?Symbol.for("react.suspense_list"):60120,d=r?Symbol.for("react.memo"):60115,b=r?Symbol.for("react.lazy"):60116,$=r?Symbol.for("react.fundamental"):60117,S=r?Symbol.for("react.responder"):60118,g=r?Symbol.for("react.scope"):60119;function P(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case o:switch(e=e.type){case u:case p:case f:case i:case c:case l:return e;default:switch(e=e&&e.$$typeof){case s:case y:case b:case d:case a:return e;default:return t}}case n:return t}}}function v(e){return P(e)===p}t.typeOf=P,t.AsyncMode=u,t.ConcurrentMode=p,t.ContextConsumer=s,t.ContextProvider=a,t.Element=o,t.ForwardRef=y,t.Fragment=f,t.Lazy=b,t.Memo=d,t.Portal=n,t.Profiler=i,t.StrictMode=c,t.Suspense=l,t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===f||e===p||e===i||e===c||e===l||e===m||"object"==typeof e&&null!==e&&(e.$$typeof===b||e.$$typeof===d||e.$$typeof===a||e.$$typeof===s||e.$$typeof===y||e.$$typeof===$||e.$$typeof===S||e.$$typeof===g)},t.isAsyncMode=function(e){return v(e)||P(e)===u},t.isConcurrentMode=v,t.isContextConsumer=function(e){return P(e)===s},t.isContextProvider=function(e){return P(e)===a},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o},t.isForwardRef=function(e){return P(e)===y},t.isFragment=function(e){return P(e)===f},t.isLazy=function(e){return P(e)===b},t.isMemo=function(e){return P(e)===d},t.isPortal=function(e){return P(e)===n},t.isProfiler=function(e){return P(e)===i},t.isStrictMode=function(e){return P(e)===c},t.isSuspense=function(e){return P(e)===l}})),r=(e((function(e,t){0})),e((function(e){e.exports=t}))),o={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},n={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},f={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},c={};function i(e){return r.isMemo(e)?f:c[e.$$typeof]||o}c[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0};var a=Object.defineProperty,s=Object.getOwnPropertyNames,u=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,y=Object.getPrototypeOf,l=Object.prototype;var m=function e(t,r,o){if("string"!=typeof r){if(l){var f=y(r);f&&f!==l&&e(t,f,o)}var c=s(r);u&&(c=c.concat(u(r)));for(var m=i(t),d=i(r),b=0;b<c.length;++b){var $=c[b];if(!(n[$]||o&&o[$]||d&&d[$]||m&&m[$])){var S=p(r,$);try{a(t,$,S)}catch(e){}}}}return t};return function(e,t){return m(e,t)}}));
//# sourceMappingURL=emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.umd.min.js.map

View file

@ -0,0 +1,13 @@
{
"main": "dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.cjs.js",
"module": "dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.esm.js",
"umd:main": "dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.umd.min.js",
"browser": {
"./dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.cjs.js": "./dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.browser.cjs.js",
"./dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.esm.js": "./dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.browser.esm.js"
},
"sideEffects": false,
"preconstruct": {
"umdName": "emotionHoistNonReactStatics"
}
}

View file

@ -0,0 +1,26 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
require('react');
require('@emotion/cache');
var emotionElement = require('../../dist/emotion-element-35a6e288.browser.cjs.js');
require('@babel/runtime/helpers/extends');
require('@emotion/weak-memoize');
require('hoist-non-react-statics');
require('../../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.browser.cjs.js');
require('@emotion/utils');
require('@emotion/serialize');
var ReactJSXRuntimeDev = require('react/jsx-dev-runtime');
var Fragment = ReactJSXRuntimeDev.Fragment;
function jsxDEV(type, props, key, isStaticChildren, source, self) {
if (!emotionElement.hasOwnProperty.call(props, 'css')) {
return ReactJSXRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
}
return ReactJSXRuntimeDev.jsxDEV(emotionElement.Emotion, emotionElement.createEmotionProps(type, props), key, isStaticChildren, source, self);
}
exports.Fragment = Fragment;
exports.jsxDEV = jsxDEV;

View file

@ -0,0 +1,21 @@
import 'react';
import '@emotion/cache';
import { h as hasOwnProperty, E as Emotion, c as createEmotionProps } from '../../dist/emotion-element-99289b21.browser.esm.js';
import '@babel/runtime/helpers/extends';
import '@emotion/weak-memoize';
import 'hoist-non-react-statics';
import '../../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.browser.esm.js';
import '@emotion/utils';
import '@emotion/serialize';
import { Fragment as Fragment$1, jsxDEV as jsxDEV$1 } from 'react/jsx-dev-runtime';
var Fragment = Fragment$1;
function jsxDEV(type, props, key, isStaticChildren, source, self) {
if (!hasOwnProperty.call(props, 'css')) {
return jsxDEV$1(type, props, key, isStaticChildren, source, self);
}
return jsxDEV$1(Emotion, createEmotionProps(type, props), key, isStaticChildren, source, self);
}
export { Fragment, jsxDEV };

View file

@ -0,0 +1,26 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
require('react');
require('@emotion/cache');
var emotionElement = require('../../dist/emotion-element-ce965253.cjs.dev.js');
require('@babel/runtime/helpers/extends');
require('@emotion/weak-memoize');
require('hoist-non-react-statics');
require('../../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.cjs.dev.js');
require('@emotion/utils');
require('@emotion/serialize');
var ReactJSXRuntimeDev = require('react/jsx-dev-runtime');
var Fragment = ReactJSXRuntimeDev.Fragment;
function jsxDEV(type, props, key, isStaticChildren, source, self) {
if (!emotionElement.hasOwnProperty.call(props, 'css')) {
return ReactJSXRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
}
return ReactJSXRuntimeDev.jsxDEV(emotionElement.Emotion, emotionElement.createEmotionProps(type, props), key, isStaticChildren, source, self);
}
exports.Fragment = Fragment;
exports.jsxDEV = jsxDEV;

View file

@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === "production") {
module.exports = require("./emotion-react-jsx-dev-runtime.cjs.prod.js");
} else {
module.exports = require("./emotion-react-jsx-dev-runtime.cjs.dev.js");
}

View file

@ -0,0 +1,2 @@
// @flow
export * from "../../src/jsx-dev-runtime.js";

View file

@ -0,0 +1,19 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
}), require("react"), require("@emotion/cache");
var emotionElement = require("../../dist/emotion-element-94e2cf49.cjs.prod.js");
require("@babel/runtime/helpers/extends"), require("@emotion/weak-memoize"), require("hoist-non-react-statics"),
require("../../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.cjs.prod.js"),
require("@emotion/utils"), require("@emotion/serialize");
var ReactJSXRuntimeDev = require("react/jsx-dev-runtime"), Fragment = ReactJSXRuntimeDev.Fragment;
function jsxDEV(type, props, key, isStaticChildren, source, self) {
return emotionElement.hasOwnProperty.call(props, "css") ? ReactJSXRuntimeDev.jsxDEV(emotionElement.Emotion, emotionElement.createEmotionProps(type, props), key, isStaticChildren, source, self) : ReactJSXRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
}
exports.Fragment = Fragment, exports.jsxDEV = jsxDEV;

View file

@ -0,0 +1,21 @@
import 'react';
import '@emotion/cache';
import { h as hasOwnProperty, E as Emotion, c as createEmotionProps } from '../../dist/emotion-element-8d26346b.esm.js';
import '@babel/runtime/helpers/extends';
import '@emotion/weak-memoize';
import 'hoist-non-react-statics';
import '../../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.esm.js';
import '@emotion/utils';
import '@emotion/serialize';
import { Fragment as Fragment$1, jsxDEV as jsxDEV$1 } from 'react/jsx-dev-runtime';
var Fragment = Fragment$1;
function jsxDEV(type, props, key, isStaticChildren, source, self) {
if (!hasOwnProperty.call(props, 'css')) {
return jsxDEV$1(type, props, key, isStaticChildren, source, self);
}
return jsxDEV$1(Emotion, createEmotionProps(type, props), key, isStaticChildren, source, self);
}
export { Fragment, jsxDEV };

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,14 @@
{
"main": "dist/emotion-react-jsx-dev-runtime.cjs.js",
"module": "dist/emotion-react-jsx-dev-runtime.esm.js",
"umd:main": "dist/emotion-react-jsx-dev-runtime.umd.min.js",
"browser": {
"./dist/emotion-react-jsx-dev-runtime.cjs.js": "./dist/emotion-react-jsx-dev-runtime.browser.cjs.js",
"./dist/emotion-react-jsx-dev-runtime.esm.js": "./dist/emotion-react-jsx-dev-runtime.browser.esm.js"
},
"types": "../types/jsx-dev-runtime",
"sideEffects": false,
"preconstruct": {
"umdName": "emotionReactJSXDevRuntime"
}
}

View file

@ -0,0 +1,34 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
require('react');
require('@emotion/cache');
var emotionElement = require('../../dist/emotion-element-35a6e288.browser.cjs.js');
require('@babel/runtime/helpers/extends');
require('@emotion/weak-memoize');
require('hoist-non-react-statics');
require('../../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.browser.cjs.js');
require('@emotion/utils');
require('@emotion/serialize');
var ReactJSXRuntime = require('react/jsx-runtime');
var Fragment = ReactJSXRuntime.Fragment;
function jsx(type, props, key) {
if (!emotionElement.hasOwnProperty.call(props, 'css')) {
return ReactJSXRuntime.jsx(type, props, key);
}
return ReactJSXRuntime.jsx(emotionElement.Emotion, emotionElement.createEmotionProps(type, props), key);
}
function jsxs(type, props, key) {
if (!emotionElement.hasOwnProperty.call(props, 'css')) {
return ReactJSXRuntime.jsxs(type, props, key);
}
return ReactJSXRuntime.jsxs(emotionElement.Emotion, emotionElement.createEmotionProps(type, props), key);
}
exports.Fragment = Fragment;
exports.jsx = jsx;
exports.jsxs = jsxs;

View file

@ -0,0 +1,28 @@
import 'react';
import '@emotion/cache';
import { h as hasOwnProperty, E as Emotion, c as createEmotionProps } from '../../dist/emotion-element-99289b21.browser.esm.js';
import '@babel/runtime/helpers/extends';
import '@emotion/weak-memoize';
import 'hoist-non-react-statics';
import '../../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.browser.esm.js';
import '@emotion/utils';
import '@emotion/serialize';
import { Fragment as Fragment$1, jsx as jsx$1, jsxs as jsxs$1 } from 'react/jsx-runtime';
var Fragment = Fragment$1;
function jsx(type, props, key) {
if (!hasOwnProperty.call(props, 'css')) {
return jsx$1(type, props, key);
}
return jsx$1(Emotion, createEmotionProps(type, props), key);
}
function jsxs(type, props, key) {
if (!hasOwnProperty.call(props, 'css')) {
return jsxs$1(type, props, key);
}
return jsxs$1(Emotion, createEmotionProps(type, props), key);
}
export { Fragment, jsx, jsxs };

View file

@ -0,0 +1,34 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
require('react');
require('@emotion/cache');
var emotionElement = require('../../dist/emotion-element-ce965253.cjs.dev.js');
require('@babel/runtime/helpers/extends');
require('@emotion/weak-memoize');
require('hoist-non-react-statics');
require('../../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.cjs.dev.js');
require('@emotion/utils');
require('@emotion/serialize');
var ReactJSXRuntime = require('react/jsx-runtime');
var Fragment = ReactJSXRuntime.Fragment;
function jsx(type, props, key) {
if (!emotionElement.hasOwnProperty.call(props, 'css')) {
return ReactJSXRuntime.jsx(type, props, key);
}
return ReactJSXRuntime.jsx(emotionElement.Emotion, emotionElement.createEmotionProps(type, props), key);
}
function jsxs(type, props, key) {
if (!emotionElement.hasOwnProperty.call(props, 'css')) {
return ReactJSXRuntime.jsxs(type, props, key);
}
return ReactJSXRuntime.jsxs(emotionElement.Emotion, emotionElement.createEmotionProps(type, props), key);
}
exports.Fragment = Fragment;
exports.jsx = jsx;
exports.jsxs = jsxs;

View file

@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === "production") {
module.exports = require("./emotion-react-jsx-runtime.cjs.prod.js");
} else {
module.exports = require("./emotion-react-jsx-runtime.cjs.dev.js");
}

View file

@ -0,0 +1,2 @@
// @flow
export * from "../../src/jsx-runtime.js";

View file

@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
}), require("react"), require("@emotion/cache");
var emotionElement = require("../../dist/emotion-element-94e2cf49.cjs.prod.js");
require("@babel/runtime/helpers/extends"), require("@emotion/weak-memoize"), require("hoist-non-react-statics"),
require("../../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.cjs.prod.js"),
require("@emotion/utils"), require("@emotion/serialize");
var ReactJSXRuntime = require("react/jsx-runtime"), Fragment = ReactJSXRuntime.Fragment;
function jsx(type, props, key) {
return emotionElement.hasOwnProperty.call(props, "css") ? ReactJSXRuntime.jsx(emotionElement.Emotion, emotionElement.createEmotionProps(type, props), key) : ReactJSXRuntime.jsx(type, props, key);
}
function jsxs(type, props, key) {
return emotionElement.hasOwnProperty.call(props, "css") ? ReactJSXRuntime.jsxs(emotionElement.Emotion, emotionElement.createEmotionProps(type, props), key) : ReactJSXRuntime.jsxs(type, props, key);
}
exports.Fragment = Fragment, exports.jsx = jsx, exports.jsxs = jsxs;

View file

@ -0,0 +1,28 @@
import 'react';
import '@emotion/cache';
import { h as hasOwnProperty, E as Emotion, c as createEmotionProps } from '../../dist/emotion-element-8d26346b.esm.js';
import '@babel/runtime/helpers/extends';
import '@emotion/weak-memoize';
import 'hoist-non-react-statics';
import '../../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.esm.js';
import '@emotion/utils';
import '@emotion/serialize';
import { Fragment as Fragment$1, jsx as jsx$1, jsxs as jsxs$1 } from 'react/jsx-runtime';
var Fragment = Fragment$1;
function jsx(type, props, key) {
if (!hasOwnProperty.call(props, 'css')) {
return jsx$1(type, props, key);
}
return jsx$1(Emotion, createEmotionProps(type, props), key);
}
function jsxs(type, props, key) {
if (!hasOwnProperty.call(props, 'css')) {
return jsxs$1(type, props, key);
}
return jsxs$1(Emotion, createEmotionProps(type, props), key);
}
export { Fragment, jsx, jsxs };

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,14 @@
{
"main": "dist/emotion-react-jsx-runtime.cjs.js",
"module": "dist/emotion-react-jsx-runtime.esm.js",
"umd:main": "dist/emotion-react-jsx-runtime.umd.min.js",
"browser": {
"./dist/emotion-react-jsx-runtime.cjs.js": "./dist/emotion-react-jsx-runtime.browser.cjs.js",
"./dist/emotion-react-jsx-runtime.esm.js": "./dist/emotion-react-jsx-runtime.browser.esm.js"
},
"types": "../types/jsx-runtime",
"sideEffects": false,
"preconstruct": {
"umdName": "emotionReactJSXRuntime"
}
}

1
web/node_modules/@emotion/react/macro.d.ts generated vendored Normal file
View file

@ -0,0 +1 @@
export * from '@emotion/react'

1
web/node_modules/@emotion/react/macro.js generated vendored Normal file
View file

@ -0,0 +1 @@
module.exports = require('@emotion/babel-plugin').macros.core

2
web/node_modules/@emotion/react/macro.js.flow generated vendored Normal file
View file

@ -0,0 +1,2 @@
// @flow
export * from './src/index.js'

View file

@ -0,0 +1,210 @@
# @emotion/cache
## 11.4.0
### Patch Changes
- [#2361](https://github.com/emotion-js/emotion/pull/2361) [`38f9d44f`](https://github.com/emotion-js/emotion/commit/38f9d44f919dccbf66c835ccde3f08ab927a4940) Thanks [@danieldelcore](https://github.com/danieldelcore), [@mitchellhamilton](https://github.com/mitchellhamilton)! - Fixed moving of client-side inserted style tags from Emotion 10 when intending to hydrate Emotion 11 styles resulting in losing styles in production
## 11.1.3
### Patch Changes
- [`704b0092`](https://github.com/emotion-js/emotion/commit/704b0092ebba648c3937cc281e4d549565968201) [#2180](https://github.com/emotion-js/emotion/pull/2180) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with global styles containing pseudo selectors in at-rules not being able to be inserted.
## 11.0.0
### Major Changes
- [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - From now on `key` option is required. 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.
* [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - 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 🚀
It has been completely rewritten and comes with some breaking changes. The most notable ones that might affect Emotion users are:
- plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its [README](https://github.com/thysultan/stylis.js#middleware) and the source code of core plugins.
- vendor-prefixing was previously customizable using `prefix` option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The `prefix` option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.
- 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.
### Minor Changes
- [`4a891bf6`](https://github.com/emotion-js/emotion/commit/4a891bf6a30e3bb37f8f32031fa75a571c637d9c) [#1473](https://github.com/emotion-js/emotion/pull/1473) Thanks [@jcharry](https://github.com/jcharry)! - The new `prepend` option can make Emotion add style tags at the beginning of the specified DOM container instead of the end.
### Patch Changes
- [`a8eb4e75`](https://github.com/emotion-js/emotion/commit/a8eb4e75eed26763dc4f82ddd9bb49af4552768b) [#1998](https://github.com/emotion-js/emotion/pull/1998) Thanks [@Andarist](https://github.com/Andarist)! - Styles are now correctly extracted from the correct cache (`key`-sensitive) on the server.
* [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - Fixed issue with SSRed styles causing a React rehydration mismatch between server & client when cache was created in render.
- [`39be057b`](https://github.com/emotion-js/emotion/commit/39be057b1a0c6b76f2cb7a455cb8bc35fe875ba0) [#1997](https://github.com/emotion-js/emotion/pull/1997) Thanks [@Andarist](https://github.com/Andarist)! - From now on an empty rule will get inserted into the DOM in non-production environments if it gets created by the user. This helps to grab used `key`s from the (JS)DOM even for caches that have not inserted any actual rules to the document yet. It allows `@emotion/jest` to find those and serialize Emotion classes properly in situations like this:
```js
import styled from '@emotion/styled/macro'
import { render } from '@testing-library/react'
const Div = styled.div``
test('foo', () => {
const { container } = render(<Div />)
expect(container).toMatchSnapshot()
})
```
- Updated dependencies [[`42df3f3b`](https://github.com/emotion-js/emotion/commit/42df3f3bc01526eed61cedba106d86b9e3807f9d), [`4a891bf6`](https://github.com/emotion-js/emotion/commit/4a891bf6a30e3bb37f8f32031fa75a571c637d9c), [`1e4a741d`](https://github.com/emotion-js/emotion/commit/1e4a741de6424d3d9c1f3ca9695e1953bed3a194), [`debaad9a`](https://github.com/emotion-js/emotion/commit/debaad9ab4bd6c80312092826d9146f3d29c0899), [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf)]:
- @emotion/sheet@1.0.0
- @emotion/utils@1.0.0
## 11.0.0-rc.0
### Major Changes
- [`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63) [#2030](https://github.com/emotion-js/emotion/pull/2030) Thanks [@Andarist](https://github.com/Andarist)! - Release candidate version.
### Patch Changes
- Updated dependencies [[`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63)]:
- @emotion/sheet@1.0.0-rc.0
- @emotion/utils@1.0.0-rc.0
## 11.0.0-next.19
### Patch Changes
- [`42df3f3b`](https://github.com/emotion-js/emotion/commit/42df3f3bc01526eed61cedba106d86b9e3807f9d) [#2028](https://github.com/emotion-js/emotion/pull/2028) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with Emotion messing up style elements already processed by previously initialized Emotion copy.
- Updated dependencies [[`42df3f3b`](https://github.com/emotion-js/emotion/commit/42df3f3bc01526eed61cedba106d86b9e3807f9d)]:
- @emotion/sheet@1.0.0-next.5
## 11.0.0-next.18
### Patch Changes
- [`19df60b8`](https://github.com/emotion-js/emotion/commit/19df60b8382814f241f909e1f4cb98fe19e72a4a) [#2015](https://github.com/emotion-js/emotion/pull/2015) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with rules nested in orphaned pseudo selectors not being adjusted correctly.
## 11.0.0-next.16
### Patch Changes
- [`a8eb4e75`](https://github.com/emotion-js/emotion/commit/a8eb4e75eed26763dc4f82ddd9bb49af4552768b) [#1998](https://github.com/emotion-js/emotion/pull/1998) Thanks [@Andarist](https://github.com/Andarist)! - Styles are now correctly extracted from the correct cache (`key`-sensitive) on the server.
* [`dfe98028`](https://github.com/emotion-js/emotion/commit/dfe98028451a27c5190fa1ba138e51ef3d6d9be1) [#2003](https://github.com/emotion-js/emotion/pull/2003) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with orphaned pseudo selectors (e.g. `:hover` - where `&:hover`, `div:hover`, etc are not considered orphaned) having the context selector (the one computed based on all ancestor levels selectors) doubled in a descendant at-rule.
- [`39be057b`](https://github.com/emotion-js/emotion/commit/39be057b1a0c6b76f2cb7a455cb8bc35fe875ba0) [#1997](https://github.com/emotion-js/emotion/pull/1997) Thanks [@Andarist](https://github.com/Andarist)! - From now on an empty rule will get inserted into the DOM in non-production environments if it gets created by the user. This helps to grab used `key`s from the (JS)DOM even for caches that have not inserted any actual rules to the document yet. It allows `@emotion/jest` to find those and serialize Emotion classes properly in situations like this:
```js
import styled from '@emotion/styled/macro'
import { render } from '@testing-library/react'
const Div = styled.div``
test('foo', () => {
const { container } = render(<Div />)
expect(container).toMatchSnapshot()
})
```
- Updated dependencies [[`debaad9a`](https://github.com/emotion-js/emotion/commit/debaad9ab4bd6c80312092826d9146f3d29c0899), [`39be057b`](https://github.com/emotion-js/emotion/commit/39be057b1a0c6b76f2cb7a455cb8bc35fe875ba0)]:
- @emotion/utils@1.0.0-next.1
- @emotion/sheet@1.0.0-next.4
## 11.0.0-next.15
### Patch Changes
- Updated dependencies [[`dc1a0c5e`](https://github.com/emotion-js/emotion/commit/dc1a0c5ed78b27fb7ce49b6296f2ca8631654cd1)]:
- @emotion/sheet@1.0.0-next.3
## 11.0.0-next.13
### Major Changes
- [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - 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 🚀
It has been completely rewritten and comes with some breaking changes. Most notable ones that might affect Emotion users are:
- plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its [README](https://github.com/thysultan/stylis.js#middleware) and the source code of core plugins.
- vendor-prefixing was previously customizable using `prefix` option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The `prefix` option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.
- Prefixer is now just a plugin which happens to be put in 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.
### Patch Changes
- Updated dependencies [[`91046a8c`](https://github.com/emotion-js/emotion/commit/91046a8c188327a65daac61583ef3c4458f30afb), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf)]:
- @emotion/sheet@1.0.0-next.2
- @emotion/utils@1.0.0-next.0
## 11.0.0-next.12
### Major Changes
- [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - From now on `key` option is required. 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.
### Patch Changes
- [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - Fixed issue with SSRed styles causing a React rehydration mismatch between server & client when cache was created in render.
## 11.0.0-next.10
### Patch Changes
- [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - Use sheet's `rehydrate` method for SSRed styles which inserts rehydrated styles at correct position when used in combination with `prepend` option.
- Updated dependencies [[`1e4a741d`](https://github.com/emotion-js/emotion/commit/1e4a741de6424d3d9c1f3ca9695e1953bed3a194), [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71)]:
- @emotion/sheet@0.10.0-next.1
## 11.0.0-next.6
### Minor Changes
- [`4a891bf6`](https://github.com/emotion-js/emotion/commit/4a891bf6a30e3bb37f8f32031fa75a571c637d9c) [#1473](https://github.com/emotion-js/emotion/pull/1473) Thanks [@jcharry](https://github.com/jcharry)! - Accept new `prepend` option to allow for adding style tags at the beginning of the specified DOM container.
### Patch Changes
- Updated dependencies [[`4a891bf6`](https://github.com/emotion-js/emotion/commit/4a891bf6a30e3bb37f8f32031fa75a571c637d9c)]:
- @emotion/sheet@0.10.0-next.0
## 11.0.0-next.0
### Major Changes
- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number
## 10.0.29
### Patch Changes
- Updated dependencies [[`446e756`](https://github.com/emotion-js/emotion/commit/446e75661c4aa01e51d1466472a212940c19cd82)]:
- @emotion/hash@0.8.0
## 10.0.27
### Patch Changes
- [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file
- Updated dependencies [[`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968)]:
- @emotion/hash@0.7.4
- @emotion/sheet@0.9.4
- @emotion/stylis@0.8.5
- @emotion/utils@0.11.3
- @emotion/weak-memoize@0.2.5
## 10.0.19
- Updated dependencies [c81c0033]:
- @emotion/hash@0.7.3
- @emotion/weak-memoize@0.2.4
## 10.0.17
### Patch Changes
- [10514a86](https://github.com/emotion-js/emotion/commit/10514a8635dcaa55b85c7bff90e2a9e14d1ba61f) [#1482](https://github.com/emotion-js/emotion/pull/1482) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Remove react native bundles in favour of different isBrowser detection
- [16ff2330](https://github.com/emotion-js/emotion/commit/16ff233061e35fe71bfb1671da54ac12d6fc9eeb) [#1483](https://github.com/emotion-js/emotion/pull/1483) Thanks [@JakeGinnivan](https://github.com/JakeGinnivan)! - nth selector will no longer warn when using extract critical
## 10.0.15
### Patch Changes
- [61e61edc](https://github.com/emotion-js/emotion/commit/61e61edc) [#1412](https://github.com/emotion-js/emotion/pull/1412) Thanks [@donysukardi](https://github.com/donysukardi)! - Add explicit entries for react-native and sketch environments
## 10.0.14
### Patch Changes
- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool

View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) Emotion team and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View file

@ -0,0 +1,62 @@
# @emotion/cache
### createCache
`createCache` allows for low level customization of how styles get inserted by emotion. It's intended to be used with the [`<CacheProvider/>`](https://emotion.sh/docs/cache-provider) component to override the default cache, which is created with sensible defaults for most applications.
```javascript
import createCache from '@emotion/cache'
export const myCache = createCache({
key: 'my-prefix-key',
stylisPlugins: [
/* your plugins here */
]
})
```
### Primary use cases
- Using emotion in embedded contexts such as an `<iframe/>`
- Setting a [nonce](#nonce-string) on any `<style/>` tag emotion creates for security purposes
- Using emotion with a developer defined `<style/>` tag
- Using emotion with custom Stylis plugins
## Options
### `nonce`
`string`
A nonce that will be set on each style tag that emotion inserts for [Content Security Policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
### `stylisPlugins`
`Array<Function>`
A Stylis plugins that will be run by Stylis during preprocessing. [Read the Stylis docs to find out more](https://github.com/thysultan/stylis.js#middleware). This can be used for many purposes such as RTL.
> Note:
>
> Prefixer is just a plugin which happens to be put in 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 { prefixer } from 'stylis'`);
### `key`
`string (Pattern: [^a-z-])`
The prefix before class names. It will also be set as the value of the `data-emotion` attribute on the style tags that emotion inserts and it's used in the attribute name that marks style elements in `renderStylesToString` and `renderStylesToNodeStream`. This is **required if using multiple emotion caches in the same app**.
### `container`
`HTMLElement`
A DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes.
### `prepend`
`boolean`
A boolean representing whether to prepend rather than append style tags into the specified container DOM node.

View file

@ -0,0 +1,311 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var sheet = require('@emotion/sheet');
var stylis = require('stylis');
require('@emotion/weak-memoize');
require('@emotion/memoize');
var last = function last(arr) {
return arr.length ? arr[arr.length - 1] : null;
};
var toRules = function toRules(parsed, points) {
// pretend we've started with a comma
var index = -1;
var character = 44;
do {
switch (stylis.token(character)) {
case 0:
// &\f
if (character === 38 && stylis.peek() === 12) {
// this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
// stylis inserts \f after & to know when & where it should replace this sequence with the context selector
// and when it should just concatenate the outer and inner selectors
// it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
points[index] = 1;
}
parsed[index] += stylis.identifier(stylis.position - 1);
break;
case 2:
parsed[index] += stylis.delimit(character);
break;
case 4:
// comma
if (character === 44) {
// colon
parsed[++index] = stylis.peek() === 58 ? '&\f' : '';
points[index] = parsed[index].length;
break;
}
// fallthrough
default:
parsed[index] += stylis.from(character);
}
} while (character = stylis.next());
return parsed;
};
var getRules = function getRules(value, points) {
return stylis.dealloc(toRules(stylis.alloc(value), points));
}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
var fixedElements = /* #__PURE__ */new WeakMap();
var compat = function compat(element) {
if (element.type !== 'rule' || !element.parent || // .length indicates if this rule contains pseudo or not
!element.length) {
return;
}
var value = element.value,
parent = element.parent;
var isImplicitRule = element.column === parent.column && element.line === parent.line;
while (parent.type !== 'rule') {
parent = parent.parent;
if (!parent) return;
} // short-circuit for the simplest case
if (element.props.length === 1 && value.charCodeAt(0) !== 58
/* colon */
&& !fixedElements.get(parent)) {
return;
} // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
// then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
if (isImplicitRule) {
return;
}
fixedElements.set(element, true);
var points = [];
var rules = getRules(value, points);
var parentRules = parent.props;
for (var i = 0, k = 0; i < rules.length; i++) {
for (var j = 0; j < parentRules.length; j++, k++) {
element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
}
}
};
var removeLabel = function removeLabel(element) {
if (element.type === 'decl') {
var value = element.value;
if ( // charcode for l
value.charCodeAt(0) === 108 && // charcode for b
value.charCodeAt(2) === 98) {
// this ignores label
element["return"] = '';
element.value = '';
}
}
};
var ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';
var isIgnoringComment = function isIgnoringComment(element) {
return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
};
var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) {
return function (element, index, children) {
if (element.type !== 'rule') return;
var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
if (unsafePseudoClasses && cache.compat !== true) {
var prevElement = index > 0 ? children[index - 1] : null;
if (prevElement && isIgnoringComment(last(prevElement.children))) {
return;
}
unsafePseudoClasses.forEach(function (unsafePseudoClass) {
console.error("The pseudo class \"" + unsafePseudoClass + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + unsafePseudoClass.split('-child')[0] + "-of-type\".");
});
}
};
};
var isImportRule = function isImportRule(element) {
return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64;
};
var isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) {
for (var i = index - 1; i >= 0; i--) {
if (!isImportRule(children[i])) {
return true;
}
}
return false;
}; // use this to remove incorrect elements from further processing
// so they don't get handed to the `sheet` (or anything else)
// as that could potentially lead to additional logs which in turn could be overhelming to the user
var nullifyElement = function nullifyElement(element) {
element.type = '';
element.value = '';
element["return"] = '';
element.children = '';
element.props = '';
};
var incorrectImportAlarm = function incorrectImportAlarm(element, index, children) {
if (!isImportRule(element)) {
return;
}
if (element.parent) {
console.error("`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.");
nullifyElement(element);
} else if (isPrependedWithRegularRules(index, children)) {
console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.");
nullifyElement(element);
}
};
var defaultStylisPlugins = [stylis.prefixer];
var createCache = function createCache(options) {
var key = options.key;
if (process.env.NODE_ENV !== 'production' && !key) {
throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" + "If multiple caches share the same key they might \"fight\" for each other's style elements.");
}
if ( key === 'css') {
var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
// document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
// note this very very intentionally targets all style elements regardless of the key to ensure
// that creating a cache works inside of render of a React component
Array.prototype.forEach.call(ssrStyles, function (node) {
// we want to only move elements which have a space in the data-emotion attribute value
// because that indicates that it is an Emotion 11 server-side rendered style elements
// while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
// Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
// so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
// will not result in the Emotion 10 styles being destroyed
var dataEmotionAttribute = node.getAttribute('data-emotion');
if (dataEmotionAttribute.indexOf(' ') === -1) {
return;
}
document.head.appendChild(node);
node.setAttribute('data-s', '');
});
}
var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
if (process.env.NODE_ENV !== 'production') {
// $FlowFixMe
if (/[^a-z-]/.test(key)) {
throw new Error("Emotion key must only contain lower case alphabetical characters and - but \"" + key + "\" was passed");
}
}
var inserted = {}; // $FlowFixMe
var container;
var nodesToHydrate = [];
{
container = options.container || document.head;
Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
// means that the style elements we're looking at are only Emotion 11 server-rendered style elements
document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) {
var attrib = node.getAttribute("data-emotion").split(' '); // $FlowFixMe
for (var i = 1; i < attrib.length; i++) {
inserted[attrib[i]] = true;
}
nodesToHydrate.push(node);
});
}
var _insert;
var omnipresentPlugins = [compat, removeLabel];
if (process.env.NODE_ENV !== 'production') {
omnipresentPlugins.push(createUnsafeSelectorsAlarm({
get compat() {
return cache.compat;
}
}), incorrectImportAlarm);
}
{
var currentSheet;
var finalizingPlugins = [stylis.stringify, process.env.NODE_ENV !== 'production' ? function (element) {
if (!element.root) {
if (element["return"]) {
currentSheet.insert(element["return"]);
} else if (element.value && element.type !== stylis.COMMENT) {
// insert empty rule in non-production environments
// so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet
currentSheet.insert(element.value + "{}");
}
}
} : stylis.rulesheet(function (rule) {
currentSheet.insert(rule);
})];
var serializer = stylis.middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
var stylis$1 = function stylis$1(styles) {
return stylis.serialize(stylis.compile(styles), serializer);
};
_insert = function insert(selector, serialized, sheet, shouldCache) {
currentSheet = sheet;
if (process.env.NODE_ENV !== 'production' && serialized.map !== undefined) {
currentSheet = {
insert: function insert(rule) {
sheet.insert(rule + serialized.map);
}
};
}
stylis$1(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
if (shouldCache) {
cache.inserted[serialized.name] = true;
}
};
}
var cache = {
key: key,
sheet: new sheet.StyleSheet({
key: key,
container: container,
nonce: options.nonce,
speedy: options.speedy,
prepend: options.prepend
}),
nonce: options.nonce,
inserted: inserted,
registered: {},
insert: _insert
};
cache.sheet.hydrate(nodesToHydrate);
return cache;
};
exports.default = createCache;

View file

@ -0,0 +1,307 @@
import { StyleSheet } from '@emotion/sheet';
import { dealloc, alloc, next, token, from, peek, delimit, identifier, position, stringify, COMMENT, rulesheet, middleware, prefixer, serialize, compile } from 'stylis';
import '@emotion/weak-memoize';
import '@emotion/memoize';
var last = function last(arr) {
return arr.length ? arr[arr.length - 1] : null;
};
var toRules = function toRules(parsed, points) {
// pretend we've started with a comma
var index = -1;
var character = 44;
do {
switch (token(character)) {
case 0:
// &\f
if (character === 38 && peek() === 12) {
// this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
// stylis inserts \f after & to know when & where it should replace this sequence with the context selector
// and when it should just concatenate the outer and inner selectors
// it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
points[index] = 1;
}
parsed[index] += identifier(position - 1);
break;
case 2:
parsed[index] += delimit(character);
break;
case 4:
// comma
if (character === 44) {
// colon
parsed[++index] = peek() === 58 ? '&\f' : '';
points[index] = parsed[index].length;
break;
}
// fallthrough
default:
parsed[index] += from(character);
}
} while (character = next());
return parsed;
};
var getRules = function getRules(value, points) {
return dealloc(toRules(alloc(value), points));
}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
var fixedElements = /* #__PURE__ */new WeakMap();
var compat = function compat(element) {
if (element.type !== 'rule' || !element.parent || // .length indicates if this rule contains pseudo or not
!element.length) {
return;
}
var value = element.value,
parent = element.parent;
var isImplicitRule = element.column === parent.column && element.line === parent.line;
while (parent.type !== 'rule') {
parent = parent.parent;
if (!parent) return;
} // short-circuit for the simplest case
if (element.props.length === 1 && value.charCodeAt(0) !== 58
/* colon */
&& !fixedElements.get(parent)) {
return;
} // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
// then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
if (isImplicitRule) {
return;
}
fixedElements.set(element, true);
var points = [];
var rules = getRules(value, points);
var parentRules = parent.props;
for (var i = 0, k = 0; i < rules.length; i++) {
for (var j = 0; j < parentRules.length; j++, k++) {
element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
}
}
};
var removeLabel = function removeLabel(element) {
if (element.type === 'decl') {
var value = element.value;
if ( // charcode for l
value.charCodeAt(0) === 108 && // charcode for b
value.charCodeAt(2) === 98) {
// this ignores label
element["return"] = '';
element.value = '';
}
}
};
var ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';
var isIgnoringComment = function isIgnoringComment(element) {
return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
};
var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) {
return function (element, index, children) {
if (element.type !== 'rule') return;
var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
if (unsafePseudoClasses && cache.compat !== true) {
var prevElement = index > 0 ? children[index - 1] : null;
if (prevElement && isIgnoringComment(last(prevElement.children))) {
return;
}
unsafePseudoClasses.forEach(function (unsafePseudoClass) {
console.error("The pseudo class \"" + unsafePseudoClass + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + unsafePseudoClass.split('-child')[0] + "-of-type\".");
});
}
};
};
var isImportRule = function isImportRule(element) {
return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64;
};
var isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) {
for (var i = index - 1; i >= 0; i--) {
if (!isImportRule(children[i])) {
return true;
}
}
return false;
}; // use this to remove incorrect elements from further processing
// so they don't get handed to the `sheet` (or anything else)
// as that could potentially lead to additional logs which in turn could be overhelming to the user
var nullifyElement = function nullifyElement(element) {
element.type = '';
element.value = '';
element["return"] = '';
element.children = '';
element.props = '';
};
var incorrectImportAlarm = function incorrectImportAlarm(element, index, children) {
if (!isImportRule(element)) {
return;
}
if (element.parent) {
console.error("`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.");
nullifyElement(element);
} else if (isPrependedWithRegularRules(index, children)) {
console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.");
nullifyElement(element);
}
};
var defaultStylisPlugins = [prefixer];
var createCache = function createCache(options) {
var key = options.key;
if (process.env.NODE_ENV !== 'production' && !key) {
throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" + "If multiple caches share the same key they might \"fight\" for each other's style elements.");
}
if ( key === 'css') {
var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
// document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
// note this very very intentionally targets all style elements regardless of the key to ensure
// that creating a cache works inside of render of a React component
Array.prototype.forEach.call(ssrStyles, function (node) {
// we want to only move elements which have a space in the data-emotion attribute value
// because that indicates that it is an Emotion 11 server-side rendered style elements
// while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
// Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
// so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
// will not result in the Emotion 10 styles being destroyed
var dataEmotionAttribute = node.getAttribute('data-emotion');
if (dataEmotionAttribute.indexOf(' ') === -1) {
return;
}
document.head.appendChild(node);
node.setAttribute('data-s', '');
});
}
var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
if (process.env.NODE_ENV !== 'production') {
// $FlowFixMe
if (/[^a-z-]/.test(key)) {
throw new Error("Emotion key must only contain lower case alphabetical characters and - but \"" + key + "\" was passed");
}
}
var inserted = {}; // $FlowFixMe
var container;
var nodesToHydrate = [];
{
container = options.container || document.head;
Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
// means that the style elements we're looking at are only Emotion 11 server-rendered style elements
document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) {
var attrib = node.getAttribute("data-emotion").split(' '); // $FlowFixMe
for (var i = 1; i < attrib.length; i++) {
inserted[attrib[i]] = true;
}
nodesToHydrate.push(node);
});
}
var _insert;
var omnipresentPlugins = [compat, removeLabel];
if (process.env.NODE_ENV !== 'production') {
omnipresentPlugins.push(createUnsafeSelectorsAlarm({
get compat() {
return cache.compat;
}
}), incorrectImportAlarm);
}
{
var currentSheet;
var finalizingPlugins = [stringify, process.env.NODE_ENV !== 'production' ? function (element) {
if (!element.root) {
if (element["return"]) {
currentSheet.insert(element["return"]);
} else if (element.value && element.type !== COMMENT) {
// insert empty rule in non-production environments
// so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet
currentSheet.insert(element.value + "{}");
}
}
} : rulesheet(function (rule) {
currentSheet.insert(rule);
})];
var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
var stylis = function stylis(styles) {
return serialize(compile(styles), serializer);
};
_insert = function insert(selector, serialized, sheet, shouldCache) {
currentSheet = sheet;
if (process.env.NODE_ENV !== 'production' && serialized.map !== undefined) {
currentSheet = {
insert: function insert(rule) {
sheet.insert(rule + serialized.map);
}
};
}
stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
if (shouldCache) {
cache.inserted[serialized.name] = true;
}
};
}
var cache = {
key: key,
sheet: new StyleSheet({
key: key,
container: container,
nonce: options.nonce,
speedy: options.speedy,
prepend: options.prepend
}),
nonce: options.nonce,
inserted: inserted,
registered: {},
insert: _insert
};
cache.sheet.hydrate(nodesToHydrate);
return cache;
};
export default createCache;

View file

@ -0,0 +1,381 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var sheet = require('@emotion/sheet');
var stylis = require('stylis');
var weakMemoize = require('@emotion/weak-memoize');
var memoize = require('@emotion/memoize');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var weakMemoize__default = /*#__PURE__*/_interopDefault(weakMemoize);
var memoize__default = /*#__PURE__*/_interopDefault(memoize);
var last = function last(arr) {
return arr.length ? arr[arr.length - 1] : null;
};
var toRules = function toRules(parsed, points) {
// pretend we've started with a comma
var index = -1;
var character = 44;
do {
switch (stylis.token(character)) {
case 0:
// &\f
if (character === 38 && stylis.peek() === 12) {
// this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
// stylis inserts \f after & to know when & where it should replace this sequence with the context selector
// and when it should just concatenate the outer and inner selectors
// it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
points[index] = 1;
}
parsed[index] += stylis.identifier(stylis.position - 1);
break;
case 2:
parsed[index] += stylis.delimit(character);
break;
case 4:
// comma
if (character === 44) {
// colon
parsed[++index] = stylis.peek() === 58 ? '&\f' : '';
points[index] = parsed[index].length;
break;
}
// fallthrough
default:
parsed[index] += stylis.from(character);
}
} while (character = stylis.next());
return parsed;
};
var getRules = function getRules(value, points) {
return stylis.dealloc(toRules(stylis.alloc(value), points));
}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
var fixedElements = /* #__PURE__ */new WeakMap();
var compat = function compat(element) {
if (element.type !== 'rule' || !element.parent || // .length indicates if this rule contains pseudo or not
!element.length) {
return;
}
var value = element.value,
parent = element.parent;
var isImplicitRule = element.column === parent.column && element.line === parent.line;
while (parent.type !== 'rule') {
parent = parent.parent;
if (!parent) return;
} // short-circuit for the simplest case
if (element.props.length === 1 && value.charCodeAt(0) !== 58
/* colon */
&& !fixedElements.get(parent)) {
return;
} // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
// then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
if (isImplicitRule) {
return;
}
fixedElements.set(element, true);
var points = [];
var rules = getRules(value, points);
var parentRules = parent.props;
for (var i = 0, k = 0; i < rules.length; i++) {
for (var j = 0; j < parentRules.length; j++, k++) {
element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
}
}
};
var removeLabel = function removeLabel(element) {
if (element.type === 'decl') {
var value = element.value;
if ( // charcode for l
value.charCodeAt(0) === 108 && // charcode for b
value.charCodeAt(2) === 98) {
// this ignores label
element["return"] = '';
element.value = '';
}
}
};
var ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';
var isIgnoringComment = function isIgnoringComment(element) {
return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
};
var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) {
return function (element, index, children) {
if (element.type !== 'rule') return;
var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
if (unsafePseudoClasses && cache.compat !== true) {
var prevElement = index > 0 ? children[index - 1] : null;
if (prevElement && isIgnoringComment(last(prevElement.children))) {
return;
}
unsafePseudoClasses.forEach(function (unsafePseudoClass) {
console.error("The pseudo class \"" + unsafePseudoClass + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + unsafePseudoClass.split('-child')[0] + "-of-type\".");
});
}
};
};
var isImportRule = function isImportRule(element) {
return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64;
};
var isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) {
for (var i = index - 1; i >= 0; i--) {
if (!isImportRule(children[i])) {
return true;
}
}
return false;
}; // use this to remove incorrect elements from further processing
// so they don't get handed to the `sheet` (or anything else)
// as that could potentially lead to additional logs which in turn could be overhelming to the user
var nullifyElement = function nullifyElement(element) {
element.type = '';
element.value = '';
element["return"] = '';
element.children = '';
element.props = '';
};
var incorrectImportAlarm = function incorrectImportAlarm(element, index, children) {
if (!isImportRule(element)) {
return;
}
if (element.parent) {
console.error("`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.");
nullifyElement(element);
} else if (isPrependedWithRegularRules(index, children)) {
console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.");
nullifyElement(element);
}
};
var isBrowser = typeof document !== 'undefined';
var getServerStylisCache = isBrowser ? undefined : weakMemoize__default['default'](function () {
return memoize__default['default'](function () {
var cache = {};
return function (name) {
return cache[name];
};
});
});
var defaultStylisPlugins = [stylis.prefixer];
var createCache = function createCache(options) {
var key = options.key;
if (process.env.NODE_ENV !== 'production' && !key) {
throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" + "If multiple caches share the same key they might \"fight\" for each other's style elements.");
}
if (isBrowser && key === 'css') {
var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
// document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
// note this very very intentionally targets all style elements regardless of the key to ensure
// that creating a cache works inside of render of a React component
Array.prototype.forEach.call(ssrStyles, function (node) {
// we want to only move elements which have a space in the data-emotion attribute value
// because that indicates that it is an Emotion 11 server-side rendered style elements
// while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
// Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
// so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
// will not result in the Emotion 10 styles being destroyed
var dataEmotionAttribute = node.getAttribute('data-emotion');
if (dataEmotionAttribute.indexOf(' ') === -1) {
return;
}
document.head.appendChild(node);
node.setAttribute('data-s', '');
});
}
var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
if (process.env.NODE_ENV !== 'production') {
// $FlowFixMe
if (/[^a-z-]/.test(key)) {
throw new Error("Emotion key must only contain lower case alphabetical characters and - but \"" + key + "\" was passed");
}
}
var inserted = {}; // $FlowFixMe
var container;
var nodesToHydrate = [];
if (isBrowser) {
container = options.container || document.head;
Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
// means that the style elements we're looking at are only Emotion 11 server-rendered style elements
document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) {
var attrib = node.getAttribute("data-emotion").split(' '); // $FlowFixMe
for (var i = 1; i < attrib.length; i++) {
inserted[attrib[i]] = true;
}
nodesToHydrate.push(node);
});
}
var _insert;
var omnipresentPlugins = [compat, removeLabel];
if (process.env.NODE_ENV !== 'production') {
omnipresentPlugins.push(createUnsafeSelectorsAlarm({
get compat() {
return cache.compat;
}
}), incorrectImportAlarm);
}
if (isBrowser) {
var currentSheet;
var finalizingPlugins = [stylis.stringify, process.env.NODE_ENV !== 'production' ? function (element) {
if (!element.root) {
if (element["return"]) {
currentSheet.insert(element["return"]);
} else if (element.value && element.type !== stylis.COMMENT) {
// insert empty rule in non-production environments
// so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet
currentSheet.insert(element.value + "{}");
}
}
} : stylis.rulesheet(function (rule) {
currentSheet.insert(rule);
})];
var serializer = stylis.middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
var stylis$1 = function stylis$1(styles) {
return stylis.serialize(stylis.compile(styles), serializer);
};
_insert = function insert(selector, serialized, sheet, shouldCache) {
currentSheet = sheet;
if (process.env.NODE_ENV !== 'production' && serialized.map !== undefined) {
currentSheet = {
insert: function insert(rule) {
sheet.insert(rule + serialized.map);
}
};
}
stylis$1(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
if (shouldCache) {
cache.inserted[serialized.name] = true;
}
};
} else {
var _finalizingPlugins = [stylis.stringify];
var _serializer = stylis.middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
var _stylis = function _stylis(styles) {
return stylis.serialize(stylis.compile(styles), _serializer);
}; // $FlowFixMe
var serverStylisCache = getServerStylisCache(stylisPlugins)(key);
var getRules = function getRules(selector, serialized) {
var name = serialized.name;
if (serverStylisCache[name] === undefined) {
serverStylisCache[name] = _stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
}
return serverStylisCache[name];
};
_insert = function _insert(selector, serialized, sheet, shouldCache) {
var name = serialized.name;
var rules = getRules(selector, serialized);
if (cache.compat === undefined) {
// in regular mode, we don't set the styles on the inserted cache
// since we don't need to and that would be wasting memory
// we return them so that they are rendered in a style tag
if (shouldCache) {
cache.inserted[name] = true;
}
if ( // using === development instead of !== production
// because if people do ssr in tests, the source maps showing up would be annoying
process.env.NODE_ENV === 'development' && serialized.map !== undefined) {
return rules + serialized.map;
}
return rules;
} else {
// in compat mode, we put the styles on the inserted cache so
// that emotion-server can pull out the styles
// except when we don't want to cache it which was in Global but now
// is nowhere but we don't want to do a major right now
// and just in case we're going to leave the case here
// it's also not affecting client side bundle size
// so it's really not a big deal
if (shouldCache) {
cache.inserted[name] = rules;
} else {
return rules;
}
}
};
}
var cache = {
key: key,
sheet: new sheet.StyleSheet({
key: key,
container: container,
nonce: options.nonce,
speedy: options.speedy,
prepend: options.prepend
}),
nonce: options.nonce,
inserted: inserted,
registered: {},
insert: _insert
};
cache.sheet.hydrate(nodesToHydrate);
return cache;
};
exports.default = createCache;

View file

@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === "production") {
module.exports = require("./emotion-cache.cjs.prod.js");
} else {
module.exports = require("./emotion-cache.cjs.dev.js");
}

View file

@ -0,0 +1,3 @@
// @flow
export * from "../src/index.js";
export { default } from "../src/index.js";

View file

@ -0,0 +1,144 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
});
var sheet = require("@emotion/sheet"), stylis = require("stylis"), weakMemoize = require("@emotion/weak-memoize"), memoize = require("@emotion/memoize");
function _interopDefault(e) {
return e && e.__esModule ? e : {
default: e
};
}
var weakMemoize__default = _interopDefault(weakMemoize), memoize__default = _interopDefault(memoize), last = function(arr) {
return arr.length ? arr[arr.length - 1] : null;
}, toRules = function(parsed, points) {
var index = -1, character = 44;
do {
switch (stylis.token(character)) {
case 0:
38 === character && 12 === stylis.peek() && (points[index] = 1), parsed[index] += stylis.identifier(stylis.position - 1);
break;
case 2:
parsed[index] += stylis.delimit(character);
break;
case 4:
if (44 === character) {
parsed[++index] = 58 === stylis.peek() ? "&\f" : "", points[index] = parsed[index].length;
break;
}
default:
parsed[index] += stylis.from(character);
}
} while (character = stylis.next());
return parsed;
}, getRules = function(value, points) {
return stylis.dealloc(toRules(stylis.alloc(value), points));
}, fixedElements = new WeakMap, compat = function(element) {
if ("rule" === element.type && element.parent && element.length) {
for (var value = element.value, parent = element.parent, isImplicitRule = element.column === parent.column && element.line === parent.line; "rule" !== parent.type; ) if (!(parent = parent.parent)) return;
if ((1 !== element.props.length || 58 === value.charCodeAt(0) || fixedElements.get(parent)) && !isImplicitRule) {
fixedElements.set(element, !0);
for (var points = [], rules = getRules(value, points), parentRules = parent.props, i = 0, k = 0; i < rules.length; i++) for (var j = 0; j < parentRules.length; j++,
k++) element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
}
}
}, removeLabel = function(element) {
if ("decl" === element.type) {
var value = element.value;
108 === value.charCodeAt(0) && 98 === value.charCodeAt(2) && (element.return = "",
element.value = "");
}
}, ignoreFlag = "emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason", isIgnoringComment = function(element) {
return !!element && "comm" === element.type && element.children.indexOf(ignoreFlag) > -1;
}, createUnsafeSelectorsAlarm = function(cache) {
return function(element, index, children) {
if ("rule" === element.type) {
var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
if (unsafePseudoClasses && !0 !== cache.compat) {
var prevElement = index > 0 ? children[index - 1] : null;
if (prevElement && isIgnoringComment(last(prevElement.children))) return;
unsafePseudoClasses.forEach((function(unsafePseudoClass) {
console.error('The pseudo class "' + unsafePseudoClass + '" is potentially unsafe when doing server-side rendering. Try changing it to "' + unsafePseudoClass.split("-child")[0] + '-of-type".');
}));
}
}
};
}, isImportRule = function(element) {
return 105 === element.type.charCodeAt(1) && 64 === element.type.charCodeAt(0);
}, isPrependedWithRegularRules = function(index, children) {
for (var i = index - 1; i >= 0; i--) if (!isImportRule(children[i])) return !0;
return !1;
}, nullifyElement = function(element) {
element.type = "", element.value = "", element.return = "", element.children = "",
element.props = "";
}, incorrectImportAlarm = function(element, index, children) {
isImportRule(element) && (element.parent ? (console.error("`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles."),
nullifyElement(element)) : isPrependedWithRegularRules(index, children) && (console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules."),
nullifyElement(element)));
}, isBrowser = "undefined" != typeof document, getServerStylisCache = isBrowser ? void 0 : weakMemoize__default.default((function() {
return memoize__default.default((function() {
var cache = {};
return function(name) {
return cache[name];
};
}));
})), defaultStylisPlugins = [ stylis.prefixer ], createCache = function(options) {
var key = options.key;
if (isBrowser && "css" === key) {
var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])");
Array.prototype.forEach.call(ssrStyles, (function(node) {
-1 !== node.getAttribute("data-emotion").indexOf(" ") && (document.head.appendChild(node),
node.setAttribute("data-s", ""));
}));
}
var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
var container, _insert, inserted = {}, nodesToHydrate = [];
isBrowser && (container = options.container || document.head, Array.prototype.forEach.call(document.querySelectorAll('style[data-emotion^="' + key + ' "]'), (function(node) {
for (var attrib = node.getAttribute("data-emotion").split(" "), i = 1; i < attrib.length; i++) inserted[attrib[i]] = !0;
nodesToHydrate.push(node);
})));
var omnipresentPlugins = [ compat, removeLabel ];
if (isBrowser) {
var currentSheet, finalizingPlugins = [ stylis.stringify, stylis.rulesheet((function(rule) {
currentSheet.insert(rule);
})) ], serializer = stylis.middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
_insert = function(selector, serialized, sheet, shouldCache) {
var styles;
currentSheet = sheet, styles = selector ? selector + "{" + serialized.styles + "}" : serialized.styles,
stylis.serialize(stylis.compile(styles), serializer), shouldCache && (cache.inserted[serialized.name] = !0);
};
} else {
var _finalizingPlugins = [ stylis.stringify ], _serializer = stylis.middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins)), serverStylisCache = getServerStylisCache(stylisPlugins)(key), getRules = function(selector, serialized) {
var styles, name = serialized.name;
return void 0 === serverStylisCache[name] && (serverStylisCache[name] = (styles = selector ? selector + "{" + serialized.styles + "}" : serialized.styles,
stylis.serialize(stylis.compile(styles), _serializer))), serverStylisCache[name];
};
_insert = function(selector, serialized, sheet, shouldCache) {
var name = serialized.name, rules = getRules(selector, serialized);
return void 0 === cache.compat ? (shouldCache && (cache.inserted[name] = !0), rules) : shouldCache ? void (cache.inserted[name] = rules) : rules;
};
}
var cache = {
key: key,
sheet: new sheet.StyleSheet({
key: key,
container: container,
nonce: options.nonce,
speedy: options.speedy,
prepend: options.prepend
}),
nonce: options.nonce,
inserted: inserted,
registered: {},
insert: _insert
};
return cache.sheet.hydrate(nodesToHydrate), cache;
};
exports.default = createCache;

View file

@ -0,0 +1,372 @@
import { StyleSheet } from '@emotion/sheet';
import { dealloc, alloc, next, token, from, peek, delimit, identifier, position, stringify, COMMENT, rulesheet, middleware, prefixer, serialize, compile } from 'stylis';
import weakMemoize from '@emotion/weak-memoize';
import memoize from '@emotion/memoize';
var last = function last(arr) {
return arr.length ? arr[arr.length - 1] : null;
};
var toRules = function toRules(parsed, points) {
// pretend we've started with a comma
var index = -1;
var character = 44;
do {
switch (token(character)) {
case 0:
// &\f
if (character === 38 && peek() === 12) {
// this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
// stylis inserts \f after & to know when & where it should replace this sequence with the context selector
// and when it should just concatenate the outer and inner selectors
// it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
points[index] = 1;
}
parsed[index] += identifier(position - 1);
break;
case 2:
parsed[index] += delimit(character);
break;
case 4:
// comma
if (character === 44) {
// colon
parsed[++index] = peek() === 58 ? '&\f' : '';
points[index] = parsed[index].length;
break;
}
// fallthrough
default:
parsed[index] += from(character);
}
} while (character = next());
return parsed;
};
var getRules = function getRules(value, points) {
return dealloc(toRules(alloc(value), points));
}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
var fixedElements = /* #__PURE__ */new WeakMap();
var compat = function compat(element) {
if (element.type !== 'rule' || !element.parent || // .length indicates if this rule contains pseudo or not
!element.length) {
return;
}
var value = element.value,
parent = element.parent;
var isImplicitRule = element.column === parent.column && element.line === parent.line;
while (parent.type !== 'rule') {
parent = parent.parent;
if (!parent) return;
} // short-circuit for the simplest case
if (element.props.length === 1 && value.charCodeAt(0) !== 58
/* colon */
&& !fixedElements.get(parent)) {
return;
} // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
// then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
if (isImplicitRule) {
return;
}
fixedElements.set(element, true);
var points = [];
var rules = getRules(value, points);
var parentRules = parent.props;
for (var i = 0, k = 0; i < rules.length; i++) {
for (var j = 0; j < parentRules.length; j++, k++) {
element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
}
}
};
var removeLabel = function removeLabel(element) {
if (element.type === 'decl') {
var value = element.value;
if ( // charcode for l
value.charCodeAt(0) === 108 && // charcode for b
value.charCodeAt(2) === 98) {
// this ignores label
element["return"] = '';
element.value = '';
}
}
};
var ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';
var isIgnoringComment = function isIgnoringComment(element) {
return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
};
var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) {
return function (element, index, children) {
if (element.type !== 'rule') return;
var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
if (unsafePseudoClasses && cache.compat !== true) {
var prevElement = index > 0 ? children[index - 1] : null;
if (prevElement && isIgnoringComment(last(prevElement.children))) {
return;
}
unsafePseudoClasses.forEach(function (unsafePseudoClass) {
console.error("The pseudo class \"" + unsafePseudoClass + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + unsafePseudoClass.split('-child')[0] + "-of-type\".");
});
}
};
};
var isImportRule = function isImportRule(element) {
return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64;
};
var isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) {
for (var i = index - 1; i >= 0; i--) {
if (!isImportRule(children[i])) {
return true;
}
}
return false;
}; // use this to remove incorrect elements from further processing
// so they don't get handed to the `sheet` (or anything else)
// as that could potentially lead to additional logs which in turn could be overhelming to the user
var nullifyElement = function nullifyElement(element) {
element.type = '';
element.value = '';
element["return"] = '';
element.children = '';
element.props = '';
};
var incorrectImportAlarm = function incorrectImportAlarm(element, index, children) {
if (!isImportRule(element)) {
return;
}
if (element.parent) {
console.error("`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.");
nullifyElement(element);
} else if (isPrependedWithRegularRules(index, children)) {
console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.");
nullifyElement(element);
}
};
var isBrowser = typeof document !== 'undefined';
var getServerStylisCache = isBrowser ? undefined : weakMemoize(function () {
return memoize(function () {
var cache = {};
return function (name) {
return cache[name];
};
});
});
var defaultStylisPlugins = [prefixer];
var createCache = function createCache(options) {
var key = options.key;
if (process.env.NODE_ENV !== 'production' && !key) {
throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" + "If multiple caches share the same key they might \"fight\" for each other's style elements.");
}
if (isBrowser && key === 'css') {
var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
// document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
// note this very very intentionally targets all style elements regardless of the key to ensure
// that creating a cache works inside of render of a React component
Array.prototype.forEach.call(ssrStyles, function (node) {
// we want to only move elements which have a space in the data-emotion attribute value
// because that indicates that it is an Emotion 11 server-side rendered style elements
// while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
// Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
// so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
// will not result in the Emotion 10 styles being destroyed
var dataEmotionAttribute = node.getAttribute('data-emotion');
if (dataEmotionAttribute.indexOf(' ') === -1) {
return;
}
document.head.appendChild(node);
node.setAttribute('data-s', '');
});
}
var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
if (process.env.NODE_ENV !== 'production') {
// $FlowFixMe
if (/[^a-z-]/.test(key)) {
throw new Error("Emotion key must only contain lower case alphabetical characters and - but \"" + key + "\" was passed");
}
}
var inserted = {}; // $FlowFixMe
var container;
var nodesToHydrate = [];
if (isBrowser) {
container = options.container || document.head;
Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
// means that the style elements we're looking at are only Emotion 11 server-rendered style elements
document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) {
var attrib = node.getAttribute("data-emotion").split(' '); // $FlowFixMe
for (var i = 1; i < attrib.length; i++) {
inserted[attrib[i]] = true;
}
nodesToHydrate.push(node);
});
}
var _insert;
var omnipresentPlugins = [compat, removeLabel];
if (process.env.NODE_ENV !== 'production') {
omnipresentPlugins.push(createUnsafeSelectorsAlarm({
get compat() {
return cache.compat;
}
}), incorrectImportAlarm);
}
if (isBrowser) {
var currentSheet;
var finalizingPlugins = [stringify, process.env.NODE_ENV !== 'production' ? function (element) {
if (!element.root) {
if (element["return"]) {
currentSheet.insert(element["return"]);
} else if (element.value && element.type !== COMMENT) {
// insert empty rule in non-production environments
// so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet
currentSheet.insert(element.value + "{}");
}
}
} : rulesheet(function (rule) {
currentSheet.insert(rule);
})];
var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
var stylis = function stylis(styles) {
return serialize(compile(styles), serializer);
};
_insert = function insert(selector, serialized, sheet, shouldCache) {
currentSheet = sheet;
if (process.env.NODE_ENV !== 'production' && serialized.map !== undefined) {
currentSheet = {
insert: function insert(rule) {
sheet.insert(rule + serialized.map);
}
};
}
stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
if (shouldCache) {
cache.inserted[serialized.name] = true;
}
};
} else {
var _finalizingPlugins = [stringify];
var _serializer = middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
var _stylis = function _stylis(styles) {
return serialize(compile(styles), _serializer);
}; // $FlowFixMe
var serverStylisCache = getServerStylisCache(stylisPlugins)(key);
var getRules = function getRules(selector, serialized) {
var name = serialized.name;
if (serverStylisCache[name] === undefined) {
serverStylisCache[name] = _stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
}
return serverStylisCache[name];
};
_insert = function _insert(selector, serialized, sheet, shouldCache) {
var name = serialized.name;
var rules = getRules(selector, serialized);
if (cache.compat === undefined) {
// in regular mode, we don't set the styles on the inserted cache
// since we don't need to and that would be wasting memory
// we return them so that they are rendered in a style tag
if (shouldCache) {
cache.inserted[name] = true;
}
if ( // using === development instead of !== production
// because if people do ssr in tests, the source maps showing up would be annoying
process.env.NODE_ENV === 'development' && serialized.map !== undefined) {
return rules + serialized.map;
}
return rules;
} else {
// in compat mode, we put the styles on the inserted cache so
// that emotion-server can pull out the styles
// except when we don't want to cache it which was in Global but now
// is nowhere but we don't want to do a major right now
// and just in case we're going to leave the case here
// it's also not affecting client side bundle size
// so it's really not a big deal
if (shouldCache) {
cache.inserted[name] = rules;
} else {
return rules;
}
}
};
}
var cache = {
key: key,
sheet: new StyleSheet({
key: key,
container: container,
nonce: options.nonce,
speedy: options.speedy,
prepend: options.prepend
}),
nonce: options.nonce,
inserted: inserted,
registered: {},
insert: _insert
};
cache.sheet.hydrate(nodesToHydrate);
return cache;
};
export default createCache;

View file

@ -0,0 +1,36 @@
{
"name": "@emotion/cache",
"version": "11.4.0",
"description": "emotion's cache",
"main": "dist/emotion-cache.cjs.js",
"module": "dist/emotion-cache.esm.js",
"browser": {
"./dist/emotion-cache.cjs.js": "./dist/emotion-cache.browser.cjs.js",
"./dist/emotion-cache.esm.js": "./dist/emotion-cache.browser.esm.js"
},
"types": "types/index.d.ts",
"license": "MIT",
"repository": "https://github.com/emotion-js/emotion/tree/main/packages/cache",
"scripts": {
"test:typescript": "dtslint types"
},
"dependencies": {
"@emotion/memoize": "^0.7.4",
"@emotion/sheet": "^1.0.0",
"@emotion/utils": "^1.0.0",
"@emotion/weak-memoize": "^0.2.5",
"stylis": "^4.0.3"
},
"devDependencies": {
"@emotion/hash": "*",
"dtslint": "^0.3.0"
},
"publishConfig": {
"access": "public"
},
"files": [
"src",
"dist",
"types/*.d.ts"
]
}

View file

@ -0,0 +1,268 @@
// @flow
import { StyleSheet } from '@emotion/sheet'
import { type EmotionCache, type SerializedStyles } from '@emotion/utils'
import {
serialize,
compile,
middleware,
rulesheet,
stringify,
prefixer,
COMMENT
} from 'stylis'
import weakMemoize from '@emotion/weak-memoize'
import memoize from '@emotion/memoize'
import {
compat,
removeLabel,
createUnsafeSelectorsAlarm,
incorrectImportAlarm
} from './stylis-plugins'
import type { StylisPlugin } from './types'
let isBrowser = typeof document !== 'undefined'
export type Options = {
nonce?: string,
stylisPlugins?: StylisPlugin[],
key: string,
container?: HTMLElement,
speedy?: boolean,
prepend?: boolean
}
let getServerStylisCache = isBrowser
? undefined
: weakMemoize(() =>
memoize(() => {
let cache = {}
return name => cache[name]
})
)
const defaultStylisPlugins = [prefixer]
let createCache = (options: Options): EmotionCache => {
let key = options.key
if (process.env.NODE_ENV !== 'production' && !key) {
throw new Error(
"You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" +
`If multiple caches share the same key they might "fight" for each other's style elements.`
)
}
if (isBrowser && key === 'css') {
const ssrStyles = document.querySelectorAll(
`style[data-emotion]:not([data-s])`
)
// get SSRed styles out of the way of React's hydration
// document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
// note this very very intentionally targets all style elements regardless of the key to ensure
// that creating a cache works inside of render of a React component
Array.prototype.forEach.call(ssrStyles, (node: HTMLStyleElement) => {
// we want to only move elements which have a space in the data-emotion attribute value
// because that indicates that it is an Emotion 11 server-side rendered style elements
// while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
// Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
// so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
// will not result in the Emotion 10 styles being destroyed
const dataEmotionAttribute = ((node.getAttribute(
'data-emotion'
): any): string)
if (dataEmotionAttribute.indexOf(' ') === -1) {
return
}
;((document.head: any): HTMLHeadElement).appendChild(node)
node.setAttribute('data-s', '')
})
}
const stylisPlugins = options.stylisPlugins || defaultStylisPlugins
if (process.env.NODE_ENV !== 'production') {
// $FlowFixMe
if (/[^a-z-]/.test(key)) {
throw new Error(
`Emotion key must only contain lower case alphabetical characters and - but "${key}" was passed`
)
}
}
let inserted = {}
// $FlowFixMe
let container: HTMLElement
const nodesToHydrate = []
if (isBrowser) {
container = options.container || ((document.head: any): HTMLHeadElement)
Array.prototype.forEach.call(
// this means we will ignore elements which don't have a space in them which
// means that the style elements we're looking at are only Emotion 11 server-rendered style elements
document.querySelectorAll(`style[data-emotion^="${key} "]`),
(node: HTMLStyleElement) => {
const attrib = ((node.getAttribute(`data-emotion`): any): string).split(
' '
)
// $FlowFixMe
for (let i = 1; i < attrib.length; i++) {
inserted[attrib[i]] = true
}
nodesToHydrate.push(node)
}
)
}
let insert: (
selector: string,
serialized: SerializedStyles,
sheet: StyleSheet,
shouldCache: boolean
) => string | void
const omnipresentPlugins = [compat, removeLabel]
if (process.env.NODE_ENV !== 'production') {
omnipresentPlugins.push(
createUnsafeSelectorsAlarm({
get compat() {
return cache.compat
}
}),
incorrectImportAlarm
)
}
if (isBrowser) {
let currentSheet
const finalizingPlugins = [
stringify,
process.env.NODE_ENV !== 'production'
? element => {
if (!element.root) {
if (element.return) {
currentSheet.insert(element.return)
} else if (element.value && element.type !== COMMENT) {
// insert empty rule in non-production environments
// so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet
currentSheet.insert(`${element.value}{}`)
}
}
}
: rulesheet(rule => {
currentSheet.insert(rule)
})
]
const serializer = middleware(
omnipresentPlugins.concat(stylisPlugins, finalizingPlugins)
)
const stylis = styles => serialize(compile(styles), serializer)
insert = (
selector: string,
serialized: SerializedStyles,
sheet: StyleSheet,
shouldCache: boolean
): void => {
currentSheet = sheet
if (
process.env.NODE_ENV !== 'production' &&
serialized.map !== undefined
) {
currentSheet = {
insert: (rule: string) => {
sheet.insert(rule + ((serialized.map: any): string))
}
}
}
stylis(selector ? `${selector}{${serialized.styles}}` : serialized.styles)
if (shouldCache) {
cache.inserted[serialized.name] = true
}
}
} else {
const finalizingPlugins = [stringify]
const serializer = middleware(
omnipresentPlugins.concat(stylisPlugins, finalizingPlugins)
)
const stylis = styles => serialize(compile(styles), serializer)
// $FlowFixMe
let serverStylisCache = getServerStylisCache(stylisPlugins)(key)
let getRules = (selector: string, serialized: SerializedStyles): string => {
let name = serialized.name
if (serverStylisCache[name] === undefined) {
serverStylisCache[name] = stylis(
selector ? `${selector}{${serialized.styles}}` : serialized.styles
)
}
return serverStylisCache[name]
}
insert = (
selector: string,
serialized: SerializedStyles,
sheet: StyleSheet,
shouldCache: boolean
): string | void => {
let name = serialized.name
let rules = getRules(selector, serialized)
if (cache.compat === undefined) {
// in regular mode, we don't set the styles on the inserted cache
// since we don't need to and that would be wasting memory
// we return them so that they are rendered in a style tag
if (shouldCache) {
cache.inserted[name] = true
}
if (
// using === development instead of !== production
// because if people do ssr in tests, the source maps showing up would be annoying
process.env.NODE_ENV === 'development' &&
serialized.map !== undefined
) {
return rules + serialized.map
}
return rules
} else {
// in compat mode, we put the styles on the inserted cache so
// that emotion-server can pull out the styles
// except when we don't want to cache it which was in Global but now
// is nowhere but we don't want to do a major right now
// and just in case we're going to leave the case here
// it's also not affecting client side bundle size
// so it's really not a big deal
if (shouldCache) {
cache.inserted[name] = rules
} else {
return rules
}
}
}
}
const cache: EmotionCache = {
key,
sheet: new StyleSheet({
key,
container: ((container: any): HTMLElement),
nonce: options.nonce,
speedy: options.speedy,
prepend: options.prepend
}),
nonce: options.nonce,
inserted,
registered: {},
insert
}
cache.sheet.hydrate(nodesToHydrate)
return cache
}
export default createCache

View file

@ -0,0 +1,194 @@
import {
compile,
alloc,
dealloc,
next,
delimit,
token,
char,
from,
identifier,
peek,
position
} from 'stylis'
const last = arr => (arr.length ? arr[arr.length - 1] : null)
const toRules = (parsed, points) => {
// pretend we've started with a comma
let index = -1
let character = 44
do {
switch (token(character)) {
case 0:
// &\f
if (character === 38 && peek() === 12) {
// this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
// stylis inserts \f after & to know when & where it should replace this sequence with the context selector
// and when it should just concatenate the outer and inner selectors
// it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
points[index] = 1
}
parsed[index] += identifier(position - 1)
break
case 2:
parsed[index] += delimit(character)
break
case 4:
// comma
if (character === 44) {
// colon
parsed[++index] = peek() === 58 ? '&\f' : ''
points[index] = parsed[index].length
break
}
// fallthrough
default:
parsed[index] += from(character)
}
} while ((character = next()))
return parsed
}
const getRules = (value, points) => dealloc(toRules(alloc(value), points))
// WeakSet would be more appropriate, but only WeakMap is supported in IE11
const fixedElements = /* #__PURE__ */ new WeakMap()
export let compat = element => {
if (
element.type !== 'rule' ||
!element.parent ||
// .length indicates if this rule contains pseudo or not
!element.length
) {
return
}
let { value, parent } = element
let isImplicitRule =
element.column === parent.column && element.line === parent.line
while (parent.type !== 'rule') {
parent = parent.parent
if (!parent) return
}
// short-circuit for the simplest case
if (
element.props.length === 1 &&
value.charCodeAt(0) !== 58 /* colon */ &&
!fixedElements.get(parent)
) {
return
}
// if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
// then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
if (isImplicitRule) {
return
}
fixedElements.set(element, true)
const points = []
const rules = getRules(value, points)
const parentRules = parent.props
for (let i = 0, k = 0; i < rules.length; i++) {
for (let j = 0; j < parentRules.length; j++, k++) {
element.props[k] = points[i]
? rules[i].replace(/&\f/g, parentRules[j])
: `${parentRules[j]} ${rules[i]}`
}
}
}
export let removeLabel = element => {
if (element.type === 'decl') {
var value = element.value
if (
// charcode for l
value.charCodeAt(0) === 108 &&
// charcode for b
value.charCodeAt(2) === 98
) {
// this ignores label
element.return = ''
element.value = ''
}
}
}
const ignoreFlag =
'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason'
const isIgnoringComment = element =>
!!element &&
element.type === 'comm' &&
element.children.indexOf(ignoreFlag) > -1
export let createUnsafeSelectorsAlarm = cache => (element, index, children) => {
if (element.type !== 'rule') return
const unsafePseudoClasses = element.value.match(
/(:first|:nth|:nth-last)-child/g
)
if (unsafePseudoClasses && cache.compat !== true) {
const prevElement = index > 0 ? children[index - 1] : null
if (prevElement && isIgnoringComment(last(prevElement.children))) {
return
}
unsafePseudoClasses.forEach(unsafePseudoClass => {
console.error(
`The pseudo class "${unsafePseudoClass}" is potentially unsafe when doing server-side rendering. Try changing it to "${
unsafePseudoClass.split('-child')[0]
}-of-type".`
)
})
}
}
let isImportRule = element =>
element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64
const isPrependedWithRegularRules = (index, children) => {
for (let i = index - 1; i >= 0; i--) {
if (!isImportRule(children[i])) {
return true
}
}
return false
}
// use this to remove incorrect elements from further processing
// so they don't get handed to the `sheet` (or anything else)
// as that could potentially lead to additional logs which in turn could be overhelming to the user
const nullifyElement = element => {
element.type = ''
element.value = ''
element.return = ''
element.children = ''
element.props = ''
}
export let incorrectImportAlarm = (element, index, children) => {
if (!isImportRule(element)) {
return
}
if (element.parent) {
console.error(
"`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles."
)
nullifyElement(element)
} else if (isPrependedWithRegularRules(index, children)) {
console.error(
"`@import` rules can't be after other rules. Please put your `@import` rules before your other rules."
)
nullifyElement(element)
}
}

View file

@ -0,0 +1,26 @@
// @flow
export type StylisElement = {
type: string,
value: string,
props: Array<string>,
root: StylisElement | null,
children: Array<StylisElement>,
line: number,
column: number,
length: number,
return: string
}
export type StylisPluginCallback = (
element: StylisElement,
index: number,
children: Array<StylisElement>,
callback: StylisPluginCallback
) => string | void
export type StylisPlugin = (
element: StylisElement,
index: number,
children: Array<StylisElement>,
callback: StylisPluginCallback
) => string | void

View file

@ -0,0 +1,41 @@
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
// TypeScript Version: 2.2
import { EmotionCache } from '@emotion/utils'
export { EmotionCache }
export interface StylisElement {
type: string
value: string
props: Array<string>
root: StylisElement | null
children: Array<StylisElement>
line: number
column: number
length: number
return: string
}
export type StylisPluginCallback = (
element: StylisElement,
index: number,
children: Array<StylisElement>,
callback: StylisPluginCallback
) => string | undefined
export type StylisPlugin = (
element: StylisElement,
index: number,
children: Array<StylisElement>,
callback: StylisPluginCallback
) => string | undefined
export interface Options {
nonce?: string
stylisPlugins?: Array<StylisPlugin>
key: string
container?: HTMLElement
speedy?: boolean
prepend?: boolean
}
export default function createCache(options: Options): EmotionCache

View file

@ -0,0 +1,217 @@
# @emotion/serialize
## 1.0.2
### Patch Changes
- [`662f0e0f`](https://github.com/emotion-js/emotion/commit/662f0e0f888c8e80cf6b2d68b52ff1bb84cbdde5) [#2335](https://github.com/emotion-js/emotion/pull/2335) Thanks [@iChenLei](https://github.com/iChenLei)! - Fixed appending manual labels to Babel-optimized style objects.
* [`830dd0e6`](https://github.com/emotion-js/emotion/commit/830dd0e6d071c98bc0b4b0ecc99dd21a93f057b9) [#2279](https://github.com/emotion-js/emotion/pull/2279) Thanks [@lucasweng](https://github.com/lucasweng)! - Fixed the issue with incorrectly throwing errors on valid content values containing `open-quote`.
## 1.0.1
### Patch Changes
- [`418daad9`](https://github.com/emotion-js/emotion/commit/418daad9f7ac0eac88f206e3c4aee4e7aca7deb4) [#2264](https://github.com/emotion-js/emotion/pull/2264) Thanks [@lucasweng](https://github.com/lucasweng)! - Fix incorrectly throwing error on the gradient content values
## 1.0.0
### Major Changes
- [`c6431074`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b) [#1609](https://github.com/emotion-js/emotion/pull/1609) Thanks [@tomsseisums](https://github.com/tomsseisums)! - Reworked `Interpolation`-related types. Correct types should now be provided to all flavours of Emotion.
### Minor Changes
- [`5d692a6a`](https://github.com/emotion-js/emotion/commit/5d692a6a8102b3faabefb773dd0145b123668a07) [#1956](https://github.com/emotion-js/emotion/pull/1956) Thanks [@eps1lon](https://github.com/eps1lon)! - Upgraded [`csstype`](https://www.npmjs.com/package/csstype) dependency to its v3. This is what we use to provide TypeScript typings for object styles. The upgrade should not affect any consuming code but it's worth mentioning if any edge case scenarios arise.
### Patch Changes
- [`e3d7db87`](https://github.com/emotion-js/emotion/commit/e3d7db87deaac95817404760112417ac1fa1b56d) [#1732](https://github.com/emotion-js/emotion/pull/1732) Thanks [@Andarist](https://github.com/Andarist)! - An additional semicolon is now inserted after interpolated arrays to cover cases when it doesn't have a trailing semi itself and thus breaking composition with styles coming after it.
* [`8a896a31`](https://github.com/emotion-js/emotion/commit/8a896a31434a1d2f69e1f1467c446c884c929387) [#1611](https://github.com/emotion-js/emotion/pull/1611) Thanks [@Andarist](https://github.com/Andarist)! - Throw error about invalid content property values instead of just logging error to the console.
- [`5c55fd17`](https://github.com/emotion-js/emotion/commit/5c55fd17dcaec84d1f5d5d13ae90dd336d7e4403) [#1653](https://github.com/emotion-js/emotion/pull/1653) Thanks [@Andarist](https://github.com/Andarist)! - Fix to what location generated source maps are pointing in case of composed styles.
* [`a085003d`](https://github.com/emotion-js/emotion/commit/a085003d4c8ca284c116668d7217fb747802ed85) [#1613](https://github.com/emotion-js/emotion/pull/1613) Thanks [@Andarist](https://github.com/Andarist)! - Add missing `#__PURE__` annotations
* Updated dependencies [[`debaad9a`](https://github.com/emotion-js/emotion/commit/debaad9ab4bd6c80312092826d9146f3d29c0899), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf)]:
- @emotion/utils@1.0.0
## 1.0.0-rc.0
### Major Changes
- [`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63) [#2030](https://github.com/emotion-js/emotion/pull/2030) Thanks [@Andarist](https://github.com/Andarist)! - Release candidate version.
### Patch Changes
- Updated dependencies [[`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63)]:
- @emotion/utils@1.0.0-rc.0
## 1.0.0-next.5
### Patch Changes
- [`76e3dc4d`](https://github.com/emotion-js/emotion/commit/76e3dc4dd3e76423aa5d527b3e66fe3be1722e5a) [#2009](https://github.com/emotion-js/emotion/pull/2009) Thanks [@Andarist](https://github.com/Andarist)! - Re-release latest prerelease version of this package as it has incorrectly been "downgraded" to 0.x version due to a bug in Changesets. This has caused problems because Emotion 10 had a newer 0.x release and thus version targeting Emotion 10 has been fetched on installs as it has been satisfying the specified dependency range.
## 0.11.15-next.4
### Patch Changes
- Updated dependencies [[`debaad9a`](https://github.com/emotion-js/emotion/commit/debaad9ab4bd6c80312092826d9146f3d29c0899)]:
- @emotion/utils@1.0.0-next.1
## 1.0.0-next.3
### Minor Changes
- [`5d692a6a`](https://github.com/emotion-js/emotion/commit/5d692a6a8102b3faabefb773dd0145b123668a07) [#1956](https://github.com/emotion-js/emotion/pull/1956) Thanks [@eps1lon](https://github.com/eps1lon)! - Upgraded [`csstype`](https://www.npmjs.com/package/csstype) dependency to its v3. This is what we use to provide TypeScript typings for object styles. The upgrade should not affect any consuming code but it's worth mentioning if any edge case scenarios arise.
## 0.11.15-next.2
### Patch Changes
- Updated dependencies [[`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf)]:
- @emotion/utils@1.0.0-next.0
## 1.0.0-next.1
### Patch Changes
- [`e3d7db87`](https://github.com/emotion-js/emotion/commit/e3d7db87deaac95817404760112417ac1fa1b56d) [#1732](https://github.com/emotion-js/emotion/pull/1732) Thanks [@Andarist](https://github.com/Andarist)! - An additional semicolon is now inserted after interpolated arrays to cover cases when it doesn't have a trailing semi itself and thus breaking composition with styles coming after it.
## 0.11.15-next.4
### Patch Changes
- [`f08ef5a3`](https://github.com/emotion-js/emotion/commit/f08ef5a316c1d05bff8e7f3690781e1089a263c6) [#1726](https://github.com/emotion-js/emotion/pull/1726) Thanks [@Andarist](https://github.com/Andarist)! - Removed leftover `@emotion/react` import from type definition file.
## 0.12.0-next.3
### Minor Changes
- [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b) [#1609](https://github.com/emotion-js/emotion/pull/1609) Thanks [@joltmode](https://github.com/joltmode)! - Reworked Interpolation-related types. Correct types should now be provided to all flavours of emotion.
## 0.11.15-next.2
### Patch Changes
- [`5c55fd17`](https://github.com/emotion-js/emotion/commit/5c55fd17dcaec84d1f5d5d13ae90dd336d7e4403) [#1653](https://github.com/emotion-js/emotion/pull/1653) Thanks [@Andarist](https://github.com/Andarist)! - Fix to what location generated source maps are pointing in case of composed styles.
* [`729ef9d8`](https://github.com/emotion-js/emotion/commit/729ef9d8408af82c7a63effc1b8728f79c66bed1) Thanks [@Andarist](https://github.com/Andarist)! - Update `csstype` dependency.
## 0.11.15-next.1
### Patch Changes
- [`8a896a31`](https://github.com/emotion-js/emotion/commit/8a896a31434a1d2f69e1f1467c446c884c929387) [#1611](https://github.com/emotion-js/emotion/pull/1611) Thanks [@Andarist](https://github.com/Andarist)! - Throw error about invalid content property values instead of just logging error to the console.
* [`a085003d`](https://github.com/emotion-js/emotion/commit/a085003d4c8ca284c116668d7217fb747802ed85) [#1613](https://github.com/emotion-js/emotion/pull/1613) Thanks [@Andarist](https://github.com/Andarist)! - Add missing `#__PURE__` annotations
## 1.0.0-next.0
### Major Changes
- [`a72e6dc0`](https://github.com/emotion-js/emotion/commit/a72e6dc0f326b7d3d6067698d433018ee8c4cbf1) [#1501](https://github.com/emotion-js/emotion/pull/1501) Thanks [@JakeGinnivan](https://github.com/JakeGinnivan)! - TypeScript types have been restructured. These changes:
- Reduce build times when using emotion
- In many cases remove the need for manually specifying generic parameters for your emotion components.
If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below.
## Improvements
- useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section.
- Union types as props are better supported and should be inferred properly
- Build times should be reduced significantly in larger projects.
## Breaking changes
- withTheme can now have the Theme type specified when calling it. For example `withTheme<MyTheme>(MyComponent)`
**Breaking change:** Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section
- `css` function has been restricted to prevent passing of invalid types
- `CreateStyled` functions no longer take a second `ExtraProps` argument. Instead move it to after the create styled call. For example
`styled<typeof MyComponent, ExtraProps>(MyComponent)({})`
to
`styled(MyComponent)<ExtraProps>({})`
- `StyledComponent` type no longer supports the third generic `Theme` parameter. Instead add the `theme` prop to the first `Props` argument. For example:
`StyledComponent<Props, {}, MyTheme>`
to
`StyledComponent<Props & { theme?: MyTheme }>`
## 0.11.16
### Patch Changes
- Updated dependencies [[`446e756`](https://github.com/emotion-js/emotion/commit/446e75661c4aa01e51d1466472a212940c19cd82)]:
- @emotion/hash@0.8.0
## 0.11.15
### Patch Changes
- [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file
- Updated dependencies [[`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968)]:
- @emotion/hash@0.7.4
- @emotion/memoize@0.7.4
- @emotion/unitless@0.7.5
- @emotion/utils@0.11.3
## 0.11.14
### Patch Changes
- [`a55f3d49`](https://github.com/emotion-js/emotion/commit/a55f3d49c2febdf7eb1bede3f12da13c3efa1399) [#1581](https://github.com/emotion-js/emotion/pull/1581) Thanks [@Andarist](https://github.com/Andarist)! - Don't cause invalid rule to be serialized when using object style with falsy value
* [`ca95f385`](https://github.com/emotion-js/emotion/commit/ca95f385f7ce3da6d53de1a652b3b219f11434c4) [#1580](https://github.com/emotion-js/emotion/pull/1580) Thanks [@Andarist](https://github.com/Andarist)! - Warn about `undefined` being used as object style's key
## 0.11.13
### Patch Changes
- [`3b7e2f2e`](https://github.com/emotion-js/emotion/commit/3b7e2f2e27499b7263341bb83cfc20c8fc51d237) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Fix flow errors
## 0.11.12
### Patch Changes
- [`4fc5657a`](https://github.com/emotion-js/emotion/commit/4fc5657ac8d0002322321cfbfc254b7196d27387) [#1219](https://github.com/emotion-js/emotion/pull/1219) Thanks [@Andarist](https://github.com/Andarist)! - Add dev hint about css object being stringified by accident
* [`10211951`](https://github.com/emotion-js/emotion/commit/10211951051729b149930a8646de14bae9ae1bbc) [#1553](https://github.com/emotion-js/emotion/pull/1553) Thanks [@Andarist](https://github.com/Andarist)! - Add dev warning about keyframes being interpolated into plain strings.
- [`57a767ea`](https://github.com/emotion-js/emotion/commit/57a767ea3dd18eefbbdc7269cc13128caad65286) [#1560](https://github.com/emotion-js/emotion/pull/1560) Thanks [@Andarist](https://github.com/Andarist)! - Fix composition of styles without a final semicolon in a declaration block
## 0.11.11
- Updated dependencies [c81c0033]:
- @emotion/hash@0.7.3
- @emotion/memoize@0.7.3
## 0.11.10
### Patch Changes
- [66cda641](https://github.com/emotion-js/emotion/commit/66cda64128631790b81e3c9df273a972358ea593) [#1478](https://github.com/emotion-js/emotion/pull/1478) Thanks [@Andarist](https://github.com/Andarist)! - Add warnings about using illegal escape sequences
## 0.11.9
### Patch Changes
- [c257d2a3](https://github.com/emotion-js/emotion/commit/c257d2a3) [#1420](https://github.com/emotion-js/emotion/pull/1420) Thanks [@Andarist](https://github.com/Andarist)! - Fix for opaque keyframes object being used as value for animation & animationName in object styles
## 0.11.8
### Patch Changes
- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool
## 0.11.7
### Patch Changes
- [757bd86d](https://github.com/emotion-js/emotion/commit/757bd86d) [#1378](https://github.com/emotion-js/emotion/pull/1378) Thanks [@Andarist](https://github.com/Andarist)! - Fixed issue with camelCased custom properties not being handled correctly in object styles

View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) Emotion team and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View file

@ -0,0 +1,324 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var hashString = require('@emotion/hash');
var unitless = require('@emotion/unitless');
var memoize = require('@emotion/memoize');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var hashString__default = /*#__PURE__*/_interopDefault(hashString);
var unitless__default = /*#__PURE__*/_interopDefault(unitless);
var memoize__default = /*#__PURE__*/_interopDefault(memoize);
var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
var hyphenateRegex = /[A-Z]|^ms/g;
var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
var isCustomProperty = function isCustomProperty(property) {
return property.charCodeAt(1) === 45;
};
var isProcessableValue = function isProcessableValue(value) {
return value != null && typeof value !== 'boolean';
};
var processStyleName = /* #__PURE__ */memoize__default['default'](function (styleName) {
return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
});
var processStyleValue = function processStyleValue(key, value) {
switch (key) {
case 'animation':
case 'animationName':
{
if (typeof value === 'string') {
return value.replace(animationRegex, function (match, p1, p2) {
cursor = {
name: p1,
styles: p2,
next: cursor
};
return p1;
});
}
}
}
if (unitless__default['default'][key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
return value + 'px';
}
return value;
};
if (process.env.NODE_ENV !== 'production') {
var contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
var oldProcessStyleValue = processStyleValue;
var msPattern = /^-ms-/;
var hyphenPattern = /-(.)/g;
var hyphenatedCache = {};
processStyleValue = function processStyleValue(key, value) {
if (key === 'content') {
if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
}
}
var processed = oldProcessStyleValue(key, value);
if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
hyphenatedCache[key] = true;
console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {
return _char.toUpperCase();
}) + "?");
}
return processed;
};
}
function handleInterpolation(mergedProps, registered, interpolation) {
if (interpolation == null) {
return '';
}
if (interpolation.__emotion_styles !== undefined) {
if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
}
return interpolation;
}
switch (typeof interpolation) {
case 'boolean':
{
return '';
}
case 'object':
{
if (interpolation.anim === 1) {
cursor = {
name: interpolation.name,
styles: interpolation.styles,
next: cursor
};
return interpolation.name;
}
if (interpolation.styles !== undefined) {
var next = interpolation.next;
if (next !== undefined) {
// not the most efficient thing ever but this is a pretty rare case
// and there will be very few iterations of this generally
while (next !== undefined) {
cursor = {
name: next.name,
styles: next.styles,
next: cursor
};
next = next.next;
}
}
var styles = interpolation.styles + ";";
if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) {
styles += interpolation.map;
}
return styles;
}
return createStringFromObject(mergedProps, registered, interpolation);
}
case 'function':
{
if (mergedProps !== undefined) {
var previousCursor = cursor;
var result = interpolation(mergedProps);
cursor = previousCursor;
return handleInterpolation(mergedProps, registered, result);
} else if (process.env.NODE_ENV !== 'production') {
console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
}
break;
}
case 'string':
if (process.env.NODE_ENV !== 'production') {
var matched = [];
var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {
var fakeVarName = "animation" + matched.length;
matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`");
return "${" + fakeVarName + "}";
});
if (matched.length) {
console.error('`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`"));
}
}
break;
} // finalize string values (regular strings and functions interpolated into css calls)
if (registered == null) {
return interpolation;
}
var cached = registered[interpolation];
return cached !== undefined ? cached : interpolation;
}
function createStringFromObject(mergedProps, registered, obj) {
var string = '';
if (Array.isArray(obj)) {
for (var i = 0; i < obj.length; i++) {
string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
}
} else {
for (var _key in obj) {
var value = obj[_key];
if (typeof value !== 'object') {
if (registered != null && registered[value] !== undefined) {
string += _key + "{" + registered[value] + "}";
} else if (isProcessableValue(value)) {
string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
}
} else {
if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
}
if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
for (var _i = 0; _i < value.length; _i++) {
if (isProcessableValue(value[_i])) {
string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
}
}
} else {
var interpolated = handleInterpolation(mergedProps, registered, value);
switch (_key) {
case 'animation':
case 'animationName':
{
string += processStyleName(_key) + ":" + interpolated + ";";
break;
}
default:
{
if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {
console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
}
string += _key + "{" + interpolated + "}";
}
}
}
}
}
}
return string;
}
var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
var sourceMapPattern;
if (process.env.NODE_ENV !== 'production') {
sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
} // this is the cursor for keyframes
// keyframes are stored on the SerializedStyles object as a linked list
var cursor;
var serializeStyles = function serializeStyles(args, registered, mergedProps) {
if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
return args[0];
}
var stringMode = true;
var styles = '';
cursor = undefined;
var strings = args[0];
if (strings == null || strings.raw === undefined) {
stringMode = false;
styles += handleInterpolation(mergedProps, registered, strings);
} else {
if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
}
styles += strings[0];
} // we start at 1 since we've already handled the first arg
for (var i = 1; i < args.length; i++) {
styles += handleInterpolation(mergedProps, registered, args[i]);
if (stringMode) {
if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
}
styles += strings[i];
}
}
var sourceMap;
if (process.env.NODE_ENV !== 'production') {
styles = styles.replace(sourceMapPattern, function (match) {
sourceMap = match;
return '';
});
} // using a global regex with .exec is stateful so lastIndex has to be reset each time
labelPattern.lastIndex = 0;
var identifierName = '';
var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
while ((match = labelPattern.exec(styles)) !== null) {
identifierName += '-' + // $FlowFixMe we know it's not null
match[1];
}
var name = hashString__default['default'](styles) + identifierName;
if (process.env.NODE_ENV !== 'production') {
// $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)
return {
name: name,
styles: styles,
map: sourceMap,
next: cursor,
toString: function toString() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
};
}
return {
name: name,
styles: styles,
next: cursor
};
};
exports.serializeStyles = serializeStyles;

View file

@ -0,0 +1,314 @@
import hashString from '@emotion/hash';
import unitless from '@emotion/unitless';
import memoize from '@emotion/memoize';
var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
var hyphenateRegex = /[A-Z]|^ms/g;
var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
var isCustomProperty = function isCustomProperty(property) {
return property.charCodeAt(1) === 45;
};
var isProcessableValue = function isProcessableValue(value) {
return value != null && typeof value !== 'boolean';
};
var processStyleName = /* #__PURE__ */memoize(function (styleName) {
return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
});
var processStyleValue = function processStyleValue(key, value) {
switch (key) {
case 'animation':
case 'animationName':
{
if (typeof value === 'string') {
return value.replace(animationRegex, function (match, p1, p2) {
cursor = {
name: p1,
styles: p2,
next: cursor
};
return p1;
});
}
}
}
if (unitless[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
return value + 'px';
}
return value;
};
if (process.env.NODE_ENV !== 'production') {
var contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
var oldProcessStyleValue = processStyleValue;
var msPattern = /^-ms-/;
var hyphenPattern = /-(.)/g;
var hyphenatedCache = {};
processStyleValue = function processStyleValue(key, value) {
if (key === 'content') {
if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
}
}
var processed = oldProcessStyleValue(key, value);
if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
hyphenatedCache[key] = true;
console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {
return _char.toUpperCase();
}) + "?");
}
return processed;
};
}
function handleInterpolation(mergedProps, registered, interpolation) {
if (interpolation == null) {
return '';
}
if (interpolation.__emotion_styles !== undefined) {
if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
}
return interpolation;
}
switch (typeof interpolation) {
case 'boolean':
{
return '';
}
case 'object':
{
if (interpolation.anim === 1) {
cursor = {
name: interpolation.name,
styles: interpolation.styles,
next: cursor
};
return interpolation.name;
}
if (interpolation.styles !== undefined) {
var next = interpolation.next;
if (next !== undefined) {
// not the most efficient thing ever but this is a pretty rare case
// and there will be very few iterations of this generally
while (next !== undefined) {
cursor = {
name: next.name,
styles: next.styles,
next: cursor
};
next = next.next;
}
}
var styles = interpolation.styles + ";";
if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) {
styles += interpolation.map;
}
return styles;
}
return createStringFromObject(mergedProps, registered, interpolation);
}
case 'function':
{
if (mergedProps !== undefined) {
var previousCursor = cursor;
var result = interpolation(mergedProps);
cursor = previousCursor;
return handleInterpolation(mergedProps, registered, result);
} else if (process.env.NODE_ENV !== 'production') {
console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
}
break;
}
case 'string':
if (process.env.NODE_ENV !== 'production') {
var matched = [];
var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {
var fakeVarName = "animation" + matched.length;
matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`");
return "${" + fakeVarName + "}";
});
if (matched.length) {
console.error('`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`"));
}
}
break;
} // finalize string values (regular strings and functions interpolated into css calls)
if (registered == null) {
return interpolation;
}
var cached = registered[interpolation];
return cached !== undefined ? cached : interpolation;
}
function createStringFromObject(mergedProps, registered, obj) {
var string = '';
if (Array.isArray(obj)) {
for (var i = 0; i < obj.length; i++) {
string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
}
} else {
for (var _key in obj) {
var value = obj[_key];
if (typeof value !== 'object') {
if (registered != null && registered[value] !== undefined) {
string += _key + "{" + registered[value] + "}";
} else if (isProcessableValue(value)) {
string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
}
} else {
if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
}
if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
for (var _i = 0; _i < value.length; _i++) {
if (isProcessableValue(value[_i])) {
string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
}
}
} else {
var interpolated = handleInterpolation(mergedProps, registered, value);
switch (_key) {
case 'animation':
case 'animationName':
{
string += processStyleName(_key) + ":" + interpolated + ";";
break;
}
default:
{
if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {
console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
}
string += _key + "{" + interpolated + "}";
}
}
}
}
}
}
return string;
}
var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
var sourceMapPattern;
if (process.env.NODE_ENV !== 'production') {
sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
} // this is the cursor for keyframes
// keyframes are stored on the SerializedStyles object as a linked list
var cursor;
var serializeStyles = function serializeStyles(args, registered, mergedProps) {
if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
return args[0];
}
var stringMode = true;
var styles = '';
cursor = undefined;
var strings = args[0];
if (strings == null || strings.raw === undefined) {
stringMode = false;
styles += handleInterpolation(mergedProps, registered, strings);
} else {
if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
}
styles += strings[0];
} // we start at 1 since we've already handled the first arg
for (var i = 1; i < args.length; i++) {
styles += handleInterpolation(mergedProps, registered, args[i]);
if (stringMode) {
if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
}
styles += strings[i];
}
}
var sourceMap;
if (process.env.NODE_ENV !== 'production') {
styles = styles.replace(sourceMapPattern, function (match) {
sourceMap = match;
return '';
});
} // using a global regex with .exec is stateful so lastIndex has to be reset each time
labelPattern.lastIndex = 0;
var identifierName = '';
var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
while ((match = labelPattern.exec(styles)) !== null) {
identifierName += '-' + // $FlowFixMe we know it's not null
match[1];
}
var name = hashString(styles) + identifierName;
if (process.env.NODE_ENV !== 'production') {
// $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)
return {
name: name,
styles: styles,
map: sourceMap,
next: cursor,
toString: function toString() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
};
}
return {
name: name,
styles: styles,
next: cursor
};
};
export { serializeStyles };

View file

@ -0,0 +1,324 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var hashString = require('@emotion/hash');
var unitless = require('@emotion/unitless');
var memoize = require('@emotion/memoize');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var hashString__default = /*#__PURE__*/_interopDefault(hashString);
var unitless__default = /*#__PURE__*/_interopDefault(unitless);
var memoize__default = /*#__PURE__*/_interopDefault(memoize);
var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
var hyphenateRegex = /[A-Z]|^ms/g;
var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
var isCustomProperty = function isCustomProperty(property) {
return property.charCodeAt(1) === 45;
};
var isProcessableValue = function isProcessableValue(value) {
return value != null && typeof value !== 'boolean';
};
var processStyleName = /* #__PURE__ */memoize__default['default'](function (styleName) {
return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
});
var processStyleValue = function processStyleValue(key, value) {
switch (key) {
case 'animation':
case 'animationName':
{
if (typeof value === 'string') {
return value.replace(animationRegex, function (match, p1, p2) {
cursor = {
name: p1,
styles: p2,
next: cursor
};
return p1;
});
}
}
}
if (unitless__default['default'][key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
return value + 'px';
}
return value;
};
if (process.env.NODE_ENV !== 'production') {
var contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
var oldProcessStyleValue = processStyleValue;
var msPattern = /^-ms-/;
var hyphenPattern = /-(.)/g;
var hyphenatedCache = {};
processStyleValue = function processStyleValue(key, value) {
if (key === 'content') {
if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
}
}
var processed = oldProcessStyleValue(key, value);
if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
hyphenatedCache[key] = true;
console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {
return _char.toUpperCase();
}) + "?");
}
return processed;
};
}
function handleInterpolation(mergedProps, registered, interpolation) {
if (interpolation == null) {
return '';
}
if (interpolation.__emotion_styles !== undefined) {
if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
}
return interpolation;
}
switch (typeof interpolation) {
case 'boolean':
{
return '';
}
case 'object':
{
if (interpolation.anim === 1) {
cursor = {
name: interpolation.name,
styles: interpolation.styles,
next: cursor
};
return interpolation.name;
}
if (interpolation.styles !== undefined) {
var next = interpolation.next;
if (next !== undefined) {
// not the most efficient thing ever but this is a pretty rare case
// and there will be very few iterations of this generally
while (next !== undefined) {
cursor = {
name: next.name,
styles: next.styles,
next: cursor
};
next = next.next;
}
}
var styles = interpolation.styles + ";";
if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) {
styles += interpolation.map;
}
return styles;
}
return createStringFromObject(mergedProps, registered, interpolation);
}
case 'function':
{
if (mergedProps !== undefined) {
var previousCursor = cursor;
var result = interpolation(mergedProps);
cursor = previousCursor;
return handleInterpolation(mergedProps, registered, result);
} else if (process.env.NODE_ENV !== 'production') {
console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
}
break;
}
case 'string':
if (process.env.NODE_ENV !== 'production') {
var matched = [];
var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {
var fakeVarName = "animation" + matched.length;
matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`");
return "${" + fakeVarName + "}";
});
if (matched.length) {
console.error('`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`"));
}
}
break;
} // finalize string values (regular strings and functions interpolated into css calls)
if (registered == null) {
return interpolation;
}
var cached = registered[interpolation];
return cached !== undefined ? cached : interpolation;
}
function createStringFromObject(mergedProps, registered, obj) {
var string = '';
if (Array.isArray(obj)) {
for (var i = 0; i < obj.length; i++) {
string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
}
} else {
for (var _key in obj) {
var value = obj[_key];
if (typeof value !== 'object') {
if (registered != null && registered[value] !== undefined) {
string += _key + "{" + registered[value] + "}";
} else if (isProcessableValue(value)) {
string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
}
} else {
if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
}
if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
for (var _i = 0; _i < value.length; _i++) {
if (isProcessableValue(value[_i])) {
string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
}
}
} else {
var interpolated = handleInterpolation(mergedProps, registered, value);
switch (_key) {
case 'animation':
case 'animationName':
{
string += processStyleName(_key) + ":" + interpolated + ";";
break;
}
default:
{
if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {
console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
}
string += _key + "{" + interpolated + "}";
}
}
}
}
}
}
return string;
}
var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
var sourceMapPattern;
if (process.env.NODE_ENV !== 'production') {
sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
} // this is the cursor for keyframes
// keyframes are stored on the SerializedStyles object as a linked list
var cursor;
var serializeStyles = function serializeStyles(args, registered, mergedProps) {
if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
return args[0];
}
var stringMode = true;
var styles = '';
cursor = undefined;
var strings = args[0];
if (strings == null || strings.raw === undefined) {
stringMode = false;
styles += handleInterpolation(mergedProps, registered, strings);
} else {
if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
}
styles += strings[0];
} // we start at 1 since we've already handled the first arg
for (var i = 1; i < args.length; i++) {
styles += handleInterpolation(mergedProps, registered, args[i]);
if (stringMode) {
if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
}
styles += strings[i];
}
}
var sourceMap;
if (process.env.NODE_ENV !== 'production') {
styles = styles.replace(sourceMapPattern, function (match) {
sourceMap = match;
return '';
});
} // using a global regex with .exec is stateful so lastIndex has to be reset each time
labelPattern.lastIndex = 0;
var identifierName = '';
var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
while ((match = labelPattern.exec(styles)) !== null) {
identifierName += '-' + // $FlowFixMe we know it's not null
match[1];
}
var name = hashString__default['default'](styles) + identifierName;
if (process.env.NODE_ENV !== 'production') {
// $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)
return {
name: name,
styles: styles,
map: sourceMap,
next: cursor,
toString: function toString() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
};
}
return {
name: name,
styles: styles,
next: cursor
};
};
exports.serializeStyles = serializeStyles;

View file

@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === "production") {
module.exports = require("./emotion-serialize.cjs.prod.js");
} else {
module.exports = require("./emotion-serialize.cjs.dev.js");
}

View file

@ -0,0 +1,2 @@
// @flow
export * from "../src/index.js";

View file

@ -0,0 +1,115 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
});
var hashString = require("@emotion/hash"), unitless = require("@emotion/unitless"), memoize = require("@emotion/memoize");
function _interopDefault(e) {
return e && e.__esModule ? e : {
default: e
};
}
var contentValuePattern, contentValues, oldProcessStyleValue, msPattern, hyphenPattern, hyphenatedCache, hashString__default = _interopDefault(hashString), unitless__default = _interopDefault(unitless), memoize__default = _interopDefault(memoize), ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences", UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).", hyphenateRegex = /[A-Z]|^ms/g, animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g, isCustomProperty = function(property) {
return 45 === property.charCodeAt(1);
}, isProcessableValue = function(value) {
return null != value && "boolean" != typeof value;
}, processStyleName = memoize__default.default((function(styleName) {
return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
})), processStyleValue = function(key, value) {
switch (key) {
case "animation":
case "animationName":
if ("string" == typeof value) return value.replace(animationRegex, (function(match, p1, p2) {
return cursor = {
name: p1,
styles: p2,
next: cursor
}, p1;
}));
}
return 1 === unitless__default.default[key] || isCustomProperty(key) || "number" != typeof value || 0 === value ? value : value + "px";
};
function handleInterpolation(mergedProps, registered, interpolation) {
if (null == interpolation) return "";
if (void 0 !== interpolation.__emotion_styles) return interpolation;
switch (typeof interpolation) {
case "boolean":
return "";
case "object":
if (1 === interpolation.anim) return cursor = {
name: interpolation.name,
styles: interpolation.styles,
next: cursor
}, interpolation.name;
if (void 0 !== interpolation.styles) {
var next = interpolation.next;
if (void 0 !== next) for (;void 0 !== next; ) cursor = {
name: next.name,
styles: next.styles,
next: cursor
}, next = next.next;
var styles = interpolation.styles + ";";
return styles;
}
return createStringFromObject(mergedProps, registered, interpolation);
case "function":
if (void 0 !== mergedProps) {
var previousCursor = cursor, result = interpolation(mergedProps);
return cursor = previousCursor, handleInterpolation(mergedProps, registered, result);
}
break;
case "string":
}
if (null == registered) return interpolation;
var cached = registered[interpolation];
return void 0 !== cached ? cached : interpolation;
}
function createStringFromObject(mergedProps, registered, obj) {
var string = "";
if (Array.isArray(obj)) for (var i = 0; i < obj.length; i++) string += handleInterpolation(mergedProps, registered, obj[i]) + ";"; else for (var _key in obj) {
var value = obj[_key];
if ("object" != typeof value) null != registered && void 0 !== registered[value] ? string += _key + "{" + registered[value] + "}" : isProcessableValue(value) && (string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";"); else if (!Array.isArray(value) || "string" != typeof value[0] || null != registered && void 0 !== registered[value[0]]) {
var interpolated = handleInterpolation(mergedProps, registered, value);
switch (_key) {
case "animation":
case "animationName":
string += processStyleName(_key) + ":" + interpolated + ";";
break;
default:
string += _key + "{" + interpolated + "}";
}
} else for (var _i = 0; _i < value.length; _i++) isProcessableValue(value[_i]) && (string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";");
}
return string;
}
var sourceMapPattern, cursor, labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
var serializeStyles = function(args, registered, mergedProps) {
if (1 === args.length && "object" == typeof args[0] && null !== args[0] && void 0 !== args[0].styles) return args[0];
var stringMode = !0, styles = "";
cursor = void 0;
var strings = args[0];
null == strings || void 0 === strings.raw ? (stringMode = !1, styles += handleInterpolation(mergedProps, registered, strings)) : styles += strings[0];
for (var i = 1; i < args.length; i++) styles += handleInterpolation(mergedProps, registered, args[i]),
stringMode && (styles += strings[i]);
labelPattern.lastIndex = 0;
for (var match, identifierName = ""; null !== (match = labelPattern.exec(styles)); ) identifierName += "-" + match[1];
var name = hashString__default.default(styles) + identifierName;
return {
name: name,
styles: styles,
next: cursor
};
};
exports.serializeStyles = serializeStyles;

View file

@ -0,0 +1,314 @@
import hashString from '@emotion/hash';
import unitless from '@emotion/unitless';
import memoize from '@emotion/memoize';
var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
var hyphenateRegex = /[A-Z]|^ms/g;
var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
var isCustomProperty = function isCustomProperty(property) {
return property.charCodeAt(1) === 45;
};
var isProcessableValue = function isProcessableValue(value) {
return value != null && typeof value !== 'boolean';
};
var processStyleName = /* #__PURE__ */memoize(function (styleName) {
return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
});
var processStyleValue = function processStyleValue(key, value) {
switch (key) {
case 'animation':
case 'animationName':
{
if (typeof value === 'string') {
return value.replace(animationRegex, function (match, p1, p2) {
cursor = {
name: p1,
styles: p2,
next: cursor
};
return p1;
});
}
}
}
if (unitless[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
return value + 'px';
}
return value;
};
if (process.env.NODE_ENV !== 'production') {
var contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
var oldProcessStyleValue = processStyleValue;
var msPattern = /^-ms-/;
var hyphenPattern = /-(.)/g;
var hyphenatedCache = {};
processStyleValue = function processStyleValue(key, value) {
if (key === 'content') {
if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
}
}
var processed = oldProcessStyleValue(key, value);
if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
hyphenatedCache[key] = true;
console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {
return _char.toUpperCase();
}) + "?");
}
return processed;
};
}
function handleInterpolation(mergedProps, registered, interpolation) {
if (interpolation == null) {
return '';
}
if (interpolation.__emotion_styles !== undefined) {
if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
}
return interpolation;
}
switch (typeof interpolation) {
case 'boolean':
{
return '';
}
case 'object':
{
if (interpolation.anim === 1) {
cursor = {
name: interpolation.name,
styles: interpolation.styles,
next: cursor
};
return interpolation.name;
}
if (interpolation.styles !== undefined) {
var next = interpolation.next;
if (next !== undefined) {
// not the most efficient thing ever but this is a pretty rare case
// and there will be very few iterations of this generally
while (next !== undefined) {
cursor = {
name: next.name,
styles: next.styles,
next: cursor
};
next = next.next;
}
}
var styles = interpolation.styles + ";";
if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) {
styles += interpolation.map;
}
return styles;
}
return createStringFromObject(mergedProps, registered, interpolation);
}
case 'function':
{
if (mergedProps !== undefined) {
var previousCursor = cursor;
var result = interpolation(mergedProps);
cursor = previousCursor;
return handleInterpolation(mergedProps, registered, result);
} else if (process.env.NODE_ENV !== 'production') {
console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
}
break;
}
case 'string':
if (process.env.NODE_ENV !== 'production') {
var matched = [];
var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {
var fakeVarName = "animation" + matched.length;
matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`");
return "${" + fakeVarName + "}";
});
if (matched.length) {
console.error('`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`"));
}
}
break;
} // finalize string values (regular strings and functions interpolated into css calls)
if (registered == null) {
return interpolation;
}
var cached = registered[interpolation];
return cached !== undefined ? cached : interpolation;
}
function createStringFromObject(mergedProps, registered, obj) {
var string = '';
if (Array.isArray(obj)) {
for (var i = 0; i < obj.length; i++) {
string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
}
} else {
for (var _key in obj) {
var value = obj[_key];
if (typeof value !== 'object') {
if (registered != null && registered[value] !== undefined) {
string += _key + "{" + registered[value] + "}";
} else if (isProcessableValue(value)) {
string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
}
} else {
if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
}
if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
for (var _i = 0; _i < value.length; _i++) {
if (isProcessableValue(value[_i])) {
string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
}
}
} else {
var interpolated = handleInterpolation(mergedProps, registered, value);
switch (_key) {
case 'animation':
case 'animationName':
{
string += processStyleName(_key) + ":" + interpolated + ";";
break;
}
default:
{
if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {
console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
}
string += _key + "{" + interpolated + "}";
}
}
}
}
}
}
return string;
}
var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
var sourceMapPattern;
if (process.env.NODE_ENV !== 'production') {
sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
} // this is the cursor for keyframes
// keyframes are stored on the SerializedStyles object as a linked list
var cursor;
var serializeStyles = function serializeStyles(args, registered, mergedProps) {
if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
return args[0];
}
var stringMode = true;
var styles = '';
cursor = undefined;
var strings = args[0];
if (strings == null || strings.raw === undefined) {
stringMode = false;
styles += handleInterpolation(mergedProps, registered, strings);
} else {
if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
}
styles += strings[0];
} // we start at 1 since we've already handled the first arg
for (var i = 1; i < args.length; i++) {
styles += handleInterpolation(mergedProps, registered, args[i]);
if (stringMode) {
if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
}
styles += strings[i];
}
}
var sourceMap;
if (process.env.NODE_ENV !== 'production') {
styles = styles.replace(sourceMapPattern, function (match) {
sourceMap = match;
return '';
});
} // using a global regex with .exec is stateful so lastIndex has to be reset each time
labelPattern.lastIndex = 0;
var identifierName = '';
var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
while ((match = labelPattern.exec(styles)) !== null) {
identifierName += '-' + // $FlowFixMe we know it's not null
match[1];
}
var name = hashString(styles) + identifierName;
if (process.env.NODE_ENV !== 'production') {
// $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)
return {
name: name,
styles: styles,
map: sourceMap,
next: cursor,
toString: function toString() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
};
}
return {
name: name,
styles: styles,
next: cursor
};
};
export { serializeStyles };

View file

@ -0,0 +1,35 @@
{
"name": "@emotion/serialize",
"version": "1.0.2",
"description": "serialization utils for emotion",
"main": "dist/emotion-serialize.cjs.js",
"module": "dist/emotion-serialize.esm.js",
"types": "types/index.d.ts",
"license": "MIT",
"repository": "https://github.com/emotion-js/emotion/tree/main/packages/serialize",
"publishConfig": {
"access": "public"
},
"scripts": {
"test:typescript": "dtslint types"
},
"dependencies": {
"@emotion/hash": "^0.8.0",
"@emotion/memoize": "^0.7.4",
"@emotion/unitless": "^0.7.5",
"@emotion/utils": "^1.0.0",
"csstype": "^3.0.2"
},
"devDependencies": {
"dtslint": "^0.3.0"
},
"files": [
"src",
"dist",
"types/*.d.ts"
],
"browser": {
"./dist/emotion-serialize.cjs.js": "./dist/emotion-serialize.browser.cjs.js",
"./dist/emotion-serialize.esm.js": "./dist/emotion-serialize.browser.esm.js"
}
}

View file

@ -0,0 +1,386 @@
// @flow
import type {
Interpolation,
SerializedStyles,
RegisteredCache
} from '@emotion/utils'
import hashString from '@emotion/hash'
import unitless from '@emotion/unitless'
import memoize from '@emotion/memoize'
const ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.
Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
You can read more about this here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`
const UNDEFINED_AS_OBJECT_KEY_ERROR =
"You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key)."
let hyphenateRegex = /[A-Z]|^ms/g
let animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g
const isCustomProperty = (property: string) => property.charCodeAt(1) === 45
const isProcessableValue = value => value != null && typeof value !== 'boolean'
const processStyleName = /* #__PURE__ */ memoize(
(styleName: string) =>
isCustomProperty(styleName)
? styleName
: styleName.replace(hyphenateRegex, '-$&').toLowerCase()
)
let processStyleValue = (
key: string,
value: string | number
): string | number => {
switch (key) {
case 'animation':
case 'animationName': {
if (typeof value === 'string') {
return value.replace(animationRegex, (match, p1, p2) => {
cursor = {
name: p1,
styles: p2,
next: cursor
}
return p1
})
}
}
}
if (
unitless[key] !== 1 &&
!isCustomProperty(key) &&
typeof value === 'number' &&
value !== 0
) {
return value + 'px'
}
return value
}
if (process.env.NODE_ENV !== 'production') {
let contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/
let contentValues = ['normal', 'none', 'initial', 'inherit', 'unset']
let oldProcessStyleValue = processStyleValue
let msPattern = /^-ms-/
let hyphenPattern = /-(.)/g
let hyphenatedCache = {}
processStyleValue = (key: string, value: string) => {
if (key === 'content') {
if (
typeof value !== 'string' ||
(contentValues.indexOf(value) === -1 &&
!contentValuePattern.test(value) &&
(value.charAt(0) !== value.charAt(value.length - 1) ||
(value.charAt(0) !== '"' && value.charAt(0) !== "'")))
) {
throw new Error(
`You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\``
)
}
}
const processed = oldProcessStyleValue(key, value)
if (
processed !== '' &&
!isCustomProperty(key) &&
key.indexOf('-') !== -1 &&
hyphenatedCache[key] === undefined
) {
hyphenatedCache[key] = true
console.error(
`Using kebab-case for css properties in objects is not supported. Did you mean ${key
.replace(msPattern, 'ms-')
.replace(hyphenPattern, (str, char) => char.toUpperCase())}?`
)
}
return processed
}
}
function handleInterpolation(
mergedProps: void | Object,
registered: RegisteredCache | void,
interpolation: Interpolation
): string | number {
if (interpolation == null) {
return ''
}
if (interpolation.__emotion_styles !== undefined) {
if (
process.env.NODE_ENV !== 'production' &&
interpolation.toString() === 'NO_COMPONENT_SELECTOR'
) {
throw new Error(
'Component selectors can only be used in conjunction with @emotion/babel-plugin.'
)
}
return interpolation
}
switch (typeof interpolation) {
case 'boolean': {
return ''
}
case 'object': {
if (interpolation.anim === 1) {
cursor = {
name: interpolation.name,
styles: interpolation.styles,
next: cursor
}
return interpolation.name
}
if (interpolation.styles !== undefined) {
let next = interpolation.next
if (next !== undefined) {
// not the most efficient thing ever but this is a pretty rare case
// and there will be very few iterations of this generally
while (next !== undefined) {
cursor = {
name: next.name,
styles: next.styles,
next: cursor
}
next = next.next
}
}
let styles = `${interpolation.styles};`
if (
process.env.NODE_ENV !== 'production' &&
interpolation.map !== undefined
) {
styles += interpolation.map
}
return styles
}
return createStringFromObject(mergedProps, registered, interpolation)
}
case 'function': {
if (mergedProps !== undefined) {
let previousCursor = cursor
let result = interpolation(mergedProps)
cursor = previousCursor
return handleInterpolation(mergedProps, registered, result)
} else if (process.env.NODE_ENV !== 'production') {
console.error(
'Functions that are interpolated in css calls will be stringified.\n' +
'If you want to have a css call based on props, create a function that returns a css call like this\n' +
'let dynamicStyle = (props) => css`color: ${props.color}`\n' +
'It can be called directly with props or interpolated in a styled call like this\n' +
"let SomeComponent = styled('div')`${dynamicStyle}`"
)
}
break
}
case 'string':
if (process.env.NODE_ENV !== 'production') {
const matched = []
const replaced = interpolation.replace(
animationRegex,
(match, p1, p2) => {
const fakeVarName = `animation${matched.length}`
matched.push(
`const ${fakeVarName} = keyframes\`${p2.replace(
/^@keyframes animation-\w+/,
''
)}\``
)
return `\${${fakeVarName}}`
}
)
if (matched.length) {
console.error(
'`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\n' +
'Instead of doing this:\n\n' +
[...matched, `\`${replaced}\``].join('\n') +
'\n\nYou should wrap it with `css` like this:\n\n' +
`css\`${replaced}\``
)
}
}
break
}
// finalize string values (regular strings and functions interpolated into css calls)
if (registered == null) {
return interpolation
}
const cached = registered[interpolation]
return cached !== undefined ? cached : interpolation
}
function createStringFromObject(
mergedProps: void | Object,
registered: RegisteredCache | void,
obj: { [key: string]: Interpolation }
): string {
let string = ''
if (Array.isArray(obj)) {
for (let i = 0; i < obj.length; i++) {
string += `${handleInterpolation(mergedProps, registered, obj[i])};`
}
} else {
for (let key in obj) {
let value = obj[key]
if (typeof value !== 'object') {
if (registered != null && registered[value] !== undefined) {
string += `${key}{${registered[value]}}`
} else if (isProcessableValue(value)) {
string += `${processStyleName(key)}:${processStyleValue(key, value)};`
}
} else {
if (
key === 'NO_COMPONENT_SELECTOR' &&
process.env.NODE_ENV !== 'production'
) {
throw new Error(
'Component selectors can only be used in conjunction with @emotion/babel-plugin.'
)
}
if (
Array.isArray(value) &&
typeof value[0] === 'string' &&
(registered == null || registered[value[0]] === undefined)
) {
for (let i = 0; i < value.length; i++) {
if (isProcessableValue(value[i])) {
string += `${processStyleName(key)}:${processStyleValue(
key,
value[i]
)};`
}
}
} else {
const interpolated = handleInterpolation(
mergedProps,
registered,
value
)
switch (key) {
case 'animation':
case 'animationName': {
string += `${processStyleName(key)}:${interpolated};`
break
}
default: {
if (
process.env.NODE_ENV !== 'production' &&
key === 'undefined'
) {
console.error(UNDEFINED_AS_OBJECT_KEY_ERROR)
}
string += `${key}{${interpolated}}`
}
}
}
}
}
}
return string
}
let labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g
let sourceMapPattern
if (process.env.NODE_ENV !== 'production') {
sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g
}
// this is the cursor for keyframes
// keyframes are stored on the SerializedStyles object as a linked list
let cursor
export const serializeStyles = function(
args: Array<Interpolation>,
registered: RegisteredCache | void,
mergedProps: void | Object
): SerializedStyles {
if (
args.length === 1 &&
typeof args[0] === 'object' &&
args[0] !== null &&
args[0].styles !== undefined
) {
return args[0]
}
let stringMode = true
let styles = ''
cursor = undefined
let strings = args[0]
if (strings == null || strings.raw === undefined) {
stringMode = false
styles += handleInterpolation(mergedProps, registered, strings)
} else {
if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
}
styles += strings[0]
}
// we start at 1 since we've already handled the first arg
for (let i = 1; i < args.length; i++) {
styles += handleInterpolation(mergedProps, registered, args[i])
if (stringMode) {
if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
}
styles += strings[i]
}
}
let sourceMap
if (process.env.NODE_ENV !== 'production') {
styles = styles.replace(sourceMapPattern, match => {
sourceMap = match
return ''
})
}
// using a global regex with .exec is stateful so lastIndex has to be reset each time
labelPattern.lastIndex = 0
let identifierName = ''
let match
// https://esbench.com/bench/5b809c2cf2949800a0f61fb5
while ((match = labelPattern.exec(styles)) !== null) {
identifierName +=
'-' +
// $FlowFixMe we know it's not null
match[1]
}
let name = hashString(styles) + identifierName
if (process.env.NODE_ENV !== 'production') {
// $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)
return {
name,
styles,
map: sourceMap,
next: cursor,
toString() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."
}
}
}
return {
name,
styles,
next: cursor
}
}

View file

@ -0,0 +1,69 @@
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
// TypeScript Version: 2.8
import { RegisteredCache, SerializedStyles } from '@emotion/utils'
import * as CSS from 'csstype'
export { RegisteredCache, SerializedStyles }
export type CSSProperties = CSS.PropertiesFallback<number | string>
export type CSSPropertiesWithMultiValues = {
[K in keyof CSSProperties]:
| CSSProperties[K]
| Array<Extract<CSSProperties[K], string>>
}
export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject }
export interface ArrayCSSInterpolation extends Array<CSSInterpolation> {}
export type InterpolationPrimitive =
| null
| undefined
| boolean
| number
| string
| ComponentSelector
| Keyframes
| SerializedStyles
| CSSObject
export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation
export interface CSSOthersObject {
[propertiesName: string]: CSSInterpolation
}
export interface CSSObject
extends CSSPropertiesWithMultiValues,
CSSPseudos,
CSSOthersObject {}
export interface ComponentSelector {
__emotion_styles: any
}
export type Keyframes = {
name: string
styles: string
anim: number
toString: () => string
} & string
export interface ArrayInterpolation<Props>
extends Array<Interpolation<Props>> {}
export interface FunctionInterpolation<Props> {
(props: Props): Interpolation<Props>
}
export type Interpolation<Props> =
| InterpolationPrimitive
| ArrayInterpolation<Props>
| FunctionInterpolation<Props>
export function serializeStyles<Props>(
args: Array<TemplateStringsArray | Interpolation<Props>>,
registered: RegisteredCache,
props?: Props
): SerializedStyles

View file

@ -0,0 +1,105 @@
# @emotion/sheet
## 1.0.2
### Patch Changes
- [#2393](https://github.com/emotion-js/emotion/pull/2393) [`405af5ca`](https://github.com/emotion-js/emotion/commit/405af5ca01dcc0cac64227db082ce3f483e1bb46) Thanks [@layershifter](https://github.com/layershifter)! - Do not log failed rule insertions in the speedy mode for even more vendor-prefixed pseudo-elements/classes like `:-moz-focus-inner`, `:-moz-focusring`, and `:-ms-clear`.
## 1.0.1
### Patch Changes
- [`5469d003`](https://github.com/emotion-js/emotion/commit/5469d0034d055a34587e9d05332f6da4d4722b1c) [#2149](https://github.com/emotion-js/emotion/pull/2149) Thanks [@Andarist](https://github.com/Andarist)! - Do not log failed rule insertions in the speedy mode for vendor-prefixed pseudo-elements/classes like `::-moz-placeholder`.
## 1.0.0
### Major Changes
- [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - `@import` rules are no longer special-cased - they no longer are always inserted at the beginning of the stylesheet. The responsibility to put them first has been moved to a consumer of this package.
### Minor Changes
- [`4a891bf6`](https://github.com/emotion-js/emotion/commit/4a891bf6a30e3bb37f8f32031fa75a571c637d9c) [#1473](https://github.com/emotion-js/emotion/pull/1473) Thanks [@jcharry](https://github.com/jcharry)! - The new `prepend` option can make Emotion add style tags at the beginning of the specified DOM container instead of the end.
* [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71) [#1696](https://github.com/emotion-js/emotion/pull/1696) Thanks [@Andarist](https://github.com/Andarist)! - Added `hydrate` method which can be used for SSRed styles. They become a part of a sheet and can be flushed.
### Patch Changes
- [`42df3f3b`](https://github.com/emotion-js/emotion/commit/42df3f3bc01526eed61cedba106d86b9e3807f9d) [#2028](https://github.com/emotion-js/emotion/pull/2028) Thanks [@Andarist](https://github.com/Andarist)! - Generated style elements got `data-s="1"` attribute so `@emotion/cache` can recognize them as being already owned by another Emotion copy to avoid messing up existing style elements when initializing a new copy.
* [`1e4a741d`](https://github.com/emotion-js/emotion/commit/1e4a741de6424d3d9c1f3ca9695e1953bed3a194) [#1697](https://github.com/emotion-js/emotion/pull/1697) Thanks [@Andarist](https://github.com/Andarist)! - Removed mentions of `maxLength` option in types & docs as it has been removed some time ago.
## 1.0.0-rc.0
### Major Changes
- [`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63) [#2030](https://github.com/emotion-js/emotion/pull/2030) Thanks [@Andarist](https://github.com/Andarist)! - Release candidate version.
## 1.0.0-next.5
### Patch Changes
- [`42df3f3b`](https://github.com/emotion-js/emotion/commit/42df3f3bc01526eed61cedba106d86b9e3807f9d) [#2028](https://github.com/emotion-js/emotion/pull/2028) Thanks [@Andarist](https://github.com/Andarist)! - Generated style elements got `data-s` attribute so `@emotion/cache` can recognize them as being already owned by another Emotion copy to avoid messing up existing style elements when initializing a new copy.
## 1.0.0-next.4
### Patch Changes
- [`39be057b`](https://github.com/emotion-js/emotion/commit/39be057b1a0c6b76f2cb7a455cb8bc35fe875ba0) [#1997](https://github.com/emotion-js/emotion/pull/1997) Thanks [@Andarist](https://github.com/Andarist)! - Reverted the change that has started to add an empty `<style/>` element eagerly in non-production environments that has been introduced in [`v1.0.0-next.3`](https://github.com/emotion-js/emotion/blob/next/packages/sheet/CHANGELOG.md#100-next3) as this has found to be problematic for websites using `Content-Security-Policy` and a `nonce`. Instead of this `@emotion/cache` will from now on insert an empty rule in non-production environments but it will only do that if an empty rule gets actually created by the user.
## 1.0.0-next.3
### Patch Changes
- [`dc1a0c5e`](https://github.com/emotion-js/emotion/commit/dc1a0c5ed78b27fb7ce49b6296f2ca8631654cd1) [#1962](https://github.com/emotion-js/emotion/pull/1962) Thanks [@Andarist](https://github.com/Andarist)! - From now on an empty `<style/>` element gets inserted eagerly into the DOM in the constructor in non-production environments. This helps to grab used `key`s from the (JS)DOM even for sheets/caches that have not inserted any actual rules to the document yet. It allows `@emotion/jest` to find those and serialize Emotion classes properly in situations like this:
```js
import styled from '@emotion/styled/macro'
import { render } from '@testing-library/react'
const Div = styled.div``
test('foo', () => {
const { container } = render(<Div />)
expect(container).toMatchSnapshot()
})
```
## 1.0.0-next.2
### Major Changes
- [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - `@import` rules are no longer special-cased - they no longer are always inserted at the beginning of the stylesheet. The responsibility to put them first has been moved to a consumer of this package.
### Patch Changes
- [`91046a8c`](https://github.com/emotion-js/emotion/commit/91046a8c188327a65daac61583ef3c4458f30afb) [#1900](https://github.com/emotion-js/emotion/pull/1900) Thanks [@Andarist](https://github.com/Andarist)! - Renamed `rehydrate` method to `hydrate` to align naming to what is already used in Emotion and React itself.
## 0.10.0-next.1
### Minor Changes
- [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - Added `rehydrate` method which can be used for SSRed styles. They become a part of a sheet and can be flushed.
### Patch Changes
- [`1e4a741d`](https://github.com/emotion-js/emotion/commit/1e4a741de6424d3d9c1f3ca9695e1953bed3a194) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - Removed mentions of `maxLength` option in types & docs as it has been removed some time ago.
## 0.10.0-next.0
### Minor Changes
- [`4a891bf6`](https://github.com/emotion-js/emotion/commit/4a891bf6a30e3bb37f8f32031fa75a571c637d9c) [#1473](https://github.com/emotion-js/emotion/pull/1473) Thanks [@jcharry](https://github.com/jcharry)! - Accept new `prepend` option to allow for adding style tags at the beginning of the specified DOM container.
## 0.9.4
### Patch Changes
- [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file
## 0.9.3
### Patch Changes
- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool

View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) Emotion team and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View file

@ -0,0 +1,90 @@
# @emotion/sheet
> A StyleSheet for css-in-js libraries
```bash
yarn add @emotion/sheet
```
```jsx
import { StyleSheet } from '@emotion/sheet'
const sheet = new StyleSheet({ key: '', container: document.head })
sheet.insert('html { color: hotpink; }')
```
> **Note:**
> This is not useful for server-side rendering, you should implement SSR seperately
## StyleSheet
### Options
```ts
type Options = {
nonce?: string
key: string
container: HTMLElement
speedy?: boolean
prepend?: boolean
}
```
#### nonce
A nonce that will be set on each style tag that the sheet inserts for [Content Security Policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
#### container
A DOM Node that the sheet will insert all of it's style tags into, this is useful for inserting styles into iframes.
#### key
This will be set as the value of the `data-emotion` attribute on the style tags that get inserted. This is useful to identify different sheets.
#### speedy
This defines how rules are inserted. If it is true, rules will be inserted with [`insertRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule) which is very fast but doesn't allow rules to be edited in DevTools. If it is false, rules will be inserted by appending text nodes to style elements which is much slower than insertRule but allows rules to be edited in DevTools. By default, speedy is enabled in production and disabled in development.
#### prepend
This defines where rules are inserted into the `container`. By default they are appended but this can be changed by using `prepend: true` option.
### Methods
#### insert
This method inserts a single rule into the document. It **must** be a single rule otherwise an error will be thrown in speedy mode which is enabled by default in production.
#### flush
This method will remove all style tags that were inserted into the document.
#### hydrate
This method moves given style elements into sheet's container and put them into internal tags collection. It's can be used for SSRed styles.
### Example with all options
```jsx
import { StyleSheet } from '@emotion/sheet'
const container = document.createElement('div')
document.head.appendChild(container)
const sheet = new StyleSheet({
nonce: 'some-nonce',
key: 'some-key',
container
})
sheet.insert('html { color: hotpink; }')
sheet.flush()
```
# Thanks
This StyleSheet is based on [glamor's StyleSheet](https://github.com/threepointone/glamor) written by [Sunil Pai](https://github.com/threepointone). ❤️

View file

@ -0,0 +1,150 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
/*
Based off glamor's StyleSheet, thanks Sunil
high performance StyleSheet for css-in-js systems
- uses multiple style tags behind the scenes for millions of rules
- uses `insertRule` for appending in production for *much* faster performance
// usage
import { StyleSheet } from '@emotion/sheet'
let styleSheet = new StyleSheet({ key: '', container: document.head })
styleSheet.insert('#box { border: 1px solid red; }')
- appends a css rule into the stylesheet
styleSheet.flush()
- empties the stylesheet of all its contents
*/
// $FlowFixMe
function sheetForTag(tag) {
if (tag.sheet) {
// $FlowFixMe
return tag.sheet;
} // this weirdness brought to you by firefox
/* istanbul ignore next */
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].ownerNode === tag) {
// $FlowFixMe
return document.styleSheets[i];
}
}
}
function createStyleElement(options) {
var tag = document.createElement('style');
tag.setAttribute('data-emotion', options.key);
if (options.nonce !== undefined) {
tag.setAttribute('nonce', options.nonce);
}
tag.appendChild(document.createTextNode(''));
tag.setAttribute('data-s', '');
return tag;
}
var StyleSheet = /*#__PURE__*/function () {
function StyleSheet(options) {
var _this = this;
this._insertTag = function (tag) {
var before;
if (_this.tags.length === 0) {
before = _this.prepend ? _this.container.firstChild : _this.before;
} else {
before = _this.tags[_this.tags.length - 1].nextSibling;
}
_this.container.insertBefore(tag, before);
_this.tags.push(tag);
};
this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;
this.tags = [];
this.ctr = 0;
this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
this.key = options.key;
this.container = options.container;
this.prepend = options.prepend;
this.before = null;
}
var _proto = StyleSheet.prototype;
_proto.hydrate = function hydrate(nodes) {
nodes.forEach(this._insertTag);
};
_proto.insert = function insert(rule) {
// the max length is how many rules we have per style tag, it's 65000 in speedy mode
// it's 1 in dev because we insert source maps that map a single rule to a location
// and you can only have one source map per style tag
if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
this._insertTag(createStyleElement(this));
}
var tag = this.tags[this.tags.length - 1];
if (process.env.NODE_ENV !== 'production') {
var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;
if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {
// this would only cause problem in speedy mode
// but we don't want enabling speedy to affect the observable behavior
// so we report this error at all times
console.error("You're attempting to insert the following rule:\n" + rule + '\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.');
}
this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;
}
if (this.isSpeedy) {
var sheet = sheetForTag(tag);
try {
// this is the ultrafast version, works across browsers
// the big drawback is that the css won't be editable in devtools
sheet.insertRule(rule, sheet.cssRules.length);
} catch (e) {
if (process.env.NODE_ENV !== 'production' && !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear){/.test(rule)) {
console.error("There was a problem inserting the following rule: \"" + rule + "\"", e);
}
}
} else {
tag.appendChild(document.createTextNode(rule));
}
this.ctr++;
};
_proto.flush = function flush() {
// $FlowFixMe
this.tags.forEach(function (tag) {
return tag.parentNode.removeChild(tag);
});
this.tags = [];
this.ctr = 0;
if (process.env.NODE_ENV !== 'production') {
this._alreadyInsertedOrderInsensitiveRule = false;
}
};
return StyleSheet;
}();
exports.StyleSheet = StyleSheet;

View file

@ -0,0 +1,146 @@
/*
Based off glamor's StyleSheet, thanks Sunil
high performance StyleSheet for css-in-js systems
- uses multiple style tags behind the scenes for millions of rules
- uses `insertRule` for appending in production for *much* faster performance
// usage
import { StyleSheet } from '@emotion/sheet'
let styleSheet = new StyleSheet({ key: '', container: document.head })
styleSheet.insert('#box { border: 1px solid red; }')
- appends a css rule into the stylesheet
styleSheet.flush()
- empties the stylesheet of all its contents
*/
// $FlowFixMe
function sheetForTag(tag) {
if (tag.sheet) {
// $FlowFixMe
return tag.sheet;
} // this weirdness brought to you by firefox
/* istanbul ignore next */
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].ownerNode === tag) {
// $FlowFixMe
return document.styleSheets[i];
}
}
}
function createStyleElement(options) {
var tag = document.createElement('style');
tag.setAttribute('data-emotion', options.key);
if (options.nonce !== undefined) {
tag.setAttribute('nonce', options.nonce);
}
tag.appendChild(document.createTextNode(''));
tag.setAttribute('data-s', '');
return tag;
}
var StyleSheet = /*#__PURE__*/function () {
function StyleSheet(options) {
var _this = this;
this._insertTag = function (tag) {
var before;
if (_this.tags.length === 0) {
before = _this.prepend ? _this.container.firstChild : _this.before;
} else {
before = _this.tags[_this.tags.length - 1].nextSibling;
}
_this.container.insertBefore(tag, before);
_this.tags.push(tag);
};
this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;
this.tags = [];
this.ctr = 0;
this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
this.key = options.key;
this.container = options.container;
this.prepend = options.prepend;
this.before = null;
}
var _proto = StyleSheet.prototype;
_proto.hydrate = function hydrate(nodes) {
nodes.forEach(this._insertTag);
};
_proto.insert = function insert(rule) {
// the max length is how many rules we have per style tag, it's 65000 in speedy mode
// it's 1 in dev because we insert source maps that map a single rule to a location
// and you can only have one source map per style tag
if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
this._insertTag(createStyleElement(this));
}
var tag = this.tags[this.tags.length - 1];
if (process.env.NODE_ENV !== 'production') {
var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;
if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {
// this would only cause problem in speedy mode
// but we don't want enabling speedy to affect the observable behavior
// so we report this error at all times
console.error("You're attempting to insert the following rule:\n" + rule + '\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.');
}
this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;
}
if (this.isSpeedy) {
var sheet = sheetForTag(tag);
try {
// this is the ultrafast version, works across browsers
// the big drawback is that the css won't be editable in devtools
sheet.insertRule(rule, sheet.cssRules.length);
} catch (e) {
if (process.env.NODE_ENV !== 'production' && !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear){/.test(rule)) {
console.error("There was a problem inserting the following rule: \"" + rule + "\"", e);
}
}
} else {
tag.appendChild(document.createTextNode(rule));
}
this.ctr++;
};
_proto.flush = function flush() {
// $FlowFixMe
this.tags.forEach(function (tag) {
return tag.parentNode.removeChild(tag);
});
this.tags = [];
this.ctr = 0;
if (process.env.NODE_ENV !== 'production') {
this._alreadyInsertedOrderInsensitiveRule = false;
}
};
return StyleSheet;
}();
export { StyleSheet };

View file

@ -0,0 +1,150 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
/*
Based off glamor's StyleSheet, thanks Sunil
high performance StyleSheet for css-in-js systems
- uses multiple style tags behind the scenes for millions of rules
- uses `insertRule` for appending in production for *much* faster performance
// usage
import { StyleSheet } from '@emotion/sheet'
let styleSheet = new StyleSheet({ key: '', container: document.head })
styleSheet.insert('#box { border: 1px solid red; }')
- appends a css rule into the stylesheet
styleSheet.flush()
- empties the stylesheet of all its contents
*/
// $FlowFixMe
function sheetForTag(tag) {
if (tag.sheet) {
// $FlowFixMe
return tag.sheet;
} // this weirdness brought to you by firefox
/* istanbul ignore next */
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].ownerNode === tag) {
// $FlowFixMe
return document.styleSheets[i];
}
}
}
function createStyleElement(options) {
var tag = document.createElement('style');
tag.setAttribute('data-emotion', options.key);
if (options.nonce !== undefined) {
tag.setAttribute('nonce', options.nonce);
}
tag.appendChild(document.createTextNode(''));
tag.setAttribute('data-s', '');
return tag;
}
var StyleSheet = /*#__PURE__*/function () {
function StyleSheet(options) {
var _this = this;
this._insertTag = function (tag) {
var before;
if (_this.tags.length === 0) {
before = _this.prepend ? _this.container.firstChild : _this.before;
} else {
before = _this.tags[_this.tags.length - 1].nextSibling;
}
_this.container.insertBefore(tag, before);
_this.tags.push(tag);
};
this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;
this.tags = [];
this.ctr = 0;
this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
this.key = options.key;
this.container = options.container;
this.prepend = options.prepend;
this.before = null;
}
var _proto = StyleSheet.prototype;
_proto.hydrate = function hydrate(nodes) {
nodes.forEach(this._insertTag);
};
_proto.insert = function insert(rule) {
// the max length is how many rules we have per style tag, it's 65000 in speedy mode
// it's 1 in dev because we insert source maps that map a single rule to a location
// and you can only have one source map per style tag
if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
this._insertTag(createStyleElement(this));
}
var tag = this.tags[this.tags.length - 1];
if (process.env.NODE_ENV !== 'production') {
var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;
if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {
// this would only cause problem in speedy mode
// but we don't want enabling speedy to affect the observable behavior
// so we report this error at all times
console.error("You're attempting to insert the following rule:\n" + rule + '\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.');
}
this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;
}
if (this.isSpeedy) {
var sheet = sheetForTag(tag);
try {
// this is the ultrafast version, works across browsers
// the big drawback is that the css won't be editable in devtools
sheet.insertRule(rule, sheet.cssRules.length);
} catch (e) {
if (process.env.NODE_ENV !== 'production' && !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear){/.test(rule)) {
console.error("There was a problem inserting the following rule: \"" + rule + "\"", e);
}
}
} else {
tag.appendChild(document.createTextNode(rule));
}
this.ctr++;
};
_proto.flush = function flush() {
// $FlowFixMe
this.tags.forEach(function (tag) {
return tag.parentNode.removeChild(tag);
});
this.tags = [];
this.ctr = 0;
if (process.env.NODE_ENV !== 'production') {
this._alreadyInsertedOrderInsensitiveRule = false;
}
};
return StyleSheet;
}();
exports.StyleSheet = StyleSheet;

View file

@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === "production") {
module.exports = require("./emotion-sheet.cjs.prod.js");
} else {
module.exports = require("./emotion-sheet.cjs.dev.js");
}

View file

@ -0,0 +1,2 @@
// @flow
export * from "../src/index.js";

View file

@ -0,0 +1,51 @@
"use strict";
function sheetForTag(tag) {
if (tag.sheet) return tag.sheet;
for (var i = 0; i < document.styleSheets.length; i++) if (document.styleSheets[i].ownerNode === tag) return document.styleSheets[i];
}
function createStyleElement(options) {
var tag = document.createElement("style");
return tag.setAttribute("data-emotion", options.key), void 0 !== options.nonce && tag.setAttribute("nonce", options.nonce),
tag.appendChild(document.createTextNode("")), tag.setAttribute("data-s", ""), tag;
}
Object.defineProperty(exports, "__esModule", {
value: !0
});
var StyleSheet = function() {
function StyleSheet(options) {
var _this = this;
this._insertTag = function(tag) {
var before;
before = 0 === _this.tags.length ? _this.prepend ? _this.container.firstChild : _this.before : _this.tags[_this.tags.length - 1].nextSibling,
_this.container.insertBefore(tag, before), _this.tags.push(tag);
}, this.isSpeedy = void 0 === options.speedy || options.speedy, this.tags = [],
this.ctr = 0, this.nonce = options.nonce, this.key = options.key, this.container = options.container,
this.prepend = options.prepend, this.before = null;
}
var _proto = StyleSheet.prototype;
return _proto.hydrate = function(nodes) {
nodes.forEach(this._insertTag);
}, _proto.insert = function(rule) {
this.ctr % (this.isSpeedy ? 65e3 : 1) == 0 && this._insertTag(createStyleElement(this));
var tag = this.tags[this.tags.length - 1];
if (this.isSpeedy) {
var sheet = sheetForTag(tag);
try {
sheet.insertRule(rule, sheet.cssRules.length);
} catch (e) {
0;
}
} else tag.appendChild(document.createTextNode(rule));
this.ctr++;
}, _proto.flush = function() {
this.tags.forEach((function(tag) {
return tag.parentNode.removeChild(tag);
})), this.tags = [], this.ctr = 0;
}, StyleSheet;
}();
exports.StyleSheet = StyleSheet;

View file

@ -0,0 +1,146 @@
/*
Based off glamor's StyleSheet, thanks Sunil
high performance StyleSheet for css-in-js systems
- uses multiple style tags behind the scenes for millions of rules
- uses `insertRule` for appending in production for *much* faster performance
// usage
import { StyleSheet } from '@emotion/sheet'
let styleSheet = new StyleSheet({ key: '', container: document.head })
styleSheet.insert('#box { border: 1px solid red; }')
- appends a css rule into the stylesheet
styleSheet.flush()
- empties the stylesheet of all its contents
*/
// $FlowFixMe
function sheetForTag(tag) {
if (tag.sheet) {
// $FlowFixMe
return tag.sheet;
} // this weirdness brought to you by firefox
/* istanbul ignore next */
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].ownerNode === tag) {
// $FlowFixMe
return document.styleSheets[i];
}
}
}
function createStyleElement(options) {
var tag = document.createElement('style');
tag.setAttribute('data-emotion', options.key);
if (options.nonce !== undefined) {
tag.setAttribute('nonce', options.nonce);
}
tag.appendChild(document.createTextNode(''));
tag.setAttribute('data-s', '');
return tag;
}
var StyleSheet = /*#__PURE__*/function () {
function StyleSheet(options) {
var _this = this;
this._insertTag = function (tag) {
var before;
if (_this.tags.length === 0) {
before = _this.prepend ? _this.container.firstChild : _this.before;
} else {
before = _this.tags[_this.tags.length - 1].nextSibling;
}
_this.container.insertBefore(tag, before);
_this.tags.push(tag);
};
this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;
this.tags = [];
this.ctr = 0;
this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
this.key = options.key;
this.container = options.container;
this.prepend = options.prepend;
this.before = null;
}
var _proto = StyleSheet.prototype;
_proto.hydrate = function hydrate(nodes) {
nodes.forEach(this._insertTag);
};
_proto.insert = function insert(rule) {
// the max length is how many rules we have per style tag, it's 65000 in speedy mode
// it's 1 in dev because we insert source maps that map a single rule to a location
// and you can only have one source map per style tag
if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
this._insertTag(createStyleElement(this));
}
var tag = this.tags[this.tags.length - 1];
if (process.env.NODE_ENV !== 'production') {
var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;
if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {
// this would only cause problem in speedy mode
// but we don't want enabling speedy to affect the observable behavior
// so we report this error at all times
console.error("You're attempting to insert the following rule:\n" + rule + '\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.');
}
this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;
}
if (this.isSpeedy) {
var sheet = sheetForTag(tag);
try {
// this is the ultrafast version, works across browsers
// the big drawback is that the css won't be editable in devtools
sheet.insertRule(rule, sheet.cssRules.length);
} catch (e) {
if (process.env.NODE_ENV !== 'production' && !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear){/.test(rule)) {
console.error("There was a problem inserting the following rule: \"" + rule + "\"", e);
}
}
} else {
tag.appendChild(document.createTextNode(rule));
}
this.ctr++;
};
_proto.flush = function flush() {
// $FlowFixMe
this.tags.forEach(function (tag) {
return tag.parentNode.removeChild(tag);
});
this.tags = [];
this.ctr = 0;
if (process.env.NODE_ENV !== 'production') {
this._alreadyInsertedOrderInsensitiveRule = false;
}
};
return StyleSheet;
}();
export { StyleSheet };

View file

@ -0,0 +1,28 @@
{
"name": "@emotion/sheet",
"version": "1.0.2",
"description": "emotion's stylesheet",
"main": "dist/emotion-sheet.cjs.js",
"module": "dist/emotion-sheet.esm.js",
"browser": {
"./dist/emotion-sheet.cjs.js": "./dist/emotion-sheet.browser.cjs.js",
"./dist/emotion-sheet.esm.js": "./dist/emotion-sheet.browser.esm.js"
},
"types": "types/index.d.ts",
"license": "MIT",
"scripts": {
"test:typescript": "dtslint types"
},
"repository": "https://github.com/emotion-js/emotion/tree/main/packages/sheet",
"publishConfig": {
"access": "public"
},
"files": [
"src",
"dist",
"types/*.d.ts"
],
"devDependencies": {
"dtslint": "^0.3.0"
}
}

View file

@ -0,0 +1,165 @@
// @flow
/*
Based off glamor's StyleSheet, thanks Sunil
high performance StyleSheet for css-in-js systems
- uses multiple style tags behind the scenes for millions of rules
- uses `insertRule` for appending in production for *much* faster performance
// usage
import { StyleSheet } from '@emotion/sheet'
let styleSheet = new StyleSheet({ key: '', container: document.head })
styleSheet.insert('#box { border: 1px solid red; }')
- appends a css rule into the stylesheet
styleSheet.flush()
- empties the stylesheet of all its contents
*/
// $FlowFixMe
function sheetForTag(tag: HTMLStyleElement): CSSStyleSheet {
if (tag.sheet) {
// $FlowFixMe
return tag.sheet
}
// this weirdness brought to you by firefox
/* istanbul ignore next */
for (let i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].ownerNode === tag) {
// $FlowFixMe
return document.styleSheets[i]
}
}
}
export type Options = {
nonce?: string,
key: string,
container: HTMLElement,
speedy?: boolean,
prepend?: boolean
}
function createStyleElement(options: {
key: string,
nonce: string | void
}): HTMLStyleElement {
let tag = document.createElement('style')
tag.setAttribute('data-emotion', options.key)
if (options.nonce !== undefined) {
tag.setAttribute('nonce', options.nonce)
}
tag.appendChild(document.createTextNode(''))
tag.setAttribute('data-s', '')
return tag
}
export class StyleSheet {
isSpeedy: boolean
ctr: number
tags: HTMLStyleElement[]
container: HTMLElement
key: string
nonce: string | void
prepend: boolean | void
before: Element | null
constructor(options: Options) {
this.isSpeedy =
options.speedy === undefined
? process.env.NODE_ENV === 'production'
: options.speedy
this.tags = []
this.ctr = 0
this.nonce = options.nonce
// key is the value of the data-emotion attribute, it's used to identify different sheets
this.key = options.key
this.container = options.container
this.prepend = options.prepend
this.before = null
}
_insertTag = (tag: HTMLStyleElement) => {
let before
if (this.tags.length === 0) {
before = this.prepend ? this.container.firstChild : this.before
} else {
before = this.tags[this.tags.length - 1].nextSibling
}
this.container.insertBefore(tag, before)
this.tags.push(tag)
}
hydrate(nodes: HTMLStyleElement[]) {
nodes.forEach(this._insertTag)
}
insert(rule: string) {
// the max length is how many rules we have per style tag, it's 65000 in speedy mode
// it's 1 in dev because we insert source maps that map a single rule to a location
// and you can only have one source map per style tag
if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
this._insertTag(createStyleElement(this))
}
const tag = this.tags[this.tags.length - 1]
if (process.env.NODE_ENV !== 'production') {
const isImportRule =
rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105
if (isImportRule && (this: any)._alreadyInsertedOrderInsensitiveRule) {
// this would only cause problem in speedy mode
// but we don't want enabling speedy to affect the observable behavior
// so we report this error at all times
console.error(
`You're attempting to insert the following rule:\n` +
rule +
'\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.'
)
}
;(this: any)._alreadyInsertedOrderInsensitiveRule =
(this: any)._alreadyInsertedOrderInsensitiveRule || !isImportRule
}
if (this.isSpeedy) {
const sheet = sheetForTag(tag)
try {
// this is the ultrafast version, works across browsers
// the big drawback is that the css won't be editable in devtools
sheet.insertRule(rule, sheet.cssRules.length)
} catch (e) {
if (
process.env.NODE_ENV !== 'production' &&
!/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear){/.test(
rule
)
) {
console.error(
`There was a problem inserting the following rule: "${rule}"`,
e
)
}
}
} else {
tag.appendChild(document.createTextNode(rule))
}
this.ctr++
}
flush() {
// $FlowFixMe
this.tags.forEach(tag => tag.parentNode.removeChild(tag))
this.tags = []
this.ctr = 0
if (process.env.NODE_ENV !== 'production') {
;(this: any)._alreadyInsertedOrderInsensitiveRule = false
}
}
}

View file

@ -0,0 +1,24 @@
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
// TypeScript Version: 2.0
export interface Options {
nonce?: string
key: string
container: HTMLElement
speedy?: boolean
prepend?: boolean
}
export class StyleSheet {
isSpeedy: boolean
ctr: number
tags: Array<HTMLStyleElement>
container: HTMLElement
key: string
nonce?: string
before?: Element | null
constructor(options?: Options)
insert(rule: string): void
flush(): void
hydrate(nodes: Array<HTMLStyleElement>): void
}

View file

@ -0,0 +1,41 @@
# @emotion/utils
## 1.0.0
### Major Changes
- [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - `insertStyles` no longer calls `cache.insert` with a scoped class name as a selector when inserting keyframes. The change is internal and has no effect on Emotion users.
### Patch Changes
- [`debaad9a`](https://github.com/emotion-js/emotion/commit/debaad9ab4bd6c80312092826d9146f3d29c0899) [#1999](https://github.com/emotion-js/emotion/pull/1999) Thanks [@RoystonS](https://github.com/RoystonS)! - Fixed TypeScript definition of the `EmotionCache` by replacing the non-existent `stylis` method with `insert` that is available at runtime.
## 1.0.0-rc.0
### Major Changes
- [`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63) [#2030](https://github.com/emotion-js/emotion/pull/2030) Thanks [@Andarist](https://github.com/Andarist)! - Release candidate version.
## 1.0.0-next.1
### Patch Changes
- [`debaad9a`](https://github.com/emotion-js/emotion/commit/debaad9ab4bd6c80312092826d9146f3d29c0899) [#1999](https://github.com/emotion-js/emotion/pull/1999) Thanks [@RoystonS](https://github.com/RoystonS)! - Fixed TypeScript definition of the `EmotionCache` by replacing the non-existent `stylis` method with `insert` that is available at runtime.
## 1.0.0-next.0
### Major Changes
- [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - `insertStyles` no longer calls `cache.insert` with a scoped class name as a selector when inserting keyframes. The change is internal and has no effect on Emotion users.
## 0.11.3
### Patch Changes
- [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file
## 0.11.2
### Patch Changes
- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool

View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) Emotion team and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View file

@ -0,0 +1,45 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var isBrowser = "object" !== 'undefined';
function getRegisteredStyles(registered, registeredStyles, classNames) {
var rawClassName = '';
classNames.split(' ').forEach(function (className) {
if (registered[className] !== undefined) {
registeredStyles.push(registered[className] + ";");
} else {
rawClassName += className + " ";
}
});
return rawClassName;
}
var insertStyles = function insertStyles(cache, serialized, isStringTag) {
var className = cache.key + "-" + serialized.name;
if ( // we only need to add the styles to the registered cache if the
// class name could be used further down
// the tree but if it's a string tag, we know it won't
// so we don't have to add it to registered cache.
// this improves memory usage since we can avoid storing the whole style string
(isStringTag === false || // we need to always store it if we're in compat mode and
// in node since emotion-server relies on whether a style is in
// the registered cache to know whether a style is global or not
// also, note that this check will be dead code eliminated in the browser
isBrowser === false ) && cache.registered[className] === undefined) {
cache.registered[className] = serialized.styles;
}
if (cache.inserted[serialized.name] === undefined) {
var current = serialized;
do {
var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
current = current.next;
} while (current !== undefined);
}
};
exports.getRegisteredStyles = getRegisteredStyles;
exports.insertStyles = insertStyles;

View file

@ -0,0 +1,40 @@
var isBrowser = "object" !== 'undefined';
function getRegisteredStyles(registered, registeredStyles, classNames) {
var rawClassName = '';
classNames.split(' ').forEach(function (className) {
if (registered[className] !== undefined) {
registeredStyles.push(registered[className] + ";");
} else {
rawClassName += className + " ";
}
});
return rawClassName;
}
var insertStyles = function insertStyles(cache, serialized, isStringTag) {
var className = cache.key + "-" + serialized.name;
if ( // we only need to add the styles to the registered cache if the
// class name could be used further down
// the tree but if it's a string tag, we know it won't
// so we don't have to add it to registered cache.
// this improves memory usage since we can avoid storing the whole style string
(isStringTag === false || // we need to always store it if we're in compat mode and
// in node since emotion-server relies on whether a style is in
// the registered cache to know whether a style is global or not
// also, note that this check will be dead code eliminated in the browser
isBrowser === false ) && cache.registered[className] === undefined) {
cache.registered[className] = serialized.styles;
}
if (cache.inserted[serialized.name] === undefined) {
var current = serialized;
do {
var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
current = current.next;
} while (current !== undefined);
}
};
export { getRegisteredStyles, insertStyles };

View file

@ -0,0 +1,54 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var isBrowser = typeof document !== 'undefined';
function getRegisteredStyles(registered, registeredStyles, classNames) {
var rawClassName = '';
classNames.split(' ').forEach(function (className) {
if (registered[className] !== undefined) {
registeredStyles.push(registered[className] + ";");
} else {
rawClassName += className + " ";
}
});
return rawClassName;
}
var insertStyles = function insertStyles(cache, serialized, isStringTag) {
var className = cache.key + "-" + serialized.name;
if ( // we only need to add the styles to the registered cache if the
// class name could be used further down
// the tree but if it's a string tag, we know it won't
// so we don't have to add it to registered cache.
// this improves memory usage since we can avoid storing the whole style string
(isStringTag === false || // we need to always store it if we're in compat mode and
// in node since emotion-server relies on whether a style is in
// the registered cache to know whether a style is global or not
// also, note that this check will be dead code eliminated in the browser
isBrowser === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
cache.registered[className] = serialized.styles;
}
if (cache.inserted[serialized.name] === undefined) {
var stylesForSSR = '';
var current = serialized;
do {
var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
if (!isBrowser && maybeStyles !== undefined) {
stylesForSSR += maybeStyles;
}
current = current.next;
} while (current !== undefined);
if (!isBrowser && stylesForSSR.length !== 0) {
return stylesForSSR;
}
}
};
exports.getRegisteredStyles = getRegisteredStyles;
exports.insertStyles = insertStyles;

View file

@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === "production") {
module.exports = require("./emotion-utils.cjs.prod.js");
} else {
module.exports = require("./emotion-utils.cjs.dev.js");
}

View file

@ -0,0 +1,2 @@
// @flow
export * from "../src/index.js";

View file

@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
});
var isBrowser = "undefined" != typeof document;
function getRegisteredStyles(registered, registeredStyles, classNames) {
var rawClassName = "";
return classNames.split(" ").forEach((function(className) {
void 0 !== registered[className] ? registeredStyles.push(registered[className] + ";") : rawClassName += className + " ";
})), rawClassName;
}
var insertStyles = function(cache, serialized, isStringTag) {
var className = cache.key + "-" + serialized.name;
if ((!1 === isStringTag || !1 === isBrowser && void 0 !== cache.compat) && void 0 === cache.registered[className] && (cache.registered[className] = serialized.styles),
void 0 === cache.inserted[serialized.name]) {
var stylesForSSR = "", current = serialized;
do {
var maybeStyles = cache.insert(serialized === current ? "." + className : "", current, cache.sheet, !0);
isBrowser || void 0 === maybeStyles || (stylesForSSR += maybeStyles), current = current.next;
} while (void 0 !== current);
if (!isBrowser && 0 !== stylesForSSR.length) return stylesForSSR;
}
};
exports.getRegisteredStyles = getRegisteredStyles, exports.insertStyles = insertStyles;

View file

@ -0,0 +1,49 @@
var isBrowser = typeof document !== 'undefined';
function getRegisteredStyles(registered, registeredStyles, classNames) {
var rawClassName = '';
classNames.split(' ').forEach(function (className) {
if (registered[className] !== undefined) {
registeredStyles.push(registered[className] + ";");
} else {
rawClassName += className + " ";
}
});
return rawClassName;
}
var insertStyles = function insertStyles(cache, serialized, isStringTag) {
var className = cache.key + "-" + serialized.name;
if ( // we only need to add the styles to the registered cache if the
// class name could be used further down
// the tree but if it's a string tag, we know it won't
// so we don't have to add it to registered cache.
// this improves memory usage since we can avoid storing the whole style string
(isStringTag === false || // we need to always store it if we're in compat mode and
// in node since emotion-server relies on whether a style is in
// the registered cache to know whether a style is global or not
// also, note that this check will be dead code eliminated in the browser
isBrowser === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
cache.registered[className] = serialized.styles;
}
if (cache.inserted[serialized.name] === undefined) {
var stylesForSSR = '';
var current = serialized;
do {
var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
if (!isBrowser && maybeStyles !== undefined) {
stylesForSSR += maybeStyles;
}
current = current.next;
} while (current !== undefined);
if (!isBrowser && stylesForSSR.length !== 0) {
return stylesForSSR;
}
}
};
export { getRegisteredStyles, insertStyles };

View file

@ -0,0 +1,28 @@
{
"name": "@emotion/utils",
"version": "1.0.0",
"description": "internal utils for emotion",
"main": "dist/emotion-utils.cjs.js",
"module": "dist/emotion-utils.esm.js",
"browser": {
"./dist/emotion-utils.cjs.js": "./dist/emotion-utils.browser.cjs.js",
"./dist/emotion-utils.esm.js": "./dist/emotion-utils.browser.esm.js"
},
"types": "types/index.d.ts",
"license": "MIT",
"scripts": {
"test:typescript": "dtslint types"
},
"repository": "https://github.com/emotion-js/emotion/tree/master/packages/utils",
"publishConfig": {
"access": "public"
},
"files": [
"src",
"dist",
"types/*.d.ts"
],
"devDependencies": {
"dtslint": "^0.3.0"
}
}

View file

@ -0,0 +1,66 @@
// @flow
import type { RegisteredCache, EmotionCache, SerializedStyles } from './types'
const isBrowser = typeof document !== 'undefined'
export function getRegisteredStyles(
registered: RegisteredCache,
registeredStyles: string[],
classNames: string
) {
let rawClassName = ''
classNames.split(' ').forEach(className => {
if (registered[className] !== undefined) {
registeredStyles.push(`${registered[className]};`)
} else {
rawClassName += `${className} `
}
})
return rawClassName
}
export const insertStyles = (
cache: EmotionCache,
serialized: SerializedStyles,
isStringTag: boolean
) => {
let className = `${cache.key}-${serialized.name}`
if (
// we only need to add the styles to the registered cache if the
// class name could be used further down
// the tree but if it's a string tag, we know it won't
// so we don't have to add it to registered cache.
// this improves memory usage since we can avoid storing the whole style string
(isStringTag === false ||
// we need to always store it if we're in compat mode and
// in node since emotion-server relies on whether a style is in
// the registered cache to know whether a style is global or not
// also, note that this check will be dead code eliminated in the browser
(isBrowser === false && cache.compat !== undefined)) &&
cache.registered[className] === undefined
) {
cache.registered[className] = serialized.styles
}
if (cache.inserted[serialized.name] === undefined) {
let stylesForSSR = ''
let current = serialized
do {
let maybeStyles = cache.insert(
serialized === current ? `.${className}` : '',
current,
cache.sheet,
true
)
if (!isBrowser && maybeStyles !== undefined) {
stylesForSSR += maybeStyles
}
current = current.next
} while (current !== undefined)
if (!isBrowser && stylesForSSR.length !== 0) {
return stylesForSSR
}
}
}
export * from './types'

Some files were not shown because too many files have changed in this diff Show more