diff --git a/README.md b/README.md
index 6f86e79..8243a75 100644
--- a/README.md
+++ b/README.md
@@ -83,36 +83,41 @@ class App extends React.Component {
}
```
+## Styles
+
+This component requires some styles to be available in the document. By default, you don't need to do anything, the component will automatically inject the required styles in the document head. If you want to disable this behaviour and manually inject the CSS, you can set the `disableAutomaticStylesInjection` prop to `true` and use the file available in the package: `react-easy-crop/react-easy-crop.css`.
+
## Props
-| Prop | Type | Required | Description |
-| :---------- | :---------------------------------- | :------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `image` | string | | The image to be cropped. `image` or `video` is required. |
-| `video` | string | | The video to be cropped. `image` or `video` is required. |
-| `crop` | `{ x: number, y: number }` | ✓ | Position of the media. `{ x: 0, y: 0 }` will center the media under the cropper. |
-| `zoom` | number | | Zoom of the media between `minZoom` and `maxZoom`. Defaults to 1. |
-| `rotation` | number (in degrees) | | Rotation of the media. Defaults to 0. |
-| `aspect` | number | | Aspect of the cropper. The value is the ratio between its width and its height. The default value is `4/3` |
-| `minZoom` | number | | Minimum zoom of the media. Defaults to 1. |
-| `maxZoom` | number | | Maximum zoom of the media. Defaults to 3. |
-| `zoomWithScroll` | boolean | | Enable zoom by scrolling. Defaults to `true` |
-| `cropShape` | 'rect' \| 'round' | | Shape of the crop area. Defaults to 'rect'. |
-| `cropSize` | `{ width: number, height: number }` | | Size of the crop area (in pixels). If you don't provide it, it will be computed automatically using the `aspect` prop and the media size. _Warning_: This property is rerendering the component when changed so you need to ensure that you are not providing a new object instance at each render. |
-| `showGrid` | boolean | | Whether to show or not the grid (third-lines). Defaults to `true`. |
-| `zoomSpeed` | number | | Multiplies the value by which the zoom changes. Defaults to 1. |
-| `onCropChange` | crop => void | ✓ | Called everytime the crop is changed. Use it to update your `crop` state. |
-| `onZoomChange` | zoom => void | | Called everytime the zoom is changed. Use it to update your `zoom` state. |
-| `onRotationChange` | rotation => void | | Called everytime the rotation is changed (with mobile gestures). Use it to update your `rotation` state. |
-| [`onCropComplete`](#onCropCompleteProp) | Function | | Called when the user stops moving the media or stops zooming. It will be passed the corresponding cropped area on the media in percentages and pixels |
-| `style` | `{ containerStyle: object, mediaStyle: object, cropAreaStyle: object }` | | Custom styles to be used with the Cropper. Styles passed via the style prop are merged with the defaults. |
-| `classes` | `{ containerClassName: string, mediaClassName: string, cropAreaClassName: string }` | | Custom class names to be used with the Cropper. Classes passed via the classes prop are merged with the defaults. |
-| `mediaProps` | object | | The properties you want to apply to the media tag (![]()
or depending on your media) |
-| `restrictPosition` | boolean | | Whether the position of the media should be restricted to the boundaries of the cropper. Useful setting in case of `zoom < 1` or if the cropper should preserve all media content while forcing a specific aspect ratio for media throughout the application. Example: https://codesandbox.io/s/1rmqky233q. |
-| |
-| `initialCroppedAreaPixels` | `{ width: number, height: number, x: number, y: number}` | | Use this to set the initial crop position/zoom of the cropper (for example, when editing a previously cropped media). The value should be the same as the `croppedAreaPixels` passed to [`onCropComplete`](#onCropCompleteProp) Example: https://codesandbox.io/s/pmj19vp2yx. |
-| `onInteractionStart` | `Function` | | Called everytime a user starts a wheel, touch or mousedown event. |
-| `onInteractionEnd` | `Function` | | Called everytime a user ends a wheel, touch or mousedown event. |
-| `onMediaLoaded` | `Function` | | Called when media gets loaded. Gets passed an `mediaSize` object like `{ width, height, naturalWidth, naturalHeight }` |
+| Prop | Type | Required | Description |
+| :-------------------------------------- | :---------------------------------------------------------------------------------- | :------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `image` | string | | The image to be cropped. `image` or `video` is required. |
+| `video` | string | | The video to be cropped. `image` or `video` is required. |
+| `crop` | `{ x: number, y: number }` | ✓ | Position of the media. `{ x: 0, y: 0 }` will center the media under the cropper. |
+| `zoom` | number | | Zoom of the media between `minZoom` and `maxZoom`. Defaults to 1. |
+| `rotation` | number (in degrees) | | Rotation of the media. Defaults to 0. |
+| `aspect` | number | | Aspect of the cropper. The value is the ratio between its width and its height. The default value is `4/3` |
+| `minZoom` | number | | Minimum zoom of the media. Defaults to 1. |
+| `maxZoom` | number | | Maximum zoom of the media. Defaults to 3. |
+| `zoomWithScroll` | boolean | | Enable zoom by scrolling. Defaults to `true` |
+| `cropShape` | 'rect' \| 'round' | | Shape of the crop area. Defaults to 'rect'. |
+| `cropSize` | `{ width: number, height: number }` | | Size of the crop area (in pixels). If you don't provide it, it will be computed automatically using the `aspect` prop and the media size. _Warning_: This property is rerendering the component when changed so you need to ensure that you are not providing a new object instance at each render. |
+| `showGrid` | boolean | | Whether to show or not the grid (third-lines). Defaults to `true`. |
+| `zoomSpeed` | number | | Multiplies the value by which the zoom changes. Defaults to 1. |
+| `onCropChange` | crop => void | ✓ | Called everytime the crop is changed. Use it to update your `crop` state. |
+| `onZoomChange` | zoom => void | | Called everytime the zoom is changed. Use it to update your `zoom` state. |
+| `onRotationChange` | rotation => void | | Called everytime the rotation is changed (with mobile gestures). Use it to update your `rotation` state. |
+| [`onCropComplete`](#onCropCompleteProp) | Function | | Called when the user stops moving the media or stops zooming. It will be passed the corresponding cropped area on the media in percentages and pixels |
+| `style` | `{ containerStyle: object, mediaStyle: object, cropAreaStyle: object }` | | Custom styles to be used with the Cropper. Styles passed via the style prop are merged with the defaults. |
+| `classes` | `{ containerClassName: string, mediaClassName: string, cropAreaClassName: string }` | | Custom class names to be used with the Cropper. Classes passed via the classes prop are merged with the defaults. If you have CSS specificity issues, you should probably use the `disableAutomaticStylesInjection` prop. |
+| `mediaProps` | object | | The properties you want to apply to the media tag (![]()
or depending on your media) |
+| `restrictPosition` | boolean | | Whether the position of the media should be restricted to the boundaries of the cropper. Useful setting in case of `zoom < 1` or if the cropper should preserve all media content while forcing a specific aspect ratio for media throughout the application. Example: https://codesandbox.io/s/1rmqky233q. |
+| |
+| `initialCroppedAreaPixels` | `{ width: number, height: number, x: number, y: number}` | | Use this to set the initial crop position/zoom of the cropper (for example, when editing a previously cropped media). The value should be the same as the `croppedAreaPixels` passed to [`onCropComplete`](#onCropCompleteProp) Example: https://codesandbox.io/s/pmj19vp2yx. |
+| `onInteractionStart` | `Function` | | Called everytime a user starts a wheel, touch or mousedown event. |
+| `onInteractionEnd` | `Function` | | Called everytime a user ends a wheel, touch or mousedown event. |
+| `onMediaLoaded` | `Function` | | Called when media gets loaded. Gets passed an `mediaSize` object like `{ width, height, naturalWidth, naturalHeight }` |
+| `disableAutomaticStylesInjection` | boolean | | Whether to auto inject styles using a style tag in the document head on component mount. When disabled you need to import the css file into your application manually (style file is available in `react-easy-crop/react-easy-crop.css`). Example with sass/scss `@import "~react-easy-crop/react-easy-crop";`. |
@@ -212,6 +217,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
diff --git a/bili.config.ts b/bili.config.ts
index 285898e..8eb7ade 100644
--- a/bili.config.ts
+++ b/bili.config.ts
@@ -8,10 +8,16 @@ const config: Config = {
format: ['cjs', 'umd', 'umd-min', 'esm'],
moduleName: 'ReactEasyCrop',
sourceMap: true,
+ extractCSS: false,
},
globals: {
react: 'React',
},
+ plugins: {
+ postcss: {
+ inject: false,
+ },
+ },
extendConfig(config, { format }) {
if (format.startsWith('umd')) {
config.output.fileName = 'umd/react-easy-crop[min].js'
diff --git a/package.json b/package.json
index 89d6f69..91f86f0 100644
--- a/package.json
+++ b/package.json
@@ -40,8 +40,6 @@
"react-dom": ">=16.4.0"
},
"dependencies": {
- "@emotion/core": "^10.0.27",
- "@emotion/styled": "^10.0.27",
"tslib": "1.11.2"
},
"devDependencies": {
@@ -78,6 +76,7 @@
"np": "^4.0.2",
"prettier": "^1.19.1",
"query-string": "^6.1.0",
+ "raw-loader": "^4.0.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"rimraf": "^3.0.0",
diff --git a/scripts/copy-build-files.js b/scripts/copy-build-files.js
index e0ed55b..0b67a20 100644
--- a/scripts/copy-build-files.js
+++ b/scripts/copy-build-files.js
@@ -3,9 +3,9 @@ import path from 'path'
import fse from 'fs-extra'
async function copyFile(file) {
- const buildPath = path.resolve(__dirname, '../dist/', path.basename(file))
- await fse.copy(file, buildPath)
- console.log(`Copied ${file} to ${buildPath}`)
+ const buildPath = path.resolve(__dirname, '../dist/', path.basename(file.to || file.from))
+ await fse.copy(file.from, buildPath)
+ console.log(`Copied ${file.from} to ${buildPath}`)
}
async function createPackageFile() {
@@ -34,7 +34,11 @@ async function createPackageFile() {
}
async function run() {
- await Promise.all(['./README.md'].map(file => copyFile(file)))
+ await Promise.all(
+ [{ from: './README.md' }, { from: './src/styles.css', to: 'react-easy-crop.css' }].map(file =>
+ copyFile(file)
+ )
+ )
await createPackageFile()
}
diff --git a/src/declarations.d.ts b/src/declarations.d.ts
new file mode 100644
index 0000000..8be70df
--- /dev/null
+++ b/src/declarations.d.ts
@@ -0,0 +1,4 @@
+declare module '*.css' {
+ const content: string
+ export default content
+}
diff --git a/src/helpers.ts b/src/helpers.ts
index b8b091a..6d95ef5 100644
--- a/src/helpers.ts
+++ b/src/helpers.ts
@@ -259,3 +259,19 @@ export function translateSize(width: number, height: number, rotation: number):
return { width: maxX - minX, height: maxY - minY }
}
+
+/**
+ * Combine multiple class names into a single string.
+ */
+export function classNames(...args: (boolean | string | number | undefined | void | null)[]) {
+ return args
+ .filter(value => {
+ if (typeof value === 'string' && value.length > 0) {
+ return true
+ }
+
+ return false
+ })
+ .join(' ')
+ .trim()
+}
diff --git a/src/index.tsx b/src/index.tsx
index ab9c078..e631806 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,4 @@
import React from 'react'
-import { Container, CropArea, Img, Video } from './styles'
import { Area, MediaSize, Point, Size } from './types'
import {
getCropSize,
@@ -9,7 +8,9 @@ import {
computeCroppedArea,
getCenter,
getInitialCropFromCroppedAreaPixels,
+ classNames,
} from './helpers'
+import cssStyles from './styles.css'
type Props = {
image?: string
@@ -45,6 +46,7 @@ type Props = {
restrictPosition: boolean
initialCroppedAreaPixels?: Area
mediaProps: React.ImgHTMLAttributes | React.VideoHTMLAttributes
+ disableAutomaticStylesInjection?: boolean
}
type State = {
@@ -75,6 +77,7 @@ class Cropper extends React.Component {
imageRef: HTMLImageElement | null = null
videoRef: HTMLVideoElement | null = null
containerRef: HTMLDivElement | null = null
+ styleRef: HTMLStyleElement | null = null
containerRect: DOMRect | null = null
mediaSize: MediaSize = { width: 0, height: 0, naturalWidth: 0, naturalHeight: 0 }
dragStartPosition: Point = { x: 0, y: 0 }
@@ -99,6 +102,13 @@ class Cropper extends React.Component {
this.containerRef.addEventListener('gesturechange', this.preventZoomSafari)
}
+ if (!this.props.disableAutomaticStylesInjection) {
+ this.styleRef = document.createElement('style')
+ this.styleRef.setAttribute('type', 'text/css')
+ this.styleRef.innerHTML = cssStyles
+ document.head.appendChild(this.styleRef)
+ }
+
// when rendered via SSR, the image can already be loaded and its onLoad callback will never be called
if (this.imageRef && this.imageRef.complete) {
this.onMediaLoad()
@@ -111,6 +121,11 @@ class Cropper extends React.Component {
this.containerRef.removeEventListener('gesturestart', this.preventZoomSafari)
this.containerRef.removeEventListener('gesturechange', this.preventZoomSafari)
}
+
+ if (this.styleRef) {
+ this.styleRef.remove()
+ }
+
this.cleanEvents()
this.props.zoomWithScroll && this.clearScrollEvent()
}
@@ -431,19 +446,19 @@ class Cropper extends React.Component {
} = this.props
return (
- (this.containerRef = el)}
data-testid="container"
style={containerStyle}
- className={containerClassName}
+ className={classNames('reactEasyCrop_Container', containerClassName)}
>
{image ? (
- ![]()
)}
src={image}
ref={(el: HTMLImageElement) => (this.imageRef = el)}
style={{
@@ -454,12 +469,11 @@ class Cropper extends React.Component {
/>
) : (
video && (
-
+
)
}
}
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..b5501f0
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,66 @@
+.reactEasyCrop_Container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+ user-select: none;
+ touch-action: none;
+ cursor: move;
+}
+
+.reactEasyCrop_Image,
+.reactEasyCrop_Video {
+ max-width: 100%;
+ max-height: 100%;
+ margin: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */
+}
+
+.reactEasyCrop_CropArea {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ border: 1px solid rgba(255, 255, 255, 0.5);
+ box-sizing: border-box;
+ box-shadow: 0 0 0 9999em;
+ color: rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+}
+
+.reactEasyCrop_CropAreaRound {
+ border-radius: 50%;
+}
+
+.reactEasyCrop_CropAreaGrid::before {
+ content: ' ';
+ box-sizing: border-box;
+ position: absolute;
+ border: 1px solid rgba(255, 255, 255, 0.5);
+ top: 0;
+ bottom: 0;
+ left: 33.33%;
+ right: 33.33%;
+ border-top: 0;
+ border-bottom: 0;
+}
+
+.reactEasyCrop_CropAreaGrid::after {
+ content: ' ';
+ box-sizing: border-box;
+ position: absolute;
+ border: 1px solid rgba(255, 255, 255, 0.5);
+ top: 33.33%;
+ bottom: 33.33%;
+ left: 0;
+ right: 0;
+ border-left: 0;
+ border-right: 0;
+}
diff --git a/src/styles.ts b/src/styles.ts
deleted file mode 100644
index c8aa7a1..0000000
--- a/src/styles.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import styled from '@emotion/styled'
-
-export const Container = styled('div')({
- position: 'absolute',
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- overflow: 'hidden',
- userSelect: 'none',
- touchAction: 'none',
- cursor: 'move',
-})
-
-const mediaStyles = {
- maxWidth: '100%',
- maxHeight: '100%',
- margin: 'auto',
- position: 'absolute',
- top: 0,
- bottom: 0,
- left: 0,
- right: 0,
- willChange: 'transform', // this improves performances and prevent painting issues on iOS Chrome
-}
-
-// @ts-ignore I don't want to duplicate mediaStyles
-export const Img = styled('img')(mediaStyles)
-// @ts-ignore I don't want to duplicate mediaStyles
-export const Video = styled('video')(mediaStyles)
-
-const lineBorder = '1px solid rgba(255, 255, 255, 0.5)'
-const cropperLines = {
- content: '" "',
- boxSizing: 'border-box',
- position: 'absolute',
- border: lineBorder,
-}
-const cropperArea = {
- position: 'absolute',
- left: '50%',
- top: '50%',
- transform: 'translate(-50%, -50%)',
- border: lineBorder,
- boxSizing: 'border-box',
- boxShadow: '0 0 0 9999em',
- color: 'rgba(0,0,0,0.5)',
- overflow: 'hidden',
-}
-const gridLines = {
- '&::before': {
- ...cropperLines,
- top: 0,
- bottom: 0,
- left: '33.33%',
- right: '33.33%',
- borderTop: 0,
- borderBottom: 0,
- },
- '&::after': {
- ...cropperLines,
- top: '33.33%',
- bottom: '33.33%',
- left: 0,
- right: 0,
- borderLeft: 0,
- borderRight: 0,
- },
-}
-const roundShape = {
- borderRadius: '50%',
-}
-
-type CropAreaProps = {
- cropShape: 'round' | 'rect'
- showGrid: boolean
-}
-
-// @ts-ignore styled definition does not accept an empty object as first param, while it actually works
-export const CropArea = styled('div')({}, ({ cropShape, showGrid }: CropAreaProps) => ({
- ...(() => {
- switch (cropShape) {
- case 'round':
- return { ...cropperArea, ...roundShape }
- case 'rect':
- default:
- return cropperArea
- }
- })(),
- ...(showGrid ? gridLines : {}),
-}))
diff --git a/webpack.config.js b/webpack.config.js
index fa999ae..82f7bc4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -19,8 +19,10 @@ module.exports = {
{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
{
test: /\.css$/,
+ include: [path.resolve('./example')],
use: ['style-loader', 'css-loader'],
},
+ { test: /\.css$/, include: [path.resolve('./src')], use: 'raw-loader' },
],
},
plugins: [
@@ -28,7 +30,7 @@ module.exports = {
new CopyWebpackPlugin([{ from: 'examples/src/images', to: 'images' }]),
],
resolve: {
- extensions: ['.js', '.jsx', '.ts', '.tsx'],
+ extensions: ['.js', '.jsx', '.ts', '.tsx', '.css'],
},
devServer: {
port: 3001,
diff --git a/yarn.lock b/yarn.lock
index 08868fb..8a79172 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1383,20 +1383,13 @@
pirates "^4.0.0"
source-map-support "^0.5.16"
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.2.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.2.0", "@babel/runtime@^7.4.5":
version "7.4.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
dependencies:
regenerator-runtime "^0.13.2"
-"@babel/runtime@^7.5.5":
- version "7.7.7"
- resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
- integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==
- dependencies:
- regenerator-runtime "^0.13.2"
-
"@babel/template@^7.0.0":
version "7.2.2"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907"
@@ -1528,108 +1521,6 @@
debug "^3.1.0"
lodash.once "^4.1.1"
-"@emotion/cache@^10.0.27":
- version "10.0.27"
- resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.27.tgz#7895db204e2c1a991ae33d51262a3a44f6737303"
- integrity sha512-Zp8BEpbMunFsTcqAK4D7YTm3MvCp1SekflSLJH8lze2fCcSZ/yMkXHo8kb3t1/1Tdd3hAqf3Fb7z9VZ+FMiC9w==
- dependencies:
- "@emotion/sheet" "0.9.4"
- "@emotion/stylis" "0.8.5"
- "@emotion/utils" "0.11.3"
- "@emotion/weak-memoize" "0.2.5"
-
-"@emotion/core@^10.0.27":
- version "10.0.27"
- resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.27.tgz#7c3f78be681ab2273f3bf11ca3e2edc4a9dd1fdc"
- integrity sha512-XbD5R36pVbohQMnKfajHv43g8EbN4NHdF6Zh9zg/C0nr0jqwOw3gYnC07Xj3yG43OYSRyrGsoQ5qPwc8ycvLZw==
- dependencies:
- "@babel/runtime" "^7.5.5"
- "@emotion/cache" "^10.0.27"
- "@emotion/css" "^10.0.27"
- "@emotion/serialize" "^0.11.15"
- "@emotion/sheet" "0.9.4"
- "@emotion/utils" "0.11.3"
-
-"@emotion/css@^10.0.27":
- version "10.0.27"
- resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
- integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
- dependencies:
- "@emotion/serialize" "^0.11.15"
- "@emotion/utils" "0.11.3"
- babel-plugin-emotion "^10.0.27"
-
-"@emotion/hash@0.7.4":
- version "0.7.4"
- resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831"
- integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==
-
-"@emotion/is-prop-valid@0.8.6":
- version "0.8.6"
- resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz#4757646f0a58e9dec614c47c838e7147d88c263c"
- integrity sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ==
- dependencies:
- "@emotion/memoize" "0.7.4"
-
-"@emotion/memoize@0.7.4":
- version "0.7.4"
- resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
- integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
-
-"@emotion/serialize@^0.11.15":
- version "0.11.15"
- resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.15.tgz#9a0f5873fb458d87d4f23e034413c12ed60a705a"
- integrity sha512-YE+qnrmGwyR+XB5j7Bi+0GT1JWsdcjM/d4POu+TXkcnrRs4RFCCsi3d/Ebf+wSStHqAlTT2+dfd+b9N9EO2KBg==
- dependencies:
- "@emotion/hash" "0.7.4"
- "@emotion/memoize" "0.7.4"
- "@emotion/unitless" "0.7.5"
- "@emotion/utils" "0.11.3"
- csstype "^2.5.7"
-
-"@emotion/sheet@0.9.4":
- version "0.9.4"
- resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
- integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
-
-"@emotion/styled-base@^10.0.27":
- version "10.0.27"
- resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.27.tgz#d9efa307ae4e938fcc4d0596b40b7e8bc10f7c7c"
- integrity sha512-ufHM/HhE3nr309hJG9jxuFt71r6aHn7p+bwXduFxcwPFEfBIqvmZUMtZ9YxIsY61PVwK3bp4G1XhaCzy9smVvw==
- dependencies:
- "@babel/runtime" "^7.5.5"
- "@emotion/is-prop-valid" "0.8.6"
- "@emotion/serialize" "^0.11.15"
- "@emotion/utils" "0.11.3"
-
-"@emotion/styled@^10.0.27":
- version "10.0.27"
- resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
- integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==
- dependencies:
- "@emotion/styled-base" "^10.0.27"
- babel-plugin-emotion "^10.0.27"
-
-"@emotion/stylis@0.8.5":
- version "0.8.5"
- resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
- integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
-
-"@emotion/unitless@0.7.5":
- version "0.7.5"
- resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
- integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
-
-"@emotion/utils@0.11.3":
- version "0.11.3"
- resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
- integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
-
-"@emotion/weak-memoize@0.2.5":
- version "0.2.5"
- resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
- integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
-
"@jest/console@^24.3.0":
version "24.3.0"
resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.3.0.tgz#7bd920d250988ba0bf1352c4493a48e1cb97671e"
@@ -2257,6 +2148,16 @@ ajv@^6.10.0, ajv@^6.10.2:
json-schema-traverse "^0.4.1"
uri-js "^4.2.2"
+ajv@^6.12.0:
+ version "6.12.2"
+ resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.2.tgz#c629c5eced17baf314437918d2da88c99d5958cd"
+ integrity sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==
+ dependencies:
+ fast-deep-equal "^3.1.1"
+ fast-json-stable-stringify "^2.0.0"
+ json-schema-traverse "^0.4.1"
+ uri-js "^4.2.2"
+
all-contributors-cli@^6.4.0:
version "6.6.1"
resolved "https://registry.yarnpkg.com/all-contributors-cli/-/all-contributors-cli-6.6.1.tgz#8c6e42ef4d14fbf389a60d2bbfc9e77c22f6ae15"
@@ -2636,22 +2537,6 @@ babel-plugin-dynamic-import-node@^2.3.0:
dependencies:
object.assign "^4.1.0"
-babel-plugin-emotion@^10.0.27:
- version "10.0.27"
- resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.27.tgz#59001cf5de847c1d61f2079cd906a90a00d3184f"
- integrity sha512-SUNYcT4FqhOqvwv0z1oeYhqgheU8qrceLojuHyX17ngo7WtWqN5I9l3IGHzf21Xraj465CVzF4IvOlAF+3ed0A==
- dependencies:
- "@babel/helper-module-imports" "^7.0.0"
- "@emotion/hash" "0.7.4"
- "@emotion/memoize" "0.7.4"
- "@emotion/serialize" "^0.11.15"
- babel-plugin-macros "^2.0.0"
- babel-plugin-syntax-jsx "^6.18.0"
- convert-source-map "^1.5.0"
- escape-string-regexp "^1.0.5"
- find-root "^1.1.0"
- source-map "^0.5.7"
-
babel-plugin-istanbul@^5.1.0:
version "5.1.1"
resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.1.1.tgz#7981590f1956d75d67630ba46f0c22493588c893"
@@ -2668,20 +2553,6 @@ babel-plugin-jest-hoist@^24.3.0:
dependencies:
"@types/babel__traverse" "^7.0.6"
-babel-plugin-macros@^2.0.0:
- version "2.6.1"
- resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.6.1.tgz#41f7ead616fc36f6a93180e89697f69f51671181"
- integrity sha512-6W2nwiXme6j1n2erPOnmRiWfObUhWH7Qw1LMi9XZy8cj+KtESu3T6asZvtk5bMQQjX8te35o7CFueiSdL/2NmQ==
- dependencies:
- "@babel/runtime" "^7.4.2"
- cosmiconfig "^5.2.0"
- resolve "^1.10.0"
-
-babel-plugin-syntax-jsx@^6.18.0:
- version "6.18.0"
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
- integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
babel-plugin-transform-async-to-promises@^0.8.4:
version "0.8.15"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-promises/-/babel-plugin-transform-async-to-promises-0.8.15.tgz#13b6d8ef13676b4e3c576d3600b85344bb1ba346"
@@ -3165,16 +3036,11 @@ camelcase@^4.0.0, camelcase@^4.1.0:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
-camelcase@^5.0.0:
+camelcase@^5.0.0, camelcase@^5.2.0:
version "5.3.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
-camelcase@^5.2.0:
- version "5.2.0"
- resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.2.0.tgz#e7522abda5ed94cc0489e1b8466610e88404cf45"
- integrity sha512-IXFsBS2pC+X0j0N/GE7Dm7j3bsEBp+oTpb7F50dwEVX7rf3IgwO9XatnegTsDtniKCUtEJH4fSU6Asw7uoVLfQ==
-
caniuse-api@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -3616,7 +3482,7 @@ content-type@~1.0.4:
resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
-convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
+convert-source-map@^1.1.0, convert-source-map@^1.4.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
@@ -4019,11 +3885,6 @@ csstype@^2.2.0:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
integrity sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA==
-csstype@^2.5.7:
- version "2.6.5"
- resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.5.tgz#1cd1dff742ebf4d7c991470ae71e12bb6751e034"
- integrity sha512-JsTaiksRsel5n7XwqPAfB0l3TFKdpjW/kgAELf9vrb5adGA7UCPLajKK5s3nFrcFm3Rkyp/Qkgl73ENc1UY3cA==
-
currently-unhandled@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -4510,6 +4371,11 @@ emojis-list@^2.0.0:
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
+emojis-list@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+ integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
encodeurl@~1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -5252,6 +5118,11 @@ fast-deep-equal@^2.0.1:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
+fast-deep-equal@^3.1.1:
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
+ integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
+
fast-json-stable-stringify@2.x:
version "2.1.0"
resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -6178,9 +6049,9 @@ icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0:
integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
icss-utils@^4.1.0:
- version "4.1.0"
- resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.0.tgz#339dbbffb9f8729a243b701e1c29d4cc58c52f0e"
- integrity sha512-3DEun4VOeMvSczifM3F2cKQrDQ5Pj6WKhkOq6HD4QTnDUAq8MQRxy5TX6Sy1iY6WPBe4gQ3p5vTECjbIkglkkQ==
+ version "4.1.1"
+ resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
+ integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
dependencies:
postcss "^7.0.14"
@@ -7393,6 +7264,13 @@ json5@^2.1.0:
dependencies:
minimist "^1.2.0"
+json5@^2.1.2:
+ version "2.1.3"
+ resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
+ integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
+ dependencies:
+ minimist "^1.2.5"
+
jsonfile@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
@@ -7683,6 +7561,15 @@ loader-utils@^0.2.16:
json5 "^0.5.0"
object-assign "^4.0.1"
+loader-utils@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+ integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+ dependencies:
+ big.js "^5.2.2"
+ emojis-list "^3.0.0"
+ json5 "^2.1.2"
+
locate-path@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -8119,6 +8006,11 @@ minimist@1.2.0, minimist@^1.1.1, minimist@^1.2.0:
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
+minimist@^1.2.5:
+ version "1.2.5"
+ resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+ integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
minimist@~0.0.1:
version "0.0.10"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
@@ -9369,9 +9261,9 @@ postcss-modules-scope@1.1.0:
postcss "^6.0.1"
postcss-modules-scope@^2.1.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.1.0.tgz#ad3f5bf7856114f6fcab901b0502e2a2bc39d4eb"
- integrity sha512-91Rjps0JnmtUB0cujlc8KIKCsJXWjzuxGeT/+Q2i2HXKZ7nBUeF9YQTZZTNvHVoNYj1AthsjnGLtqDUE0Op79A==
+ version "2.2.0"
+ resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz#385cae013cc7743f5a7d7602d1073a89eaae62ee"
+ integrity sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==
dependencies:
postcss "^7.0.6"
postcss-selector-parser "^6.0.0"
@@ -9591,7 +9483,7 @@ postcss@^7.0.0, postcss@^7.0.1:
source-map "^0.6.1"
supports-color "^6.1.0"
-postcss@^7.0.14, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.14, postcss@^7.0.5:
version "7.0.14"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5"
integrity sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==
@@ -9600,6 +9492,15 @@ postcss@^7.0.14, postcss@^7.0.5, postcss@^7.0.6:
source-map "^0.6.1"
supports-color "^6.1.0"
+postcss@^7.0.6:
+ version "7.0.30"
+ resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.30.tgz#cc9378beffe46a02cbc4506a0477d05fcea9a8e2"
+ integrity sha512-nu/0m+NtIzoubO+xdAlwZl/u5S5vi/y6BCsoL8D+8IxsD3XvBS8X4YEADNIVXKVuQvduiucnRv+vPIqj56EGMQ==
+ dependencies:
+ chalk "^2.4.2"
+ source-map "^0.6.1"
+ supports-color "^6.1.0"
+
prelude-ls@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -9866,6 +9767,14 @@ raw-body@2.4.0:
iconv-lite "0.4.24"
unpipe "1.0.0"
+raw-loader@^4.0.1:
+ version "4.0.1"
+ resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.1.tgz#14e1f726a359b68437e183d5a5b7d33a3eba6933"
+ integrity sha512-baolhQBSi3iNh1cglJjA0mYzga+wePk7vdEX//1dTFd+v4TsQlQE0jitJSNF1OIP82rdYulH7otaVmdlDaJ64A==
+ dependencies:
+ loader-utils "^2.0.0"
+ schema-utils "^2.6.5"
+
rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
version "1.2.8"
resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -10616,6 +10525,14 @@ schema-utils@^1.0.0:
ajv-errors "^1.0.0"
ajv-keywords "^3.1.0"
+schema-utils@^2.6.5:
+ version "2.6.6"
+ resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.6.tgz#299fe6bd4a3365dc23d99fd446caff8f1d6c330c"
+ integrity sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==
+ dependencies:
+ ajv "^6.12.0"
+ ajv-keywords "^3.4.1"
+
scoped-regex@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8"
@@ -10940,7 +10857,7 @@ source-map-url@^0.4.0:
resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
-source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
+source-map@^0.5.0, source-map@^0.5.6:
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=