feat: redesign bundle structure — drop essential, remove legacy from defaults

README.md

@@ -8,7 +8,6 @@ A cascade-layer CSS framework. No build step. No Node. No runtime dependencies.
 [![version](https://img.shields.io/github/v/tag/codeslash-dev/SLASHED?sort=semver&label=version&color=blueviolet&logo=css3)](https://github.com/codeslash-dev/SLASHED/tags)
 [![CI](https://img.shields.io/github/actions/workflow/status/codeslash-dev/SLASHED/ci.yml?branch=main&label=CI&logo=github)](https://github.com/codeslash-dev/SLASHED/actions/workflows/ci.yml)
 [![license](https://img.shields.io/github/license/codeslash-dev/SLASHED)](LICENSE)
-[![essential bundle](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/codeslash-dev/SLASHED/dist/badge-essential.json)](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.essential.min.css)
 [![optimal bundle](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/codeslash-dev/SLASHED/dist/badge-optimal.json)](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css)
 [![runtime deps](https://img.shields.io/badge/runtime_deps-zero-brightgreen)](https://github.com/codeslash-dev/SLASHED/blob/main/package.json)
 [![CDN](https://img.shields.io/badge/CDN-jsDelivr-e84d3d?logo=jsdelivr&logoColor=white)](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/)
@@ -20,18 +19,22 @@ A cascade-layer CSS framework. No build step. No Node. No runtime dependencies.
 Use a pre-built bundle (see [Releases](https://github.com/codeslash-dev/SLASHED/releases)):
 
 ```html
-<!-- core only -->
-<link rel="stylesheet" href="slashed.essential.css">
-
-<!-- core + forms + legacy (recommended for most sites) -->
+<!-- core + classless form styling (recommended for most sites) -->
 <link rel="stylesheet" href="slashed.optimal.css">
 
-<!-- everything, including the (currently empty) component/utility stubs -->
+<!-- optimal + components -->
+<link rel="stylesheet" href="slashed.optimal-components.css">
+
+<!-- optimal + utilities -->
+<link rel="stylesheet" href="slashed.optimal-utilities.css">
+
+<!-- everything -->
 <link rel="stylesheet" href="slashed.full.css">
 ```
 
 À la carte is also supported. When wiring up individual files, `core/layers.css`
-must load **first** and `optional/legacy.css` must load **last**:
+must load **first**. `optional/legacy.css` is not bundled by default — add it
+explicitly if you need back-compat shims and load it **last**:
 
 ```html
 <!-- core -->
@@ -51,7 +54,9 @@ must load **first** and `optional/legacy.css` must load **last**:
 
 <!-- optional -->
 <link rel="stylesheet" href="optional/forms.css">
-<link rel="stylesheet" href="optional/legacy.css">
+
+<!-- legacy shims (opt-in only) -->
+<!-- <link rel="stylesheet" href="optional/legacy.css"> -->
 ```
 
 `optional/components.css` and `optional/tokens.components.css` are incomplete:
@@ -95,17 +100,17 @@ parent module. All token files share the `slashed.tokens` layer.
 
 | Bundle | Contents |
 | --- | --- |
-| `slashed.essential.css` | all `core/` |
-| `slashed.optimal.css` | essential + `forms` + `legacy` |
+| `slashed.optimal.css` | all `core/` + `forms` |
 | `slashed.optimal-components.css` | optimal + `tokens.components` *(incomplete)* + `components` *(incomplete)* |
 | `slashed.optimal-utilities.css` | optimal + `utilities` *(empty)* |
 | `slashed.full.css` | optimal + `tokens.components` *(incomplete)* + `components` *(incomplete)* + `utilities` *(empty)* |
 
-`optional/legacy.css` is always concatenated last. Every rule lives in an
-`@layer`, so concatenation order never affects the cascade. Each bundle is emitted
-readable and minified with a source map: `dist/slashed.<name>.css`,
-`dist/slashed.<name>.min.css`, `dist/slashed.<name>.min.css.map`, plus a
-layer-flattened `.flat` variant. `npm run build` prints raw / gzip / brotli sizes;
+`optional/legacy.css` is **not bundled by default** — add it explicitly when you
+need back-compat shims. Every rule lives in an `@layer`, so concatenation order
+never affects the cascade. Each bundle is emitted readable and minified with a
+source map: `dist/slashed.<name>.css`, `dist/slashed.<name>.min.css`,
+`dist/slashed.<name>.min.css.map`, plus a layer-flattened `.flat` variant.
+`npm run build` prints raw / gzip / brotli sizes;
 `tests/bundle-size.spec.js` guards against bloat.
 
 ## Customising tokens

_layouts/default.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{% if page.title %}{{ page.title }} — SLASHED{% else %}SLASHED{% endif %}</title>
-  <link rel="stylesheet" href="/dist/slashed.essential.css">
+  <link rel="stylesheet" href="/dist/slashed.optimal.css">
   <style>
     *, *::before, *::after { box-sizing: border-box; }
     body { max-width: 56rem; margin: 0 auto; padding: 1.5rem 2rem 4rem; font-family: system-ui, sans-serif; line-height: 1.6; color: #1a1a1a; }

bundle.config.json

@@ -1,42 +1,5 @@
 {
   "bundles": [
-    {
-      "output": "dist/slashed.essential.css",
-      "files": [
-        "core/layers.css",
-        "core/tokens.css",
-        "core/tokens.layout.css",
-        "core/tokens.macros.css",
-        "core/reset.css",
-        "core/base.css",
-        "core/themes.css",
-        "core/layout.css",
-        "core/macros.css",
-        "core/states.css",
-        "core/motion.css",
-        "core/accessibility.css",
-        "core/print.css"
-      ]
-    },
-    {
-      "output": "dist/slashed.essential.flat.css",
-      "flat": true,
-      "files": [
-        "core/layers.css",
-        "core/tokens.css",
-        "core/tokens.layout.css",
-        "core/tokens.macros.css",
-        "core/reset.css",
-        "core/base.css",
-        "core/themes.css",
-        "core/layout.css",
-        "core/macros.css",
-        "core/states.css",
-        "core/motion.css",
-        "core/accessibility.css",
-        "core/print.css"
-      ]
-    },
     {
       "output": "dist/slashed.optimal.css",
       "files": [
@@ -53,8 +16,7 @@
         "core/motion.css",
         "core/accessibility.css",
         "core/print.css",
-        "optional/forms.css",
-        "optional/legacy.css"
+        "optional/forms.css"
       ]
     },
     {
@@ -74,8 +36,7 @@
         "core/motion.css",
         "core/accessibility.css",
         "core/print.css",
-        "optional/forms.css",
-        "optional/legacy.css"
+        "optional/forms.css"
       ]
     },
     {
@@ -96,8 +57,7 @@
         "core/print.css",
         "optional/forms.css",
         "optional/tokens.components.css",
-        "optional/components.css",
-        "optional/legacy.css"
+        "optional/components.css"
       ]
     },
     {
@@ -119,8 +79,7 @@
         "core/print.css",
         "optional/forms.css",
         "optional/tokens.components.css",
-        "optional/components.css",
-        "optional/legacy.css"
+        "optional/components.css"
       ]
     },
     {
@@ -140,8 +99,7 @@
         "core/accessibility.css",
         "core/print.css",
         "optional/forms.css",
-        "optional/utilities.css",
-        "optional/legacy.css"
+        "optional/utilities.css"
       ]
     },
     {
@@ -162,8 +120,7 @@
         "core/accessibility.css",
         "core/print.css",
         "optional/forms.css",
-        "optional/utilities.css",
-        "optional/legacy.css"
+        "optional/utilities.css"
       ]
     },
     {
@@ -185,8 +142,7 @@
         "optional/forms.css",
         "optional/tokens.components.css",
         "optional/components.css",
-        "optional/utilities.css",
-        "optional/legacy.css"
+        "optional/utilities.css"
       ]
     },
     {
@@ -209,8 +165,7 @@
         "optional/forms.css",
         "optional/tokens.components.css",
         "optional/components.css",
-        "optional/utilities.css",
-        "optional/legacy.css"
+        "optional/utilities.css"
       ]
     }
   ]