@junejs/server 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@junejs/server",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "June host adapters + dev server. Host-coupled; depends on the pure @junejs/core contract layer.",
   "type": "module",
   "license": "MIT",
@@ -30,12 +30,10 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@junejs/core": "0.0.18",
-    "@junejs/db": "0.0.18",
+    "@junejs/core": "0.0.20",
+    "@junejs/db": "0.0.20",
     "marked": "^18.0.5",
     "rolldown": "^1.1.0",
-    "postcss": "^8.4.0",
-    "postcss-modules": "^6.0.0",
     "lightningcss": "^1.27.0"
   },
   "peerDependencies": {

package/src/build.ts

@@ -34,7 +34,7 @@ import { createWorker, type WorkerManifest } from "./worker";
 import { findExtraFile } from "./router";
 import type { ExtraHandler, LayoutComponent, LoadingComponent } from "./pipeline";
 import { findClientEntry, bundleClientToFile, CLIENT_SCRIPT_URL } from "./client-bundle";
-import { findGlobalCss, minifyCss, processCss, STYLES_URL } from "./css";
+import { cssTargets, findGlobalCss, minifyCss, processCss, STYLES_URL } from "./css";
 import { buildModuleCss, rolldownCssModulesPlugin, registerCssModules } from "./css-modules";
 
 export type BuildResult = {
@@ -290,7 +290,8 @@ export async function juneBuild(
   const { maps: cssModuleMaps, css: rawModuleCss } = await buildModuleCss(appDir, appRoot);
   // Minify for build (dev serves it readable). Scoped class names are untouched,
   // so the hashed sheet still matches the maps the bundlers/loaders hand out.
-  const moduleCss = rawModuleCss === null ? null : await minifyCss(rawModuleCss, "modules.css");
+  const moduleCss =
+    rawModuleCss === null ? null : await minifyCss(rawModuleCss, "modules.css", await cssTargets(appDir));
   let moduleCssAsset: string | null = null;
   if (moduleCss !== null) {
     const hash = createHash("sha256").update(moduleCss).digest("hex").slice(0, 8);

package/src/css-modules.ts

@@ -3,22 +3,21 @@
 //
 // The hard constraint: the scoped names must be byte-identical in dev SSR
 // (un-bundled import), the worker build, and the client build (hydration must
-// match SSR). We guarantee that by NEVER deriving the name from a bundler
-// internal — `scopedName(stableKey, class)` is a pure hash of an app-relative
-// path + the class. One main-thread pass globs + transforms every .module.css
-// into a maps dict; the Bun plugin / Node loader / rolldown plugin are then dumb
-// lookups into it, and the served/emitted CSS comes from the SAME pass — so the
-// JS maps and the CSS agree by construction.
+// match SSR). One main-thread pass globs + transforms every .module.css into a
+// maps dict; the Bun plugin / Node loader / rolldown plugin are then dumb lookups
+// into it, and the served/emitted CSS comes from the SAME pass — so the JS maps
+// and the CSS agree by construction. Names stay machine-independent because the
+// transform is keyed on an APP-RELATIVE path (stableKey), not an absolute one.
 //
-// Transforms go through postcss-modules, so the full CSS-Modules surface works:
-// local scoping (the default), `:global(...)`, and cross-file `composes`. The one
-// thing we override is generateScopedName — it's our deterministic hash, not a
-// bundler internal, which is what makes dev/build/client/Node agree.
+// Engine: Lightning CSS (Rust) — local scoping (default), `:global(...)`, and
+// cross-file `composes`. Unlike postcss-modules, Lightning resolves `composes` by
+// REFERENCE (it records the composed scoped name; it does NOT inline the rule), so
+// a class composed across N files lands ONCE in the sheet with no dedup pass.
+// Lightning is imported lazily and only runs at build/dev time, so it never enters
+// the worker graph.
 
-import { createHash } from "node:crypto";
 import { readFile, readdir } from "node:fs/promises";
-import { join, relative, sep } from "node:path";
-import type { AcceptedPlugin, ChildNode } from "postcss";
+import { dirname, join, relative, resolve as resolvePath, sep } from "node:path";
 
 export const MODULE_STYLES_URL = "/_june/modules.css";
 
@@ -29,35 +28,89 @@ export function stableKey(appRoot: string, file: string): string {
   return relative(appRoot, file).split(sep).join("/");
 }
 
-function scopedName(key: string, cls: string): string {
-  const h = createHash("sha256").update(`${key}|${cls}`).digest("hex").slice(0, 8);
-  return `${cls}_${h}`;
+// One `composes` entry, as Lightning reports it: a class in this file (local, already
+// scoped), a global class (unscoped, applied as-is), or a class in another module
+// file (dependency — resolved against that file's exports).
+type Compose =
+  | { type: "local"; name: string }
+  | { type: "global"; name: string }
+  | { type: "dependency"; name: string; specifier: string };
+type ModuleExports = Record<string, { name: string; composes: Compose[] }>;
+type Transformed = { css: string; exports: ModuleExports };
+
+// Lightning-transform ONE file: deterministic scoped CSS + its exports. Cross-file
+// `composes` come back as unresolved `dependency` refs — the caller resolves them.
+async function transformOne(file: string, appRoot: string): Promise<Transformed> {
+  const { transform } = await import("lightningcss");
+  const { code, exports } = transform({
+    // The STABLE app-relative path drives Lightning's [hash], so names are
+    // machine-independent and identical across dev / worker build / client build.
+    filename: stableKey(appRoot, file),
+    code: Buffer.from(await readFile(file, "utf8")),
+    cssModules: { pattern: "[local]_[hash]" },
+  });
+  return { css: code.toString(), exports: (exports ?? {}) as ModuleExports };
+}
+
+// Transform `entry` and (recursively) every file it composes from, into `all`.
+async function transformGraph(
+  entry: string,
+  appRoot: string,
+  all: Record<string, Transformed> = {},
+): Promise<Record<string, Transformed>> {
+  if (all[entry]) return all;
+  const t = await transformOne(entry, appRoot);
+  all[entry] = t;
+  for (const exp of Object.values(t.exports)) {
+    for (const c of exp.composes) {
+      if (c.type === "dependency") {
+        await transformGraph(resolvePath(dirname(entry), c.specifier), appRoot, all);
+      }
+    }
+  }
+  return all;
+}
+
+// The space-joined scoped class string for one local name, following composes:
+//   local → already scoped · global → as-is · dependency → the target file's name.
+function resolveName(
+  file: string,
+  local: string,
+  all: Record<string, ModuleExports>,
+  seen = new Set<string>(),
+): string {
+  const exp = all[file]?.[local];
+  if (!exp) return local; // not a module class (shouldn't happen) → pass through
+  const parts = [exp.name];
+  for (const c of exp.composes) {
+    if (c.type === "dependency") {
+      const target = resolvePath(dirname(file), c.specifier);
+      const k = `${target}::${c.name}`;
+      if (seen.has(k)) continue; // guard against circular composes
+      seen.add(k);
+      parts.push(resolveName(target, c.name, all, seen));
+    } else {
+      parts.push(c.name); // local (already scoped) or global (unscoped)
+    }
+  }
+  return parts.join(" ");
 }
 
-// Transform one .module.css via postcss-modules — correct scoping, `:global`,
-// `composes` (cross-file), and url()/string safety — but with OUR deterministic
-// generateScopedName, so dev SSR / worker build / client build / Node all produce
-// identical names. postcss is imported lazily and only runs at build/dev time, so
-// it never enters the worker graph.
+const exportsOnly = (all: Record<string, Transformed>): Record<string, ModuleExports> =>
+  Object.fromEntries(Object.entries(all).map(([f, t]) => [f, t.exports]));
+
+// Transform one .module.css (+ its composes deps) → its class map and scoped CSS.
+// The CSS is THIS file's rules only; composed rules live in their own files (and so
+// appear once in the combined sheet), never inlined here.
 export async function transformCssModule(
   file: string,
   appRoot: string,
 ): Promise<{ map: Record<string, string>; css: string }> {
-  const postcss = (await import("postcss")).default;
-  const postcssModules = (await import("postcss-modules")).default as (opts: {
-    generateScopedName(name: string, filename: string): string;
-    getJSON(file: string, json: Record<string, string>): void;
-  }) => AcceptedPlugin;
-  let map: Record<string, string> = {};
-  const result = await postcss([
-    postcssModules({
-      generateScopedName: (name, filename) => scopedName(stableKey(appRoot, filename), name),
-      getJSON: (_f, json) => {
-        map = json;
-      },
-    }),
-  ]).process(await readFile(file, "utf8"), { from: file });
-  return { map, css: result.css };
+  const all = await transformGraph(file, appRoot);
+  const exports = exportsOnly(all);
+  const map: Record<string, string> = {};
+  for (const local of Object.keys(all[file]!.exports)) map[local] = resolveName(file, local, exports);
+  return { map, css: all[file]!.css };
 }
 
 // The JS a .module.css import resolves to.
@@ -85,50 +138,33 @@ async function findModuleCss(dir: string): Promise<string[]> {
   return out.sort();
 }
 
-// Drop byte-identical top-level rules. postcss-modules has no module graph, so
-// `composes: x from "./y"` INLINES y's rule into this file's output — and we also
-// emit y directly, so a composed rule lands N+1 times. Vite never duplicates
-// (composes is a graph edge there); we get the same one-copy result by deduping.
-//
-// Two safety points:
-//  - Exact-string match only. Our scoped names are deterministic, so the copies
-//    are byte-identical; we never collapse two genuinely different rules.
-//  - Keep the LAST occurrence, not the first. With :global, two files can write
-//    the same raw selector with different bodies, so the cascade can interleave
-//    (red, blue, red). The winner is the last declaration; dropping the EARLIER
-//    identical copies leaves the last one in place, so the computed result is
-//    unchanged. Keeping the first instead would change which rule wins.
-async function dedupeRules(css: string): Promise<string> {
-  const postcss = (await import("postcss")).default;
-  const root = postcss.parse(css);
-  const last = new Map<string, ChildNode>();
-  root.each((node) => {
-    if (node.type === "rule" || node.type === "atrule") last.set(node.toString(), node);
-  });
-  root.each((node) => {
-    if ((node.type === "rule" || node.type === "atrule") && last.get(node.toString()) !== node) {
-      node.remove();
-    }
-  });
-  return root.toString();
-}
-
 // One pass over app/**/*.module.css → the per-file class maps AND the combined
 // scoped stylesheet. null css when there are none. Deterministic, so the maps the
-// loaders hand out match the CSS that's served/emitted.
+// loaders hand out match the CSS that's served/emitted. composes are references
+// (not inlined), so each rule appears once — no dedup pass.
 export async function buildModuleCss(
   appDir: string,
   appRoot: string,
 ): Promise<{ maps: ModuleMaps; css: string | null }> {
   const files = await findModuleCss(appDir);
+  if (!files.length) return { maps: {}, css: null };
+
+  const all: Record<string, Transformed> = {};
+  for (const file of files) await transformGraph(file, appRoot, all); // picks up out-of-glob deps too
+  const exports = exportsOnly(all);
+
   const maps: ModuleMaps = {};
-  const parts: string[] = [];
   for (const file of files) {
-    const { map, css } = await transformCssModule(file, appRoot);
-    maps[file] = map;
-    parts.push(css);
+    maps[file] = {};
+    for (const local of Object.keys(all[file]!.exports)) maps[file][local] = resolveName(file, local, exports);
   }
-  return { maps, css: parts.length ? await dedupeRules(parts.join("\n")) : null };
+  // Emit each transformed file's CSS once (sorted), so a composed rule — which lives
+  // in its own file — appears exactly once in the combined sheet.
+  const css = Object.keys(all)
+    .sort()
+    .map((f) => all[f]!.css)
+    .join("\n");
+  return { maps, css };
 }
 
 // --- the three dumb interception points (all lookups into `maps`) ------------

package/src/css.ts

@@ -15,6 +15,8 @@ import { createRequire } from "node:module";
 import { join } from "node:path";
 import { pathToFileURL } from "node:url";
 
+import type { Targets } from "lightningcss"; // type-only — never enters the graph
+
 // Framework-emitted assets live under the reserved /_june/ prefix so they never
 // collide with — or squat on — a user's own paths (cf. Next /_next/, Astro
 // /_astro/). Build content-hashes the file under here; this is the dev URL.
@@ -39,6 +41,32 @@ function resolveFromApp(specifier: string, appDir: string): string | null {
   }
 }
 
+// Browser targets for autoprefix + syntax lowering (CSS nesting, :is(), oklch,
+// logical properties, …). June adds NO dep here: if the app installs `browserslist`
+// its config (or the browserslist defaults) drives the targets; otherwise a baked,
+// broadly-supported baseline. Override per app the standard way — a `browserslist`
+// field in package.json or a .browserslistrc.
+const v = (major: number, minor = 0): number => (major << 16) | (minor << 8);
+const DEFAULT_TARGETS: Targets = { chrome: v(107), edge: v(107), firefox: v(104), safari: v(16) };
+
+let targetsCache: { appDir: string; targets: Targets } | null = null;
+export async function cssTargets(appDir: string): Promise<Targets> {
+  if (targetsCache?.appDir === appDir) return targetsCache.targets;
+  let targets: Targets = DEFAULT_TARGETS;
+  const blPath = resolveFromApp("browserslist", appDir);
+  if (blPath) {
+    try {
+      const browserslist = ((await import(blPath)) as { default: (q?: unknown, o?: unknown) => string[] }).default;
+      const { browserslistToTargets } = await import("lightningcss");
+      targets = browserslistToTargets(browserslist(undefined, { path: appDir }));
+    } catch {
+      /* malformed config / resolution race → keep the baked default */
+    }
+  }
+  targetsCache = { appDir, targets };
+  return targets;
+}
+
 async function compileTailwind(
   css: string,
   file: string,
@@ -76,16 +104,17 @@ export function invalidateCss(): void {
   devCache = null;
 }
 
-// Minify a finished stylesheet with Lightning CSS — the same engine Tailwind v4
-// optimizes with, so all of June's build-time CSS comes out consistently. It only
-// touches whitespace/comments/redundancy, never identifiers, so scoped CSS-module
-// class names survive intact (hydration stays byte-identical to SSR). Lazy import:
-// build/dev-time only, never in the worker graph. Falls back to the input if
-// Lightning CSS can't parse it, so minification can never break a build.
-export async function minifyCss(css: string, filename = "input.css"): Promise<string> {
+// Minify a finished stylesheet with Lightning CSS — and, given `targets`, ALSO
+// autoprefix + lower modern syntax (nesting, :is(), oklch, logical props) for the
+// target browsers. The same engine Tailwind v4 optimizes with, so all of June's
+// build-time CSS comes out consistently. It never touches identifiers, so scoped
+// CSS-module class names survive intact (hydration stays byte-identical to SSR).
+// Lazy import: build/dev-time only, never in the worker graph. Falls back to the
+// input if Lightning CSS can't parse it, so it can never break a build.
+export async function minifyCss(css: string, filename = "input.css", targets?: Targets): Promise<string> {
   try {
     const { transform } = await import("lightningcss");
-    const { code } = transform({ filename, code: Buffer.from(css), minify: true });
+    const { code } = transform({ filename, code: Buffer.from(css), minify: true, targets });
     return code.toString();
   } catch (e) {
     console.warn("[june] CSS minify failed; emitting unminified:", e);
@@ -112,7 +141,8 @@ export async function processCss(
       "[june] global.css uses Tailwind but @tailwindcss/postcss isn't installed — serving raw CSS.",
     );
   }
-  // Plain CSS (or the Tailwind fallback): minify here so the non-Tailwind path
-  // is optimized too, matching the Tailwind path.
-  return opts.minify ? await minifyCss(css, file) : css;
+  // Plain CSS (or the Tailwind fallback): minify + autoprefix/lower for the app's
+  // browser targets, so the non-Tailwind path is optimized too. (Tailwind v4 owns
+  // its own targeting; dev stays readable and untargeted.)
+  return opts.minify ? await minifyCss(css, file, await cssTargets(appDir)) : css;
 }