postcss: Type-check PostCSS configuration.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

package.json

@@ -154,6 +154,7 @@
     "mockdate": "^3.0.2",
     "nyc": "^17.0.0",
     "openapi-examples-validator": "^6.0.1",
+    "postcss-load-config": "^6.0.1",
     "preact": "^10.24.3",
     "prettier": "~3.5.3",
     "prettier-plugin-astro": "^0.14.1",

pnpm-lock.yaml

@@ -483,6 +483,9 @@ importers:
       openapi-examples-validator:
         specifier: ^6.0.1
         version: 6.0.3
+      postcss-load-config:
+        specifier: ^6.0.1
+        version: 6.0.1(jiti@2.5.1)(postcss@8.5.6)(yaml@2.8.1)
       preact:
         specifier: ^10.24.3
         version: 10.27.1
@@ -7449,6 +7452,24 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
+  postcss-load-config@6.0.1:
+    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      jiti: '>=1.21.0'
+      postcss: '>=8.0.9'
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+      postcss:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
   postcss-loader@8.2.0:
     resolution: {integrity: sha512-tHX+RkpsXVcc7st4dSdDGliI+r4aAQDuv+v3vFYHixb6YgjreG5AG4SEB0kDK8u2s6htqEEpKlkhSBUTvWKYnA==}
     engines: {node: '>= 18.12.0'}
@@ -18314,6 +18335,14 @@ snapshots:
       '@csstools/utilities': 2.0.0(postcss@8.5.6)
       postcss: 8.5.6
 
+  postcss-load-config@6.0.1(jiti@2.5.1)(postcss@8.5.6)(yaml@2.8.1):
+    dependencies:
+      lilconfig: 3.1.3
+    optionalDependencies:
+      jiti: 2.5.1
+      postcss: 8.5.6
+      yaml: 2.8.1
+
   postcss-loader@8.2.0(postcss@8.5.6)(typescript@5.9.2)(webpack@5.101.3):
     dependencies:
       cosmiconfig: 9.0.0(typescript@5.9.2)

version.py

@@ -49,4 +49,4 @@ API_FEATURE_LEVEL = 425
 #   historical commits sharing the same major version, in which case a
 #   minor version bump suffices.
 
-PROVISION_VERSION = (347, 4)  # bumped 2025-09-09 to add @types/babel__core, @types/babel__preset-env
+PROVISION_VERSION = (347, 5)  # bumped 2025-09-09 to add postcss-load-config

web/postcss.config.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import path from "node:path";
 
 import postcssExtendRule from "postcss-extend-rule";
@@ -8,9 +10,19 @@ import postcssSimpleVars from "postcss-simple-vars";
 
 import {container_breakpoints, media_breakpoints} from "./src/css_variables.ts";
 
-const config = ({file}) => ({
+/**
+ * @param {object} ctx
+ * @returns {import("postcss-load-config").Config}
+ * @satisfies {import("postcss-load-config").ConfigFn & import("postcss-loader/dist/config").PostCSSLoaderOptions}
+ */
+const config = (ctx) => ({
     plugins: [
-        (file.basename ?? path.basename(file)) === "dark_theme.css" &&
+        "file" in ctx &&
+            (typeof ctx.file === "string"
+                ? path.basename(ctx.file)
+                : typeof ctx.file === "object" && ctx.file !== null && "basename" in ctx.file
+                  ? ctx.file.basename
+                  : undefined) === "dark_theme.css" &&
             // Add postcss-import plugin with postcss-prefixwrap to handle
             // the flatpickr dark theme. We do this because flatpickr themes
             // are not scoped. See https://github.com/flatpickr/flatpickr/issues/2168.

web/src/types/postcss-extend-rule.d.ts

@@ -0,0 +1,10 @@
+import type {PluginCreator} from "postcss";
+
+export type PostCSSExtendRuleOptions = {
+    onFunctionalSelector?: "remove" | "ignore" | "warn" | "throw";
+    onRecursiveExtend?: "remove" | "ignore" | "warn" | "throw";
+    onUnusedExtend?: "remove" | "ignore" | "warn" | "throw";
+};
+
+declare const postcssExtendRule: PluginCreator<PostCSSExtendRuleOptions>;
+export default postcssExtendRule;

web/src/types/postcss-import.d.ts

@@ -0,0 +1,21 @@
+import type {AcceptedPlugin, PluginCreator} from "postcss";
+
+export type PostCSSImportOptions = {
+    filter?: (path: string) => boolean;
+    root?: string;
+    path?: string | string[];
+    plugins?: AcceptedPlugin[];
+    resolve?: (
+        id: string,
+        basedir: string,
+        importOptions: PostCSSImportOptions,
+        astNode: unknown,
+    ) => string | string[] | Promise<string | string[]>;
+    load?: (filename: string, importOptions: PostCSSImportOptions) => string | Promise<string>;
+    skipDuplicates?: boolean;
+    addModulesDirectories?: string[];
+    warnOnEmpty?: boolean;
+};
+
+declare const postcssImport: PluginCreator<PostCSSImportOptions>;
+export default postcssImport;