@esportsplus/ui 0.53.0 → 0.55.0

package/package.json

@@ -2,31 +2,29 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/action": "^0.1.8",
-    "@esportsplus/queue": "^0.4.6",
     "@esportsplus/reactivity": "^0.36.7",
-    "@esportsplus/template": "^0.46.4",
-    "@esportsplus/utilities": "^0.28.4",
+    "@esportsplus/template": "^0.50.0",
+    "@esportsplus/utilities": "^0.28.5",
     "modern-normalize": "^3.0.1"
   },
   "devDependencies": {
-    "@esportsplus/typescript": "^0.34.4",
-    "@types/node": "^26.6.1",
+    "@esportsplus/typescript": "^0.35.1",
+    "@types/node": "^26.6.2",
     "@types/shelljs": "^0.10.0",
     "autoprefixer": "^10.6.1",
     "glob": "^13.0.6",
     "lightningcss": "^1.33.0",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.104.1",
+    "postcss": "8.5.28",
+    "postcss-scss": "4.0.9",
+    "sass": "^1.105.0",
     "shelljs": "^0.10.0",
     "vite": "^8.3.0"
   },
   "exports": {
     "./css-utilities.scss": "./build/css-utilities/index.scss",
     "./css-utilities/*.scss": "./build/css-utilities/*/scss/index.scss",
-    "./fonts": {
-      "types": "./build/fonts/index.d.ts",
-      "default": "./build/fonts/index.js"
-    },
+    "./css-utilities/font/*.scss": "./build/css-utilities/font/*/scss/index.scss",
     "./layer.scss": "./layer.scss",
     "./lib.scss": "./lib.scss",
     "./themes/dark": {
@@ -56,9 +54,11 @@
     "type": "git",
     "url": "https://github.com/esportsplus/ui"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.scss"
+  ],
   "type": "module",
-  "version": "0.53.0",
+  "version": "0.55.0",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc",

package/pnpm-workspace.yaml

@@ -11,12 +11,12 @@ allowBuilds:
 # first-party upgrades (reactivity, template, ...) be consumed immediately
 # instead of waiting out the release-age cutoff.
 minimumReleaseAgeExclude:
-  - '@esportsplus/typescript@0.34.1 || 0.34.2 || 0.34.3 || 0.34.4'
+  - '@esportsplus/typescript@0.34.1 || 0.34.2 || 0.34.3 || 0.34.4 || 0.35.1'
   - '@esportsplus/action@0.1.7 || 0.1.8'
   - '@esportsplus/queue@0.4.5 || 0.4.6'
   - '@esportsplus/reactivity@0.36.4 || 0.36.6 || 0.36.7'
-  - '@esportsplus/template@0.44.4 || 0.44.6 || 0.45.0 || 0.45.1 || 0.45.3 || 0.46.1 || 0.46.2 || 0.46.3 || 0.46.4'
-  - '@esportsplus/utilities@0.28.3 || 0.28.4'
+  - '@esportsplus/template@0.44.4 || 0.44.6 || 0.45.0 || 0.45.1 || 0.45.3 || 0.46.1 || 0.46.2 || 0.46.3 || 0.46.4 || 0.46.5 || 0.46.6 || 0.48.1 || 0.49.0 || 0.50.0'
+  - '@esportsplus/utilities@0.28.3 || 0.28.4 || 0.28.5'
   - '@esportsplus/vite@0.14.2 || 0.14.5 || 0.14.6'
   - '@esportsplus/*'
   # browserslist's data packages (pulled transitively via autoprefixer) republish daily, so a
@@ -26,3 +26,4 @@ minimumReleaseAgeExclude:
   - caniuse-lite
   - electron-to-chromium
   - '@types/node@26.6.2'
+  - 'sass@1.105.0'

package/scripts/css-variables.test.mjs

@@ -0,0 +1,50 @@
+import assert from 'node:assert/strict';
+import { fileURLToPath } from 'node:url';
+import { test } from 'node:test';
+import { compileString } from 'sass';
+
+const loadPaths = [fileURLToPath(new URL('../src/lib/scss/', import.meta.url))];
+const compile = source => compileString(`@use 'css-variables' as lib; ${source}`, {
+    loadPaths,
+    style: 'compressed'
+}).css;
+
+test('preserves positional, named and mixed declaration calls', () => {
+    const expected = ':root{--font-weight-300: 400;--font-weight-500: 600}';
+    for (const args of [
+        'font-weight, (300: 400, 500: 600)',
+        '$prefix: font-weight, $tokens: (300: 400, 500: 600)',
+        'font-weight, $tokens: (300: 400, 500: 600)'
+    ]) {
+        assert.equal(compile(`:root { @include lib.css-variables(${args}); }`), expected);
+    }
+});
+
+test('three arguments wrap each custom-property value in its own class', () => {
+    const expected = '.--font-weight-300{--font-weight-300: 400}.--font-weight-500{--font-weight-500: 600}.--font-weight-600{--font-weight-600: 700}';
+    for (const args of [
+        "'--font-weight', font-weight, (300: 400, 500: 600, 600: 700)",
+        "$class: '--font-weight', $prefix: font-weight, $tokens: (300: 400, 500: 600, 600: 700)"
+    ]) {
+        assert.equal(compile(`@include lib.css-variables(${args});`), expected);
+    }
+});
+
+test('nested maps produce matching declaration and utility suffixes', () => {
+    assert.equal(compile(`
+        $colors: (blue: (300: #abc, 500: #123));
+        :root { @include lib.css-variables(color, $colors); }
+        @include lib.css-variables('--color', color, $colors);
+    `), ':root{--color-blue-300: #abc;--color-blue-500: #123}.--color-blue-300{--color-blue-300: #abc}.--color-blue-500{--color-blue-500: #123}');
+});
+
+test('utility classes preserve a surrounding selector scope', () => {
+    assert.equal(compile(`.preview { @include lib.css-variables('--weight', font-weight, (500: 600)); }`),
+        '.preview .--weight-500{--font-weight-500: 600}');
+});
+
+test('empty maps emit no CSS and invalid token arguments fail clearly', () => {
+    assert.equal(compile(':root { @include lib.css-variables(color, ()); }'), '');
+    assert.equal(compile("@include lib.css-variables('--color', color, ());"), '');
+    assert.throws(() => compile(':root { @include lib.css-variables(color, red); }'), /with a token map/);
+});

package/scripts/sort-scss.md

@@ -0,0 +1,57 @@
+# Standalone SCSS sorter
+
+Run with Node 20+; no bundler, Sass compiler, or PostCSS configuration is used.
+
+```sh
+node scripts/sort-scss.mjs --check path/to/styles
+node scripts/sort-scss.mjs --write path/to/styles.scss
+node scripts/sort-scss.mjs --write path/to/styles another/file.scss
+```
+
+Paths resolve from the current working directory. To use elsewhere, copy
+`sort-scss.mjs` into a project with `postcss` and `postcss-scss` installed, or invoke
+this installed script by absolute path. Dependencies are declared in
+`package.json` (development dependencies).
+
+The sorter orders consecutive sibling selector blocks by their full selector
+text and consecutive declarations by property name, recursively, using
+case-sensitive code-unit order. Punctuation and vendor prefixes participate in
+that order. Equal keys retain their original relative order. Comma-separated
+selector lists remain intact.
+
+Sass nested selectors such as `&-actions`, `&-inner`, and `&-nav` are sorted
+within their parent too. Use `--write` to apply changes; `--check` only reports them.
+
+Consecutive simple class selectors sharing a prefix are also grouped into Sass
+nesting: `.spec-name`, `.spec-table`, and `.spec-value` become `.spec` with
+`&-name`, `&-table`, and `&-value` children. This uses the segment before the
+first hyphen and requires at least two matching siblings. Existing base rules
+remain separate so their declarations and Sass scope are preserved. Complex
+selectors, interpolation, and ordering boundaries are not crossed; groups inside
+at-rules are handled within their own scope. Comments move with their rules.
+
+Leading comments move with the following statement; same-line trailing comments
+move with the preceding statement. Existing whitespace and value text are
+retained where possible. This organizes source; it does not impose indentation
+or line wrapping.
+
+At-rules, Sass variable assignments, interpolated property/selector names, and
+transitions between declarations and nested rules divide sorting runs. Statements
+never move across these boundaries. Contents of at-rules are processed recursively;
+keyframe steps retain their order while properties inside each step are sorted.
+
+Sorting is strict within each run: overlapping selectors and shorthand/longhand
+properties are alphabetized even when this changes the cascade. Sass function
+evaluation order can also change. Duplicate declarations retain fallback order.
+
+Directory traversal skips `.git`, `node_modules`, and symlinks. Explicit symlink
+targets and non-SCSS file targets are rejected. All inputs are parsed before any
+write. A malformed input prevents writes for the batch; filesystem write failures
+are reported but do not roll back earlier successful writes.
+
+Exit status is 0 for success, 1 for unsorted files in check mode, and 2 for invalid
+arguments, parse failures, or I/O errors. Check mode never writes.
+
+```sh
+node --test scripts/sort-scss.test.mjs
+```

package/scripts/sort-scss.mjs

@@ -0,0 +1,233 @@
+#!/usr/bin/env node
+import * as NodeFSP from "node:fs/promises";
+import { realpathSync } from "node:fs";
+import * as NodePath from "node:path";
+import { fileURLToPath } from "node:url";
+import scss from "postcss-scss";
+
+const help = `Usage: node sort-scss.mjs --check|--write <file.scss|directory>...
+
+Alphabetize sibling selectors and declaration properties recursively.
+Group sibling .prefix-* classes into .prefix { &-* { ... } } blocks.
+Sorting is strict and may change the cascade or Sass evaluation behavior.
+At-rules, Sass assignments, and interpolated names remain ordering boundaries.
+Duplicate properties retain their relative order. Keyframe steps stay in place.
+Directories are recursive; .git and node_modules are excluded.
+Exit codes: 0 = success, 1 = unsorted (--check), 2 = invalid input or I/O error.
+`;
+
+function compare(left, right) {
+  return left < right ? -1 : left > right ? 1 : 0;
+}
+
+function sortableKind(node, keyframes) {
+  if (node.type === "decl" && !node.prop.includes("$") && !node.prop.includes("#{")) {
+    return "decl";
+  }
+  if (node.type === "rule" && !keyframes && !node.selector.includes("#{")) {
+    return "rule";
+  }
+  return null;
+}
+
+function unitsFor(nodes) {
+  const units = [];
+  let comments = [];
+  for (const node of nodes) {
+    if (node.type === "comment") {
+      const previous = units.at(-1);
+      if (previous && comments.length === 0 && !/[\r\n]/.test(node.raws.before ?? "")) {
+        previous.nodes.push(node);
+      } else {
+        comments.push(node);
+      }
+    } else {
+      units.push({ node, nodes: [...comments, node] });
+      comments = [];
+    }
+  }
+  if (comments.length) units.push({ node: null, nodes: comments });
+  return units;
+}
+
+function sortContainer(container) {
+  if (!container.nodes) return;
+  for (const node of container.nodes) sortContainer(node);
+  const keyframes = container.type === "atrule" && /(?:^|-)keyframes$/i.test(container.name);
+  const units = unitsFor(container.nodes);
+  let changed = false;
+  for (let start = 0; start < units.length; ) {
+    const kind = units[start].node && sortableKind(units[start].node, keyframes);
+    if (!kind) {
+      start++;
+      continue;
+    }
+    let end = start + 1;
+    while (
+      end < units.length &&
+      units[end].node &&
+      sortableKind(units[end].node, keyframes) === kind
+    )
+      end++;
+    const original = units.slice(start, end);
+    const sorted = original.toSorted((a, b) =>
+      compare(
+        kind === "decl" ? a.node.prop : a.node.selector.trim(),
+        kind === "decl" ? b.node.prop : b.node.selector.trim(),
+      ),
+    );
+    if (sorted.some((unit, index) => unit !== original[index])) {
+      // Keep spacing at each position while moving comments with their owner.
+      const spacing = original.map((unit) => unit.nodes[0].raws.before);
+      sorted.forEach((unit, index) => {
+        unit.nodes[0].raws.before = spacing[index];
+      });
+      units.splice(start, end - start, ...sorted);
+      changed = true;
+    }
+    start = end;
+  }
+  if (changed) {
+    container.removeAll();
+    for (const unit of units) container.append(unit.nodes);
+    // Moving a // comment must not comment out the next statement or closing brace.
+    for (let index = 1; index < container.nodes.length; index++) {
+      const previous = container.nodes[index - 1];
+      const node = container.nodes[index];
+      if (
+        previous.type === "comment" &&
+        previous.raws.inline &&
+        !/[\r\n]/.test(node.raws.before ?? "")
+      ) {
+        node.raws.before = "\n" + (node.raws.before ?? "");
+      }
+    }
+    if (
+      container.last?.type === "comment" &&
+      container.last.raws.inline &&
+      !/[\r\n]/.test(container.raws.after ?? "")
+    ) {
+      container.raws.after = "\n" + (container.raws.after ?? "");
+    }
+  }
+}
+
+function nestPrefixes(container, indent, newline) {
+  if (!container.nodes) return;
+  for (const node of [...container.nodes]) nestPrefixes(node, indent, newline);
+  if (container.type === "atrule" && /(?:^|-)keyframes$/i.test(container.name)) return;
+
+  const units = unitsFor(container.nodes);
+  const prefix = (unit) => unit.node?.type === "rule"
+    ? /^(\.[a-zA-Z_][\w]*)-[\w-]+$/.exec(unit.node.selector.trim())?.[1]
+    : undefined;
+
+  for (let start = 0; start < units.length; ) {
+    const name = prefix(units[start]);
+    let end = start + 1;
+    if (name) while (end < units.length && prefix(units[end]) === name) end++;
+    if (!name || end - start < 2) {
+      start = end;
+      continue;
+    }
+
+    const first = units[start].nodes[0];
+    const before = first.raws.before ?? "";
+    const baseIndent = /(?:^|\n)([\t ]*)$/.exec(before)?.[1] ?? "";
+    const wrapper = scss.parse(`${name} {}`).first;
+    wrapper.raws.before = before;
+    wrapper.raws.after = newline + baseIndent;
+    container.insertBefore(first, wrapper);
+
+    for (const unit of units.slice(start, end)) {
+      unit.node.selector = "&" + unit.node.selector.trim().slice(name.length);
+      for (const node of unit.nodes) {
+        const shift = (value) => value?.replace(/(\r?\n)([\t ]*)(?=\S)/g, `$1$2${indent}`);
+        const shiftBefore = (value) => value?.replace(/([\t ]*)$/, `$1${indent}`);
+        node.raws.before = shiftBefore(node.raws.before);
+        node.raws.after = /[\r\n]/.test(node.raws.after ?? "") ? shiftBefore(node.raws.after) : node.raws.after;
+        node.walk?.((child) => {
+          child.raws.before = shiftBefore(child.raws.before);
+          child.raws.after = /[\r\n]/.test(child.raws.after ?? "") ? shiftBefore(child.raws.after) : child.raws.after;
+          if (child.type === "rule") child.selector = shift(child.selector);
+        });
+        // Ensure standalone comments and inline input both start safely inside the wrapper.
+        if (!/[\r\n]/.test(node.raws.before ?? "")) {
+          node.raws.before = newline + baseIndent + indent;
+        }
+        wrapper.append(node);
+      }
+    }
+    wrapper.first.raws.before = newline + baseIndent + indent;
+    start = end;
+  }
+}
+
+export function sortScss(source, file = "input.scss") {
+  const root = scss.parse(source, { from: file });
+  sortContainer(root);
+  const indent = source.match(/\n([\t ]+)\S/)?.[1] ?? "    ";
+  nestPrefixes(root, indent, source.includes("\r\n") ? "\r\n" : "\n");
+  sortContainer(root);
+  return root.toString(scss.stringify);
+}
+
+async function collect(paths) {
+  const files = new Set();
+  async function visit(path, explicit = false) {
+    const stat = await NodeFSP.lstat(path);
+    if (stat.isSymbolicLink()) {
+      if (explicit) throw new Error(`Refusing symlink: ${path}`);
+      return;
+    }
+    if (stat.isDirectory()) {
+      for (const entry of await NodeFSP.readdir(path, { withFileTypes: true })) {
+        if (entry.name === ".git" || entry.name === "node_modules") continue;
+        await visit(NodePath.join(path, entry.name));
+      }
+    } else if (stat.isFile() && NodePath.extname(path).toLowerCase() === ".scss") {
+      files.add(path);
+    } else if (explicit) {
+      throw new Error(`Expected an SCSS file or directory: ${path}`);
+    }
+  }
+  for (const path of paths) await visit(NodePath.resolve(path), true);
+  if (!files.size) throw new Error("No SCSS files found.");
+  return [...files].sort(compare);
+}
+
+async function main(args) {
+  if (args.length === 1 && args[0] === "--help") {
+    process.stdout.write(help);
+    return;
+  }
+  const modes = args.filter((arg) => arg === "--check" || arg === "--write");
+  const paths = args.filter((arg) => !arg.startsWith("--"));
+  if (
+    modes.length !== 1 ||
+    paths.length === 0 ||
+    args.some((arg) => arg.startsWith("--") && !modes.includes(arg))
+  ) {
+    throw new Error(help);
+  }
+  // Parse the entire batch before writing so a syntax error cannot leave a partial batch.
+  const changes = [];
+  for (const file of await collect(paths)) {
+    const source = await NodeFSP.readFile(file, "utf8");
+    const output = sortScss(source, file);
+    if (output !== source) changes.push({ file, output });
+  }
+  for (const { file, output } of changes) {
+    if (modes[0] === "--write") await NodeFSP.writeFile(file, output, "utf8");
+    console.log(`${modes[0] === "--write" ? "Sorted" : "Unsorted"}: ${file}`);
+  }
+  if (modes[0] === "--check" && changes.length) process.exitCode = 1;
+}
+
+// Older Node versions do not define import.meta.main and silently skipped the CLI.
+if (process.argv[1] && realpathSync(process.argv[1]) === realpathSync(fileURLToPath(import.meta.url))) {
+  main(process.argv.slice(2)).catch((error) => {
+    console.error(`sort-scss: ${error.message}`);
+    process.exitCode = 2;
+  });
+}

package/scripts/sort-scss.test.mjs

@@ -0,0 +1,217 @@
+import * as NodeAssert from "node:assert/strict";
+import * as NodeChildProcess from "node:child_process";
+import * as NodeFSP from "node:fs/promises";
+import * as NodeOS from "node:os";
+import * as NodePath from "node:path";
+import * as NodeURL from "node:url";
+import * as NodeTest from "node:test";
+import scss from "postcss-scss";
+import { compileString } from "sass";
+import { sortScss } from "./sort-scss.mjs";
+
+const script = NodeURL.fileURLToPath(new URL("./sort-scss.mjs", import.meta.url));
+
+NodeTest.test("nests prefixed classes with equivalent CSS, comments and stable output", () => {
+  const input = `// Name\n.spec-name { color: red; }\n.spec-table { td { color: blue; } &:hover { opacity: 1; } }\n.spec-value { color: green; }\n`;
+  const output = sortScss(input);
+  const root = scss.parse(output);
+  NodeAssert.equal(root.first.selector, ".spec");
+  NodeAssert.deepEqual(root.first.nodes.filter(n => n.type === "rule").map(n => n.selector),
+    ["&-name", "&-table", "&-value"]);
+  NodeAssert.match(output, /\/\/ Name\n/);
+  // Sorting already orders nested selectors; compare against that canonical CSS.
+  const canonical = input.replace('td { color: blue; } &:hover { opacity: 1; }', '&:hover { opacity: 1; } td { color: blue; }');
+  NodeAssert.equal(compileString(output, { style: "compressed" }).css, compileString(canonical, { style: "compressed" }).css);
+  NodeAssert.equal(sortScss(output), output);
+});
+
+NodeTest.test("prefix grouping respects scopes, complex selectors and Sass boundaries", () => {
+  const input = `.spec-a { color: red; }\n$gap: 1px;\n.spec-b { color: blue; }\n.spec-c:hover { color: red; }\n.spec-d { color: green; }\n@media (width > 1px) { .item-a { color: red; } .item-b { color: blue; } }`;
+  const output = sortScss(input);
+  NodeAssert.equal(compileString(output, { style: "compressed" }).css, compileString(input, { style: "compressed" }).css);
+  NodeAssert.match(output, /\.spec-a/);
+  NodeAssert.match(output, /\.spec-b/);
+  NodeAssert.match(output, /\.spec-c:hover/);
+  NodeAssert.equal(scss.parse(output).last.first.selector, ".item");
+  NodeAssert.equal(sortScss(output), output);
+});
+
+NodeTest.test("prefix grouping preserves CRLF and an existing base selector", () => {
+  const input = ".spec { color: black; }\r\n.spec-a { color: red; }\r\n.spec-b { color: blue; }\r\n";
+  const output = sortScss(input);
+  NodeAssert.equal(compileString(output, { style: "compressed" }).css, compileString(input, { style: "compressed" }).css);
+  NodeAssert.equal(output.replaceAll("\r\n", "").includes("\n"), false);
+  NodeAssert.equal(sortScss(output), output);
+});
+
+NodeTest.test("prefix grouping indents multiline selectors without whitespace-only lines", () => {
+  const output = sortScss(".spec-a {\n    td,\n    th { color: red; }\n}\n\n.spec-b {\n    color: blue;\n}\n");
+  NodeAssert.match(output, /        td,\n        th/);
+  NodeAssert.doesNotMatch(output, /^[\t ]+$/m);
+  NodeAssert.equal(sortScss(output), output);
+});
+
+NodeTest.test("sorts Sass suffix selectors recursively and keeps media boundaries", () => {
+  const output = sortScss(`.header {
+    position: sticky;
+    &-inner { width: 100%; display: flex; }
+    &-nav {}
+    &-link { font-weight: 500; color: red; &-z {} &-a {} }
+    &-actions {}
+    &-icon {}
+    @media (max-width: 720px) { &-nav {} &-inner {} }
+  }`);
+  const nodes = scss.parse(output).first.nodes;
+  NodeAssert.deepEqual(nodes.map((node) => node.prop ?? node.selector ?? node.name),
+    ["position", "&-actions", "&-icon", "&-inner", "&-link", "&-nav", "media"]);
+  NodeAssert.deepEqual(nodes[4].nodes.map((node) => node.prop ?? node.selector),
+    ["color", "font-weight", "&-a", "&-z"]);
+  NodeAssert.deepEqual(nodes.at(-1).nodes.map((node) => node.selector),
+    ["&-inner", "&-nav"]);
+  NodeAssert.equal(sortScss(output), output);
+});
+
+NodeTest.test("inline comments cannot swallow a closing brace after sorting", () => {
+  const output = sortScss(".a {\n z-index: 1; // layer\n color: red; }");
+  const parsed = scss.parse(output);
+  NodeAssert.deepEqual(
+    parsed.first.nodes.filter((node) => node.type === "decl").map((node) => node.prop),
+    ["color", "z-index"],
+  );
+  NodeAssert.equal(sortScss(output), output);
+});
+
+NodeTest.test("retains BOM and CRLF in an already sorted file", () => {
+  const input = "\uFEFF.a {\r\n  color: red;\r\n}\r\n";
+  NodeAssert.equal(sortScss(input), input);
+});
+
+NodeTest.test("sorts selectors and properties recursively, including inside media queries", () => {
+  const output = sortScss(`.z { z-index: 1; color: red; &.z { width: 1px; color: red } &.a {} }
+.a { width: 1px; display: block }
+@media (width > 1px) { .z {} .a { width: 2px; color: blue } }`);
+  const root = scss.parse(output);
+  NodeAssert.deepEqual(
+    root.nodes.map((node) => node.selector ?? node.name),
+    [".a", ".z", "media"],
+  );
+  NodeAssert.deepEqual(
+    root.first.nodes.map((node) => node.prop),
+    ["display", "width"],
+  );
+  NodeAssert.deepEqual(
+    root.nodes[1].nodes.map((node) => node.prop ?? node.selector),
+    ["color", "z-index", "&.a", "&.z"],
+  );
+  NodeAssert.deepEqual(
+    root.last.nodes.map((node) => node.selector),
+    [".a", ".z"],
+  );
+  NodeAssert.equal(sortScss(output), output);
+});
+
+NodeTest.test(
+  "keeps Sass boundaries and fallback order while sorting declarations on either side",
+  () => {
+    const output = sortScss(`.a {
+  z-index: 1; color: red;
+  $value: 2;
+  width: $value; display: -webkit-box; display: flex;
+  @include size;
+  padding: 0; color: blue;
+}`);
+    const nodes = scss.parse(output).first.nodes;
+    NodeAssert.deepEqual(
+      nodes.map((node) => node.prop ?? `@${node.name}`),
+      ["color", "z-index", "$value", "display", "display", "width", "@include", "color", "padding"],
+    );
+    NodeAssert.deepEqual(
+      nodes.filter((node) => node.prop === "display").map((node) => node.value),
+      ["-webkit-box", "flex"],
+    );
+  },
+);
+
+NodeTest.test(
+  "moves leading and inline comments with their owners and preserves SCSS syntax",
+  () => {
+    const input = `// z selector
+.z {
+  // width explanation
+  width: 1px; // width inline
+  color: red;
+}
+// a selector
+.a { content: "braces {}; // text"; background: url("a;b.svg"); }
+`;
+    const output = sortScss(input);
+    NodeAssert.ok(output.startsWith("// a selector\n.a"));
+    NodeAssert.match(
+      output,
+      /color: red;\n  \/\/ width explanation\n  width: 1px; \/\/ width inline/,
+    );
+    NodeAssert.ok(output.includes('"braces {}; // text"'));
+    NodeAssert.equal(sortScss(output), output);
+  },
+);
+
+NodeTest.test(
+  "preserves interpolated selectors, variable assignments and keyframe step order",
+  () => {
+    const input = `.z {} .#{$name} {} .a {}
+@keyframes pulse { to { width: 1px; color: red } from { opacity: 0 } 50% { opacity: 1 } }`;
+    const root = scss.parse(sortScss(input));
+    NodeAssert.deepEqual(
+      root.nodes.slice(0, 3).map((node) => node.selector),
+      [".z", ".#{$name}", ".a"],
+    );
+    NodeAssert.deepEqual(
+      root.last.nodes.map((node) => node.selector),
+      ["to", "from", "50%"],
+    );
+    NodeAssert.deepEqual(
+      root.last.first.nodes.map((node) => node.prop),
+      ["color", "width"],
+    );
+  },
+);
+
+NodeTest.test("CLI checks without writing, writes recursively, then checks clean", async () => {
+  const dir = await NodeFSP.mkdtemp(NodePath.join(NodeOS.tmpdir(), "sort-scss-"));
+  try {
+    const file = NodePath.join(dir, "sample.scss");
+    const input = ".z {}\n.a { width: 0; color: red }\n";
+    await NodeFSP.writeFile(file, input);
+    const run = (mode) =>
+      NodeChildProcess.spawnSync(process.execPath, [script, mode, dir], {
+        cwd: NodeOS.tmpdir(),
+        encoding: "utf8",
+      });
+    NodeAssert.equal(run("--check").status, 1);
+    NodeAssert.equal(await NodeFSP.readFile(file, "utf8"), input);
+    NodeAssert.equal(run("--write").status, 0);
+    NodeAssert.equal(await NodeFSP.readFile(file, "utf8"), ".a { color: red; width: 0 }\n.z {}\n");
+    NodeAssert.equal(run("--check").status, 0);
+  } finally {
+    await NodeFSP.rm(dir, { recursive: true, force: true });
+  }
+});
+
+NodeTest.test("CLI refuses invalid input before writing any file in the batch", async () => {
+  const dir = await NodeFSP.mkdtemp(NodePath.join(NodeOS.tmpdir(), "sort-scss-"));
+  try {
+    const good = NodePath.join(dir, "a.scss");
+    const bad = NodePath.join(dir, "z.scss");
+    const input = ".z {} .a {}";
+    await NodeFSP.writeFile(good, input);
+    await NodeFSP.writeFile(bad, ".broken {");
+    const result = NodeChildProcess.spawnSync(process.execPath, [script, "--write", dir], {
+      encoding: "utf8",
+    });
+    NodeAssert.equal(result.status, 2);
+    NodeAssert.match(result.stderr, /Unclosed block/);
+    NodeAssert.equal(await NodeFSP.readFile(good, "utf8"), input);
+  } finally {
+    await NodeFSP.rm(dir, { recursive: true, force: true });
+  }
+});

package/src/components/accordion/index.ts

@@ -1,23 +1,16 @@
-import { html, Attributes, component } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
+import { reactive } from '@esportsplus/reactivity';
+import { html, component, type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 
 
-type A = Attributes & { state: { active: boolean | number } };
-
-
-const OMIT = ['state'];
-
-
-export default component<A>(
-    function(attributes: A, content) {
-        let state = attributes.state;
-
+export default component<Attributes & { state?: { active: boolean | number } }>(
+    function({ state = reactive({ active: false }), ...attributes }, content) {
         return html`
             <div
                 class='accordion'
-                ${omit(attributes, OMIT)}
+                ${attributes}
                 ${{
+                    class: () => state.active && '--active',
                     inert: () => !state.active
                 }}
             >
@@ -25,4 +18,4 @@ export default component<A>(
             </div>
         `;
     }
-);
+);