tempest-react-sdk 0.27.0 → 0.28.0

package/bin/lib/css/parse.test.mjs

@@ -0,0 +1,146 @@
+import { describe, expect, it } from "vitest";
+
+import { maskValue, normalizeSelectors, parseCss, stripComments } from "./parse.mjs";
+
+const codes = (text) => parseCss(text).errors.map((e) => e.code);
+
+describe("parseCss — structure", () => {
+    it("records rules, declarations and their lines", () => {
+        const { blocks } = parseCss(".a {\n    color: red;\n    padding: 0;\n}\n");
+        expect(blocks).toHaveLength(1);
+        expect(blocks[0]).toMatchObject({ kind: "rule", prelude: ".a", line: 1, endLine: 4 });
+        expect(blocks[0].decls.map((d) => [d.prop, d.value, d.line])).toEqual([
+            ["color", "red", 2],
+            ["padding", "0", 3],
+        ]);
+    });
+
+    it("keeps the last declaration when the block omits its semicolon", () => {
+        const { blocks, errors } = parseCss(".a { color: red }");
+        expect(errors).toEqual([]);
+        expect(blocks[0].decls).toHaveLength(1);
+    });
+
+    it("nests blocks and records the at-rule context", () => {
+        const { blocks } = parseCss("@media (min-width: 600px) {\n  .a { color: red; }\n}\n");
+        expect(blocks[0]).toMatchObject({ kind: "at", children: 1 });
+        expect(blocks[1]).toMatchObject({
+            kind: "rule",
+            prelude: ".a",
+            context: ["@media (min-width: 600px)"],
+        });
+    });
+
+    it("collects at-statements with their params", () => {
+        const { statements } = parseCss('@import "x.css";\n@charset "utf-8";\n');
+        expect(statements).toEqual([
+            { name: "import", params: '"x.css"', line: 1 },
+            { name: "charset", params: '"utf-8"', line: 2 },
+        ]);
+    });
+
+    it("reports the declaration line, not the comment above it", () => {
+        const { blocks } = parseCss(".a {\n\n    /* why */\n    color: red;\n}\n");
+        expect(blocks[0].decls[0].line).toBe(4);
+    });
+
+    it("keeps a comment out of the parsed value", () => {
+        const { blocks } = parseCss(".a { color: red /* nope */; }");
+        expect(blocks[0].decls[0].value).toBe("red");
+    });
+
+    it("does not split on a semicolon inside url() or a string", () => {
+        const { blocks, errors } = parseCss('.a { background: url("a;b.png"); content: "x;y"; }');
+        expect(errors).toEqual([]);
+        expect(blocks[0].decls.map((d) => d.prop)).toEqual(["background", "content"]);
+    });
+
+    it("does not open a block on a brace inside a string", () => {
+        const { blocks, errors } = parseCss('.a { content: "{"; color: red; }');
+        expect(errors).toEqual([]);
+        expect(blocks).toHaveLength(1);
+    });
+
+    it("records offsets that point at the declaration text", () => {
+        const text = ".a {\n    color: red;\n}\n";
+        const { blocks } = parseCss(text);
+        const decl = blocks[0].decls[0];
+        expect(text.slice(decl.start, decl.end)).toBe("color: red;");
+        expect(text.slice(blocks[0].start, blocks[0].end)).toBe(text.trimEnd());
+    });
+});
+
+describe("parseCss — syntax defects", () => {
+    it("flags a declaration with no colon", () => {
+        expect(codes(".a { color red; }")).toEqual(["missing-colon"]);
+    });
+
+    it("flags an empty value", () => {
+        expect(codes(".a { color: ; }")).toEqual(["empty-value"]);
+    });
+
+    it("flags a block that is never closed", () => {
+        expect(codes(".a {\n  color: red;\n")).toEqual(["unclosed-block"]);
+    });
+
+    it("flags a stray closing brace and keeps parsing after it", () => {
+        const { blocks, errors } = parseCss("}\n.a { color: red; }\n");
+        expect(errors.map((e) => e.code)).toEqual(["unexpected-brace"]);
+        expect(blocks).toHaveLength(1);
+    });
+
+    it("flags an unterminated comment", () => {
+        expect(codes(".a { color: red; }\n/* forever")).toEqual(["unterminated-comment"]);
+    });
+
+    it("flags an unterminated string", () => {
+        expect(codes('.a { content: "oops;\n}')).toContain("unterminated-string");
+    });
+
+    it("flags an unbalanced paren", () => {
+        expect(codes(".a { width: calc(1px + 2px;\n}\n")).toContain("unterminated-paren");
+    });
+
+    it("flags a declaration outside any rule", () => {
+        expect(codes("color: red;\n")).toEqual(["declaration-outside-rule"]);
+    });
+
+    it("flags a selector with no block", () => {
+        expect(codes(".a { color: red; }\n.b\n")).toEqual(["missing-brace"]);
+    });
+
+    it("flags an empty selector", () => {
+        expect(codes("{ color: red; }")).toEqual(["empty-selector"]);
+    });
+
+    it("accepts a clean sheet", () => {
+        expect(codes(".a { color: red; }\n@media print { .a { color: black; } }\n")).toEqual([]);
+    });
+});
+
+describe("stripComments / maskValue", () => {
+    it("removes comments and keeps strings", () => {
+        expect(stripComments('a /* x */ b "c/* d */"')).toBe('a   b "c/* d */"');
+    });
+
+    it("masks parens and strings without changing length, keeping the function name", () => {
+        const value = 'url("a:b") red';
+        expect(maskValue(value)).toHaveLength(value.length);
+        expect(maskValue(value)).not.toContain(":");
+        expect(maskValue(value).trim().startsWith("url")).toBe(true);
+    });
+
+    it("keeps newlines visible through the mask", () => {
+        expect(maskValue("a\nb")).toBe("a\nb");
+    });
+});
+
+describe("normalizeSelectors", () => {
+    it("sorts the list and collapses whitespace", () => {
+        expect(normalizeSelectors(".b  >  span , .a")).toEqual([".a", ".b > span"]);
+    });
+
+    it("does not split on a comma inside :is()", () => {
+        expect(normalizeSelectors(":is(.a, .b) span")).toEqual([":is(.a, .b) span"]);
+    });
+});

