CSS is now properly generated and compatible.

.gitignore

@@ -2,6 +2,6 @@ html/
 html.tgz
 assets/images/gen_*
 assets/images/icons/gen_*
-assets/css/fonts/
+assets/fonts/
 assets/css/node_modules
 assets/css/theme.css

assets/css/compile.sh

 #!/bin/sh -e
 
 HERE=$(dirname $(readlink -f ${0}));
+NODE=16.6.0-alpine3.14;
 
 cd ${HERE};
 
-rm -fr fonts;
+#===============================================================
+docker run -v${HERE}:/x -w/x --rm -i node:${NODE} sh <<'EOF'
+apk update;
+apk upgrade;
+apk add git;
+#===============================================================
+
+cd /tmp;
+git clone https://github.com/sass/sass.git;
+cd sass;
+git checkout 2121f939b411c1650005b82c53557dd6248bff74;
+npm audit fix;
+npm install;
+npm install -g sass;
+cd /x;
+
+sass --no-source-map scss/theme.scss theme.css;
+chown 1000:1000 theme.css;
+
+#===============================================================
+EOF
+#===============================================================
+
+rm -fr fonts src;
+mkdir src;
+mv theme.css src;
 
 #===============================================================
-docker run -u$(id -u):$(id -g) -v${HERE}:/x -w/x --rm -i node:16.6.0-alpine3.14 sh <<'EOF'
+docker run -u$(id -u):$(id -g) -v${HERE}:/x -w/x --rm -i node:${NODE} sh <<'EOF'
 #===============================================================
 
 npm install;
@@ -17,8 +43,9 @@ npm run build;
 EOF
 #===============================================================
 
-mv out/theme.css .;
-mv out/fonts .;
+mv css/theme.css .;
+mv fonts ..;
 
 rm -fr node_modules;
-rm -fr out;
+rm -fr css;
+rm -fr src;

assets/css/package.json

 {
-  "name": "adelie-scss",
+  "name": "adelie-css-compat",
   "private": true,
   "version": "0.0.0",
-  "description": "Compiles SCSS for the Adélie Linux homepage",
+  "description": "Converts CSS for the Adélie Linux homepage for old browsers",
   "scripts": {
-    "build": "postcss scss/theme.scss --base scss --dir out --ext css",
-    "clean": "rimraf out/*",
-    "list-supported": "npx browserslist 'cover 99.5%, dead, Firefox ESR'",
+    "build": "postcss src/theme.css --base src --dir css --ext css",
+    "clean": "rimraf css fonts",
+    "list-supported": "npx browserslist",
     "prebuild": "npm run clean"
   },
   "author": "Eric Hegnes <eric@hegnes.com>",
   "license": "ISC",
   "devDependencies": {
+    "autoprefixer": "^10.3.1",
     "cssnano": "^5.0.7",
     "cssnano-preset-advanced": "^5.1.3",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
-    "postcss-easy-import": "^3.0.0",
     "postcss-font-grabber": "^3.0.2",
     "postcss-import-url": "^7.0.0",
-    "postcss-nested": "^5.0.6",
     "postcss-preset-env": "^6.7.0",
-    "postcss-sassy-mixins": "^2.1.0",
-    "postcss-scss": "^4.0.0",
-    "postcss-simple-vars": "^6.0.3",
+    "postcss-unprefix": "^2.1.4",
     "rimraf": "^3.0.2"
-  }
+  },
+  "browserslist": [
+    "cover 99.5%",
+    "Firefox ESR",
+    "dead"
+  ]
 }

assets/css/postcss.config.js

-const { postcssFontGrabber } = require('postcss-font-grabber')
-
 module.exports = conf => {
-  const scss = conf.file.extname === '.scss';
-
   return {
-    parser: 'postcss-scss',
     plugins: [
-      require('postcss-easy-import')({
-        prefix: '_',
-        extensions: ['.scss'],
-      }),
+      // converts googleapis URLs to gstatic ones
       require('postcss-import-url')({
         recursive: true,
         modernBrowser: true,
       }),
+      // downloads gstatic fonts for local serving
+      require('postcss-font-grabber').postcssFontGrabber({
+        cssSrc: 'src',
+        cssDest: 'css',
+        fontDest: 'fonts',
+      }),
+      // main compatibility phase
       require('postcss-preset-env')({
-        browsers: 'last 4 versions',
         stage: 3,
       }),
-      // mixins must come before simple-vars and nested
-      require('postcss-sassy-mixins')(),
-      require('postcss-simple-vars')(),
-      require('postcss-nested')(),
-      postcssFontGrabber({
-        cssSrc: './scss/',
-        cssDest: './out',
-        fontDest: './out/fonts',
-      }),
+      // must be run before autoprefixer
+      require('postcss-unprefix')(),
+      require('autoprefixer')(),
+      // does not /add/ prefixes by default, hence previous step
       require('cssnano')({
         preset: 'advanced'
       }),
     ]
-
   };
-
 };