From b2d1fb330b7f8924e3086c9c4110d8b81b0a1661 Mon Sep 17 00:00:00 2001 From: Florent Schildknecht Date: Wed, 5 May 2021 17:38:33 +0200 Subject: [PATCH 01/27] docs(pragma): add "automatic runtime" section to JSX pragma guide - add link to JSX pragma guide from "How it works" guide --- .../docs/src/pages/guides/how-it-works.mdx | 41 +++-- packages/docs/src/pages/guides/jsx-pragma.mdx | 154 ++++++++++++++++-- 2 files changed, 168 insertions(+), 27 deletions(-) diff --git a/packages/docs/src/pages/guides/how-it-works.mdx b/packages/docs/src/pages/guides/how-it-works.mdx index 618251930..7ab15a5cf 100644 --- a/packages/docs/src/pages/guides/how-it-works.mdx +++ b/packages/docs/src/pages/guides/how-it-works.mdx @@ -4,13 +4,16 @@ title: How it Works # How it Works -Theme UI combines several libraries together to form a mini-framework for styling applications. +Theme UI combines several libraries together to form a mini-framework for +styling applications. Theme UI is built with: - [Emotion][]: used to generate isolated CSS with theming context -- [MDX][]: used to provide custom Emotion styled components to MDX documents, without polluting the global CSS scope -- [Typography.js][]: optionally used for creating rich typographic styles with a simple, high-level API +- [MDX][]: used to provide custom Emotion styled components to MDX documents, + without polluting the global CSS scope +- [Typography.js][]: optionally used for creating rich typographic styles with a + simple, high-level API [emotion]: https://emotion.sh [mdx]: https://mdxjs.com @@ -19,13 +22,16 @@ Theme UI is built with: ## ThemeProvider The Theme UI `ThemeProvider` component is a wrapper around MDX's `MDXProvider`, -which adds custom React components to context, -and Emotion's `ThemeProvider`, which adds the `theme` object to context for use with Emotion. +which adds custom React components to context, and Emotion's `ThemeProvider`, +which adds the `theme` object to context for use with Emotion. -The Theme UI `ThemeProvider` includes a default `components` object with styled components that pick up values from the `theme.styles` object. -For example, `theme.styles.h1` will be used in its `components.h1` component and rendered in MDX documents. +The Theme UI `ThemeProvider` includes a default `components` object with styled +components that pick up values from the `theme.styles` object. For example, +`theme.styles.h1` will be used in its `components.h1` component and rendered in +MDX documents. -For illustrative purposes, the `ThemeProvider` renders something like the following: +For illustrative purposes, the `ThemeProvider` renders something like the +following: ```jsx // for demonstration only – this does not reflect the actual source code @@ -50,18 +56,20 @@ export default ({ components, theme, children }) => ( ## Custom Components -When using the `components` prop to add custom MDX components, -each component is wrapped with the `sx` prop to allow the component to pick up values from the `theme.styles` object. +When using the `components` prop to add custom MDX components, each component is +wrapped with the `sx` prop to allow the component to pick up values from the +`theme.styles` object. ## JSX Pragma -The Theme UI JSX function wraps the Emotion JSX function, converting the `sx` prop to a call to `@theme-ui/css`. -The two examples below yield the same results: +The Theme UI JSX function wraps the Emotion JSX function, converting the `sx` +prop to a call to `@theme-ui/css`. The two examples below yield the same +results: ```jsx // with Emotion's JSX function // this is typically handled with the Emotion Babel preset -/** @jsxImportSource @emotion/reaact */ +/** @jsxImportSource @emotion/react */ import { css } from 'theme-ui' export default (props) => ( @@ -91,3 +99,10 @@ export default (props) => ( /> ) ``` + + + +Confused about this `@jsxImportSource` comment? Read more about +[JSX Pragma](/guides/jsx-pragma). + + diff --git a/packages/docs/src/pages/guides/jsx-pragma.mdx b/packages/docs/src/pages/guides/jsx-pragma.mdx index f106726b3..b4f6ba39c 100644 --- a/packages/docs/src/pages/guides/jsx-pragma.mdx +++ b/packages/docs/src/pages/guides/jsx-pragma.mdx @@ -4,13 +4,15 @@ title: JSX Pragma # JSX Pragma -Theme UI uses custom JSX functions and JSX import source comments to allow you to style elements with values from your theme using the [`sx` prop][]. +Theme UI uses custom JSX functions and JSX import source comments to allow you +to style elements with values from your theme using the [`sx` prop][]. ## What is JSX -JSX is an XML-like syntax extension to JavaScript. -It's a syntax sugar usually used for React's `jsx` function. -You don't need to write JSX to use React, but it's meant to make code more readable, especially for tree structures with attributes. +JSX is an XML-like syntax extension to JavaScript. It's a syntax sugar usually +used for React's `jsx` function. You don't need to write JSX to use React, but +it's meant to make code more readable, especially for tree structures with +attributes. Given the following JSX: @@ -34,19 +36,26 @@ jsx('div', { }) ``` -Most apps use Babel to compile JSX syntax for use with React or other similar libraries. -JSX can be compiled to _any_ function call. By default the Babel plugin will convert JSX into calls to the `jsx` function imported from `react/jsx-runtime`, but libraries like Preact, MDX, Emotion, and Vuejs use custom functions to create elements with JSX. +Most apps use Babel to compile JSX syntax for use with React or other similar +libraries. JSX can be compiled to _any_ function call. By default the Babel +plugin will convert JSX into calls to the `jsx` function imported from +`react/jsx-runtime`, but libraries like Preact, MDX, Emotion, and Vuejs use +custom functions to create elements with JSX. -Technically Babel also calls `jsxs` from `react/jsx-runtime` and `jsxDEV` from `react/jsx-dev-runtime` in some cases, but the concept still holds. +Technically Babel also calls `jsxs` from `react/jsx-runtime` and `jsxDEV` from +`react/jsx-dev-runtime` in some cases, but the concept still holds. -To change the underlying create element functions, you can either add an option to the Babel plugin or you can set a _pragma comment_ at the beginning of a module. -Changing the function import source in the Babel plugin will transform all JSX in an application into the same set of functions. -Using a pragma comment limits the change to only the modules that it's added to. -This lets you default to the React `jsx` function in most places and use custom functions only where you need it, -giving the author more control over where it's used. +To change the underlying create element functions, you can either add an option +to the Babel plugin or you can set a _pragma comment_ at the beginning of a +module. Changing the function import source in the Babel plugin will transform +all JSX in an application into the same set of functions. Using a pragma comment +limits the change to only the modules that it's added to. This lets you default +to the React `jsx` function in most places and use custom functions only where +you need it, giving the author more control over where it's used. -Theme UI uses custom create element functions to add the `sx` and `css` props in React. -The preferred way of using these functions is by adding the custom pragma comment to the top of your file. +Theme UI uses custom create element functions to add the `sx` and `css` props in +React. The preferred way of using these functions is by adding the custom pragma +comment to the top of your file. ```js /** @jsxImportSource theme-ui */ @@ -55,3 +64,120 @@ The preferred way of using these functions is by adding the custom pragma commen See the [`sx` prop][] docs to learn more. [`sx` prop]: /sx-prop + +## Automatic JSX runtime + +React v17 introduced a +[new JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html), +also called "automatic runtime" (backported to React v16.14.0) If you use any of +those versions together with a configurable transpiler (such as Babel or +TypeScript), you can configure JSX to use the automatic runtime (globally, for +your entire app), and no longer need to use the custom pragma comments in your +files to use `sx`. + +Here are a few examples showing how to do that depending how you build your +application: + +### Using @babel/preset-react + +```js +// babel.config.js +module.exports = { + presets: [ + [ + '@babel/preset-react', + { + importSource: 'theme-ui', // or '@theme-ui/core' + runtime: 'automatic', + throwIfNamespace: false, + }, + ], + ], + // ... +} +``` + +NOTE: this requires +[babel >= 7.9.0](https://babeljs.io/docs/en/babel-preset-react#react-automatic-runtime) + +### Using @babel/plugin-transform-react-jsx + +This plugin is included in the preset above, but can also used as a standalone +babel plugin. + +```js +// babel.config.js +module.exports = { + presets: [ + [ + '@babel/plugin-transform-react-jsx', + { + importSource: 'theme-ui', // or '@theme-ui/core' + runtime: 'automatic', + throwIfNamespace: false, + }, + ], + ], + // ... +} +``` + +NOTE: this requires +[babel >= 7.9.0](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#react-automatic-runtime) + +### Using TypeScript + +If you use TypeScript to transpile your source code with `tsc` (or only +typecheck), or for instance to run tests with `ts-jest` + +```json +// tsconfig.json +{ + "compilerOptions": { + "jsx": "react-jsx", + "jsxImportSource": "theme-ui" + } + // ... +} +``` + +NOTE: this requires +[TypeScript >= 4.1](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html#react-17-jsx-factories) + +NOTE: in order to typecheck `sx` using automatic runtime, you will also need to +add `sx` manually to React types: + +```ts +// To add `css` if you're using it somewhere +/// + +import {} from 'react' +import { ThemeUIStyleObject } from 'theme-ui' // or '@theme-ui/core' + +declare module 'react' { + interface Attributes { + sx?: ThemeUIStyleObject + } +} +``` + +### Using next.js + +```js +// babel.config.js +module.exports = { + presets: [ + [ + 'next/babel', + { + 'preset-react': { + importSource: 'theme-ui', // or '@theme-ui/core' + runtime: 'automatic', + throwIfNamespace: false, + }, + }, + ], + ], + // ... +} +``` From 32a96f68587291f6bcb9e6402e4671cef289eb42 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Wed, 19 May 2021 13:02:44 +0200 Subject: [PATCH 02/27] Update packages/docs/src/pages/guides/jsx-pragma.mdx --- packages/docs/src/pages/guides/jsx-pragma.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/src/pages/guides/jsx-pragma.mdx b/packages/docs/src/pages/guides/jsx-pragma.mdx index b4f6ba39c..e1b4638f4 100644 --- a/packages/docs/src/pages/guides/jsx-pragma.mdx +++ b/packages/docs/src/pages/guides/jsx-pragma.mdx @@ -47,7 +47,7 @@ Technically Babel also calls `jsxs` from `react/jsx-runtime` and `jsxDEV` from To change the underlying create element functions, you can either add an option to the Babel plugin or you can set a _pragma comment_ at the beginning of a -module. Changing the function import source in the Babel plugin will transform +module. Changing the function import source in Babel config will transform all JSX in an application into the same set of functions. Using a pragma comment limits the change to only the modules that it's added to. This lets you default to the React `jsx` function in most places and use custom functions only where From 636a92be7d6d237d648c56ddf6d5064f77173af0 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Wed, 19 May 2021 13:02:54 +0200 Subject: [PATCH 03/27] Update packages/docs/src/pages/guides/jsx-pragma.mdx --- packages/docs/src/pages/guides/jsx-pragma.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/src/pages/guides/jsx-pragma.mdx b/packages/docs/src/pages/guides/jsx-pragma.mdx index e1b4638f4..60b590736 100644 --- a/packages/docs/src/pages/guides/jsx-pragma.mdx +++ b/packages/docs/src/pages/guides/jsx-pragma.mdx @@ -10,7 +10,7 @@ to style elements with values from your theme using the [`sx` prop][]. ## What is JSX JSX is an XML-like syntax extension to JavaScript. It's a syntax sugar usually -used for React's `jsx` function. You don't need to write JSX to use React, but +used for [React's `jsx`](https://reactjs.org/docs/introducing-jsx.html) function. You don't need to write JSX to use React, but it's meant to make code more readable, especially for tree structures with attributes. From f2fbfe87529ecca0b4278f35dcec73f024baba28 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Wed, 19 May 2021 13:03:01 +0200 Subject: [PATCH 04/27] Update packages/docs/src/pages/guides/jsx-pragma.mdx --- packages/docs/src/pages/guides/jsx-pragma.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/docs/src/pages/guides/jsx-pragma.mdx b/packages/docs/src/pages/guides/jsx-pragma.mdx index 60b590736..cae0395e9 100644 --- a/packages/docs/src/pages/guides/jsx-pragma.mdx +++ b/packages/docs/src/pages/guides/jsx-pragma.mdx @@ -181,3 +181,5 @@ module.exports = { // ... } ``` + +You can read more about [customizing Babel config in Next.js docs](https://nextjs.org/docs/advanced-features/customizing-babel-config). From f92f4d04c4cf8276c3804b9fbc35f61fb444d883 Mon Sep 17 00:00:00 2001 From: Florent SCHILDKNECHT <1577155+flo-sch@users.noreply.github.com> Date: Wed, 19 May 2021 17:08:56 +0200 Subject: [PATCH 05/27] Update packages/docs/src/pages/guides/jsx-pragma.mdx Co-authored-by: Piotr Monwid-Olechnowicz --- packages/docs/src/pages/guides/jsx-pragma.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/src/pages/guides/jsx-pragma.mdx b/packages/docs/src/pages/guides/jsx-pragma.mdx index cae0395e9..a99456bfc 100644 --- a/packages/docs/src/pages/guides/jsx-pragma.mdx +++ b/packages/docs/src/pages/guides/jsx-pragma.mdx @@ -9,7 +9,7 @@ to style elements with values from your theme using the [`sx` prop][]. ## What is JSX -JSX is an XML-like syntax extension to JavaScript. It's a syntax sugar usually +[JSX](https://facebook.github.io/jsx/) is an XML-like syntax extension to JavaScript. It's a syntax sugar usually used for [React's `jsx`](https://reactjs.org/docs/introducing-jsx.html) function. You don't need to write JSX to use React, but it's meant to make code more readable, especially for tree structures with attributes. From bcc3e7b367dcaa4cedc1297c33475b5bde8f6601 Mon Sep 17 00:00:00 2001 From: Florent Schildknecht Date: Wed, 19 May 2021 19:09:33 +0200 Subject: [PATCH 06/27] docs(pragma): removed invalid comments about sx typings --- packages/docs/src/pages/guides/jsx-pragma.mdx | 33 +++++-------------- 1 file changed, 9 insertions(+), 24 deletions(-) diff --git a/packages/docs/src/pages/guides/jsx-pragma.mdx b/packages/docs/src/pages/guides/jsx-pragma.mdx index a99456bfc..b86167360 100644 --- a/packages/docs/src/pages/guides/jsx-pragma.mdx +++ b/packages/docs/src/pages/guides/jsx-pragma.mdx @@ -9,10 +9,11 @@ to style elements with values from your theme using the [`sx` prop][]. ## What is JSX -[JSX](https://facebook.github.io/jsx/) is an XML-like syntax extension to JavaScript. It's a syntax sugar usually -used for [React's `jsx`](https://reactjs.org/docs/introducing-jsx.html) function. You don't need to write JSX to use React, but -it's meant to make code more readable, especially for tree structures with -attributes. +[JSX](https://facebook.github.io/jsx/) is an XML-like syntax extension to +JavaScript. It's a syntax sugar usually used for +[React's `jsx`](https://reactjs.org/docs/introducing-jsx.html) function. You +don't need to write JSX to use React, but it's meant to make code more readable, +especially for tree structures with attributes. Given the following JSX: @@ -47,8 +48,8 @@ Technically Babel also calls `jsxs` from `react/jsx-runtime` and `jsxDEV` from To change the underlying create element functions, you can either add an option to the Babel plugin or you can set a _pragma comment_ at the beginning of a -module. Changing the function import source in Babel config will transform -all JSX in an application into the same set of functions. Using a pragma comment +module. Changing the function import source in Babel config will transform all +JSX in an application into the same set of functions. Using a pragma comment limits the change to only the modules that it's added to. This lets you default to the React `jsx` function in most places and use custom functions only where you need it, giving the author more control over where it's used. @@ -144,23 +145,6 @@ typecheck), or for instance to run tests with `ts-jest` NOTE: this requires [TypeScript >= 4.1](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html#react-17-jsx-factories) -NOTE: in order to typecheck `sx` using automatic runtime, you will also need to -add `sx` manually to React types: - -```ts -// To add `css` if you're using it somewhere -/// - -import {} from 'react' -import { ThemeUIStyleObject } from 'theme-ui' // or '@theme-ui/core' - -declare module 'react' { - interface Attributes { - sx?: ThemeUIStyleObject - } -} -``` - ### Using next.js ```js @@ -182,4 +166,5 @@ module.exports = { } ``` -You can read more about [customizing Babel config in Next.js docs](https://nextjs.org/docs/advanced-features/customizing-babel-config). +You can read more about +[customizing Babel config in Next.js docs](https://nextjs.org/docs/advanced-features/customizing-babel-config). From 92686a09af289c71b661734e25dabb1224395138 Mon Sep 17 00:00:00 2001 From: hasparus Date: Mon, 7 Jun 2021 19:21:40 +0200 Subject: [PATCH 07/27] docs: search results now lead to open deployment instead of always going to prod --- packages/docs/src/index.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/docs/src/index.js b/packages/docs/src/index.js index 84ee8e74d..a578c047b 100755 --- a/packages/docs/src/index.js +++ b/packages/docs/src/index.js @@ -41,7 +41,6 @@ export const setDocSearchComponents = ({ type="text/javascript" dangerouslySetInnerHTML={{ __html: ` - var lastSearchInput = null; var observer = new MutationObserver(function () { var searchSelector = "#algolia-docs-search"; @@ -52,7 +51,15 @@ export const setDocSearchComponents = ({ apiKey: "84ed820927eee5fa5018c9f1abe70390", indexName: "theme-ui", inputSelector: searchSelector, - debug: true + debug: true, + transformData: function(hits) { + for (const hit of hits) { + hit.url = hit.url.replace( + "https://theme-ui.com", + window.location.origin + ) + } + } }) lastSearchInput = searchInput; } From d79d25a1ce159005631ba612efd55b5320661860 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 1 Jun 2021 08:09:59 +0000 Subject: [PATCH 08/27] chore(deps-dev): bump @babel/plugin-transform-runtime Bumps [@babel/plugin-transform-runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-plugin-transform-runtime) from 7.13.15 to 7.14.3. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.14.3/packages/babel-plugin-transform-runtime) Signed-off-by: dependabot[bot] --- yarn.lock | 62 ++++++------------------------------------------------- 1 file changed, 6 insertions(+), 56 deletions(-) diff --git a/yarn.lock b/yarn.lock index db30befd4..eb4ef7a97 100644 --- a/yarn.lock +++ b/yarn.lock @@ -238,7 +238,7 @@ dependencies: "@babel/highlight" "^7.12.13" -"@babel/compat-data@^7.13.0", "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.14.4": +"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.14.4": version "7.14.4" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.4.tgz#45720fe0cecf3fd42019e1d12cc3d27fadc98d58" integrity sha512-i2wXrWQNkH6JplJQGn3Rd2I4Pij8GdHkXwHMxm+zV5YG/Jci+bCNrWZEWC4o+umiDkRrRs4dVzH3X4GP7vyjQQ== @@ -401,20 +401,6 @@ "@babel/helper-annotate-as-pure" "^7.12.13" regexpu-core "^4.7.1" -"@babel/helper-define-polyfill-provider@^0.1.4": - version "0.1.4" - resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.1.4.tgz#b618b087c6a0328127e5d53576df818bcee2b15f" - integrity sha512-K5V2GaQZ1gpB+FTXM4AFVG2p1zzhm67n9wrQCJYNzvuLzQybhJyftW7qeDd2uUxPDNdl5Rkon1rOAeUeNDZ28Q== - dependencies: - "@babel/helper-compilation-targets" "^7.13.0" - "@babel/helper-module-imports" "^7.12.13" - "@babel/helper-plugin-utils" "^7.13.0" - "@babel/traverse" "^7.13.0" - debug "^4.1.1" - lodash.debounce "^4.0.8" - resolve "^1.14.2" - semver "^6.1.2" - "@babel/helper-define-polyfill-provider@^0.2.0": version "0.2.0" resolved "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.0.tgz#a640051772045fedaaecc6f0c6c69f02bdd34bf1" @@ -1185,22 +1171,10 @@ dependencies: "@babel/helper-plugin-utils" "^7.12.13" -"@babel/plugin-transform-runtime@^7.12.1": - version "7.13.10" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.13.10.tgz#a1e40d22e2bf570c591c9c7e5ab42d6bf1e419e1" - integrity sha512-Y5k8ipgfvz5d/76tx7JYbKQTcgFSU6VgJ3kKQv4zGTKr+a9T/KBvfRvGtSFgKDQGt/DBykQixV0vNWKIdzWErA== - dependencies: - "@babel/helper-module-imports" "^7.12.13" - "@babel/helper-plugin-utils" "^7.13.0" - babel-plugin-polyfill-corejs2 "^0.1.4" - babel-plugin-polyfill-corejs3 "^0.1.3" - babel-plugin-polyfill-regenerator "^0.1.2" - semver "^6.3.0" - -"@babel/plugin-transform-runtime@^7.13.15": - version "7.13.15" - resolved "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.13.15.tgz#2eddf585dd066b84102517e10a577f24f76a9cd7" - integrity sha512-d+ezl76gx6Jal08XngJUkXM4lFXK/5Ikl9Mh4HKDxSfGJXmZ9xG64XT2oivBzfxb/eQ62VfvoMkaCZUKJMVrBA== +"@babel/plugin-transform-runtime@^7.12.1", "@babel/plugin-transform-runtime@^7.13.15": + version "7.14.3" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.14.3.tgz#1fd885a2d0de1d3c223795a4e9be72c2db4515cf" + integrity sha512-t960xbi8wpTFE623ef7sd+UpEC5T6EEguQlTBJDEO05+XwnIWVfuqLw/vdLWY6IdFmtZE+65CZAfByT39zRpkg== dependencies: "@babel/helper-module-imports" "^7.13.12" "@babel/helper-plugin-utils" "^7.13.0" @@ -4894,15 +4868,6 @@ babel-plugin-macros@^2.6.1, babel-plugin-macros@^2.8.0: cosmiconfig "^6.0.0" resolve "^1.12.0" -babel-plugin-polyfill-corejs2@^0.1.4: - version "0.1.8" - resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.1.8.tgz#54ef37b1c4b2311e515029e8f1f07bbd4d7a5321" - integrity sha512-kB5/xNR9GYDuRmVlL9EGfdKBSUVI/9xAU7PCahA/1hbC2Jbmks9dlBBYjHF9IHMNY2jV/G2lIG7z0tJIW27Rog== - dependencies: - "@babel/compat-data" "^7.13.0" - "@babel/helper-define-polyfill-provider" "^0.1.4" - semver "^6.1.1" - babel-plugin-polyfill-corejs2@^0.2.0: version "0.2.0" resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.0.tgz#686775bf9a5aa757e10520903675e3889caeedc4" @@ -4912,14 +4877,6 @@ babel-plugin-polyfill-corejs2@^0.2.0: "@babel/helper-define-polyfill-provider" "^0.2.0" semver "^6.1.1" -babel-plugin-polyfill-corejs3@^0.1.3: - version "0.1.6" - resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.1.6.tgz#ed1b02fba4885e0892e06094e27865f499758d27" - integrity sha512-IkYhCxPrjrUWigEmkMDXYzM5iblzKCdCD8cZrSAkQOyhhJm26DcG+Mxbx13QT//Olkpkg/AlRdT2L+Ww4Ciphw== - dependencies: - "@babel/helper-define-polyfill-provider" "^0.1.4" - core-js-compat "^3.8.1" - babel-plugin-polyfill-corejs3@^0.2.0: version "0.2.0" resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.0.tgz#f4b4bb7b19329827df36ff56f6e6d367026cb7a2" @@ -4928,13 +4885,6 @@ babel-plugin-polyfill-corejs3@^0.2.0: "@babel/helper-define-polyfill-provider" "^0.2.0" core-js-compat "^3.9.1" -babel-plugin-polyfill-regenerator@^0.1.2: - version "0.1.5" - resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.1.5.tgz#f42a58fd86a1c97fbe3a2752d80a4a3e017203e1" - integrity sha512-EyhBA6uN94W97lR7ecQVTvH9F5tIIdEw3ZqHuU4zekMlW82k5cXNXniiB7PRxQm06BqAjVr4sDT1mOy4RcphIA== - dependencies: - "@babel/helper-define-polyfill-provider" "^0.1.4" - babel-plugin-polyfill-regenerator@^0.2.0: version "0.2.0" resolved "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.0.tgz#853f5f5716f4691d98c84f8069c7636ea8da7ab8" @@ -6697,7 +6647,7 @@ copyfiles@^2.3.0: untildify "^4.0.0" yargs "^15.3.1" -core-js-compat@^3.6.5, core-js-compat@^3.8.1, core-js-compat@^3.9.0, core-js-compat@^3.9.1: +core-js-compat@^3.6.5, core-js-compat@^3.9.0, core-js-compat@^3.9.1: version "3.10.1" resolved "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.10.1.tgz#62183a3a77ceeffcc420d907a3e6fc67d9b27f1c" integrity sha512-ZHQTdTPkqvw2CeHiZC970NNJcnwzT6YIueDMASKt+p3WbZsLXOcoD392SkcWhkC0wBBHhlfhqGKKsNCQUozYtg== From 6fa6fe6dea0eaee10f615e5310ce5866cf043987 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 7 Jun 2021 06:23:20 +0000 Subject: [PATCH 09/27] chore(deps-dev): bump @typescript-eslint/eslint-plugin Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 4.22.1 to 4.26.0. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v4.26.0/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] --- yarn.lock | 129 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 67 insertions(+), 62 deletions(-) diff --git a/yarn.lock b/yarn.lock index eb4ef7a97..3f248cdea 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3543,6 +3543,11 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0" integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw== +"@types/json-schema@^7.0.7": + version "7.0.7" + resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad" + integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA== + "@types/json5@^0.0.29": version "0.0.29" resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" @@ -3808,18 +3813,18 @@ tsutils "^3.17.1" "@typescript-eslint/eslint-plugin@^4.22.1": - version "4.22.1" - resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.22.1.tgz#6bcdbaa4548553ab861b4e5f34936ead1349a543" - integrity sha512-kVTAghWDDhsvQ602tHBc6WmQkdaYbkcTwZu+7l24jtJiYvm9l+/y/b2BZANEezxPDiX5MK2ZecE+9BFi/YJryw== + version "4.26.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.26.0.tgz#12bbd6ebd5e7fabd32e48e1e60efa1f3554a3242" + integrity sha512-yA7IWp+5Qqf+TLbd8b35ySFOFzUfL7i+4If50EqvjT6w35X8Lv0eBHb6rATeWmucks37w+zV+tWnOXI9JlG6Eg== dependencies: - "@typescript-eslint/experimental-utils" "4.22.1" - "@typescript-eslint/scope-manager" "4.22.1" - debug "^4.1.1" + "@typescript-eslint/experimental-utils" "4.26.0" + "@typescript-eslint/scope-manager" "4.26.0" + debug "^4.3.1" functional-red-black-tree "^1.0.1" - lodash "^4.17.15" - regexpp "^3.0.0" - semver "^7.3.2" - tsutils "^3.17.1" + lodash "^4.17.21" + regexpp "^3.1.0" + semver "^7.3.5" + tsutils "^3.21.0" "@typescript-eslint/experimental-utils@2.34.0": version "2.34.0" @@ -3831,17 +3836,17 @@ eslint-scope "^5.0.0" eslint-utils "^2.0.0" -"@typescript-eslint/experimental-utils@4.22.1": - version "4.22.1" - resolved "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.22.1.tgz#3938a5c89b27dc9a39b5de63a62ab1623ab27497" - integrity sha512-svYlHecSMCQGDO2qN1v477ax/IDQwWhc7PRBiwAdAMJE7GXk5stF4Z9R/8wbRkuX/5e9dHqbIWxjeOjckK3wLQ== +"@typescript-eslint/experimental-utils@4.26.0": + version "4.26.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.26.0.tgz#ba7848b3f088659cdf71bce22454795fc55be99a" + integrity sha512-TH2FO2rdDm7AWfAVRB5RSlbUhWxGVuxPNzGT7W65zVfl8H/WeXTk1e69IrcEVsBslrQSTDKQSaJD89hwKrhdkw== dependencies: - "@types/json-schema" "^7.0.3" - "@typescript-eslint/scope-manager" "4.22.1" - "@typescript-eslint/types" "4.22.1" - "@typescript-eslint/typescript-estree" "4.22.1" - eslint-scope "^5.0.0" - eslint-utils "^2.0.0" + "@types/json-schema" "^7.0.7" + "@typescript-eslint/scope-manager" "4.26.0" + "@typescript-eslint/types" "4.26.0" + "@typescript-eslint/typescript-estree" "4.26.0" + eslint-scope "^5.1.1" + eslint-utils "^3.0.0" "@typescript-eslint/parser@^2.24.0": version "2.34.0" @@ -3863,14 +3868,6 @@ "@typescript-eslint/typescript-estree" "4.23.0" debug "^4.1.1" -"@typescript-eslint/scope-manager@4.22.1": - version "4.22.1" - resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.22.1.tgz#5bb357f94f9cd8b94e6be43dd637eb73b8f355b4" - integrity sha512-d5bAiPBiessSmNi8Amq/RuLslvcumxLmyhf1/Xa9IuaoFJ0YtshlJKxhlbY7l2JdEk3wS0EnmnfeJWSvADOe0g== - dependencies: - "@typescript-eslint/types" "4.22.1" - "@typescript-eslint/visitor-keys" "4.22.1" - "@typescript-eslint/scope-manager@4.23.0": version "4.23.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.23.0.tgz#8792ef7eacac122e2ec8fa2d30a59b8d9a1f1ce4" @@ -3879,16 +3876,24 @@ "@typescript-eslint/types" "4.23.0" "@typescript-eslint/visitor-keys" "4.23.0" -"@typescript-eslint/types@4.22.1": - version "4.22.1" - resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.22.1.tgz#bf99c6cec0b4a23d53a61894816927f2adad856a" - integrity sha512-2HTkbkdAeI3OOcWbqA8hWf/7z9c6gkmnWNGz0dKSLYLWywUlkOAQ2XcjhlKLj5xBFDf8FgAOF5aQbnLRvgNbCw== +"@typescript-eslint/scope-manager@4.26.0": + version "4.26.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.26.0.tgz#60d1a71df162404e954b9d1c6343ff3bee496194" + integrity sha512-G6xB6mMo4xVxwMt5lEsNTz3x4qGDt0NSGmTBNBPJxNsrTXJSm21c6raeYroS2OwQsOyIXqKZv266L/Gln1BWqg== + dependencies: + "@typescript-eslint/types" "4.26.0" + "@typescript-eslint/visitor-keys" "4.26.0" "@typescript-eslint/types@4.23.0": version "4.23.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.23.0.tgz#da1654c8a5332f4d1645b2d9a1c64193cae3aa3b" integrity sha512-oqkNWyG2SLS7uTWLZf6Sr7Dm02gA5yxiz1RP87tvsmDsguVATdpVguHr4HoGOcFOpCvx9vtCSCyQUGfzq28YCw== +"@typescript-eslint/types@4.26.0": + version "4.26.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.26.0.tgz#7c6732c0414f0a69595f4f846ebe12616243d546" + integrity sha512-rADNgXl1kS/EKnDr3G+m7fB9yeJNnR9kF7xMiXL6mSIWpr3Wg5MhxyfEXy/IlYthsqwBqHOr22boFbf/u6O88A== + "@typescript-eslint/typescript-estree@2.34.0": version "2.34.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz#14aeb6353b39ef0732cc7f1b8285294937cf37d5" @@ -3902,19 +3907,6 @@ semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/typescript-estree@4.22.1": - version "4.22.1" - resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.22.1.tgz#dca379eead8cdfd4edc04805e83af6d148c164f9" - integrity sha512-p3We0pAPacT+onSGM+sPR+M9CblVqdA9F1JEdIqRVlxK5Qth4ochXQgIyb9daBomyQKAXbygxp1aXQRV0GC79A== - dependencies: - "@typescript-eslint/types" "4.22.1" - "@typescript-eslint/visitor-keys" "4.22.1" - debug "^4.1.1" - globby "^11.0.1" - is-glob "^4.0.1" - semver "^7.3.2" - tsutils "^3.17.1" - "@typescript-eslint/typescript-estree@4.23.0": version "4.23.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.23.0.tgz#0753b292097523852428a6f5a1aa8ccc1aae6cd9" @@ -3928,13 +3920,18 @@ semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/visitor-keys@4.22.1": - version "4.22.1" - resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.22.1.tgz#6045ae25a11662c671f90b3a403d682dfca0b7a6" - integrity sha512-WPkOrIRm+WCLZxXQHCi+WG8T2MMTUFR70rWjdWYddLT7cEfb2P4a3O/J2U1FBVsSFTocXLCoXWY6MZGejeStvQ== +"@typescript-eslint/typescript-estree@4.26.0": + version "4.26.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.26.0.tgz#aea17a40e62dc31c63d5b1bbe9a75783f2ce7109" + integrity sha512-GHUgahPcm9GfBuy3TzdsizCcPjKOAauG9xkz9TR8kOdssz2Iz9jRCSQm6+aVFa23d5NcSpo1GdHGSQKe0tlcbg== dependencies: - "@typescript-eslint/types" "4.22.1" - eslint-visitor-keys "^2.0.0" + "@typescript-eslint/types" "4.26.0" + "@typescript-eslint/visitor-keys" "4.26.0" + debug "^4.3.1" + globby "^11.0.3" + is-glob "^4.0.1" + semver "^7.3.5" + tsutils "^3.21.0" "@typescript-eslint/visitor-keys@4.23.0": version "4.23.0" @@ -3944,6 +3941,14 @@ "@typescript-eslint/types" "4.23.0" eslint-visitor-keys "^2.0.0" +"@typescript-eslint/visitor-keys@4.26.0": + version "4.26.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.26.0.tgz#26d2583169222815be4dcd1da4fe5459bc3bcc23" + integrity sha512-cw4j8lH38V1ycGBbF+aFiLUls9Z0Bw8QschP3mkth50BbWzgFS33ISIgBzUMuQ2IdahoEv/rXstr8Zhlz4B1Zg== + dependencies: + "@typescript-eslint/types" "4.26.0" + eslint-visitor-keys "^2.0.0" + "@webassemblyjs/ast@1.9.0": version "1.9.0" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964" @@ -8250,7 +8255,7 @@ eslint-scope@^4.0.3: esrecurse "^4.1.0" estraverse "^4.1.1" -eslint-scope@^5.0.0: +eslint-scope@^5.0.0, eslint-scope@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c" integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw== @@ -8272,6 +8277,13 @@ eslint-utils@^2.0.0: dependencies: eslint-visitor-keys "^1.1.0" +eslint-utils@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672" + integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA== + dependencies: + eslint-visitor-keys "^2.0.0" + eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0: version "1.3.0" resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e" @@ -9933,7 +9945,7 @@ globby@^10.0.1: merge2 "^1.2.3" slash "^3.0.0" -globby@^11.0.1: +globby@^11.0.1, globby@^11.0.3: version "11.0.3" resolved "https://registry.npmjs.org/globby/-/globby-11.0.3.tgz#9b1f0cb523e171dd1ad8c7b2a9fb4b644b9593cb" integrity sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg== @@ -16738,7 +16750,7 @@ regexpp@^2.0.1: resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f" integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw== -regexpp@^3.0.0: +regexpp@^3.0.0, regexpp@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2" integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q== @@ -19120,20 +19132,13 @@ tslib@~2.0.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c" integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ== -tsutils@3: +tsutils@3, tsutils@^3.0.0, tsutils@^3.17.1, tsutils@^3.21.0: version "3.21.0" resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623" integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA== dependencies: tslib "^1.8.1" -tsutils@^3.0.0, tsutils@^3.17.1: - version "3.17.1" - resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759" - integrity sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g== - dependencies: - tslib "^1.8.1" - tty-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6" From 08ecc2d00120a540d0986eff0c1d400e905fa5b4 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 7 Jun 2021 06:21:17 +0000 Subject: [PATCH 10/27] chore(deps-dev): bump prettier from 2.3.0 to 2.3.1 Bumps [prettier](https://github.com/prettier/prettier) from 2.3.0 to 2.3.1. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/2.3.0...2.3.1) --- updated-dependencies: - dependency-name: prettier dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 3f248cdea..a1f0274ea 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15805,9 +15805,9 @@ prepend-http@^2.0.0: integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= prettier@^2.0.5, prettier@^2.2.1: - version "2.3.0" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18" - integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w== + version "2.3.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.1.tgz#76903c3f8c4449bc9ac597acefa24dc5ad4cbea6" + integrity sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA== pretty-bytes@^5.3.0: version "5.4.1" From af482edd57ceb8059e3b6366a8fb4c8c4836aa3e Mon Sep 17 00:00:00 2001 From: hasparus Date: Thu, 10 Jun 2021 11:30:20 +0200 Subject: [PATCH 11/27] Ignore patch updates in Dependabot We get a lot of noise from Dependabot on a weekly basis. This should help a bit. See https://github.blog/changelog/2021-05-21-dependabot-version-updates-can-now-ignore-major-minor-patch-releases/ --- dependabot.yml | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/dependabot.yml b/dependabot.yml index f38eefc05..454b4868c 100644 --- a/dependabot.yml +++ b/dependabot.yml @@ -1,9 +1,11 @@ # see https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically version: 2 updates: - - package-ecosystem: "npm" - directory: "/" + - package-ecosystem: 'npm' + directory: '/' schedule: - interval: "monthly" + interval: 'monthly' ignore: - - dependency-name: "@codechecks/client" + - dependency-name: '@codechecks/client' + - dependency-name: '*' + update-types: ['version-update:semver-patch'] From 6bf6cc5fe5f321868aa0ee5260a98c2de98244a4 Mon Sep 17 00:00:00 2001 From: hasparus Date: Thu, 10 Jun 2021 12:11:23 +0200 Subject: [PATCH 12/27] chore: pin gatsby-plugin-mdx to v2.4 2.5.1 is still broken on Windows. See https://github.com/gatsbyjs/gatsby/pull/31396 --- dependabot.yml | 1 + packages/docs/package.json | 4 +-- yarn.lock | 70 ++++++-------------------------------- 3 files changed, 13 insertions(+), 62 deletions(-) diff --git a/dependabot.yml b/dependabot.yml index 454b4868c..4a8df6bb8 100644 --- a/dependabot.yml +++ b/dependabot.yml @@ -9,3 +9,4 @@ updates: - dependency-name: '@codechecks/client' - dependency-name: '*' update-types: ['version-update:semver-patch'] + - dependency-name: 'gatsby-plugin-mdx' # pinned to 2.4 diff --git a/packages/docs/package.json b/packages/docs/package.json index 9646fdeb2..7f7233607 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -33,10 +33,10 @@ "@theme-ui/typography": "0.9.1", "copy-to-clipboard": "^3.2.0", "eslint-config-react-app": "^6.0.0", - "gatsby": "^2.26.1", + "gatsby": "^2.32", "gatsby-plugin-catch-links": "^2.4.0", "gatsby-plugin-compile-es6-packages": "^2.1.0", - "gatsby-plugin-mdx": "2.5.1", + "gatsby-plugin-mdx": "2.4", "gatsby-plugin-react-helmet": "^3.4.0", "gatsby-plugin-theme-ui": "0.9.1", "gatsby-theme-style-guide": "0.9.1", diff --git a/yarn.lock b/yarn.lock index a1f0274ea..e70315412 100644 --- a/yarn.lock +++ b/yarn.lock @@ -27,11 +27,6 @@ io-ts "^2.1.2" tslib "2.1.0" -"@auto-it/bot-list@10.29.0": - version "10.29.0" - resolved "https://registry.npmjs.org/@auto-it/bot-list/-/bot-list-10.29.0.tgz#176db2073c76b13a11df605451b627ffdf870cba" - integrity sha512-CYM/cTrSUT2WiLPr/EgcdwdyKBn04idqnFh/Al7NJC9uaQcYya5lciceOwDNIgG/k71+whrbctdBG7k/Jwh28w== - "@auto-it/bot-list@10.29.2": version "10.29.2" resolved "https://registry.yarnpkg.com/@auto-it/bot-list/-/bot-list-10.29.2.tgz#a47c5ce59c2eff8edc3ce05859a400aee11d0694" @@ -52,51 +47,6 @@ io-ts "^2.1.2" tslib "2.1.0" -"@auto-it/core@10.29.0": - version "10.29.0" - resolved "https://registry.npmjs.org/@auto-it/core/-/core-10.29.0.tgz#d443472abcc62680455ee86c9303d8d3cfb901cc" - integrity sha512-sHCVbzx7nLMOP/nXs/s2WYu/ARSwN2b2vZwMooFEHFYx6JTGVGHUWq8CAoaTINCiY9ti2Z2Ulsbmmqh2twIAOw== - dependencies: - "@auto-it/bot-list" "10.29.0" - "@endemolshinegroup/cosmiconfig-typescript-loader" "^3.0.2" - "@octokit/plugin-enterprise-compatibility" "^1.2.2" - "@octokit/plugin-retry" "^3.0.1" - "@octokit/plugin-throttling" "^3.2.0" - "@octokit/rest" "^18.0.0" - await-to-js "^3.0.0" - chalk "^4.0.0" - cosmiconfig "7.0.0" - deepmerge "^4.0.0" - dotenv "^8.0.0" - endent "^2.0.1" - enquirer "^2.3.4" - env-ci "^5.0.1" - fast-glob "^3.1.1" - fp-ts "^2.5.3" - fromentries "^1.2.0" - gitlog "^4.0.3" - https-proxy-agent "^5.0.0" - import-cwd "^3.0.0" - import-from "^3.0.0" - io-ts "^2.1.2" - lodash.chunk "^4.2.0" - log-symbols "^4.0.0" - node-fetch "2.6.1" - parse-author "^2.0.0" - parse-github-url "1.0.2" - pretty-ms "^7.0.0" - requireg "^0.2.2" - semver "^7.0.0" - signale "^1.4.0" - tapable "^2.2.0" - terminal-link "^2.1.1" - tinycolor2 "^1.4.1" - ts-node "^9.1.1" - tslib "2.1.0" - type-fest "^0.21.1" - typescript-memoize "^1.0.0-alpha.3" - url-join "^4.0.0" - "@auto-it/core@10.29.2": version "10.29.2" resolved "https://registry.yarnpkg.com/@auto-it/core/-/core-10.29.2.tgz#ba5f6c2e4f04fb499f5b65baa6c6e7d6e372e458" @@ -9204,10 +9154,10 @@ gatsby-core-utils@^1.10.1: tmp "^0.2.1" xdg-basedir "^4.0.0" -gatsby-core-utils@^2.5.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/gatsby-core-utils/-/gatsby-core-utils-2.5.0.tgz#70b3aabf184a39c790e12af8001be4164fd8afa6" - integrity sha512-YbKv7FLpeTCts28bv0H2lSuHrKgUxnsC1ZG1PPydOheQgPW9G8pdNlYvwZzGJmmS7rBcC/w859ss90wlvF6GEw== +gatsby-core-utils@^2.4.0: + version "2.7.0" + resolved "https://registry.yarnpkg.com/gatsby-core-utils/-/gatsby-core-utils-2.7.0.tgz#b73a152920c8459af35412c49f9ec0df67c70fe6" + integrity sha512-0yma1pr5bNAR4rnd4E+3sct+Fr+wjfWoz5dRQCE5Swb1vZ1b6l7QW4KxTPQhwNgbI+tgYakJhp+pgxPLFpXxHA== dependencies: ci-info "2.0.0" configstore "^5.0.1" @@ -9271,10 +9221,10 @@ gatsby-plugin-compile-es6-packages@^2.1.0: "@babel/runtime" "^7.0.0" regex-escape "^3.4.8" -gatsby-plugin-mdx@2.5.1: - version "2.5.1" - resolved "https://registry.yarnpkg.com/gatsby-plugin-mdx/-/gatsby-plugin-mdx-2.5.1.tgz#3eb5742e04045fe1b695acc9dca5450226c74914" - integrity sha512-Q9DJsR6sU0h77Kl4EFAk7jXq5ciTcaFyuTU3+JHE82yP+nzCJs28T41drOrwyxFmmaE+ONsQSMHpbQSc0jifcQ== +gatsby-plugin-mdx@2.4: + version "2.4.0" + resolved "https://registry.yarnpkg.com/gatsby-plugin-mdx/-/gatsby-plugin-mdx-2.4.0.tgz#ad412275dd358aaaad905fd475d3d3c01788c594" + integrity sha512-hNrVFaeqItHt6jtVWyPOoqgoRNk6/xVz2doW5MRd7jZbkaBNsNJGcs4kaZ5l0XGAYoNrw99QoiDRG9WdyOIerA== dependencies: "@babel/core" "^7.12.3" "@babel/generator" "^7.12.5" @@ -9291,7 +9241,7 @@ gatsby-plugin-mdx@2.5.1: escape-string-regexp "^1.0.5" eval "^0.1.4" fs-extra "^8.1.0" - gatsby-core-utils "^2.5.0" + gatsby-core-utils "^2.4.0" gray-matter "^4.0.2" json5 "^2.1.3" loader-utils "^1.4.0" @@ -9445,7 +9395,7 @@ gatsby-telemetry@^1.10.2: node-fetch "^2.6.1" uuid "3.4.0" -gatsby@^2.26.1: +gatsby@^2.26.1, gatsby@^2.32: version "2.32.13" resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-2.32.13.tgz#f4b1959b96d1fd853f9e6a2ce2451250e96bdeb4" integrity sha512-BYfiI/k+t8m/IzSkWZH8Cc0v7rJw6giSjG5sX25LWdfkQMqUvg/Gn6OC8BWwRPXnEwe7x0n5jbH+peO0p34ZHQ== From 03e6c434ea91e31a521e8e86ed106a205c65d117 Mon Sep 17 00:00:00 2001 From: hasparus Date: Thu, 10 Jun 2021 13:11:08 +0200 Subject: [PATCH 13/27] feat(components): style autofilled Input background --- packages/components/src/Input.js | 54 +++++++++++++++----- packages/docs/src/pages/components/input.mdx | 12 ++++- 2 files changed, 51 insertions(+), 15 deletions(-) diff --git a/packages/components/src/Input.js b/packages/components/src/Input.js index 3f17a0553..9132990c7 100644 --- a/packages/components/src/Input.js +++ b/packages/components/src/Input.js @@ -1,26 +1,52 @@ import React from 'react' import Box from './Box' -export const Input = React.forwardRef(function Input(props, ref) { +import { get } from '@theme-ui/css' + +/** @type {import('theme-ui').ThemeUIStyleObject} */ +const autofillStyles = { + boxShadow: 'inset 0 0 0 1000px var(--theme-ui-input-autofill-bg)', + fontSize: 'inherit', + ':first-line': { + fontSize: '1rem', + }, +} + +/** @type {import('theme-ui').ThemeUIStyleObject} */ +const defaultInputStyles = { + display: 'block', + width: '100%', + p: 2, + appearance: 'none', + fontSize: 'inherit', + lineHeight: 'inherit', + border: '1px solid', + borderRadius: 4, + color: 'inherit', + bg: 'transparent', + + ':autofill, :autofill:hover, :autofill:focus': autofillStyles, + ':-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus': + autofillStyles, +} + +export const Input = React.forwardRef(function Input( + { sx, autofillBackgroundColor = 'background', ...rest }, + ref +) { return ( + get(theme.colors, autofillBackgroundColor, null), + ...sx, }} + {...rest} + __themeKey="forms" + __css={defaultInputStyles} /> ) }) diff --git a/packages/docs/src/pages/components/input.mdx b/packages/docs/src/pages/components/input.mdx index 4124f7418..2152fe547 100644 --- a/packages/docs/src/pages/components/input.mdx +++ b/packages/docs/src/pages/components/input.mdx @@ -16,4 +16,14 @@ import { Input } from 'theme-ui' ## Variants -Input variants can be defined in `theme.forms` and the component uses the `theme.forms.input` variant by default. +Input variants can be defined in `theme.forms` and the component uses the +`theme.forms.input` variant by default. + +## Autocomplete styles + +Background color of autofilled inputs defaults to `background`, and can be +changed by setting `autofillBackgroundColor` prop. + +```js live=true + +``` From dfda364ea0924bdc5746617d3ee7ccd29a2e7e8c Mon Sep 17 00:00:00 2001 From: hasparus Date: Thu, 10 Jun 2021 13:13:50 +0200 Subject: [PATCH 14/27] docs(components): move Select ##Variants section above custom arrow docs --- packages/docs/src/pages/components/select.mdx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/docs/src/pages/components/select.mdx b/packages/docs/src/pages/components/select.mdx index c1309bae8..3f67aa2ca 100644 --- a/packages/docs/src/pages/components/select.mdx +++ b/packages/docs/src/pages/components/select.mdx @@ -19,6 +19,11 @@ import { Select, Box } from 'theme-ui' ``` +## Variants + +Select variants can be defined in `theme.forms` and the component uses the +`theme.forms.select` variant by default. + ## Custom arrow icon ```jsx live=true @@ -46,7 +51,3 @@ import { Select, Box } from 'theme-ui' ``` - -## Variants - -Select variants can be defined in `theme.forms` and the component uses the `theme.forms.select` variant by default. From 5178a47c5f74d034302ea224cf02b9923b2dadce Mon Sep 17 00:00:00 2001 From: hasparus Date: Thu, 10 Jun 2021 13:49:37 +0200 Subject: [PATCH 15/27] docs: set (): [ } // We're allowing the user to specify a narrower type for its color mode name. - return ([colorMode, setColorMode] as unknown) as [ + return [colorMode, setColorMode] as unknown as [ T, Dispatch> ] diff --git a/packages/docs/src/components/head.js b/packages/docs/src/components/head.js index 2f4d2f606..04129a793 100644 --- a/packages/docs/src/components/head.js +++ b/packages/docs/src/components/head.js @@ -13,7 +13,9 @@ export default (props) => { .filter(Boolean) .join(' – ') - const { theme } = useThemeUI() + const { theme, colorMode } = useThemeUI() + + const isColorModeDark = ['dark', 'deep'].includes(colorMode) return ( @@ -32,7 +34,10 @@ export default (props) => { + + +