Replace postcss-cssnext with postcss-preset-env

build/build.ts

@@ -28,7 +28,7 @@ import { terser } from "rollup-plugin-terser";
 import webpack from "webpack";
 import postcss from "postcss";
 import postcssImport from "postcss-import";
-import postcssCssNext from "postcss-cssnext";
+import postcssPresetEnv from "postcss-preset-env";
 import cssnano from "cssnano";
 
 const MODE = process.env["NODE_ENV"] || "production";
@@ -162,7 +162,13 @@ async function generateCss(): Promise<void> {
   const cssIn = fs.readFileSync(cssInPath);
   const cssOut = await postcss([
     postcssImport,
-    postcssCssNext({ warnForDuplicates: false }),
+    postcssPresetEnv({
+      stage: 3,
+      features: {
+        "nesting-rules": true,
+        "color-mod-function": true
+      }
+    }),
     cssnano
   ]).process(cssIn, { from: cssInPath, to: cssOutPath });
   fs.writeFileSync(cssOutPath, cssOut.css);

package.json

@@ -56,8 +56,8 @@
     "esm": "^3.2.25",
     "mithril": "^2.0.0-rc.8",
     "postcss": "^7.0.16",
-    "postcss-cssnext": "^3.1.0",
     "postcss-import": "^12.0.1",
+    "postcss-preset-env": "^6.7.0",
     "prettier": "^1.17.1",
     "rollup": "^1.13.1",
     "rollup-plugin-json": "^4.0.0",

ui/css/app.css

@@ -78,7 +78,7 @@ i {
 
 @keyframes pending-blink {
   from {
-    background-color: color(var(--status-green) a(90%));
+    background-color: color-mod(var(--status-green) a(90%));
   }
   to {
     background-color: transparent;
@@ -141,10 +141,10 @@ body {
           }
         }
         & > .stale.active {
-          background-color: color(var(--status-gray) a(90%));
+          background-color: color-mod(var(--status-gray) a(90%));
         }
         & > .fault.active {
-          background-color: color(var(--status-red) a(90%));
+          background-color: color-mod(var(--status-red) a(90%));
         }
         & > .queued.active {
           font-weight: bold;
@@ -183,11 +183,11 @@ body {
           border-radius: 0.4em;
         }
         & > .stale {
-          background-color: color(var(--status-gray) a(90%));
+          background-color: color-mod(var(--status-gray) a(90%));
           border-radius: 0.4em;
         }
         & > .fault {
-          background-color: color(var(--status-red) a(90%));
+          background-color: color-mod(var(--status-red) a(90%));
           border-radius: 0.4em;
         }
         & .parameter {
@@ -227,15 +227,15 @@ body {
         transition: opacity var(--fade), top var(--fade);
 
         &.error {
-          background-color: color(var(--status-red) a(90%));
+          background-color: color-mod(var(--status-red) a(90%));
           border: 1px solid var(--status-red);
         }
         &.success {
-          background-color: color(var(--status-green) a(90%));
+          background-color: color-mod(var(--status-green) a(90%));
           border: 1px solid var(--status-green);
         }
         &.warning {
-          background-color: color(var(--status-yellow) a(90%));
+          background-color: color-mod(var(--status-yellow) a(90%));
           border: 1px solid var(--status-yellow);
         }
       }