@knitli/astro-docs-template 0.4.2 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knitli/astro-docs-template",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Opinionated Astro + Starlight docs site template with Knitli branding",
   "keywords": [
     "knitli",
@@ -63,6 +63,8 @@
     "astro-favicons": "3.1.6",
     "bun": "^1.3.9",
     "lightningcss": "^1.30.2",
+    "postcss": "8.5.6",
+    "postcss-nesting": "^14.0.0",
     "rehype-external-links": "^3.0.0",
     "sharp": "^0.34.5",
     "starlight-announcement": ">=0.1.1",

package/src/config.ts

@@ -18,6 +18,8 @@ import { defineConfig, fontProviders } from "astro/config";
 import cloudflarePagesHeaders from "astro-cloudflare-pages-headers";
 import astroD2 from "astro-d2";
 import favicons from "astro-favicons";
+import type { PluginCreator } from "postcss";
+import type { pluginOptions } from "postcss-nesting";
 import rehypeExternalLinks from "rehype-external-links";
 import starlightAnnouncement from "starlight-announcement";
 import starlightChangelogs from "starlight-changelogs";
@@ -48,6 +50,12 @@ function nonNullable<T>(value: T): value is NonNullable<T> {
   return value != null;
 }
 
+const postcssNesting = async (options?: { edition: "2021" | "2024-02" }) => {
+  // Dynamically import postcss-nesting to avoid bundling it in the template's node_modules
+  const { default: createPlugin } = await import("postcss-nesting");
+  return createPlugin(options) as unknown as PluginCreator<pluginOptions>;
+};
+
 // ── Defaults (defined before interface so `typeof` references work) ──
 
 export const {
@@ -164,6 +172,7 @@ export interface DocsTemplateOptions {
     promotePatterns: string[];
     demotePatterns: string[];
   };
+  cloudflareConfigPath?: string;
   rootDir: string;
   shikiConfig?: typeof shikiCfg;
   logoDark?: string;
@@ -395,11 +404,12 @@ const defaultHeadersConfig: OutgoingHttpHeaders = {
     "default-src 'self'; script-src 'self' 'unsafe-inline' static.cloudflareinsights.com zaraz.cloudflare.com; connect-src 'self' cloudflareinsights.com *.cloudflareinsights.com; img-src 'self' media.knitli.com data: avatars.githubusercontent.com ui-avatars.com media.knitli.com knitli.com; style-src 'self' 'unsafe-inline' fonts.googleapis.com; font-src 'self' fonts.gstatic.com; frame-ancestors 'none'",
 };
 
-export default function createConfig(options: DocsTemplateOptions) {
+export default async function createConfig(options: DocsTemplateOptions) {
   const {
     appName,
     description,
     llmConfig,
+    cloudflareConfigPath,
     rootDir,
     shikiConfig = shikiCfg,
     logoDark = headlineLogoDark,
@@ -420,7 +430,7 @@ export default function createConfig(options: DocsTemplateOptions) {
     site: "https://docs.knitli.com",
     base: `/${appName.toLowerCase()}/`,
     adapter: cloudflare({
-      configPath: `${rootDir}/wrangler.json`,
+      configPath: cloudflareConfigPath || `${rootDir}/wrangler.jsonc`,
       imageService: "compile",
     }),
     // Image optimization
@@ -507,7 +517,15 @@ export default function createConfig(options: DocsTemplateOptions) {
         },
         ssr: false,
       },
-      css: {},
+      css: {
+        postcss: {
+          plugins: [
+            await postcssNesting({
+              edition: "2024-02",
+            }),
+          ],
+        },
+      },
     },
     prefetch: {
       defaultStrategy: "viewport",