Fix media queries "-only" breakpoints bug and update documentation (#488

) * Fix media queries '-only' breakpoints bug * Update documentation for media queries '-only' breakpoints
argyleink · Apr 1, 2024 · 894d7a3 · 894d7a3
1 parent 92aad12
commit 894d7a3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/docsite/index.html b/docsite/index.html
@@ -3371,12 +3371,12 @@ <h5>Viewport Vars Sample</h5>
               @custom-media --portrait      (orientation: portrait);
               @custom-media --landscape     (orientation: landscape);
 
-              @custom-media --md-only       (480px &#60;= width &#60;= 768px);
+              @custom-media --md-only       (480px &#60;= width &#60; 768px);
               @custom-media --md-n-above    (width &#62;= 768px);
               @custom-media --md-n-below    (width &#60; 768px);
               @custom-media --md-phone      (--md-only) and (--portrait);
 
-              @custom-media --xxl-only      (1440px &#60;= width &#60;= 1920px);
+              @custom-media --xxl-only      (1440px &#60;= width &#60; 1920px);
               @custom-media --xxl-n-above   (width &#62;= 1920px);
               @custom-media --xxl-n-below   (width &#60; 1920px);
             </code></pre>

diff --git a/src/props.media.css b/src/props.media.css
@@ -24,35 +24,35 @@
 @custom-media --pointer       (hover) and (pointer: coarse);
 @custom-media --mouse         (hover) and (pointer: fine);
 
-@custom-media --xxs-only      (0px <= width <= 240px);
+@custom-media --xxs-only      (0px <= width < 240px);
 @custom-media --xxs-n-above   (width >= 240px);
 @custom-media --xxs-n-below   (width < 240px);
 @custom-media --xxs-phone     (--xxs-only) and (--portrait);
 
-@custom-media --xs-only       (240px <= width <= 360px);
+@custom-media --xs-only       (240px <= width < 360px);
 @custom-media --xs-n-above    (width >= 360px);
 @custom-media --xs-n-below    (width < 360px);
 @custom-media --xs-phone      (--xs-only) and (--portrait);
 
-@custom-media --sm-only       (360px <= width <= 480px);
+@custom-media --sm-only       (360px <= width < 480px);
 @custom-media --sm-n-above    (width >= 480px);
 @custom-media --sm-n-below    (width < 480px);
 @custom-media --sm-phone      (--sm-only) and (--portrait);
 
-@custom-media --md-only       (480px <= width <= 768px);
+@custom-media --md-only       (480px <= width < 768px);
 @custom-media --md-n-above    (width >= 768px);
 @custom-media --md-n-below    (width < 768px);
 @custom-media --md-phone      (--md-only) and (--portrait);
 
-@custom-media --lg-only       (768px <= width <= 1024px);
+@custom-media --lg-only       (768px <= width < 1024px);
 @custom-media --lg-n-above    (width >= 1024px);
 @custom-media --lg-n-below    (width < 1024px);
 @custom-media --lg-phone      (--lg-only) and (--portrait);
 
-@custom-media --xl-only       (1024px <= width <= 1440px);
+@custom-media --xl-only       (1024px <= width < 1440px);
 @custom-media --xl-n-above    (width >= 1440px);
 @custom-media --xl-n-below    (width < 1440px);
 
-@custom-media --xxl-only      (1440px <= width <= 1920px);
+@custom-media --xxl-only      (1440px <= width < 1920px);
 @custom-media --xxl-n-above   (width >= 1920px);
 @custom-media --xxl-n-below   (width < 1920px);
diff --git a/src/props.media.js b/src/props.media.js
@@ -25,36 +25,36 @@ export const CustomMedia = {
   "--pointer": "(hover) and (pointer: coarse)",
   "--mouse": "(hover) and (pointer: fine)",
 
-  "--xxs-only": "(0px <= width <= 240px)",
+  "--xxs-only": "(0px <= width < 240px)",
   "--xxs-n-above": "(width >= 240px)",
   "--xxs-n-below": "(width < 240px)",
   "--xxs-phone": "(--xxs-only) and (--portrait)",
 
-  "--xs-only": "(240px <= width <= 360px)",
+  "--xs-only": "(240px <= width < 360px)",
   "--xs-n-above": "(width >= 360px)",
   "--xs-n-below": "(width < 360px)",
   "--xs-phone": "(--xs-only) and (--portrait)",
 
-  "--sm-only": "(360px <= width <= 480px)",
+  "--sm-only": "(360px <= width < 480px)",
   "--sm-n-above": "(width >= 480px)",
   "--sm-n-below": "(width < 480px)",
   "--sm-phone": "(--sm-only) and (--portrait)",
 
-  "--md-only": "(480px <= width <= 768px)",
+  "--md-only": "(480px <= width < 768px)",
   "--md-n-above": "(width >= 768px)",
   "--md-n-below": "(width < 768px)",
   "--md-phone": "(--md-only) and (--portrait)",
 
-  "--lg-only": "(768px <= width <= 1024px)",
+  "--lg-only": "(768px <= width < 1024px)",
   "--lg-n-above": "(width >= 1024px)",
   "--lg-n-below": "(width < 1024px)",
   "--lg-phone": "(--lg-only) and (--portrait)",
 
-  "--xl-only": "(1024px <= width <= 1440px)",
+  "--xl-only": "(1024px <= width < 1440px)",
   "--xl-n-above": "(width >= 1440px)",
   "--xl-n-below": "(width < 1440px)",
 
-  "--xxl-only": "(1440px <= width <= 1920px)",
+  "--xxl-only": "(1440px <= width < 1920px)",
   "--xxl-n-above": "(width >= 1920px)",
   "--xxl-n-below": "(width < 1920px)",
 }