From 1317b7ca52e37b954a92ce8930335ff8ab6cdd1e Mon Sep 17 00:00:00 2001
From: alex-ketch <alex@ketch.me>
Date: Wed, 26 Feb 2020 18:32:39 -0500
Subject: [PATCH] fix(Browser support): Transform CSS4 :not() usage to CSS3
 spec

---
 package-lock.json | 32 ++++++++++++++++++++++++++++++++
 package.json      |  2 ++
 postcss.config.js |  9 ++++++++-
 3 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 540c890e9..d2755c720 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26293,6 +26293,16 @@
         "postcss": "^7.0.0"
       }
     },
+    "postcss-selector-not": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-4.0.0.tgz",
+      "integrity": "sha512-W+bkBZRhqJaYN8XAnbbZPLWMvZD1wKTu0UxtFKdhtGjWYmxhkUneoeOhRJKdAE5V7ZTlnbHfCR+6bNwK9e1dTQ==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "postcss": "^7.0.2"
+      }
+    },
     "postcss-selector-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
@@ -26312,6 +26322,28 @@
         }
       }
     },
+    "postcss-selector-replace": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-replace/-/postcss-selector-replace-1.0.2.tgz",
+      "integrity": "sha1-2jIEPgfKlxu/gRCBMZ021V7u9D0=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.8"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        }
+      }
+    },
     "postcss-simple-vars": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-5.0.2.tgz",
diff --git a/package.json b/package.json
index 79496aabf..8831116be 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,8 @@
     "postcss-loader": "3.0.0",
     "postcss-mixins": "6.2.3",
     "postcss-nested": "4.2.1",
+    "postcss-selector-not": "^4.0.0",
+    "postcss-selector-replace": "^1.0.2",
     "postcss-sort-media-queries": "1.31.21",
     "postcss-url": "8.0.0",
     "prismjs": "1.19.0",
diff --git a/postcss.config.js b/postcss.config.js
index f98389942..fb0648275 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -6,11 +6,18 @@ module.exports = {
     require('postcss-url')({
       url: 'rebase'
     }),
-    require('postcss-mixins')({ mixinsDir: 'src/designa/mixins' }),
     require('postcss-custom-selectors')({ importFrom: 'src/selectors.css' }),
     require('postcss-custom-media'),
     require('postcss-custom-properties')({ preserve: true }),
     require('postcss-nested'),
+    // Many browsers don’t support compound `:not()` selectors, this splits it
+    require('postcss-selector-not'),
+    // We remove the PrismJS specific modifier when used in `:not()` selectors
+    // see ./src/scripts/selectors.ts:61
+    require('postcss-selector-replace')({
+      before: [/\[class\*=language-\]\)/gm],
+      after: [')']
+    }),
     require('autoprefixer'),
     require('postcss-extend'),
     require('cssnano')({ preset: 'default' }),