npm - jskelet - Versions diffs - 0.4.8 → 0.5.0 - Mend

jskelet 0.4.8 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/CHANGELOG.md +4 -0
package/docs/02-mimari.md +8 -3
package/docs/03-routing.md +2 -0
package/docs/04-render-ve-sablonlar.md +11 -4
package/docs/08-build.md +32 -4
package/docs/09-dev-araclari.md +1 -1
package/docs/en/02-architecture.md +8 -2
package/docs/en/03-routing.md +2 -0
package/docs/en/04-rendering.md +11 -4
package/docs/en/08-build.md +37 -8
package/docs/en/09-dev-tools.md +1 -1
package/package.json +1 -1
package/src/build/tasks/css.mjs +122 -13
package/src/client/devtools/overlay.js +9 -4
package/src/server/dev/devtools.js +6 -2
package/src/server/render.js +4 -2
package/src/templates/layout.ejs +10 -4

package/CHANGELOG.md CHANGED Viewed

@@ -10,6 +10,10 @@ one is listed under a **Breaking** heading.
 ### Added
+- Route-level stylesheets: put files in `styles/pages/*.css` and load them from
+  the controller with `styles: ["home.css"]` (same contract as island
+  `entries`). The layout emits them after global `app.css`; dev hot-swaps any
+  changed `.css` manifest key without a full reload.
 - Dev overlay Errors tab now lists failed SSR and browser `fetch` calls with
   page path, API URL, optional island name, and expandable response-body
   details (JSON instead of `[object Object]`). Server `console.error` /

package/docs/02-mimari.md CHANGED Viewed

@@ -144,9 +144,14 @@ geciktirmek doğrudan LCP'ye yazılır.
 Ayrı bir "critical CSS" üretilmez. Ölçümde inline kritik CSS ilk ekranı tam
 kapsamadığı için sheet gelince sayfa yeniden akıyordu (bir liste sayfasında CLS
-0.307) ve aynı ~27 KB her HTML yanıtında tekrar ediyordu. Sıkıştırılmış tek
-sheet'i render-blocking bırakmak hem daha hızlı hem CLS'siz; ikinci ziyarette
-zaten `immutable` önbellekten geliyor.
+0.307) ve aynı ~27 KB her HTML yanıtında tekrar ediyordu. Sıkıştırılmış global
+`app.css`'i render-blocking bırakmak hem daha hızlı hem CLS'siz; ikinci
+ziyarette zaten `immutable` önbellekten geliyor.
+Sayfaya özel kurallar için `styles/pages/*.css` + controller `styles: [...]`
+eklenebilir ([08-build.md](./08-build.md)); bunlar da render-blocking basılır
+ama yalnızca ilgili sayfada. Tailwind utility'leri global sheet'te kalır —
+sayfa sheet'inde tam `@import "tailwindcss"` utility çıktısını tekrarlar.
 Aynı mantık ikonlarda da var: her ikon için ayrı istek yerine, build zamanında
 yalnızca kaynakta kullanılan sembollerden bir SVG sprite üretilir. Tüm Phosphor

package/docs/03-routing.md CHANGED Viewed

@@ -213,6 +213,7 @@ Controller `async (ctx) => sayfa` biçimindedir ve şu alanları döndürebilir:
 | `head` | `string` | `""` | `<head>`e olduğu gibi basılacak ham HTML (ör. LCP preload'ı). |
 | `bodyClass` | `string` | `hooks.layoutContext().bodyClass ?? ""` | `<body class="…">`. |
 | `entries` | `string[]` | `[]` | Bu sayfada ek olarak yüklenecek client entry adları: `["chart.js"]`. |
+| `styles` | `string[]` | `[]` | Bu sayfada ek olarak yüklenecek stylesheet adları: `["home.css"]` → `styles/pages/home.css`. |
 `revalidate` **`route()`'un ikinci argümanıdır**, controller'ın döndürdüğü
 nesnenin alanı değil.
@@ -239,6 +240,7 @@ app.get(
         head: headHints({ href: data.cover }),
         bodyClass: "bg-slate-50",
         entries: ["chart.js"],
+        styles: ["markets.css"],
       };
     },
     { revalidate: 30 },

