mancha 0.24.0 → 0.24.2

package/scripts/generate-css-docs.ts

@@ -1,622 +0,0 @@
-import * as fs from "node:fs";
-import * as path from "node:path";
-import rules, {
-	COLOR_OPACITY_MODIFIERS,
-	DURATIONS,
-	MEDIA_BREAKPOINTS,
-	PERCENTS,
-	PROPS_COLORS,
-	PROPS_CUSTOM,
-	PROPS_SIZING,
-	PROPS_SIZING_MINMAX,
-	PROPS_SPACING,
-} from "../src/css_gen_utils.js";
-
-const DOCS_PATH = path.join(process.cwd(), "docs", "05_css.md");
-
-function handledBySize(klass: string) {
-	return klass.startsWith("text-") && (klass.endsWith("px") || klass.endsWith("rem"));
-}
-
-function generateMarkdown() {
-	let md = "# CSS Documentation\n\n";
-
-	md +=
-		"Mancha provides a set of CSS utilities and minimal styles to help you build your application.\n\n";
-
-	md += "## Minimal CSS\n\n";
-	md +=
-		'The minimal CSS rules provide a clean, readable default style for standard HTML elements. You can inject them using `injectCss(["minimal"])` or by adding `css="minimal"` to your script tag.\n\n';
-	md += "### Reset & Defaults\n";
-	md += "- **Max Width**: 70ch (centered)\n";
-	md += "- **Padding**: 2em 1em\n";
-	md += "- **Line Height**: 1.75\n";
-	md += "- **Font Family**: sans-serif\n";
-	md += "- **H1-H6 Margin**: 1em 0 0.5em\n";
-	md += "- **P, UL, OL Margin Bottom**: 1em\n\n";
-
-	md += "## CSS Reset\n\n";
-	md +=
-		'The reset provides a comprehensive set of defaults, widely based on Tailwind CSS Preflight. It ships with the utility classes: adding `css="utils"` to your script tag, or calling `injectCss(["utils"])`, injects both.\n\n';
-	md += "### Key Features\n";
-	md += "- **Typography**: Default sans-serif font stack, consistent line-height\n";
-	md +=
-		"- **Form Elements**: Inherit font styles and color from their container, with margin and padding zeroed; buttons also get a transparent background and `cursor: pointer`\n";
-	md += "- **Dialog**: Default backdrop styling\n";
-	md += "- **Resets**: Removes default margins/paddings from most block elements\n\n";
-	md += "### Layout Effects\n\n";
-	md +=
-		"The reset applies to **all of your markup**, not only to elements carrying utility classes, so plain HTML lays out differently once it is injected. The rules with layout, rather than merely typographic, consequences are:\n\n";
-	md +=
-		"- `img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}` — media is no longer inline. `text-align:center` on a parent stops centering it, the inline baseline gap below images disappears, and images no longer flow alongside adjacent text.\n";
-	md +=
-		'- `img,video{max-width:100%;height:auto}` — media never overflows its container. `height:auto` also overrides the HTML `height` attribute, so `<img width="300" height="100">` renders at the file\'s own aspect ratio instead of the requested one. Inside a flex row the same clamp lets an image shrink below its intrinsic size.\n';
-	md +=
-		"- `*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}` — padding and border no longer add to an element's width. Default borders are also stripped, including those set through presentational HTML attributes, so `fieldset`, `iframe`, `img`, and `table` render without one until a border utility is applied. `hr` is the exception: the reset gives it back a 1px top border so horizontal rules stay visible.\n";
-	md +=
-		"- `body{margin:0;…}` and `blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}` — the page loses its default gutter and headings, paragraphs, and other blocks no longer space themselves apart, so plain prose collapses into a single run of text until spacing utilities are applied.\n";
-	md +=
-		"- `ol,ul,menu{list-style:none;margin:0;padding:0}` — bullets, numbers, and list indentation are gone; restore them with the `list-*` and padding utilities.\n";
-	md +=
-		"- `button,input,optgroup,select,textarea{…;margin:0;padding:0}` — form controls lose their native margin and padding on top of inheriting the surrounding font and color, so inputs and text areas render flush against their content and need padding utilities to look clickable.\n";
-	md +=
-		"- `button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button;background-color:transparent;background-image:none;cursor:pointer}` — buttons lose their native chrome entirely and must be styled explicitly.\n";
-	md +=
-		"- `:disabled{cursor:default;pointer-events:none;opacity:0.75}` — beyond dimming, `pointer-events:none` is a behavioral change: disabled controls stop receiving hover, tooltip, and click handling. Tailwind Preflight only sets `cursor:default` here; the `pointer-events` and `opacity` declarations are mancha additions.\n\n";
-	md +=
-		"Opt out per element with utilities, e.g. to stop a flex item from being shrunk by its siblings. The class belongs on the flex item itself — on a nested image it does nothing, because only direct children of the flex container are flex items:\n\n";
-	md += "```html\n";
-	md += '<div class="flex">\n';
-	md += '  <div class="flex-none">\n';
-	md += '    <img src="logo.svg" />\n';
-	md += "  </div>\n";
-	md += "</div>\n";
-	md += "```\n\n";
-	md +=
-		"The wrapper then keeps its content width, so the image is not shrunk. `flex-none` on the image itself is not enough even when the image is the direct flex child, because `max-width:100%` clamps it regardless of how flex sizes it. That clamp applies everywhere, not just in flex rows: an image in a container narrower than itself is scaled down to fit. Undo it with the arbitrary value `max-w-[none]` — there is no `max-w-none` utility.\n\n";
-
-	md += "## Utility CSS\n\n";
-	md +=
-		'The utility CSS rules are inspired by Tailwind CSS. You can inject them using `injectCss(["utils"])` or by adding `css="utils"` to your script tag.\n\n';
-	md += "This automatically includes:\n";
-	md +=
-		"- **CSS Reset**: box-sizing, typography, form and media defaults applied to all of your markup — see [CSS Reset](#css-reset), in particular the layout effects on images, lists, and form controls\n";
-	md += "- **Base utility classes**: spacing, sizing, colors, layout, typography, and more\n";
-	md +=
-		"- **On-demand scanning**: responsive variants, orientation variants, pseudo-state variants, color opacity, custom bracket values, and dark mode are generated on-the-fly for only the classes actually used in your markup\n\n";
-
-	md += "### Media Breakpoints\n\n";
-	md += "| Prefix | Min Width |\n";
-	md += "| --- | --- |\n";
-	for (const [bp, width] of Object.entries(MEDIA_BREAKPOINTS)) {
-		md += `| \`${bp}:\` | \`${width}px\` |\n`;
-	}
-	md += "\n";
-
-	md += "### Orientation\n\n";
-	md +=
-		"Use the `landscape:` and `portrait:` prefixes to apply styles based on screen orientation (`@media (orientation: …)`) rather than width, so layouts respond to device rotation without picking an arbitrary breakpoint:\n\n";
-	md += "```html\n";
-	md += "<!-- Stack vertically in portrait, side-by-side in landscape. -->\n";
-	md += '<div class="flex flex-col landscape:flex-row">\n';
-	md += '  <div class="board">...</div>\n';
-	md += '  <div class="moves-panel portrait:hidden">...</div>\n';
-	md += "</div>\n";
-	md += "```\n\n";
-
-	md += "### Pseudo States\n\n";
-	md += "The following pseudo states are supported for all utilities:\n";
-	md += "- `hover:`\n";
-	md += "- `focus:`\n";
-	md += "- `disabled:`\n\n";
-
-	md += "### Dark Mode\n\n";
-	md += `Use the \`dark:\` prefix to apply styles when the user's system prefers dark mode (\`prefers-color-scheme: dark\`):\n\n`;
-	md += "```html\n";
-	md += '<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">\n';
-	md += "  This adapts to the user's color scheme preference.\n";
-	md += "</div>\n";
-	md += "```\n\n";
-	md += `The \`dark:\` prefix can be used with any utility class, including colors, spacing, and custom bracket values:\n\n`;
-	md += "```html\n";
-	md += '<div class="bg-[#fff] dark:bg-[#1a1a1a] p-4 dark:border-gray-700">\n';
-	md += "```\n\n";
-	md += `> **Note:** Responsive variants (\`sm:\`, \`md:\`, etc.), orientation variants (\`landscape:\`, \`portrait:\`), pseudo-state variants (\`hover:\`, \`focus:\`, \`disabled:\`), color opacity (\`/N\`), dark mode (\`dark:\`), and custom bracket values are all generated on-demand. Only the classes actually present in your markup are injected, keeping the CSS bundle small.\n\n`;
-
-	md += "### Spacing (Margin & Padding)\n\n";
-	md += "Spacing utilities use a 0.25rem (4px) unit by default.\n\n";
-	md += "| Prefix | Property | Values |\n";
-	md += "| --- | --- | --- |\n";
-	for (const [prop, prefix] of Object.entries(PROPS_SPACING)) {
-		md += `| \`${prefix}-\` | \`${prop}\` | \`0\`, \`0.25rem\` - \`128rem\` (and negative versions) |\n`;
-		md += `| \`${prefix}x-\` | \`${prop}-left/right\` | Same as above |\n`;
-		md += `| \`${prefix}y-\` | \`${prop}-top/bottom\` | Same as above |\n`;
-		md += `| \`${prefix}t-\` | \`${prop}-top\` | Same as above |\n`;
-		md += `| \`${prefix}b-\` | \`${prop}-bottom\` | Same as above |\n`;
-		md += `| \`${prefix}l-\` | \`${prop}-left\` | Same as above |\n`;
-		md += `| \`${prefix}r-\` | \`${prop}-right\` | Same as above |\n`;
-	}
-	md += "\n";
-
-	md += "### Sizing (Width & Height)\n\n";
-	md += "| Prefix | Property | Values |\n";
-	md += "| --- | --- | --- |\n";
-	for (const [prop, prefix] of Object.entries(PROPS_SIZING)) {
-		md += `| \`${prefix}-\` | \`${prop}\` | \`0\`, \`full\` (100%), \`screen\` (100vw/vh), \`auto\`, \`px\`, \`0.25rem\` - \`128rem\` |\n`;
-		md += `| \`${prefix}-sm/md/lg/xl\` | \`${prop}\` | Match media breakpoints (e.g. \`w-sm\`, \`max-w-lg\`) |\n`;
-		md += `| \`${prefix}-dvw/dvh/svw/svh/lvw/lvh\` | \`${prop}\` | Viewport-relative units |\n`;
-		md += `| \`${prefix}-fit/min/max\` | \`${prop}\` | \`fit-content\`, \`min-content\`, \`max-content\` |\n`;
-	}
-	for (const [prop, prefix] of Object.entries(PROPS_SIZING_MINMAX)) {
-		md += `| \`${prefix}-\` | \`${prop}\` | Same as sizing |\n`;
-	}
-	md +=
-		"| `size-` | `width` & `height` | `auto`, `px`, `full`, `dvw`, `dvh`, `svw`, `svh`, `lvw`, `lvh`, `min`, `max`, `fit` |\n";
-	md += "\n";
-
-	md += "### Colors\n\n";
-	md += "Supported prefixes: `text-`, `bg-`, `border-`, `fill-`.\n\n";
-	md += "| Color | Shades |\n";
-	md += "| --- | --- |\n";
-	md += "| `white`, `black`, `transparent` | N/A |\n";
-	for (const [color, _shades] of Object.entries(PROPS_COLORS)) {
-		md += `| \`${color}\` | \`50\`, \`100\`, \`200\`, \`300\`, \`400\`, \`500\`, \`600\`, \`700\`, \`800\`, \`900\` |\n`;
-	}
-	md += "\n";
-	md += `You can also control the opacity of any color utility by appending \`/{opacity}\` (${COLOR_OPACITY_MODIFIERS.join(", ")}):\n`;
-	md += "- `bg-black/50`\n";
-	md += "- `text-red-500/20`\n";
-	md += "- `border-blue-600/100`\n";
-	md += "\n";
-
-	md += "### Borders & Corners\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const borderProps = ["border", "rounded"];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (borderProps.some((p) => klass.startsWith(p))) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	// Document dynamic border widths
-	md +=
-		"| `border-{0-15}` | Border width in pixels (e.g., `border-0`, `border-1`, ..., `border-15`) |\n";
-	md += "| `border-x-{0-15}` | Horizontal border width in pixels |\n";
-	md += "| `border-y-{0-15}` | Vertical border width in pixels |\n";
-	md += "| `border-{t,b,l,r}-{0-15}` | Individual side border width in pixels |\n";
-	md += "\n";
-
-	md += "### Shadows & Effects\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const effectProps = ["shadow", "ring", "mix-blend-"];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (effectProps.some((p) => klass.startsWith(p))) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	// Document opacity
-	md += "| `opacity-0` | Fully transparent |\n";
-	md += `| \`opacity-{${PERCENTS.join(",")}}\` | Opacity values (multiples of 5) |\n`;
-	md += "\n";
-
-	md += "### Outline\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const outlineProps = ["outline"];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (outlineProps.some((p) => klass.startsWith(p))) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	md += "\n";
-
-	md += "### Aspect Ratio\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const aspectProps = ["aspect-"];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (aspectProps.some((p) => klass.startsWith(p))) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	md += "\n";
-
-	md += "### Backdrop Filters\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const backdropProps = ["backdrop-"];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (backdropProps.some((p) => klass.startsWith(p))) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	md += "\n";
-
-	md += "### Transitions & Animations\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const animProps = ["transition", "animate-"];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (animProps.some((p) => klass.startsWith(p))) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	// Document durations
-	md += `| \`duration-{${DURATIONS.join(",")}}\` | Transition duration in milliseconds |\n`;
-	md += "\n";
-
-	md += "### Interactivity\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const interProps = ["cursor-", "select-", "pointer-events-", "resize", "user-select"];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (interProps.some((p) => klass.startsWith(p))) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	md += "\n";
-
-	md += "### Typography\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const typoProps = [
-		"font-",
-		"text-",
-		"italic",
-		"not-italic",
-		"leading-",
-		"tracking-",
-		"uppercase",
-		"lowercase",
-		"capitalize",
-		"truncate",
-		"whitespace-",
-		"decoration-",
-		"underline",
-		"line-through",
-	];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (typoProps.some((p) => klass.startsWith(p)) && !handledBySize(klass)) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	md += "\n";
-
-	md += "### Flexbox & Layout\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const flexProps = [
-		"flex",
-		"justify-",
-		"items-",
-		"self-",
-		"content-",
-		"grow",
-		"shrink",
-		"gap-",
-		"order-",
-		"grid-",
-	];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (flexProps.some((p) => klass.startsWith(p))) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	// Document gap utilities
-	md += "| `gap-0` | No gap |\n";
-	md += "| `gap-{1-512}` | Gap in rem units (0.25rem increments) |\n";
-	md += "| `gap-{1-512}px` | Gap in pixels |\n";
-	md += "| `gap-x-{1-512}` | Horizontal gap in rem units |\n";
-	md += "| `gap-y-{1-512}` | Vertical gap in rem units |\n";
-	md += "| `gap-x-{1-512}px` | Horizontal gap in pixels |\n";
-	md += "| `gap-y-{1-512}px` | Vertical gap in pixels |\n";
-	md += "| `space-x-{0-512}` | Horizontal spacing between children (rem) |\n";
-	md += "| `space-y-{0-512}` | Vertical spacing between children (rem) |\n";
-	md += "| `space-x-{0-512}px` | Horizontal spacing between children (px) |\n";
-	md += "| `space-y-{0-512}px` | Vertical spacing between children (px) |\n";
-	// Document divide utilities
-	md += "| `divide-x` | Add 1px vertical border between horizontal children |\n";
-	md += "| `divide-y` | Add 1px horizontal border between vertical children |\n";
-	md += "| `divide-x-{0,2,4,8}` | Vertical border width between horizontal children |\n";
-	md += "| `divide-y-{0,2,4,8}` | Horizontal border width between vertical children |\n";
-	md += "| `divide-solid` | Solid border style for dividers |\n";
-	md += "| `divide-dashed` | Dashed border style for dividers |\n";
-	md += "| `divide-dotted` | Dotted border style for dividers |\n";
-	md += "| `divide-none` | Remove divider borders |\n";
-	md += "\n";
-
-	md += "### Grid Layout\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-
-	// Static grid properties from PROPS_CUSTOM if any (like 'grid')
-	const gridProps = ["grid"];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (gridProps.some((p) => klass === p)) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-
-	md += "| `grid-cols-{1-12}` | `grid-template-columns: repeat(n, minmax(0, 1fr))` |\n";
-	md += "| `grid-cols-none` | `grid-template-columns: none` |\n";
-	md += "| `col-span-{1-12}` | `grid-column: span n / span n` |\n";
-	md += "| `col-span-full` | `grid-column: 1 / -1` |\n";
-	md += "| `col-start-{1-13}` | `grid-column-start: n` |\n";
-	md += "| `col-end-{1-13}` | `grid-column-end: n` |\n";
-	md += "| `col-start/end-auto` | `grid-column-start/end: auto` |\n";
-	md += "| `grid-rows-{1-12}` | `grid-template-rows: repeat(n, minmax(0, 1fr))` |\n";
-	md += "| `grid-rows-none` | `grid-template-rows: none` |\n";
-	md += "| `row-span-{1-12}` | `grid-row: span n / span n` |\n";
-	md += "| `row-span-full` | `grid-row: 1 / -1` |\n";
-	md += "| `row-start-{1-13}` | `grid-row-start: n` |\n";
-	md += "| `row-end-{1-13}` | `grid-row-end: n` |\n";
-	md += "| `row-start/end-auto` | `grid-row-start/end: auto` |\n";
-	md += "\n";
-
-	md += "### Position & Inset\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const posProps = ["relative", "absolute", "fixed", "sticky", "inset-", "object-"];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (posProps.some((p) => klass.startsWith(p))) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	// Document position values
-	md +=
-		"| `top-{0-512}`, `bottom-{0-512}`, `left-{0-512}`, `right-{0-512}` | Position in rem units (0.25rem increments) |\n";
-	md +=
-		"| `top-{0-512}px`, `bottom-{0-512}px`, `left-{0-512}px`, `right-{0-512}px` | Position in pixels |\n";
-	md +=
-		"| `top-{1-100}%`, `bottom-{1-100}%`, `left-{1-100}%`, `right-{1-100}%` | Position in percentages |\n";
-	md += "| `top-auto`, `bottom-auto`, `left-auto`, `right-auto` | Auto positioning |\n";
-	// Document z-index
-	md += `| \`z-{${PERCENTS.join(",")}}\` | Z-index values |\n`;
-	md += "\n";
-
-	md += "### Display & Visibility\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const displayProps = [
-		"block",
-		"inline",
-		"hidden",
-		"contents",
-		"visible",
-		"invisible",
-		"collapse",
-	];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (displayProps.some((p) => klass === p)) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	md += "\n";
-
-	md += "### Overflow & Scrolling\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const overflowProps = ["overflow-", "overscroll-"];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (overflowProps.some((p) => klass.startsWith(p))) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	md += "\n";
-
-	md += "### Backgrounds\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const bgProps = [
-		"bg-auto",
-		"bg-cover",
-		"bg-contain",
-		"bg-center",
-		"bg-top",
-		"bg-bottom",
-		"bg-left",
-		"bg-right",
-		"bg-left-top",
-		"bg-left-bottom",
-		"bg-right-top",
-		"bg-right-bottom",
-		"bg-no-repeat",
-		"bg-fixed",
-		"bg-local",
-		"bg-scroll",
-	];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (bgProps.some((p) => klass === p)) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	md += "\n";
-
-	md += "### Lists\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const listProps = ["list-"];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (listProps.some((p) => klass.startsWith(p))) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	md += "\n";
-
-	md += "### Vertical Alignment\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const alignProps = ["align-"];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (alignProps.some((p) => klass.startsWith(p))) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	md += "\n";
-
-	md += "### Viewport Sizing\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const viewportProps = [
-		"min-h-screen",
-		"max-h-screen",
-		"min-w-screen",
-		"h-dvh",
-		"h-svh",
-		"h-lvh",
-		"w-dvw",
-		"w-svw",
-		"w-lvw",
-		"min-h-dvh",
-		"min-h-svh",
-		"min-h-lvh",
-	];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (viewportProps.some((p) => klass === p)) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	md += "\n";
-
-	md += "### Accessibility\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const a11yProps = ["sr-only", "not-sr-only"];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (a11yProps.some((p) => klass === p)) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	md += "\n";
-
-	md += "### Other Utilities\n\n";
-	md += "| Utility | Description |\n";
-	md += "| --- | --- |\n";
-	const allHandledPrefixes = [
-		...typoProps,
-		...flexProps,
-		...posProps,
-		...borderProps,
-		...effectProps,
-		...animProps,
-		...interProps,
-		...displayProps,
-		...overflowProps,
-		...bgProps,
-		...listProps,
-		...alignProps,
-		...a11yProps,
-		...viewportProps,
-		...outlineProps,
-		...aspectProps,
-		...backdropProps,
-		"w-",
-		"h-",
-		"min-w-",
-		"min-h-",
-		"max-w-",
-		"max-h-",
-		"bg-",
-		"border-",
-		"opacity-",
-		"cursor-",
-		"size-",
-		"top-",
-		"bottom-",
-		"left-",
-		"right-",
-		"z-",
-		"duration-",
-		"gap-",
-		"space-",
-		"divide-",
-		"grid-",
-		"col-",
-	];
-	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
-		if (!allHandledPrefixes.some((p) => klass.startsWith(p) || klass === p)) {
-			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
-		}
-	}
-	// Document text sizes
-	md += "| `text-{0-99}px` | Font size in pixels (e.g., `text-12px`, `text-16px`) |\n";
-	md += "| `text-{0-24.75}rem` | Font size in rem units (0.25rem increments) |\n";
-	md += "\n";
-
-	md += "## Custom Values\n\n";
-	md += `When you need a value outside the design scale, use bracket notation as an escape hatch. Custom values are automatically supported when using \`css="utils"\` — no extra configuration needed.\n\n`;
-	md += "### Syntax\n\n";
-	md += "```html\n";
-	md += '<div class="w-[133px] mt-[2rem] max-w-[900px]">\n';
-	md += "```\n\n";
-	md += "### Supported Properties\n\n";
-	md += "| Prefix | CSS Property |\n";
-	md += "|--------|--------------|\n";
-	md += "| `w-` | width |\n";
-	md += "| `h-` | height |\n";
-	md += "| `min-w-`, `min-h-` | min-width, min-height |\n";
-	md += "| `max-w-`, `max-h-` | max-width, max-height |\n";
-	md += "| `m-`, `mt-`, `mr-`, `mb-`, `ml-` | margin |\n";
-	md += "| `mx-`, `my-` | margin-inline, margin-block |\n";
-	md += "| `p-`, `pt-`, `pr-`, `pb-`, `pl-` | padding |\n";
-	md += "| `px-`, `py-` | padding-inline, padding-block |\n";
-	md += "| `top`, `right`, `bottom`, `left` | positioning |\n";
-	md += "| `gap-`, `gap-x-`, `gap-y-` | gap |\n";
-	md += "| `text-` | font-size |\n";
-	md += "| `z-` | z-index |\n";
-	md += "| `bg-` | background-color |\n";
-	md += "| `border-` | border-color |\n";
-	md += "\n";
-	md += "### Variants\n\n";
-	md += "Custom values support pseudo-states, responsive breakpoints, and dark mode:\n\n";
-	md += "```html\n";
-	md += '<div class="hover:w-[200px] md:max-w-[900px] dark:bg-[#333]">\n';
-	md += "```\n\n";
-	md += "### Limitations\n\n";
-	md += "**Static classes only**: Custom values work with the `class` attribute, not `:class`:\n\n";
-	md += "```html\n";
-	md += "<!-- ✓ Works -->\n";
-	md += '<div class="w-[133px]">\n\n';
-	md += "<!-- ✗ Not supported - use inline styles instead -->\n";
-	md += `<div :class="'w-[133px]'">\n`;
-	md += `<div :attr:style="'width: ' + dynamicWidth">\n`;
-	md += "```\n\n";
-	md +=
-		"**Browser only**: Custom values require the CSSStyleSheet API and are not available in Worker or SSR environments.\n\n";
-	md += "### When to Use\n\n";
-	md += "**Prefer the design scale** for consistency. Use custom values for:\n";
-	md += "- Matching external constraints (third-party widgets, embeds)\n";
-	md += "- One-off pixel-perfect adjustments\n";
-	md += "- Rapid prototyping (replace with scale values later)\n\n";
-	md += "### Dynamic Content\n\n";
-	md +=
-		"Content rendered by Mancha is scanned automatically. Markup produced by anything else (raw `innerHTML`, a third-party widget) is not, so scan it yourself with `scanAndInject(root)`:\n\n";
-	md += "```js\n";
-	md += 'import { scanAndInject } from "mancha/browser";\n\n';
-	md += "widget.mount(container); // Third-party code writes into the container.\n";
-	md += "scanAndInject(container);\n";
-	md += "```\n\n";
-	md +=
-		"Re-scanning an already-scanned tree is safe: each rule is injected once, and rules are re-injected if the stylesheet element is removed from the document.\n\n";
-	md += "Two limitations:\n\n";
-	md +=
-		"- **ESM only**: `scanAndInject` is exported from the module build, not from the global bundle loaded via a `<script>` tag.\n";
-	md +=
-		"- **No shadow DOM**: `querySelectorAll` does not pierce a shadow root, so scanning a host element finds nothing inside it. Scanning the shadow root itself does inject rules, but they land in the main document's stylesheet, where shadow-boundary scoping stops them from applying. Style shadow content with its own stylesheet instead.\n\n";
-
-	md += "--- \n\n*Generated automatically from `src/css_gen_utils.ts`*\n";
-
-	return md;
-}
-
-// Generate CSS and calculate stats
-const css = rules();
-const ruleCount = (css.match(/\{[^}]+\}/g) || []).length;
-const sizeBytes = css.length;
-const sizeKB = (sizeBytes / 1024).toFixed(1);
-const sizeMB = (sizeBytes / 1024 / 1024).toFixed(2);
-
-fs.writeFileSync(DOCS_PATH, generateMarkdown());
-console.log(`Documentation generated at ${DOCS_PATH}`);
-console.log(`CSS Stats: ${ruleCount.toLocaleString()} rules, ${sizeKB} KB (${sizeMB} MB)`);

