fix(Browser support): Transform CSS4 :not() usage to CSS3 spec

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",

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' }),