package/docs/04-render-ve-sablonlar.md CHANGED Viewed

@@ -151,8 +151,13 @@ kopyalamaktır.
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <%- extraHead %>
     <% if (hasAsset('app.css')) { %>
-    <link rel="stylesheet" href="<%= asset('app.css') %>">
+    <link rel="stylesheet" href="<%= asset('app.css') %>" data-jskelet-css="app.css">
     <% } %>
+    <% styles.forEach(function (sheet) { %>
+      <% if (hasAsset(sheet)) { %>
+    <link rel="stylesheet" href="<%= asset(sheet) %>" data-jskelet-css="<%= sheet %>">
+      <% } %>
+    <% }); %>
     <%- headMeta %>
     <% structuredData.forEach(function (item) { %>
     <script type="application/ld+json"><%- jsonScript(item) %></script>
@@ -177,9 +182,10 @@ Dikkat edilecek noktalar:
 - **`extraHead` en başta.** Kaynak ipuçlarını (`preconnect`, LCP `preload`)
   geciktirmek doğrudan LCP'ye yazılır.
-- **Tek, render-blocking stylesheet** ve gerekçesi
-  [02-mimari.md](./02-mimari.md)'de. Build çalışmadıysa `hasAsset('app.css')`
-  false olur ve etiket hiç basılmaz.
+- **Global `app.css` render-blocking** ve gerekçesi
+  [02-mimari.md](./02-mimari.md)'de. Controller `styles: [...]` ile ek sayfa
+  sheet'leri de aynı şekilde basılır. Build çalışmadıysa `hasAsset` false olur
+  ve etiket hiç basılmaz.
 - **`hasAsset` kontrolleri** build eksikken sayfanın 404 veren dosyaları
   istememesini sağlar.
 - **Devtools script'i** yalnızca `NODE_ENV=development` iken basılır; prod
@@ -196,6 +202,7 @@ Dikkat edilecek noktalar:
 | `body` | `string` | Sayfa şablonunun render çıktısı |
 | `bodyClass` | `string` | controller `bodyClass` → `context.bodyClass` → `""` |
 | `entries` | `string[]` | controller `entries`; varsayılan `[]` |
+| `styles` | `string[]` | controller `styles`; varsayılan `[]` |
 | `pathname` | `string` | `req.path`; **varsayılan boş string** |
 | `lang` | `string` | `context.lang` → `brand.lang` → `"en"` |
 | `devtools` | `boolean` | `NODE_ENV === "development"` |

package/docs/08-build.md CHANGED Viewed

@@ -64,8 +64,13 @@ dosya adlarını okunur tutuyor. Hash'li olmaları sayesinde bu dosyalara
 ```ejs
 <% if (hasAsset('app.css')) { %>
-<link rel="stylesheet" href="<%= asset('app.css') %>">
+<link rel="stylesheet" href="<%= asset('app.css') %>" data-jskelet-css="app.css">
 <% } %>
+<% styles.forEach(function (sheet) { %>
+  <% if (hasAsset(sheet)) { %>
+<link rel="stylesheet" href="<%= asset(sheet) %>" data-jskelet-css="<%= sheet %>">
+  <% } %>
+<% }); %>
 ```
 - `asset(name)` manifest'te varsa hash'li URL'i, yoksa `/assets/<name>` döner.
@@ -85,7 +90,8 @@ Watch turunda yeniden derlenen varlık yeni bir hash'e yazılıp eskisi silinir.
 yüzden manifest de güncellenmek zorunda (`patchManifest`): aksi hâlde HTML
 silinmiş dosyayı isteyip 404 alır ve sayfa dev oturumunun kalanında stilsiz ya
 da JS'siz kalır. CSS ve client görevlerinin ikisi de her turda kendi anahtarını
-yamalar; diğer anahtarlar korunur.
+yamalar; diğer anahtarlar korunur. CSS tarafı watch'ta `syncCssManifest` ile
+tüm `.css` anahtarlarını günceller (silinen sayfa sheet'leri de düşer).
 ## CSS — Tailwind v4
@@ -100,10 +106,32 @@ minifikasyon → `writeAsset("app.css", …)`.
   şekilde yavaşlatıyor.
 - **lightningcss opsiyoneldir:** yoksa Tailwind'in kendi çıktısı kullanılır,
   yalnızca birkaç kB daha büyük olur.
-- Çıktı tek bir dosyadır ve layout onu render-blocking olarak yükler. Ayrı bir
-  "critical CSS" üretilmemesinin ölçüm gerekçesi
+- Global çıktı `app.css`'tir ve layout onu her sayfada render-blocking olarak
+  yükler. Ayrı bir "critical CSS" üretilmemesinin ölçüm gerekçesi
   [02-mimari.md](./02-mimari.md)'de.
+### Sayfa stylesheet'leri (`styles/pages/`)
+Island `entries` ile aynı sözleşme. `styles/pages/*.css` altındaki her dosya
+ayrı bir hash'li varlıktır (`home.css` → `/assets/home.<hash>.css`). Controller
+yalnızca istediği sayfada yükler:
+```js
+return {
+  view: "pages/home",
+  styles: ["home.css"],
+};
+```
+Dizin, `paths.styles` dosyasının yanındaki `pages/` klasörüdür (`styles` taşınırsa
+pages de yanında kalır). Dizin yoksa veya boşsa adım yalnızca global sheet üretir.
+Sayfa CSS'i sayfaya özel kurallar içindir. Tailwind utility'leri global sheet'te
+kalmalı — dosyada tam `@import "tailwindcss"` utility çıktısını tekrarlar.
+Layout `app.css`ten sonra `styles` dizisindeki her sheet için
+`<link data-jskelet-css="…">` basar; `hasAsset` false ise etiket yok.
 ### `@source` direktifleri zorunludur
 Tailwind v4'ün sınıf taraması `globals.css` içindeki `@source` direktiflerine

package/docs/09-dev-araclari.md CHANGED Viewed

@@ -117,7 +117,7 @@ yeniden yazıldığı için değişiklik tespiti manifest üzerinden yapılır.
 | Değişen | Davranış |
 | --- | --- |
-| Yalnızca `app.css` | **CSS hot-swap:** stylesheet takas edilir, sayfa yenilenmez. Durum ve kaydırma korunur. |
+| Yalnızca `.css` anahtarları | **CSS hot-swap:** değişen her stylesheet takas edilir, sayfa yenilenmez. Durum ve kaydırma korunur. |
 | `main.js`, sprite, başka bir varlık ya da birden fazla anahtar | **Tam yenileme** |
 Her iki durumda önce HTML önbelleği temizlenir: saklanan HTML eski hash'li varlık

package/docs/en/02-architecture.md CHANGED Viewed

@@ -147,10 +147,16 @@ resource hints (`preconnect`, LCP `preload`) at the **very beginning** of the
 No separate "critical CSS" is produced. In measurement, because the inline
 critical CSS did not fully cover the first viewport, the page reflowed once the
 sheet arrived (CLS 0.307 on a list page) and the same ~27 KB was repeated in
-every HTML response. Leaving a single compressed sheet render-blocking is both
-faster and free of CLS; on the second visit it already comes from the
+every HTML response. Leaving the compressed global `app.css` render-blocking is
+both faster and free of CLS; on the second visit it already comes from the
 `immutable` cache.
+Page-specific rules can use `styles/pages/*.css` plus controller
+`styles: [...]` ([08-build.md](./08-build.md)); those are also render-blocking
+but only on the pages that ask for them. Keep Tailwind utilities in the global
+sheet — a full `@import "tailwindcss"` in a page sheet duplicates utility
+output.
 The same logic applies to icons: instead of a separate request per icon, an SVG
 sprite is produced at build time from only the symbols actually used in the
 source. Shipping the whole Phosphor set is 1500+ icons, that is several

package/docs/en/03-routing.md CHANGED Viewed

@@ -216,6 +216,7 @@ fields:
 | `head` | `string` | `""` | Raw HTML to be printed into `<head>` as-is (e.g. the LCP preload). |
 | `bodyClass` | `string` | `hooks.layoutContext().bodyClass ?? ""` | `<body class="…">`. |
 | `entries` | `string[]` | `[]` | The names of client entries to be loaded additionally on this page: `["chart.js"]`. |
+| `styles` | `string[]` | `[]` | Extra stylesheets for this page: `["home.css"]` → `styles/pages/home.css`. |
 `revalidate` is **the second argument of `route()`**, not a field of the object
 the controller returns.
@@ -242,6 +243,7 @@ app.get(
         head: headHints({ href: data.cover }),
         bodyClass: "bg-slate-50",
         entries: ["chart.js"],
+        styles: ["markets.css"],
       };
     },
     { revalidate: 30 },

package/docs/en/04-rendering.md CHANGED Viewed

@@ -151,8 +151,13 @@ most practical way to move to your own layout is to copy that file to
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <%- extraHead %>
     <% if (hasAsset('app.css')) { %>
-    <link rel="stylesheet" href="<%= asset('app.css') %>">
+    <link rel="stylesheet" href="<%= asset('app.css') %>" data-jskelet-css="app.css">
     <% } %>
+    <% styles.forEach(function (sheet) { %>
+      <% if (hasAsset(sheet)) { %>
+    <link rel="stylesheet" href="<%= asset(sheet) %>" data-jskelet-css="<%= sheet %>">
+      <% } %>
+    <% }); %>
     <%- headMeta %>
     <% structuredData.forEach(function (item) { %>
     <script type="application/ld+json"><%- jsonScript(item) %></script>
@@ -177,9 +182,10 @@ Points to watch:
 - **`extraHead` comes first.** Delaying resource hints (`preconnect`, LCP
   `preload`) writes straight into LCP.
-- **A single, render-blocking stylesheet**, with the reasoning in
-  [02-architecture.md](./02-architecture.md). If the build has not run,
-  `hasAsset('app.css')` is false and the tag is never emitted.
+- **Global `app.css` is render-blocking**, with the reasoning in
+  [02-architecture.md](./02-architecture.md). Controller `styles: [...]` adds
+  page sheets the same way. If the build has not run, `hasAsset` is false and
+  the tag is never emitted.
 - **The `hasAsset` checks** keep the page from requesting files that 404 when
   the build is missing.
 - **The devtools script** is emitted only when `NODE_ENV=development`; it does
@@ -196,6 +202,7 @@ Points to watch:
 | `body` | `string` | The render output of the page template |
 | `bodyClass` | `string` | controller `bodyClass` → `context.bodyClass` → `""` |
 | `entries` | `string[]` | controller `entries`; defaults to `[]` |
+| `styles` | `string[]` | controller `styles`; defaults to `[]` |
 | `pathname` | `string` | `req.path`; **defaults to the empty string** |
 | `lang` | `string` | `context.lang` → `brand.lang` → `"en"` |
 | `devtools` | `boolean` | `NODE_ENV === "development"` |

package/docs/en/08-build.md CHANGED Viewed

@@ -68,8 +68,13 @@ They are passed to templates automatically; in server code,
 ```ejs
 <% if (hasAsset('app.css')) { %>
-<link rel="stylesheet" href="<%= asset('app.css') %>">
+<link rel="stylesheet" href="<%= asset('app.css') %>" data-jskelet-css="app.css">
 <% } %>
+<% styles.forEach(function (sheet) { %>
+  <% if (hasAsset(sheet)) { %>
+<link rel="stylesheet" href="<%= asset(sheet) %>" data-jskelet-css="<%= sheet %>">
+  <% } %>
+<% }); %>
 ```
 - `asset(name)` returns the hashed URL if it is in the manifest, otherwise
@@ -88,10 +93,11 @@ hashes) and once in prod.
 ### Manifest consistency in watch mode
 On a watch pass, a recompiled asset is written to a new hash and the old one is
-deleted. That is why the manifest has to be updated too (`patchManifest`):
-otherwise the HTML asks for the deleted file, gets a 404, and the page stays
-unstyled or JS-less for the rest of the dev session. Both the CSS and the client
-tasks patch their own key on every pass; the other keys are preserved.
+deleted. That is why the manifest has to be updated too (`patchManifest` /
+CSS `syncCssManifest`): otherwise the HTML asks for the deleted file, gets a
+404, and the page stays unstyled or JS-less for the rest of the dev session.
+Both the CSS and the client tasks refresh their own keys on every pass; the
+other keys are preserved.
 ## CSS — Tailwind v4
@@ -106,9 +112,32 @@ The pipeline: PostCSS + `@tailwindcss/postcss` → minification with lightningcs
   noticeably.
 - **lightningcss is optional:** without it, Tailwind's own output is used, and it
   is only a few kB bigger.
-- The output is a single file and the layout loads it render-blocking. The
-  measurement-based reasoning for not producing a separate "critical CSS" is in
-  [02-architecture.md](./02-architecture.md).
+- The global output is `app.css` and the layout loads it render-blocking on every
+  page. The measurement-based reasoning for not producing a separate "critical
+  CSS" is in [02-architecture.md](./02-architecture.md).
+### Page stylesheets (`styles/pages/`)
+Same contract as island `entries`. Each file under `styles/pages/*.css` becomes
+its own hashed asset (`home.css` → `/assets/home.<hash>.css`). The controller
+loads it only on the pages that need it:
+```js
+return {
+  view: "pages/home",
+  styles: ["home.css"],
+};
+```
+The directory is `pages/` next to the `paths.styles` file (if `styles` moves,
+pages stays beside it). If the directory is missing or empty, the step only
+produces the global sheet.
+Page CSS is for page-specific rules. Keep Tailwind utilities in the global
+sheet — a full `@import "tailwindcss"` in a page file duplicates utility output.
+After `app.css`, the layout emits a `<link data-jskelet-css="…">` for each name
+in `styles`; if `hasAsset` is false the tag is omitted.
 ### `@source` directives are mandatory

package/docs/en/09-dev-tools.md CHANGED Viewed

@@ -121,7 +121,7 @@ rewritten on every build round, change detection is done through the manifest.
 | What changed | Behavior |
 | --- | --- |
-| Only `app.css` | **CSS hot-swap:** the stylesheet is swapped, the page is not reloaded. State and scroll position are preserved. |
+| Only `.css` keys | **CSS hot-swap:** each changed stylesheet is swapped, the page is not reloaded. State and scroll position are preserved. |
 | `main.js`, the sprite, another asset, or more than one key | **Full reload** |
 In both cases the HTML cache is cleared first: the stored HTML carries the old

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "jskelet",
-  "version": "0.4.8",
+  "version": "0.5.0",
   "description": "A framework that feels like no framework: Express 5 + build-time .jsk (or EJS) SSR, vanilla JS islands, Tailwind v4 and an in-process HTML TTL cache.",
   "type": "module",
   "license": "MIT",

package/src/build/tasks/css.mjs CHANGED Viewed

@@ -1,11 +1,20 @@
 /**
- * Tailwind v4 → tek statik stylesheet.
+ * Tailwind v4 → global `app.css` + isteğe bağlı sayfa stylesheet'leri.
+ *
+ * Global sheet her sayfada yüklenir (`paths.styles`). Sayfa sheet'leri
+ * `styles/pages/*.css` altındadır ve yalnızca controller `styles: ["home.css"]`
+ * bildiren sayfalarda basılır — island `entries` ile aynı sözleşme.
  *
  * Ayrı bir "critical CSS" üretilmez. Ölçümde inline kritik CSS ilk ekranı tam
  * kapsamadığı için sheet gelince sayfa yeniden akıyordu (bir liste sayfasında
  * CLS 0.307) ve aynı ~27 KB her HTML yanıtında tekrar ediyordu. Sıkıştırılmış
- * tek sheet'i render-blocking bırakmak hem daha hızlı hem CLS'siz; ikinci
- * ziyarette zaten immutable önbellekten geliyor.
+ * global sheet'i render-blocking bırakmak hem daha hızlı hem CLS'siz; ikinci
+ * ziyarette zaten immutable önbellekten geliyor. Sayfa sheet'leri de
+ * render-blocking; yalnızca ilgili sayfada ek maliyet.
+ *
+ * Tailwind utility'leri global sheet'te kalmalı. Sayfa CSS'inde tam
+ * `@import "tailwindcss"` utility çıktısını tekrarlar; sayfaya özel kurallar
+ * yeter.
  *
  * Tailwind'in sınıf taraması `globals.css` içindeki `@source` direktiflerine
  * bağlıdır. Otomatik tespit yalnızca stylesheet'in bulunduğu dizini tarar,
@@ -14,12 +23,12 @@
  */
 import fs from "node:fs";
 import path from "node:path";
-import { patchManifest, pruneAssets, writeAsset } from "../paths.mjs";
+import { paths, writeAsset, writeManifest } from "../paths.mjs";
 import { importFromApp, tryImportFromApp } from "../resolve-peer.mjs";
 import * as log from "../../log.mjs";
 /**
- * PostCSS boru hattı bir kez kurulur: Tailwind'in kendi önbelleği plugin
+ * PostCSS boru hattı bir kez kurulur: Tailwind'in kendi önbelleği plugin-++
  * örneğinde yaşıyor, her derlemede yeniden oluşturmak watch turlarını
  * belirgin şekilde yavaşlatıyor.
  *
@@ -53,6 +62,29 @@ async function createCompiler(root) {
   };
 }
+/**
+ * `paths.styles` dosyasının yanında `pages/` — config'te ayrı alan yok.
+ *
+ * @param {import('../../config/index.js').ResolvedConfig} config
+ * @returns {string}
+ */
+function pageStylesDir(config) {
+  return path.join(path.dirname(config.dirs.styles), "pages");
+}
+/**
+ * @param {string} dir
+ * @returns {string[]} Mutlak yollar, dosya adına göre sıralı.
+ */
+function listPageStyles(dir) {
+  if (!fs.existsSync(dir)) return [];
+  return fs
+    .readdirSync(dir)
+    .filter((name) => name.endsWith(".css"))
+    .sort()
+    .map((name) => path.join(dir, name));
+}
 /**
  * @param {import('../../config/index.js').ResolvedConfig} config
  * @param {{ watch?: boolean }} [options]
@@ -60,27 +92,55 @@ async function createCompiler(root) {
  */
 export async function buildCss(config, { watch = false } = {}) {
   const input = config.dirs.styles;
+  const pagesDir = pageStylesDir(config);
   const compile = await createCompiler(config.root);
   const run = async () => {
     const started = Date.now();
-    const css = await compile(input);
+    /** @type {Record<string, string>} */
+    const urls = {};
+    let bytes = 0;
+    const appCss = await compile(input);
+    const appUrl = writeAsset("app.css", appCss);
+    urls["app.css"] = appUrl;
+    bytes += Buffer.byteLength(appCss);
+    /** @type {string[]} */
+    const keep = [path.basename(appUrl)];
+    for (const file of listPageStyles(pagesDir)) {
+      const name = path.basename(file);
+      const css = await compile(file);
+      const url = writeAsset(name, css);
+      urls[name] = url;
+      bytes += Buffer.byteLength(css);
+      keep.push(path.basename(url));
+    }
     // Önce yaz, sonra eski hash'leri sil — aynı hash'e düşen içerikte 404
-    // penceresi olmasın (CDN immutable zehirlenmesi).
-    const url = writeAsset("app.css", css);
-    pruneAssets(["app."], { keep: [path.basename(url)] });
-    return { url, bytes: Buffer.byteLength(css), elapsed: Date.now() - started };
+    // penceresi olmasın (CDN immutable zehirlenmesi). Silinen sayfa sheet'leri
+    // de burada gider; önek listesi tutmaya gerek yok.
+    pruneCssOutputs(keep);
+    return { urls, bytes, elapsed: Date.now() - started };
   };
   const first = await run();
-  log.detail(log.size(first.bytes));
+  const pageCount = Object.keys(first.urls).length - 1;
+  log.detail(
+    pageCount > 0
+      ? `${log.size(first.bytes)}, ${pageCount} page ${pageCount === 1 ? "sheet" : "sheets"}`
+      : log.size(first.bytes),
+  );
   if (watch) {
     watchCssSources(config, async () => {
       try {
         const result = await run();
         // Yeni hash manifest'e yazılmazsa HTML silinmiş dosyayı ister.
-        patchManifest("app.css", result.url);
+        // Silinen sayfa sheet anahtarları da düşsün.
+        syncCssManifest(result.urls);
         log.event({
           scope: "css",
           message: "rebuilt",
@@ -98,12 +158,61 @@ export async function buildCss(config, { watch = false } = {}) {
     });
   }
-  return { "app.css": first.url };
+  return first.urls;
+}
+/**
+ * `public/assets/` kökündeki stylesheet çıktıları. `js/` ve `img/` altındakilere
+ * dokunulmaz.
+ *
+ * @param {string[]} keep Yeni yazılan dosya adları (`app.<hash>.css`, …)
+ */
+function pruneCssOutputs(keep) {
+  if (!fs.existsSync(paths.assets)) return;
+  for (const file of fs.readdirSync(paths.assets)) {
+    if (!/\.css(?:\.(?:br|gz))?$/i.test(file)) continue;
+    if (keep.some((name) => file === name || file.startsWith(`${name}.`))) {
+      continue;
+    }
+    fs.rmSync(path.join(paths.assets, file), { force: true });
+  }
+}
+/**
+ * Watch turunda CSS anahtarlarını toplu günceller; artık üretilmeyen sayfa
+ * sheet'lerini manifest'ten siler.
+ *
+ * @param {Record<string, string>} urls
+ */
+function syncCssManifest(urls) {
+  const file = path.join(paths.generated, "manifest.json");
+  /** @type {Record<string, string>} */
+  let current = {};
+  try {
+    current = JSON.parse(fs.readFileSync(file, "utf8"));
+  } catch {
+    // İlk yazımda oluşur.
+  }
+  /** @type {Record<string, string>} */
+  const next = {};
+  for (const [key, value] of Object.entries(current)) {
+    if (key.endsWith(".css") && !(key in urls)) continue;
+    next[key] = value;
+  }
+  for (const [key, url] of Object.entries(urls)) {
+    next[key] = url;
+  }
+  if (JSON.stringify(current) === JSON.stringify(next)) return;
+  writeManifest(next);
 }
 /**
  * Şablon ve island dosyaları da izlenir: Tailwind sınıfları oradan geliyor,
  * yalnızca `styles/` izlemek yeni bir utility yazıldığında rebuild etmez.
+ * `styles/pages` zaten `dirname(styles)` altında.
  *
  * @param {import('../../config/index.js').ResolvedConfig} config
  * @param {() => void} onChange

package/src/client/devtools/overlay.js CHANGED Viewed

@@ -630,7 +630,7 @@ function handleServerMessage(payload) {
   }
   if (payload.type === "css") {
-    swapStylesheet(payload.href);
+    swapStylesheet(payload.href, payload.name);
     return;
   }
@@ -664,13 +664,18 @@ function startFallback() {
 /**
  * Yeni sheet yüklenmeden eskisi kaldırılmaz; böylece stilsiz bir kare oluşmaz.
+ * `name` varsa `data-jskelet-css` ile doğru link seçilir (sayfa sheet'leri).
+ *
  * @param {string} href
+ * @param {string} [name] Manifest anahtarı (`app.css`, `home.css`, …)
  */
-function swapStylesheet(href) {
-  const current = document.querySelector('link[rel="stylesheet"]');
+function swapStylesheet(href, name) {
+  const current = name
+    ? document.querySelector(`link[rel="stylesheet"][data-jskelet-css="${CSS.escape(name)}"]`)
+    : document.querySelector('link[rel="stylesheet"]');
   if (!current || current.getAttribute("href") === href) return;
-  const next = current.cloneNode();
+  const next = /** @type {HTMLLinkElement} */ (current.cloneNode());
   next.href = href;
   next.addEventListener("load", () => current.remove(), { once: true });
   current.after(next);

package/src/server/dev/devtools.js CHANGED Viewed

@@ -426,8 +426,12 @@ function watchManifest() {
         // sayfa silinmiş dosyayı istemeye devam eder.
         clearHtmlCache();
-        if (changed.length === 1 && changed[0] === "app.css") {
-          broadcast({ type: "css", href: next["app.css"] });
+        // Yalnızca stylesheet anahtarları değiştiyse hot-swap; JS/sprite için
+        // tam yenileme gerekir. Birden fazla sayfa sheet'i de desteklenir.
+        if (changed.every((key) => key.endsWith(".css"))) {
+          for (const name of changed) {
+            broadcast({ type: "css", name, href: next[name] });
+          }
           return;
         }

package/src/server/render.js CHANGED Viewed

@@ -3,7 +3,7 @@
  *
  * Controller sözleşmesi:
  *   async (ctx) => { view, data?, metadata?, status?, revalidate?, head?,
- *                    bodyClass?, entries? }
+ *                    bodyClass?, entries?, styles? }
  * `ctx` → { params, query, pathname, req }
  *
  * `route()` üç kapsamı belirli bir sırayla iç içe kurar:
@@ -218,7 +218,8 @@ export async function renderView(view, data = {}) {
  * Sayfayı layout içinde render eder.
  *
  * @param {{ view: string, data?: object, metadata?: object, head?: string,
- *   bodyClass?: string, entries?: string[], pathname?: string }} page
+ *   bodyClass?: string, entries?: string[], styles?: string[],
+ *   pathname?: string }} page
  * @returns {Promise<string>}
  */
 export async function renderPage(page) {
@@ -258,6 +259,7 @@ export async function renderPage(page) {
       (context.extraHead ?? ""),
     bodyClass: page.bodyClass ?? context.bodyClass ?? "",
     entries: page.entries ?? [],
+    styles: page.styles ?? [],
     devtools: isDev,
     devBasePath: config.brand.devBasePath,
     body,

package/src/templates/layout.ejs CHANGED Viewed

@@ -6,8 +6,8 @@
   noktası olarak kullanın.
   Kullanılabilir local'ler: metadata, headMeta, extraHead, structuredData,
-  body, bodyClass, entries, pathname, lang, devtools, devBasePath, asset,
-  hasAsset + tüm html/tag helper'ları ve views/components/** export'ları.
+  body, bodyClass, entries, styles, pathname, lang, devtools, devBasePath,
+  asset, hasAsset + tüm html/tag helper'ları ve views/components/** export'ları.
   `hooks.layoutContext()` döndürdüğü her alan da buraya eklenir.
 -%>
 <!DOCTYPE html>
@@ -18,10 +18,16 @@
     <%# Kaynak ipuçları en başta: preconnect ve LCP preload'ını geciktirmek
         doğrudan LCP'ye yazılır. Sayfaya özel head buradan gelir. %>
     <%- extraHead %>
-    <%# Tek, render-blocking stylesheet — build çalışmadıysa hiç basılmaz. %>
+    <%# Global sheet + controller `styles: [...]` sayfa sheet'leri.
+        data-jskelet-css: dev hot-swap doğru link'i bulsun diye. %>
     <% if (hasAsset('app.css')) { %>
-    <link rel="stylesheet" href="<%= asset('app.css') %>">
+    <link rel="stylesheet" href="<%= asset('app.css') %>" data-jskelet-css="app.css">
     <% } %>
+    <% styles.forEach(function (sheet) { %>
+      <% if (hasAsset(sheet)) { %>
+    <link rel="stylesheet" href="<%= asset(sheet) %>" data-jskelet-css="<%= sheet %>">
+      <% } %>
+    <% }); %>
     <%- headMeta %>
     <% structuredData.forEach(function (item) { %>
     <script type="application/ld+json"><%- jsonScript(item) %></script>