Support full media queries in `theme.breakpoints` in @theme-ui/match-media hooks #2199

hasparus · 2022-04-08T10:38:00Z

Closes #2197.

So, turns out @theme-ui/match-media isn't too popular and we just didn't remember about it when we added full media query support to responsive values in sx prop.

📦 Published PR as canary version: 0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0

✨ Test out this PR locally via:

npm install @theme-ui/color-modes@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/color@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/components@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/core@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/css@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/custom-properties@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/editor@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install gatsby-plugin-theme-ui@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install gatsby-theme-style-guide@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install gatsby-theme-ui-layout@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/match-media@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/mdx@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/parse-props@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/preset-base@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/preset-bootstrap@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/preset-bulma@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/preset-dark@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/preset-deep@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/preset-funk@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/preset-future@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/preset-polaris@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/preset-roboto@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/preset-sketchy@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/preset-swiss@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/preset-system@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/preset-tailwind@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/preset-tosh@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/presets@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/prism@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/sidenav@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/style-guide@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/tailwind@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/theme-provider@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install theme-ui@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
npm install @theme-ui/typography@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
# or 
yarn add @theme-ui/color-modes@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/color@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/components@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/core@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/css@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/custom-properties@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/editor@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add gatsby-plugin-theme-ui@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add gatsby-theme-style-guide@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add gatsby-theme-ui-layout@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/match-media@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/mdx@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/parse-props@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/preset-base@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/preset-bootstrap@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/preset-bulma@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/preset-dark@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/preset-deep@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/preset-funk@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/preset-future@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/preset-polaris@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/preset-roboto@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/preset-sketchy@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/preset-swiss@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/preset-system@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/preset-tailwind@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/preset-tosh@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/presets@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/prism@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/sidenav@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/style-guide@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/tailwind@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/theme-provider@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add theme-ui@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0
yarn add @theme-ui/typography@0.14.3--canary.2199.c124ac7c4eaa771a50ae43f2dd1bc0aa7ca2bdab.0

vercel · 2022-04-08T10:38:03Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/C3vDibCQeZpcqzJDpN3CgbANk5jL
✅ Preview: https://theme-ui-git-match-media-breakpoints-systemui.vercel.app

Reproduction of issue #2197.

codesandbox-ci · 2022-04-08T10:45:48Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit de50e7d:

Sandbox	Source
next-theme-ui-example	Configuration
gatsby-plugin-theme-ui-example	Configuration

lachlanjc

Source looks good to me!

lachlanjc · 2022-04-18T03:50:04Z

packages/match-media/src/index.ts

-      ).length
+      breakpoints.filter((bp) => {
+        const query = bp.includes('@media')
+          ? bp.slice(7) // remove '@media '


bp.replace('@media ', '') might be more readable, I don't feel strongly though

Fair point 🙏 My code is actually buggy. If you have a leading space (like @media), my version wouldn't work, and yours is more permissive. Applying your suggestion!

…onsiveValue and useBreakpointIndex hooks

vercel · 2022-04-20T14:51:31Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
theme-ui	✅ Ready (Inspect)	Visit Preview	Apr 20, 2022 at 2:55PM (UTC)

hasparus · 2022-04-21T13:29:14Z

🚀 PR was released in v0.14.3 🚀

hasparus assigned lachlanjc Apr 8, 2022

hasparus added 4 commits April 8, 2022 12:39

test(match-media): change test files to .ts

a85685b

test(test-utils): add renderHook function

60dcc6d

test(match-media): use renderHook

e161ce9

test(match-media): add failing test for media queries in theme

7f828ac

Reproduction of issue #2197.

hasparus force-pushed the match-media-breakpoints branch from e574fcf to d75e653 Compare April 8, 2022 10:39

vercel bot had a problem deploying to Preview April 8, 2022 10:39 Failure

vercel bot deployed to Preview April 8, 2022 10:45 View deployment

hasparus unassigned lachlanjc Apr 8, 2022

hasparus requested a review from lachlanjc April 8, 2022 10:49

vercel bot deployed to Preview April 8, 2022 10:49 View deployment

vercel bot deployed to Preview April 8, 2022 11:00 View deployment

lachlanjc approved these changes Apr 18, 2022

View reviewed changes

hasparus added 4 commits April 20, 2022 16:51

fix(match-media): handle full media queries in breakpoints in useResp…

ab5a8c8

…onsiveValue and useBreakpointIndex hooks

chore: add missing internal peer dependencies

d6e3f9d

chore(theme-ui): remove unused parameter from test

2942623

fix: change TypeScript target to es2018

de50e7d

hasparus force-pushed the match-media-breakpoints branch from 4f1266c to de50e7d Compare April 20, 2022 14:51

vercel bot deployed to Preview April 20, 2022 14:55 View deployment

hasparus merged commit d2946ef into develop Apr 21, 2022

hasparus deleted the match-media-breakpoints branch April 21, 2022 13:19

hasparus added the released This issue/pull request has been released. label Apr 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support full media queries in `theme.breakpoints` in @theme-ui/match-media hooks #2199

Support full media queries in `theme.breakpoints` in @theme-ui/match-media hooks #2199

hasparus commented Apr 8, 2022 •

edited

Loading

vercel bot commented Apr 8, 2022 •

edited

Loading

codesandbox-ci bot commented Apr 8, 2022 •

edited

Loading

lachlanjc left a comment

lachlanjc Apr 18, 2022

hasparus Apr 20, 2022 •

edited

Loading

vercel bot commented Apr 20, 2022 •

edited

Loading

hasparus commented Apr 21, 2022

Support full media queries in theme.breakpoints in @theme-ui/match-media hooks #2199

Support full media queries in theme.breakpoints in @theme-ui/match-media hooks #2199

Conversation

hasparus commented Apr 8, 2022 • edited Loading

vercel bot commented Apr 8, 2022 • edited Loading

codesandbox-ci bot commented Apr 8, 2022 • edited Loading

lachlanjc left a comment

Choose a reason for hiding this comment

lachlanjc Apr 18, 2022

Choose a reason for hiding this comment

hasparus Apr 20, 2022 • edited Loading

Choose a reason for hiding this comment

vercel bot commented Apr 20, 2022 • edited Loading

hasparus commented Apr 21, 2022

Support full media queries in `theme.breakpoints` in @theme-ui/match-media hooks #2199

Support full media queries in `theme.breakpoints` in @theme-ui/match-media hooks #2199

hasparus commented Apr 8, 2022 •

edited

Loading

vercel bot commented Apr 8, 2022 •

edited

Loading

codesandbox-ci bot commented Apr 8, 2022 •

edited

Loading

hasparus Apr 20, 2022 •

edited

Loading

vercel bot commented Apr 20, 2022 •

edited

Loading