package/tsconfig.json

@@ -1,37 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ES2022",
-		"module": "NodeNext",
-		"moduleResolution": "NodeNext",
-		"outDir": "dist",
-		"rootDir": "src",
-		"strict": true,
-		"sourceMap": true,
-		"declaration": true,
-		"noImplicitAny": true,
-		"skipLibCheck": true,
-		"stripInternal": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"baseUrl": ".",
-		"paths": {
-			"mancha": ["./src/index.ts"],
-			"mancha/*": ["./src/*.ts"]
-		},
-		"plugins": [
-			{
-				"name": "tsec",
-				"exemptionConfig": "./tsec_exemptions.json"
-			}
-		]
-	},
-	"include": ["src/**/*", "global.d.ts"],
-	"exclude": [
-		"scripts",
-		"examples",
-		"gulpfile.ts",
-		"webpack.config.ts",
-		"webpack.config.esmodule.ts",
-		"dist"
-	]
-}

package/tsdown.config.ts

@@ -1,32 +0,0 @@
-import { defineConfig } from "tsdown";
-
-export default defineConfig([
-	{
-		entry: {
-			mancha: "src/mancha.ts",
-		},
-		format: "iife",
-		clean: false,
-		target: "es2022",
-		platform: "browser",
-		minify: true,
-		unbundle: false,
-		skipNodeModulesBundle: false,
-		noExternal: [/.*/],
-		globalName: "Mancha",
-	},
-	{
-		entry: {
-			browser: "src/browser.ts",
-			safe_browser: "src/safe_browser.ts",
-		},
-		format: "esm",
-		clean: false,
-		dts: true,
-		target: "es2022",
-		platform: "browser",
-		minify: true,
-		unbundle: false,
-		skipNodeModulesBundle: false,
-	},
-]);