mancha 0.17.3 → 0.17.5

package/global.d.ts

@@ -1,4 +1,4 @@
 declare module "*.css" {
-  const content: string;
-  export default content;
+	const content: string;
+	export default content;
 }

package/gulpfile.ts

@@ -0,0 +1,44 @@
+import * as fs from "fs/promises";
+import GulpClient from "gulp";
+import csso from "gulp-csso";
+import { exec } from "child_process";
+
+const execTask = (command: string) => {
+	return async function (done: (err?: any) => void) {
+		const { err, stderr, stdout } = await new Promise<{ err: any; stderr: string; stdout: string }>(
+			(resolve) => exec(command, (err, stdout, stderr) => resolve({ err, stderr, stdout })),
+		);
+		if (stdout) console.log(stdout);
+		if (stderr) console.error(stderr);
+		done(err);
+	};
+};
+
+// Clean tasks
+
+GulpClient.task("clean", function (done) {
+	return fs.rm("dist", { recursive: true, force: true }).then(() => done());
+});
+
+// Build tasks
+
+GulpClient.task("ts", execTask("tsec -m NodeNext -p ."));
+
+GulpClient.task("chmod", function (done) {
+	return fs.chmod("dist/cli.js", 0o755).then(() => done());
+});
+
+GulpClient.task("css", function () {
+	return GulpClient.src("src/**/*.css").pipe(csso()).pipe(GulpClient.dest("dist"));
+});
+
+GulpClient.task("webpack:main", execTask("webpack --config webpack.config.ts"));
+GulpClient.task("webpack:esmodule", execTask("webpack --config webpack.config.esmodule.ts"));
+
+GulpClient.task("fixtures", function () {
+	return GulpClient.src("src/fixtures/**/*").pipe(GulpClient.dest("dist/fixtures"));
+});
+
+GulpClient.task("webpack", GulpClient.series("webpack:main", "webpack:esmodule"));
+GulpClient.task("build", GulpClient.series("ts", "chmod", "css", "webpack", "fixtures"));
+GulpClient.task("default", GulpClient.series("build"));

package/package.json

@@ -1,86 +1,88 @@
 {
-  "name": "mancha",
-  "version": "0.17.3",
-  "description": "Javscript HTML rendering engine",
-  "main": "dist/index.js",
-  "type": "module",
-  "types": "dist/index.d.ts",
-  "unpkg": "dist/mancha.js",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./browser": {
-      "types": "./dist/browser.d.ts",
-      "default": "./dist/browser.js"
-    },
-    "./dist/*.js": {
-      "types": "./dist/*.d.ts",
-      "default": "./dist/*.js"
-    }
-  },
-  "scripts": {
-    "clean": "rm -rf dist/",
-    "build": "gulp build",
-    "pretest": "npm run build",
-    "test:node": "mocha 'dist/**/*.test.js' --ignore 'dist/browser.test.js'",
-    "test:browser": "web-test-runner 'dist/**/*.test.js' '!dist/cli.test.js' '!dist/ssr.test.js' '!dist/index.test.js' '!dist/worker.test.js' '!dist/type_checker.test.js' --node-resolve --compatibility all --playwright --browsers chromium --no-sandbox",
-    "test": "npm run test:node && npm run test:browser",
-    "check_size": "brotli -c dist/mancha.js | wc -c",
-    "cli": "node dist/cli.js"
-  },
-  "bin": {
-    "mancha": "dist/cli.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/fresho-dev/mancha.git"
-  },
-  "keywords": [
-    "templating",
-    "rendering",
-    "reactive",
-    "html"
-  ],
-  "author": "contact@fresho.dev",
-  "license": "MIT",
-  "dependencies": {
-    "dom-serializer": "^2.0.0",
-    "glob": "^10.3.10",
-    "htmlparser2": "^9.1.0",
-    "jsdom": "^27.0.1",
-    "safevalues": "^0.6.0",
-    "typescript": "^5.9.3",
-    "yargs": "^17.7.2"
-  },
-  "devDependencies": {
-    "@types/chai": "^5.2.3",
-    "@types/chai-as-promised": "^8.0.1",
-    "@types/glob": "^8.1.0",
-    "@types/jsdom": "^21.1.6",
-    "@types/mocha": "^10.0.10",
-    "@types/node": "^20.12.11",
-    "@types/path-browserify": "^1.0.1",
-    "@types/trusted-types": "^2.0.7",
-    "@types/yargs": "^17.0.29",
-    "@web/test-runner": "^0.19.0",
-    "@web/test-runner-playwright": "^0.11.1",
-    "chai": "^5.3.3",
-    "chai-as-promised": "^8.0.1",
-    "css-loader": "^7.1.2",
-    "csso": "^5.0.5",
-    "gulp": "^5.0.0",
-    "gulp-csso": "^4.0.1",
-    "gulp-typescript": "^6.0.0-alpha.1",
-    "mocha": "^11.0.1",
-    "static-server": "^3.0.0",
-    "terser-webpack-plugin": "^5.3.10",
-    "ts-node": "^10.9.2",
-    "tsec": "^0.2.8",
-    "typescript": "^5.9.3",
-    "webpack": "^5.97.1",
-    "webpack-cli": "^5.1.4",
-    "yargs": "^17.7.2"
-  }
+	"name": "mancha",
+	"version": "0.17.5",
+	"description": "Javscript HTML rendering engine",
+	"main": "dist/index.js",
+	"type": "module",
+	"types": "dist/index.d.ts",
+	"unpkg": "dist/mancha.js",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./browser": {
+			"types": "./dist/browser.d.ts",
+			"default": "./dist/browser.js"
+		},
+		"./dist/*.js": {
+			"types": "./dist/*.d.ts",
+			"default": "./dist/*.js"
+		}
+	},
+	"scripts": {
+		"clean": "rm -rf dist/",
+		"build": "gulp build",
+		"pretest": "npm run build",
+		"test:node": "mocha 'dist/**/*.test.js' --ignore 'dist/browser.test.js'",
+		"test:browser": "web-test-runner 'dist/**/*.test.js' '!dist/cli.test.js' '!dist/ssr.test.js' '!dist/index.test.js' '!dist/worker.test.js' '!dist/type_checker.test.js' --node-resolve --compatibility all --playwright --browsers chromium --no-sandbox",
+		"test": "npm run test:node && npm run test:browser",
+		"check_size": "brotli -c dist/mancha.js | wc -c",
+		"cli": "node dist/cli.js",
+		"gen:docs": "tsx scripts/generate-css-docs.ts"
+	},
+	"bin": {
+		"mancha": "dist/cli.js"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/fresho-dev/mancha.git"
+	},
+	"keywords": [
+		"templating",
+		"rendering",
+		"reactive",
+		"html"
+	],
+	"author": "contact@fresho.dev",
+	"license": "MIT",
+	"dependencies": {
+		"dom-serializer": "^2.0.0",
+		"glob": "^10.3.10",
+		"htmlparser2": "^9.1.0",
+		"jsdom": "^27.0.1",
+		"safevalues": "^0.6.0",
+		"typescript": "^5.9.3",
+		"yargs": "^17.7.2"
+	},
+	"devDependencies": {
+		"@types/chai": "^5.2.3",
+		"@types/chai-as-promised": "^8.0.1",
+		"@types/glob": "^8.1.0",
+		"@types/jsdom": "^21.1.6",
+		"@types/mocha": "^10.0.10",
+		"@types/node": "^20.12.11",
+		"@types/path-browserify": "^1.0.1",
+		"@types/trusted-types": "^2.0.7",
+		"@types/yargs": "^17.0.29",
+		"@web/test-runner": "^0.19.0",
+		"@web/test-runner-playwright": "^0.11.1",
+		"chai": "^5.3.3",
+		"chai-as-promised": "^8.0.1",
+		"css-loader": "^7.1.2",
+		"csso": "^5.0.5",
+		"gulp": "^5.0.0",
+		"gulp-csso": "^4.0.1",
+		"gulp-typescript": "^6.0.0-alpha.1",
+		"mocha": "^11.0.1",
+		"static-server": "^3.0.0",
+		"terser-webpack-plugin": "^5.3.10",
+		"ts-node": "^10.9.2",
+		"tsec": "^0.2.8",
+		"tsx": "^4.21.0",
+		"typescript": "^5.9.3",
+		"webpack": "^5.97.1",
+		"webpack-cli": "^5.1.4",
+		"yargs": "^17.7.2"
+	}
 }

