postcss: Type-check PostCSS configuration.

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

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;