build: splits postcss into two processes because the color-function is dependant on the other having already been processed

Author: iOvergaard

packages/uui-css/package.json

@@ -34,7 +34,9 @@
   },
   "scripts": {
     "build": "npm run build:cssprops && tsc --build && rollup -c rollup.config.js",
-    "build:cssprops": "postcss lib/custom-properties.css --base lib/ --dir dist && npm run custom-properties-cache",
+    "build:cssprops": "npm run postcss:convert && npm run postcss:colors && npm run custom-properties-cache",
+    "postcss:convert": "postcss lib/custom-properties.css -o dist/custom-properties.css",
+    "postcss:colors": "postcss dist/custom-properties.css -u postcss-color-function -o dist/custom-properties.css",
     "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts custom-elements.json custom-properties.*",
     "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json",
     "custom-properties-cache": "node ./scripts/update-custom-properties-cache.js"

packages/uui-css/postcss.config.cjs

@@ -1,10 +1,11 @@
-module.exports = () => {
-  return {
-    plugins: {
-      'postcss-advanced-variables': {},
-      'postcss-color-function': {},
-      'postcss-url': {},
-      autoprefixer: {},
-    },
-  };
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: [
+    require('postcss-advanced-variables'),
+    require('postcss-color-function'),
+    require('postcss-url'),
+    require('autoprefixer'),
+  ],
 };
+
+module.exports = config;