Merge branch 'task/GH-171-support-css-that-is-forwards-compatible' in…

…to milestone/10-frontera-redesign-phase-0
TACC · Mar 30, 2021 · 9a97dfd · 9a97dfd
2 parents f5e4835 + 689cced
commit 9a97dfd
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/conf/css/postcss.config.js b/conf/css/postcss.config.js
@@ -22,7 +22,8 @@ module.exports = {
       stage: false,
       // SEE: https://github.com/csstools/postcss-preset-env/blob/master/src/lib/plugins-by-id.js#L35
       features: {
-        'custom-media-queries': true
+        'custom-media-queries': true,
+        'media-query-ranges': true,
       }
     }),
     require('cssnano')({

diff --git a/taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-preset-env.css b/taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-preset-env.css
@@ -22,3 +22,32 @@ Styleguide _Test
     background-color: red;
   }
 }
+
+/*! Media Query Ranges */
+/* SEE: https://preset-env.cssdb.org/features#media-query-ranges */
+
+/*! Goal: */@media (max-width:479px){._test{background-color:red}}@media (min-width:480px) and (max-width:767px){._test{background-color:blue}}@media (min-width:768px){._test{background-color:lime}}
+
+/*! Test: */
+@media (width < 480px) {
+  ._test{ background-color:red; }
+}
+@media (480px <= width < 768px) {
+  ._test{ background-color:blue; }
+}
+@media (width >= 768px) {
+  ._test{ background-color:lime; }
+}
+
+/*! Custom Media Queries & Media Query Ranges */
+/* SEE: https://preset-env.cssdb.org/features#custom-media-queries */
+
+/*! Goal: */
+@media (min-width:992px) and (max-width:1199px){._test{background-color:red}}
+
+/*! Test: */
+@custom-media --wide-window (992px <= width < 1200px);
+
+@media (--wide-window) {
+  ._test{ background-color:red; }
+}