package/scripts/generate-css-docs.ts

@@ -0,0 +1,374 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import {
+	MEDIA_BREAKPOINTS,
+	PROPS_CUSTOM,
+	PROPS_COLORS,
+	PROPS_SPACING,
+	PROPS_SIZING,
+	PROPS_POSITION,
+	PROPS_SIZING_MINMAX,
+	UNITS_ALL,
+	REM_UNIT,
+	PERCENTS,
+	DURATIONS,
+} from "../src/css_gen_utils.ts";
+
+const DOCS_PATH = path.join(process.cwd(), "docs", "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 basic styles to help you build your application.\n\n";
+
+	md += "## Basic CSS\n\n";
+	md +=
+		'The basic CSS rules provide a clean, readable default style for standard HTML elements. You can inject them using `injectBasicCss()` or by adding `css="basic"` 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 += "## Utility CSS\n\n";
+	md +=
+		'The utility CSS rules are inspired by Tailwind CSS. You can inject them using `injectUtilsCss()` or by adding `css="utils"` to your script tag.\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 += "### Pseudo States\n\n";
+	md += "The following pseudo states are supported for all utilities:\n";
+	md += "- `hover:`\n";
+	md += "- `focus:`\n";
+	md += "- `disabled:`\n";
+	md += "- `active:`\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}-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 += "### 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", "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 from 0-100 |\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";
+	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-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,
+		"w-",
+		"h-",
+		"min-w-",
+		"min-h-",
+		"max-w-",
+		"max-h-",
+		"bg-",
+		"border-",
+		"opacity-",
+		"cursor-",
+		"size-",
+		"top-",
+		"bottom-",
+		"left-",
+		"right-",
+		"z-",
+		"duration-",
+		"gap-",
+		"space-",
+	];
+	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 += "--- \n\n*Generated automatically from `src/css_gen_utils.ts`*\n";
+
+	return md;
+}
+
+fs.writeFileSync(DOCS_PATH, generateMarkdown());
+console.log(`Documentation generated at ${DOCS_PATH}`);

package/tsconfig.json

@@ -1,21 +1,44 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ES2022",
-    "outDir": "dist",
-    "rootDir": "src",
-    "strict": true,
-    "sourceMap": true,
-    "declaration": true,
-    "noImplicitAny": true,
-    "skipLibCheck": true,
-    "stripInternal": true,
-    "moduleResolution": "node",
-    "plugins": [
-      {
-        "name": "tsec",
-        "exemptionConfig": "./tsec_exemptions.json"
-      }
-    ]
-  }
+	"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"
+	]
 }