docs: Add PostCSS/Autoprefixer/CSSNano (#16502)

* chore: Compile Sass directly to _site uncompressed

* docs: use Autoprefixer for current and IE11

* docs: Stylelint property-no-vendor-prefix

Autoprefix will add this during the build

* docs: use CSSNano for minification

* chore: remove verbose PostCSS

* chore: untrack complied CSS

* docs: don't copy SCSS files to built site

* docs: add watch target for PostCSS

* fix: revert to old passthrough

Author: nschonni

docs/.stylelintrc.json

@@ -17,7 +17,6 @@
         "no-duplicate-selectors": null,
         "number-leading-zero": null,
         "number-no-trailing-zeros": null,
-        "property-no-vendor-prefix": null,
         "selector-class-pattern": null,
         "value-keyword-case": null
     },

docs/package.json

@@ -10,12 +10,14 @@
     "files": [],
     "scripts": {
         "images": "imagemin '_site/assets/images' --out-dir='_site/assets/images'",
-        "watch:sass": "sass --watch --poll src/assets/scss:src/assets/css",
+        "watch:postcss": "postcss src/assets/css -d src/assets/css --watch --poll",
+        "watch:sass": "sass --watch --poll src/assets/scss:src/assets/css --no-source-map",
         "watch:eleventy": "eleventy --serve --port=2023",
-        "build:sass": "sass --style=compressed src/assets/scss:src/assets/css --no-source-map",
+        "build:postcss": "postcss src/assets/css -d src/assets/css",
+        "build:sass": "sass src/assets/scss:src/assets/css --no-source-map",
         "build:eleventy": "npx @11ty/eleventy",
-        "start": "npm-run-all build:sass --parallel watch:*",
-        "build": "npm-run-all build:sass build:eleventy images",
+        "start": "npm-run-all build:sass build:postcss --parallel watch:*",
+        "build": "npm-run-all build:sass build:postcss build:eleventy images",
         "lint:scss": "stylelint \"**/*.{scss,html}\"",
         "lint:fix:scss": "npm run lint:scss -- --fix"
     },
@@ -27,6 +29,8 @@
         "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.2",
         "@types/markdown-it": "^12.2.3",
         "algoliasearch": "^4.12.1",
+        "autoprefixer": "^10.4.13",
+        "cssnano": "^5.1.14",
         "dom-parser": "^0.1.6",
         "eleventy-plugin-nesting-toc": "^1.3.0",
         "eleventy-plugin-page-assets": "^0.3.0",
@@ -41,6 +45,7 @@
         "markdown-it-container": "^3.0.0",
         "netlify-cli": "^10.3.1",
         "npm-run-all": "^4.1.5",
+        "postcss-cli": "^10.0.0",
         "postcss-html": "^1.5.0",
         "prismjs": "^1.29.0",
         "rimraf": "^3.0.2",
@@ -52,5 +57,9 @@
     },
     "engines": {
         "node": ">=14.0.0"
-    }
+    },
+    "browserslist": [
+        "defaults",
+        "IE 11"
+    ]
 }

docs/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: [
+      require('autoprefixer'),
+      require('cssnano')
+    ],
+    map: false
+  }

docs/src/assets/scss/components/docs-index.scss

@@ -60,7 +60,6 @@
 }
 
 .index-js [aria-expanded="true"] .index-icon {
-    -ms-transform: rotate(180deg);
     transform: rotate(180deg);
 }
 

docs/src/assets/scss/components/search.scss

@@ -1,6 +1,5 @@
 [type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
     appearance: none;
 }
 

docs/src/assets/scss/components/toc.scss

@@ -124,7 +124,6 @@
     color: var(--color-neutral-400);
 
     [aria-expanded="true"] & {
-        -ms-transform: rotate(180deg);
         transform: rotate(180deg);
     }
 }

docs/src/assets/scss/forms.scss

@@ -1,6 +1,4 @@
 .c-custom-select {
-    -moz-appearance: none;
-    -webkit-appearance: none;
     appearance: none;
     box-sizing: border-box;
     display: block;

docs/src/assets/scss/syntax-highlighter.scss

@@ -15,12 +15,7 @@ pre[class*="language-"] {
     word-wrap: normal;
     line-height: 1.5;
     font-variant-ligatures: none;
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
     tab-size: 4;
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
     hyphens: none;
 }