Merge pull request #1653 from carolinmaisenbacher/develop

feat: Have breakpoints accept custom media queries
system-ui · Apr 15, 2021 · a955910 · a955910 · vercel · Apr 15, 2021
2 parents acbaf44 + bfd56f3
commit a955910
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## UNRELEASED
 
 - Set `gatsby` peerDependency more explicit to `^2.0.0 || ^3.0.0`. [#1640](https://github.com/system-ui/theme-ui/pull/1640) ([@LekoArts](https://github.com/LekoArts))
+- Have `breakpoints` accept custom media queries [#1653](https://github.com/system-ui/theme-ui/pull/1653) [@carolinmaisenbacher](https://github.com/carolinmaisenbacher)
 
 ## v0.6.2 (Mon Apr 05 2021)
 

diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts
@@ -290,7 +290,9 @@ const responsive = (
     (theme && (theme.breakpoints as string[])) || defaultBreakpoints
   const mediaQueries = [
     null,
-    ...breakpoints.map((n) => `@media screen and (min-width: ${n})`),
+    ...breakpoints.map((n) =>
+      n.includes('@media') ? n : `@media screen and (min-width: ${n})`
+    ),
   ]
 
   for (const k in styles) {

diff --git a/packages/css/test/index.ts b/packages/css/test/index.ts
@@ -660,6 +660,38 @@ test('returns correct media query order 2', () => {
   ])
 })
 
+test('returns custom media queries', () => {
+  const result = css({
+    fontSize: [2, 3, 4],
+    color: 'primary',
+  })({
+    theme: {
+      ...theme,
+      breakpoints: [
+        '32em',
+        '@media screen and (orientation: landscape) and (min-width: 40rem)',
+      ],
+    },
+  })
+  const keys = Object.keys(result)
+  expect(keys).toEqual([
+    'fontSize',
+    '@media screen and (min-width: 32em)',
+    '@media screen and (orientation: landscape) and (min-width: 40rem)',
+    'color',
+  ])
+  expect(result).toEqual({
+    fontSize: 16,
+    '@media screen and (min-width: 32em)': {
+      fontSize: 24,
+    },
+    '@media screen and (orientation: landscape) and (min-width: 40rem)': {
+      fontSize: 36,
+    },
+    color: 'tomato',
+  })
+})
+
 test('supports vendor properties', () => {
   expect(css({ WebkitOverflowScrolling: 'touch' })(theme)).toStrictEqual({
     WebkitOverflowScrolling: 'touch',
@@ -677,7 +709,6 @@ test('omits empty values', () => {
   ).toStrictEqual({ border: '1px solid black' })
 })
 
-
 test('borderTopWidth accepts number', () => {
   expect(css({
     borderTopWidth: 7,

diff --git a/packages/docs/src/pages/theme-spec.mdx b/packages/docs/src/pages/theme-spec.mdx
@@ -333,14 +333,15 @@ With Theme UI, _variants_ are the mechanism to use for such abstractions.
 ## Breakpoints
 
 To configure the default breakpoints used in responsive array values, add a `breakpoints` array to your theme.
-Each breakpoint should be a string with a CSS length unit included.
-These values will be used to generate mobile-first (i.e. `min-width`) media queries, which can then be used to apply [responsive styles](/getting-started/#responsive-styles).
+Each breakpoint should be a string with a CSS length unit included or a string including a CSS media query.
+String values with a CSS length unit will be used to generate a mobile-first (i.e. `min-width`) media query. 
+The breakpoints can then be used to apply [responsive styles](/sx-prop/#responsive-values).
 
 ```js
 // example custom breakpoints
 {
   breakpoints: [
-    '40em', '56em', '64em',
+    '40em', '@media (min-width: 56em) and (orientation: landscape)', '64em',
   ],
 }
 ```

diff --git a/packages/docs/src/pages/theming.mdx b/packages/docs/src/pages/theming.mdx
@@ -153,14 +153,15 @@ To add base, top-level styles to the `<body>` element, use `theme.styles.root`.
 ## Breakpoints
 
 To configure the default breakpoints used in responsive array values, add a `breakpoints` array to your theme.
-Each breakpoint should be a string with a CSS length unit included.
-These values will be used to generate mobile-first (i.e. `min-width`) media queries, which can then be used to apply [responsive styles](/sx-prop/#responsive-values).
+Each breakpoint should be a string with a CSS length unit included or a string including a CSS media query.
+String values with a CSS length unit will be used to generate a mobile-first (i.e. `min-width`) media query. 
+The breakpoints can then be used to apply [responsive styles](/sx-prop/#responsive-values).
 
 ```js
 // example custom breakpoints
 {
   breakpoints: [
-    '40em', '56em', '64em',
+    '40em', '@media (min-width: 56em) and (orientation: landscape)', '64em',
   ],
 }
 ```