| 1 | import assert from "node:assert/strict"; |
| 2 | import { mkdtempSync, writeFileSync, rmSync } from "node:fs"; |
| 3 | import { tmpdir } from "node:os"; |
| 4 | import { join } from "node:path"; |
| 5 | import { checkCssFile } from "./check-css-syntax.mjs"; |
| 6 | |
| 7 | const fixture = mkdtempSync(join(tmpdir(), "reasonix-css-syntax-")); |
| 8 | const check = (source) => { |
| 9 | const file = join(fixture, "fixture.css"); |
| 10 | writeFileSync(file, source); |
| 11 | return checkCssFile(file, "fixture.css"); |
| 12 | }; |
| 13 | |
| 14 | try { |
| 15 | // A selector list may span lines as long as every line but the last ends with |
| 16 | // a comma, and a declaration value may wrap across lines. Neither is damage. |
| 17 | assert.deepEqual(check(".a,\n.b,\n.c {\n color: red;\n}\n"), []); |
| 18 | assert.deepEqual(check(".a {\n background: linear-gradient(\n 180deg,\n red,\n blue\n );\n}\n"), []); |
| 19 | assert.deepEqual(check("@media (max-width: 820px) {\n .a { color: red; }\n}\n"), []); |
| 20 | assert.deepEqual(check(".a {\n color: red\n}\n"), [], "a final declaration may omit its semicolon"); |
| 21 | |
| 22 | // The regression this guard exists for: a rule lost its declaration block, so |
| 23 | // its selectors run into the next rule. The parser swallows the block that |
| 24 | // follows and the damage never shows up in the browser. |
| 25 | const glued = check(".workbench-dock__tabs\n\n.workbench-dock__tab\n\n@container (max-width: 520px) {\n .x { width: 100%; }\n}\n"); |
| 26 | assert.equal(glued.length, 1); |
| 27 | assert.match(glued[0], /fixture\.css:\d+:\d+/); |
| 28 | assert.match(glued[0], /"\.workbench-dock__tabs"/); |
| 29 | |
| 30 | // Orphans glued to a plain style rule are reported at every site, not just |
| 31 | // the first, so one run lists the whole repair. |
| 32 | const several = check(".a\n\n.b\n\n.first { color: red; }\n.p, .q { color: blue; }\n.c\n\n.d\n\n.second { color: green; }\n"); |
| 33 | assert.equal(several.length, 2); |
| 34 | assert.match(several[0], /"\.a"/); |
| 35 | assert.match(several[1], /"\.c"/); |
| 36 | |
| 37 | // Delimiter damage still short-circuits before the selector pass. |
| 38 | assert.match(check(".a { color: red;\n")[0], /opening brace/); |
| 39 | assert.match(check(".a { color: red; }\n}\n")[0], /closing brace/); |
| 40 | |
| 41 | console.log("check-css-syntax: orphaned-selector guard contracts hold"); |
| 42 | } finally { |
| 43 | rmSync(fixture, { recursive: true, force: true }); |
| 44 | } |
| 45 |