package/bin/lib/css/properties.mjs

@@ -0,0 +1,399 @@
+// The known-name tables behind the typo checks, plus the nearest-match helper.
+//
+// The list is not exhaustive and does not need to be: `nearest()` only answers
+// when a name is within edit distance 2 of something known, so a property this
+// file has never heard of is reported as a typo **only** when a real property
+// is one or two keystrokes away. A missing entry costs a missed typo, never a
+// false accusation against valid CSS.
+
+/** Properties the typo check compares against. */
+export const KNOWN_PROPERTIES = new Set([
+    "accent-color",
+    "align-content",
+    "align-items",
+    "align-self",
+    "all",
+    "animation",
+    "animation-delay",
+    "animation-direction",
+    "animation-duration",
+    "animation-fill-mode",
+    "animation-iteration-count",
+    "animation-name",
+    "animation-play-state",
+    "animation-timing-function",
+    "appearance",
+    "aspect-ratio",
+    "backdrop-filter",
+    "backface-visibility",
+    "background",
+    "background-attachment",
+    "background-blend-mode",
+    "background-clip",
+    "background-color",
+    "background-image",
+    "background-origin",
+    "background-position",
+    "background-repeat",
+    "background-size",
+    "block-size",
+    "border",
+    "border-block",
+    "border-block-end",
+    "border-block-start",
+    "border-bottom",
+    "border-bottom-color",
+    "border-bottom-left-radius",
+    "border-bottom-right-radius",
+    "border-bottom-style",
+    "border-bottom-width",
+    "border-collapse",
+    "border-color",
+    "border-end-end-radius",
+    "border-end-start-radius",
+    "border-image",
+    "border-inline",
+    "border-inline-end",
+    "border-inline-start",
+    "border-left",
+    "border-left-color",
+    "border-left-style",
+    "border-left-width",
+    "border-radius",
+    "border-right",
+    "border-right-color",
+    "border-right-style",
+    "border-right-width",
+    "border-spacing",
+    "border-start-end-radius",
+    "border-start-start-radius",
+    "border-style",
+    "border-top",
+    "border-top-color",
+    "border-top-left-radius",
+    "border-top-right-radius",
+    "border-top-style",
+    "border-top-width",
+    "border-width",
+    "bottom",
+    "box-decoration-break",
+    "box-shadow",
+    "box-sizing",
+    "break-after",
+    "break-before",
+    "break-inside",
+    "caption-side",
+    "caret-color",
+    "clear",
+    "clip-path",
+    "color",
+    "color-scheme",
+    "column-count",
+    "column-gap",
+    "column-rule",
+    "column-span",
+    "column-width",
+    "columns",
+    "contain",
+    "container",
+    "container-name",
+    "container-type",
+    "content",
+    "content-visibility",
+    "counter-increment",
+    "counter-reset",
+    "counter-set",
+    "cursor",
+    "direction",
+    "display",
+    "empty-cells",
+    "field-sizing",
+    "filter",
+    "flex",
+    "flex-basis",
+    "flex-direction",
+    "flex-flow",
+    "flex-grow",
+    "flex-shrink",
+    "flex-wrap",
+    "float",
+    "font",
+    "font-family",
+    "font-feature-settings",
+    "font-kerning",
+    "font-optical-sizing",
+    "font-size",
+    "font-size-adjust",
+    "font-stretch",
+    "font-style",
+    "font-synthesis",
+    "font-variant",
+    "font-variant-numeric",
+    "font-variation-settings",
+    "font-weight",
+    "forced-color-adjust",
+    "gap",
+    "grid",
+    "grid-area",
+    "grid-auto-columns",
+    "grid-auto-flow",
+    "grid-auto-rows",
+    "grid-column",
+    "grid-column-end",
+    "grid-column-start",
+    "grid-row",
+    "grid-row-end",
+    "grid-row-start",
+    "grid-template",
+    "grid-template-areas",
+    "grid-template-columns",
+    "grid-template-rows",
+    "hanging-punctuation",
+    "height",
+    "hyphens",
+    "image-rendering",
+    "inline-size",
+    "inset",
+    "inset-block",
+    "inset-block-end",
+    "inset-block-start",
+    "inset-inline",
+    "inset-inline-end",
+    "inset-inline-start",
+    "isolation",
+    "justify-content",
+    "justify-items",
+    "justify-self",
+    "left",
+    "letter-spacing",
+    "line-break",
+    "line-clamp",
+    "line-height",
+    "list-style",
+    "list-style-image",
+    "list-style-position",
+    "list-style-type",
+    "margin",
+    "margin-block",
+    "margin-block-end",
+    "margin-block-start",
+    "margin-bottom",
+    "margin-inline",
+    "margin-inline-end",
+    "margin-inline-start",
+    "margin-left",
+    "margin-right",
+    "margin-top",
+    "mask",
+    "mask-image",
+    "mask-position",
+    "mask-repeat",
+    "mask-size",
+    "max-block-size",
+    "max-height",
+    "max-inline-size",
+    "max-width",
+    "min-block-size",
+    "min-height",
+    "min-inline-size",
+    "min-width",
+    "mix-blend-mode",
+    "object-fit",
+    "object-position",
+    "offset",
+    "opacity",
+    "order",
+    "outline",
+    "outline-color",
+    "outline-offset",
+    "outline-style",
+    "outline-width",
+    "overflow",
+    "overflow-anchor",
+    "overflow-block",
+    "overflow-clip-margin",
+    "overflow-inline",
+    "overflow-wrap",
+    "overflow-x",
+    "overflow-y",
+    "overscroll-behavior",
+    "overscroll-behavior-x",
+    "overscroll-behavior-y",
+    "padding",
+    "padding-block",
+    "padding-block-end",
+    "padding-block-start",
+    "padding-bottom",
+    "padding-inline",
+    "padding-inline-end",
+    "padding-inline-start",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "page",
+    "page-break-after",
+    "page-break-before",
+    "page-break-inside",
+    "paint-order",
+    "perspective",
+    "perspective-origin",
+    "place-content",
+    "place-items",
+    "place-self",
+    "pointer-events",
+    "position",
+    "print-color-adjust",
+    "quotes",
+    "resize",
+    "right",
+    "rotate",
+    "row-gap",
+    "scale",
+    "scroll-behavior",
+    "scroll-margin",
+    "scroll-padding",
+    "scroll-snap-align",
+    "scroll-snap-stop",
+    "scroll-snap-type",
+    "scrollbar-color",
+    "scrollbar-gutter",
+    "scrollbar-width",
+    "shape-outside",
+    "tab-size",
+    "table-layout",
+    "text-align",
+    "text-align-last",
+    "text-decoration",
+    "text-decoration-color",
+    "text-decoration-line",
+    "text-decoration-style",
+    "text-decoration-thickness",
+    "text-emphasis",
+    "text-indent",
+    "text-justify",
+    "text-orientation",
+    "text-overflow",
+    "text-rendering",
+    "text-shadow",
+    "text-transform",
+    "text-underline-offset",
+    "text-underline-position",
+    "text-wrap",
+    "top",
+    "touch-action",
+    "transform",
+    "transform-box",
+    "transform-origin",
+    "transform-style",
+    "transition",
+    "transition-behavior",
+    "transition-delay",
+    "transition-duration",
+    "transition-property",
+    "transition-timing-function",
+    "translate",
+    "unicode-bidi",
+    "user-select",
+    "vertical-align",
+    "view-transition-name",
+    "visibility",
+    "white-space",
+    "white-space-collapse",
+    "widows",
+    "width",
+    "will-change",
+    "word-break",
+    "word-spacing",
+    "writing-mode",
+    "z-index",
+    "zoom",
+    // SVG presentation attributes usable as CSS properties.
+    "fill",
+    "fill-opacity",
+    "fill-rule",
+    "stroke",
+    "stroke-dasharray",
+    "stroke-dashoffset",
+    "stroke-linecap",
+    "stroke-linejoin",
+    "stroke-opacity",
+    "stroke-width",
+]);
+
+/** At-rules the typo check compares against. */
+export const KNOWN_AT_RULES = new Set([
+    "charset",
+    "container",
+    "counter-style",
+    "document",
+    "font-face",
+    "font-feature-values",
+    "font-palette-values",
+    "import",
+    "keyframes",
+    "layer",
+    "media",
+    "namespace",
+    "page",
+    "property",
+    "scope",
+    "starting-style",
+    "supports",
+    "view-transition",
+]);
+
+/** Vendor prefixes: never flagged, and never suggested as a fix. */
+const VENDOR = /^-(webkit|moz|ms|o|apple|epub|khtml)-/;
+
+/** True when a property name is out of scope for the typo check. */
+export function isCheckableProperty(prop) {
+    return !prop.startsWith("--") && !VENDOR.test(prop) && /^[a-z][a-z-]*$/.test(prop);
+}
+
+/**
+ * Levenshtein distance, abandoned as soon as it exceeds `max`.
+ *
+ * @param {string} a
+ * @param {string} b
+ * @param {number} max
+ * @returns {number} The distance, or `max + 1` when it is larger than `max`.
+ */
+export function distance(a, b, max = 2) {
+    if (a === b) return 0;
+    if (Math.abs(a.length - b.length) > max) return max + 1;
+    let prev = Array.from({ length: b.length + 1 }, (_, i) => i);
+    for (let i = 1; i <= a.length; i += 1) {
+        const row = [i];
+        let best = i;
+        for (let j = 1; j <= b.length; j += 1) {
+            const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+            row[j] = Math.min(prev[j] + 1, row[j - 1] + 1, prev[j - 1] + cost);
+            best = Math.min(best, row[j]);
+        }
+        if (best > max) return max + 1;
+        prev = row;
+    }
+    return prev[b.length] > max ? max + 1 : prev[b.length];
+}
+
+/**
+ * Closest known name to `name`, when one is within `max` edits.
+ *
+ * @param {string} name - The name as written.
+ * @param {Iterable<string>} candidates - Known names to compare against.
+ * @param {number} [max] - Largest edit distance still considered a typo.
+ * @returns {string | null}
+ */
+export function nearest(name, candidates, max = 2) {
+    let best = null;
+    let bestDistance = max + 1;
+    for (const candidate of candidates) {
+        const d = distance(name, candidate, max);
+        if (d < bestDistance) {
+            best = candidate;
+            bestDistance = d;
+            if (d === 1) break;
+        }
+    }
+    return bestDistance <= max ? best : null;
+}