@cssints/reset 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Alexei Accio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,111 @@
-# Temporary Holding Version
+# @cssints/reset
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A small modern CSS reset for [cssints](../../README.md), in a layer below every other style of the sheet, so any style
+beats it whatever its specificity. It is one call member of `cssints/plugin` `scope()` that returns global rules. No
+runtime.
+
+```ts
+import { reset } from "@cssints/reset" with { type: "cssints" };
+
+// reset({ media?, prose? })
+reset({ media: true, prose: true });
+```
+
+```css
+@layer reset;
+@layer _.k, _.a, _.b, _.c, _.d, _.e;
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  * {
+    margin: 0;
+  }
+  html {
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+    line-height: 1.5;
+  }
+  :where(input, button, textarea, select) {
+    font: inherit;
+    letter-spacing: inherit;
+    word-spacing: inherit;
+    color: inherit;
+  }
+  :where(p, h1, h2, h3, h4, h5, h6) {
+    overflow-wrap: break-word;
+  }
+  :where(h1, h2, h3, h4, h5, h6) {
+    text-wrap: balance;
+  }
+  :where(p) {
+    text-wrap: pretty;
+  }
+  :where(ul, ol)[role="list"] {
+    list-style: none;
+    padding: 0;
+  }
+}
+/* prose: true */
+@layer reset {
+  :where(h1, …, p, ul, ol, dl, blockquote, pre, figure, table, hr):not([class])
+    + :where(h1, …, hr):not([class]) {
+    margin-block-start: 1em;
+  }
+  :where(h1, h2, h3, h4, h5, h6):not([class]) {
+    line-height: 1.25;
+  }
+}
+/* media: true */
+@layer reset {
+  :where(img, picture, video, canvas, svg) {
+    display: block;
+    max-inline-size: 100%;
+  }
+  :where(img, video) {
+    block-size: auto;
+  }
+}
+```
+
+## The rules
+
+- **The base** is what most modern resets agree on ([Josh Comeau](https://www.joshwcomeau.com/css/custom-css-reset/),
+  [Jake Lazaroff](https://jakelazaroff.com/words/my-modern-css-reset/), [Vale](https://vale.rocks/posts/css-reset)):
+  `border-box`, no margins, a readable line height, no text inflation on mobile, form controls in the page's font and
+  colour, long words that wrap, balanced headings and paragraphs without orphans. The paddings stay (a list keeps room
+  for its markers), and the markers of a list go only with `role="list"` (Andy Bell's), since Safari stops announcing a
+  list that has `list-style: none`.
+- **`media: true`** makes images, videos, canvases and SVGs blocks that never overflow their container, and keeps the
+  aspect ratio of an image or video whose `height` attribute is set.
+- **`prose: true`** adds back the space of text: 1em between flow elements that follow each other (Andy Bell's
+  [flow](https://piccalil.li/blog/my-favourite-3-lines-of-css/)), and tighter headings, only on elements that have no
+  class (Jake Lazaroff's `:not([class])`), as in rendered Markdown. An element with a cssints class is left alone.
+- **Below everything.** The rules are in a top-level layer `reset`, declared before the engine's layers (a `layers`
+  entry with `before: true`), so the reset is below the kernels, `global()` and token rules of `_.k`, below the class
+  layers and the layers you declare with `layers()`; an unlayered stylesheet beats it as well.
+- **A layer of your own between.** Declare it after `reset`, before the engine's:
+  `layers("reset", "base", { before: true })` puts `base` above the reset and below every cssints style.
+- **Once.** Each block is a global rule identified by its text: `reset()` in two modules, or `reset()` and
+  `reset({ media: true })`, print the base once.
+
+## Limits
+
+- `reset` is a contract name: a `layers("reset")` without `before`, or another plugin that declares `reset` after the
+  engine's layers, is a build error.
+- The rule set is fixed: there is no option per rule. A rule you do not want is overridden by any style of yours.
+- Call it at a module's top level, in a module that the pages load (the entry): the reset is in the sheet of the modules
+  that call it, and leaves with them.
+
+```bash
+cd packages/reset && bun run test   # fixtures through the engine (the order of the sheet, the flags), and the type test via bun run typecheck
+```
+
+## Credits
+
+The base follows what [Josh Comeau](https://www.joshwcomeau.com/css/custom-css-reset/),
+[Jake Lazaroff](https://jakelazaroff.com/words/my-modern-css-reset/) and [Vale](https://vale.rocks/posts/css-reset)
+publish; `role="list"` and the flow rule are [Andy Bell's](https://piccalil.li/blog/my-favourite-3-lines-of-css/). The
+declarations are those that these resets share. They are written here, as globals of `scope()`; no file is copied.

package/dist/index.d.mts

@@ -0,0 +1,19 @@
+//#region src/index.d.ts
+declare const resetScope: import("cssints/plugin").Scope<"reset", {
+  readonly reset: {
+    readonly args: readonly [{
+      readonly "media?": import("cssints/plugin").Typed<boolean>;
+      readonly "prose?": import("cssints/plugin").Typed<boolean>;
+    }];
+  };
+}>;
+/**
+ * `reset({ media?, prose? })`: the reset, in a layer below every other style of the sheet. The base sets `border-box`,
+ * removes the margins, gives `html` a line height of 1.5 and stops mobile text inflation, makes form controls inherit the
+ * font and colour, wraps long words in text and balances headings, and removes the markers of a list with
+ * `role="list"`. `media: true` makes images, videos, canvases and SVGs blocks that do not overflow their container;
+ * `prose: true` puts 1em between flow elements (headings, paragraphs, lists, ...) that have no class, as in rendered
+ * Markdown. Call it at a module's top level; it prints no class.
+ */
+export declare const reset: ReturnType<typeof resetScope.export>["reset"];
+//#endregion

package/dist/index.mjs

@@ -0,0 +1,44 @@
+import { arg, scope } from "cssints/plugin";
+//#region src/index.ts
+const HEADINGS = "h1, h2, h3, h4, h5, h6";
+const FLOW = `${HEADINGS}, p, ul, ol, dl, blockquote, pre, figure, table, hr`;
+const layered = (rules) => ({
+	css: rules,
+	layer: "reset"
+});
+const BASE = layered([
+	"*, *::before, *::after { box-sizing: border-box }",
+	"* { margin: 0 }",
+	"html { -webkit-text-size-adjust: none; text-size-adjust: none; line-height: 1.5 }",
+	":where(input, button, textarea, select) { font: inherit; letter-spacing: inherit; word-spacing: inherit; color: inherit }",
+	`:where(p, ${HEADINGS}) { overflow-wrap: break-word }`,
+	`:where(${HEADINGS}) { text-wrap: balance }`,
+	":where(p) { text-wrap: pretty }",
+	":where(ul, ol)[role=\"list\"] { list-style: none; padding: 0 }"
+].join(" "));
+const MEDIA = layered([":where(img, picture, video, canvas, svg) { display: block; max-inline-size: 100% }", ":where(img, video) { block-size: auto }"].join(" "));
+const PROSE = layered([`:where(${FLOW}):not([class]) + :where(${FLOW}):not([class]) { margin-block-start: 1em }`, `:where(${HEADINGS}):not([class]) { line-height: 1.25 }`].join(" "));
+/**
+* `reset({ media?, prose? })`: the reset, in a layer below every other style of the sheet. The base sets `border-box`,
+* removes the margins, gives `html` a line height of 1.5 and stops mobile text inflation, makes form controls inherit the
+* font and colour, wraps long words in text and balances headings, and removes the markers of a list with
+* `role="list"`. `media: true` makes images, videos, canvases and SVGs blocks that do not overflow their container;
+* `prose: true` puts 1em between flow elements (headings, paragraphs, lists, ...) that have no class, as in rendered
+* Markdown. Call it at a module's top level; it prints no class.
+*/
+const reset = scope("reset", { reset: { args: [{
+	"media?": arg(),
+	"prose?": arg()
+}] } }).build({ reset: (options) => ({
+	layers: {
+		layers: ["reset"],
+		before: true
+	},
+	globals: [
+		BASE,
+		...options.media ? [MEDIA] : [],
+		...options.prose ? [PROSE] : []
+	]
+}) }).export().reset;
+//#endregion
+export { reset };

package/package.json

@@ -1,6 +1,32 @@
 {
   "name": "@cssints/reset",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "A small modern CSS reset for cssints, in a layer below every style",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alexeiaccio/css-in-ts-compiler.git",
+    "directory": "packages/reset"
+  },
+  "homepage": "https://cssints.dev",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "peerDependencies": {
+    "cssints": "^0.2.0"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}