From 276caa6f1fe04bdda1b3d5cd6f5da186ab0bf337 Mon Sep 17 00:00:00 2001 From: ARChilton Date: Thu, 11 Jan 2018 12:38:40 +0000 Subject: [PATCH 1/2] Fixes Reusable Media Queries with String Styles Was missing min-width in the media query construction --- docs/media-queries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/media-queries.md b/docs/media-queries.md index 367bcd01d..6526adf4e 100644 --- a/docs/media-queries.md +++ b/docs/media-queries.md @@ -95,7 +95,7 @@ const mq = Object.keys(breakpoints).reduce( typeof breakpoints[label] === 'string' ? '' : 'px' accumulator[label] = cls => css` - @media (${breakpoints[label] + suffix}) { + @media (min-width:${breakpoints[label] + suffix}) { ${cls}; } ` From 087412395202e919fd4e8cb1a5ebbece697b2fcc Mon Sep 17 00:00:00 2001 From: ARChilton Date: Fri, 12 Jan 2018 09:45:54 +0000 Subject: [PATCH 2/2] Updated to include string case Updated with reference to the comments made by @mitchellhamilton. The Prefix is now determined by whether the value is a string or not --- docs/media-queries.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/media-queries.md b/docs/media-queries.md index 6526adf4e..50cb332c3 100644 --- a/docs/media-queries.md +++ b/docs/media-queries.md @@ -91,11 +91,11 @@ const breakpoints = { const mq = Object.keys(breakpoints).reduce( (accumulator, label) => { - let suffix = - typeof breakpoints[label] === 'string' ? '' : 'px' + let prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:' + let suffix = typeof breakpoints[label] === 'string' ? '' : 'px' accumulator[label] = cls => css` - @media (min-width:${breakpoints[label] + suffix}) { + @media (${prefix + breakpoints[label] + suffix}) { ${cls}; } `