diff --git a/README.md b/README.md index e6c02614..dc75dcb7 100644 --- a/README.md +++ b/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 - - - - + - + + + + + + + ``` À 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 @@ -51,7 +54,9 @@ must load **first** and `optional/legacy.css` must load **last**: - + + + ``` `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..css`, -`dist/slashed..min.css`, `dist/slashed..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..css`, `dist/slashed..min.css`, +`dist/slashed..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 diff --git a/_layouts/default.html b/_layouts/default.html index 9e9f955b..0b79749d 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -4,7 +4,7 @@ {% if page.title %}{{ page.title }} — SLASHED{% else %}SLASHED{% endif %} - +
test
`); - await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.essential.css') }); + await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.optimal.css') }); const color = await page.locator('.layer-check').evaluate(el => getComputedStyle(el).color @@ -42,7 +42,7 @@ test.describe('Layer ordering', () => {
test
`); - await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.essential.css') }); + await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.optimal.css') }); const opacity = await page.locator('.layer-check-2').evaluate(el => getComputedStyle(el).opacity @@ -58,7 +58,7 @@ test.describe('Layer ordering', () => {
test
`); - await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.essential.css') }); + await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.optimal.css') }); const opacity = await page.locator('.layer-check-3').evaluate(el => getComputedStyle(el).opacity @@ -76,7 +76,7 @@ test.describe('Layer ordering', () => {
test
`); - await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.essential.css') }); + await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.optimal.css') }); const color = await page.locator('.layer-check-4').evaluate(el => getComputedStyle(el).color @@ -94,7 +94,7 @@ test.describe('Layer ordering', () => {
test
`); - await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.essential.css') }); + await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.optimal.css') }); const opacity = await page.locator('.layer-check-5').evaluate(el => getComputedStyle(el).opacity @@ -113,7 +113,7 @@ test.describe('Layer ordering', () => {
test
`); - await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.essential.css') }); + await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.optimal.css') }); const opacity = await page.locator('.layer-check-6').evaluate(el => getComputedStyle(el).opacity diff --git a/tests/layout.spec.js b/tests/layout.spec.js index f9780088..7e92979f 100644 --- a/tests/layout.spec.js +++ b/tests/layout.spec.js @@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'; import path from 'node:path'; -const BUNDLE = path.join(process.cwd(), 'dist', 'slashed.essential.css'); +const BUNDLE = path.join(process.cwd(), 'dist', 'slashed.optimal.css'); async function setup(page, html) { await page.setViewportSize({ width: 1200, height: 900 }); diff --git a/tests/macros.spec.js b/tests/macros.spec.js index 5f1a8b85..ef834d60 100644 --- a/tests/macros.spec.js +++ b/tests/macros.spec.js @@ -5,7 +5,7 @@ import { test, expect } from '@playwright/test'; import path from 'node:path'; -const BUNDLE = path.join(process.cwd(), 'dist', 'slashed.essential.css'); +const BUNDLE = path.join(process.cwd(), 'dist', 'slashed.optimal.css'); async function setup(page, html) { await page.setViewportSize({ width: 800, height: 600 }); diff --git a/tests/print.spec.js b/tests/print.spec.js index f60206dc..cd0068d4 100644 --- a/tests/print.spec.js +++ b/tests/print.spec.js @@ -12,7 +12,7 @@ test.describe('Print styles', () => { test(' retains non-transparent background in print', async ({ page }) => { await page.emulateMedia({ media: 'print' }); await page.setContent(`

Highlighted text

`); - await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.essential.css') }); + await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.optimal.css') }); const bg = await page.locator('mark').evaluate(el => getComputedStyle(el).backgroundColor @@ -29,7 +29,7 @@ test.describe('Print styles', () => {
Should be hidden
Should be visible
`); - await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.essential.css') }); + await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.optimal.css') }); await page.emulateMedia({ media: 'print' }); const hiddenDisplay = await page.locator('#hidden-el').evaluate(el => @@ -47,7 +47,7 @@ test.describe('Print styles', () => { await page.setContent(`
Coloured
`); - await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.essential.css') }); + await page.addStyleTag({ path: path.join(process.cwd(), 'dist', 'slashed.optimal.css') }); await page.emulateMedia({ media: 'print' }); const pca = await page.locator('.print-color-exact').evaluate(el => diff --git a/tests/states-full.spec.js b/tests/states-full.spec.js index 844562ea..5634adc6 100644 --- a/tests/states-full.spec.js +++ b/tests/states-full.spec.js @@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'; import path from 'node:path'; -const BUNDLE = path.join(process.cwd(), 'dist', 'slashed.essential.css'); +const BUNDLE = path.join(process.cwd(), 'dist', 'slashed.optimal.css'); async function setup(page, html) { await page.setViewportSize({ width: 800, height: 600 }); diff --git a/tests/typography.spec.js b/tests/typography.spec.js index 00659672..a0cd82be 100644 --- a/tests/typography.spec.js +++ b/tests/typography.spec.js @@ -7,7 +7,7 @@ import path from 'node:path'; import { pathToFileURL } from 'node:url'; const FIXTURE = pathToFileURL(path.join(import.meta.dirname, 'fixture.html')).href; -const BUNDLE = path.join(process.cwd(), 'dist', 'slashed.essential.css'); +const BUNDLE = path.join(process.cwd(), 'dist', 'slashed.optimal.css'); async function setup(page, html) { await page.setViewportSize({ width: 1200, height: 900 });