GH-101: Add Fallback for backdrop-filter

- __New__: Add CSS nesting support.
- __New__: Add CSS nesting test case.
- __Fix__: Darken background for browsers that cannot blur yet.
- _MInor_: Fix other `backdrop-filter` instances.

conf/css/.postcssrc.yml

@@ -17,6 +17,7 @@ plugins:
       custom-media-queries: true
       media-query-ranges: true
       not-pseudo-class: true
+      nesting-rules: true
       # RFE: Fix bug on the Internet so we can use these reliably
       # SEE: https://github.com/postcss/postcss-custom-selectors/issues/40
       custom-selectors: true

package.json

@@ -28,6 +28,7 @@
         "postcss-css-variables": "^0.17.0",
         "postcss-extend": "^1.0.5",
         "postcss-import": "^12.0.1",
+        "postcss-nesting": "^7.0.1",
         "postcss-preset-env": "^6.7.0",
         "yarn": "^1.22.5"
     },

taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-preset-env.css

@@ -129,3 +129,26 @@ h4,h5,h6{color: lime;}h4,h5,h6{color: magenta;}
 ._test > *:not(._test--x, ._test--y) {
   align-items: center;
 }
+
+/*! Nesting Rules */
+/* SEE: https://preset-env.cssdb.org/features#nesting-rules */
+
+/*! Goal: */
+.foo { display: grid; }
+
+@media (orientation: landscape) {
+  .foo {
+    grid-auto-flow: column;
+  }
+}
+
+/*! Test: */
+.foo {
+  display: grid;
+
+  @media (orientation: landscape) {
+    & {
+      grid-auto-flow: column;
+    }
+  }
+}

taccsite_cms/static/site_cms/css/src/_imports/objects/o-section.css

@@ -202,9 +202,17 @@ Styleguide Objects.Section
   /* FAQ: The image "leaves" the column via `position: absolute` */
   grid-column-start: 2;
 
-  background-color: rgba(var(--color-bkgd-rgb), 0.65);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
+  @supports (backdrop-filter: none) {
+    & {
+      background-color: rgba(var(--color-bkgd-rgb), 0.65);
+      backdrop-filter: blur(6px);
+    }
+  }
+  @supports not (backdrop-filter: none) {
+    & {
+      background-color: rgba(var(--color-bkgd-rgb), 0.95);
+    }
+  }
 }
 .o-section--banner.o-section--style-dark .o-section__banner-overlay {
   --color-bkgd-rgb: var(--global-color-primary--x-dark-rgb);

taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css

@@ -387,8 +387,17 @@ Styleguide Trumps.Scopes.Header
   .s-header .navbar-collapse {
     padding-top: 12px;
 
-    background-color: rgba(var(--global-color-primary--x-dark-rgb), 0.6);
-    backdrop-filter: blur(18px) brightness(85%);
+    @supports (backdrop-filter: none) {
+      & {
+        backdrop-filter: blur(18px) brightness(85%);
+        background-color: rgba(var(--global-color-primary--x-dark-rgb), 0.6);
+      }
+    }
+    @supports not (backdrop-filter: none) {
+      & {
+        background-color: rgba(var(--global-color-primary--x-dark-rgb), 0.95);
+      }
+    }
 
     border: env(--border-width--normal) solid var(--global-color-primary--dark);
   }

yarn.lock

@@ -1845,7 +1845,7 @@ postcss-minify-selectors@^4.0.2:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
-postcss-nesting@^7.0.0:
+postcss-nesting@^7.0.0, postcss-nesting@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz"
   integrity sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==