Public: anyone can read this; the crew can change it.
`.tok-plain` leaves the stylesheet: the highlighter never writes it #5270
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/5259-tok-plain-leaves-the-stylesheet-the-high → main 1 commit fork
3 files
changed +8
−3
docs/DESIGN.md −1
| @@ -545,7 +545,6 @@ the same line (#4888). | ||
| 545 | 545 | - `.tok-meta` |
| 546 | 546 | - `.tok-number` |
| 547 | 547 | - `.tok-operator` |
| 548 | - `.tok-plain` | |
| 549 | 548 | - `.tok-property` |
| 550 | 549 | - `.tok-punctuation` |
| 551 | 550 | - `.tok-regex` |
src/web/style/content.ts −1
| @@ -383,7 +383,6 @@ form.inline { display: inline; margin-left: auto; } | ||
| 383 | 383 | .tok-type { color: var(--tok-type); } |
| 384 | 384 | .tok-constant { color: var(--tok-constant); } |
| 385 | 385 | .tok-meta { color: var(--tok-meta); } |
| 386 | .tok-plain { color: inherit; } | |
| 387 | 386 | /* Punctuation and operators sit *below* the text colour on purpose: they are |
| 388 | 387 | the scaffolding of a line, and colouring them loudly makes code shout. */ |
| 389 | 388 | .tok-operator { color: var(--tok-operator); } |
test/highlight.test.ts +8 −1
| @@ -28,7 +28,7 @@ import { | ||
| 28 | 28 | type Language, |
| 29 | 29 | type Token, |
| 30 | 30 | } from "../src/web/highlight.ts"; |
| 31 | import { renderTokens, tokenClasses } from "../src/web/highlight-html.ts"; | |
| 31 | import { highlightToLines, renderTokens, tokenClasses } from "../src/web/highlight-html.ts"; | |
| 32 | 32 | import { THEMES, THEME_NAMES } from "../src/design/themes.ts"; |
| 33 | 33 | import { css } from "../src/web/style.ts"; |
| 34 | 34 | |
| @@ -798,6 +798,13 @@ describe("token vocabulary", () => { | ||
| 798 | 798 | if (t.kind) emitted.add(`tok-${t.kind}`); |
| 799 | 799 | } |
| 800 | 800 | |
| 801 | test("plain text gets no tok-plain class and the stylesheet has no rule for it", () => { | |
| 802 | const html = highlightToLines("foo bar", "ts").join("\n"); | |
| 803 | expect(html).toContain("foo"); | |
| 804 | expect(html).not.toContain("tok-plain"); | |
| 805 | expect(css).not.toContain(".tok-plain"); | |
| 806 | }); | |
| 807 | ||
| 801 | 808 | test("every class the fixtures emit has a stylesheet rule", () => { |
| 802 | 809 | for (const name of emitted) { |
| 803 | 810 | if (name === "tok-plain") continue; |
new above
offline