feat: show CSS color functions as swatches

KNOWLEDGE_BASE.md

@@ -210,7 +210,7 @@ Typing **@** in a composer opens developer suggestions. Use ↑/↓ to move, Ent
 
 Typing **#123** in a composer looks up that exact issue or pull request in the /dev/null repository, `dev-null-sh/dev-null.sh`. The matching title appears beneath the number; click it or use Enter or Tab to insert its GitHub URL, just like choosing an emoji suggestion. A space or punctuation leaves the number as typed and dismisses the suggestion. Missing numbers and failed lookups leave the text unchanged. Code, URL fragments, and references qualified with another repository are not expanded.
 
-A hex color such as `#ff8a4c` or `#fff` shows with a small swatch of the color, outside code. A color written only with digits counts when it has 6 or 8 digits or starts with a zero, which issue numbers here don't: `#000`, `#000000` and `#333333` are colors, while `#123` and `#333` stay plain text.
+A hex color such as `#ff8a4c` or `#fff`, or a CSS color function such as `rgb(255 138 76)`, `hsl(20 100% 65%)` or `oklch(0.75 0.15 50)`, shows with a small swatch of the color, outside code. A color function needs three numbers, separated by spaces with an optional `/ alpha`, or in `rgb()` and `hsl()` also by commas with an optional fourth. A color written only with digits counts when it has 6 or 8 digits or starts with a zero, which issue numbers here don't: `#000`, `#000000` and `#333333` are colors, while `#123` and `#333` stay plain text.
 
 Sources: [body renderer](resources/js/components/commit-body.tsx), [colors](resources/js/lib/colors.ts), [code blocks](resources/js/components/code-block.tsx), [mention suggestions](app/Http/Controllers/MentionSuggestionController.php), [mention parsing](app/Services/Mentions.php).
 

resources/js/components/linkified-text.tsx

@@ -11,7 +11,7 @@ import { GitLabIcon } from '@/components/gitlab-icon';
 import { UserPreview } from '@/components/user-preview';
 import { typedProse, withoutCode } from '@/lib/code';
 import type { Color } from '@/lib/colors';
-import { colorsIn } from '@/lib/colors';
+import { colorsIn, cssColor } from '@/lib/colors';
 import { mentionPattern } from '@/lib/mentions';
 import {
     hrefFor,
@@ -622,7 +622,7 @@ function withWordmarks(
 }
 
 /**
- * The hex colors found in the whole text that fall in this slice of it, as their value with a swatch of the color.
+ * The colors found in the whole text that fall in this slice of it, as their value with a swatch of the color.
  */
 function withColors(
     text: string,
@@ -654,7 +654,7 @@ function withColors(
                 <span
                     aria-hidden="true"
                     className="mr-0.5 inline-block size-[0.75em] rounded-sm border border-border align-[-0.05em]"
-                    style={{ backgroundColor: `#${color.value}` }}
+                    style={{ backgroundColor: cssColor(color) }}
                 />
                 {text.slice(index, index + color.length)}
             </span>,

resources/js/lib/colors.ts

@@ -7,24 +7,51 @@ const colorPattern =
     // oxlint-disable-next-line no-misleading-character-class
     /(?:(?<!\S)|(?<=\n>))[#\uFF03]([0-9a-f]{8}|[0-9a-f]{6}|(?=[0-9]*[a-f]|0)[0-9a-f]{3,4})(?=\p{P}*(?:[\s\u00AD\u2060\u200A-\u200D\u20E2]|$))/giu;
 
+// A channel of a color function, like "255", "0.75", "65%" or "50deg".
+const channel = String.raw`[+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:%|deg)?`;
+
+// A CSS color function like "rgb(255 138 76)", "hsl(20 100% 65%)" or "oklch(0.75 0.15 50 / 50%)", a whole word like a hex
+// color. Its three channels are on one line, separated by spaces with an optional "/ alpha" or, in rgb() and hsl() only, by
+// commas with an optional fourth, so "rgb(1, 2 3)", "lab(1, 2, 3)" and "hsl(1 2 3 4)" stay text.
+const colorFunctionPattern = new RegExp(
+    String.raw`(?:(?<!\S)|(?<=\n>))(?:(?:rgba?|hsla?|(?:ok)?lab|(?:ok)?lch)\([ \t]*${channel}[ \t]+${channel}[ \t]+${channel}(?:[ \t]*/[ \t]*${channel})?|(?:rgba?|hsla?)\([ \t]*${channel}[ \t]*,[ \t]*${channel}[ \t]*,[ \t]*${channel}(?:[ \t]*,[ \t]*${channel})?)[ \t]*\)(?=\p{P}*(?:[\s\u00AD\u2060\u200A-\u200D\u20E2]|$))`,
+    'giu',
+);
+
+/**
+ * A hex color's digits, without the "#", or a whole color function, as written.
+ */
 export type Color = {
     value: string;
     index: number;
     length: number;
 };
 
 /**
- * The hex colors in a run of prose, where they are and how long they are with the "#". When the prose starts a whole
- * body, its start is the start of a line, so a ">" there starts a quoted line.
+ * The hex colors and color functions in a run of prose, in order, where they are and how long they are as written. When
+ * the prose starts a whole body, its start is the start of a line, so a ">" there starts a quoted line.
  */
 export function colorsIn(text: string, startsText = false): Color[] {
     const start = startsText ? 1 : 0;
+    const prose = startsText ? `\n${text}` : text;
 
-    return [...(startsText ? `\n${text}` : text).matchAll(colorPattern)].map(
-        (match) => ({
+    return [
+        ...[...prose.matchAll(colorPattern)].map((match) => ({
             value: match[1],
             index: match.index - start,
             length: match[0].length,
-        }),
-    );
+        })),
+        ...[...prose.matchAll(colorFunctionPattern)].map((match) => ({
+            value: match[0],
+            index: match.index - start,
+            length: match[0].length,
+        })),
+    ].sort((a, b) => a.index - b.index);
+}
+
+/**
+ * What a color's swatch is painted with: a hex color's digits with their "#", or a color function as written.
+ */
+export function cssColor(color: Color): string {
+    return color.value.endsWith(')') ? color.value : `#${color.value}`;
 }

tests/Unit/Colors.test.ts

@@ -1,6 +1,6 @@
 import assert from 'node:assert/strict';
 import { test } from 'node:test';
-import { colorsIn } from '../../resources/js/lib/colors.ts';
+import { colorsIn, cssColor } from '../../resources/js/lib/colors.ts';
 
 const values = (text: string) => colorsIn(text).map((color) => color.value);
 
@@ -70,3 +70,49 @@ await test('ends a hex color at a zero-width character, as a hashtag ends', () =
     assert.deepEqual(values('#fff\u200Bnext and #abc\u2060'), ['fff', 'abc']);
     assert.deepEqual(values('#fff\u200Cx'), ['fff']);
 });
+
+await test('finds CSS color functions as whole words, in order with hex colors', () => {
+    assert.deepEqual(
+        values(
+            'Use rgb(255 138 76), #fff, rgba(255, 138, 76, 0.5), hsl(20, 100%, 65%) or HSL(20 100% 65% / 50%)!\n>oklch(0.75 0.15 50deg) oklab(.7 -.1 .1) lab(52% 40 59) lch(52% 72 56)',
+        ),
+        [
+            'rgb(255 138 76)',
+            'fff',
+            'rgba(255, 138, 76, 0.5)',
+            'hsl(20, 100%, 65%)',
+            'HSL(20 100% 65% / 50%)',
+            'oklch(0.75 0.15 50deg)',
+            'oklab(.7 -.1 .1)',
+            'lab(52% 40 59)',
+            'lch(52% 72 56)',
+        ],
+    );
+});
+
+await test('ignores what only looks like a CSS color function', () => {
+    for (const text of [
+        'rgb()',
+        'rgb(1 2)',
+        'rgb(a b c)',
+        'rgb(1, 2 3)',
+        'lab(52%, 40, 59)',
+        'oklch(0.75, 0.15, 50)',
+        'hsl(1 2 3 4)',
+        'rgb(1 2 3)px',
+        'xrgb(1 2 3)',
+        '(rgb(1 2 3))',
+        'color(srgb 1 0 0)',
+        'rgb(1\n2 3)',
+        'rgba(\n0, 0, 0, 0.5\n)',
+    ]) {
+        assert.deepEqual(values(text), [], text);
+    }
+});
+
+await test('paints a swatch with the color as written', () => {
+    assert.deepEqual(
+        colorsIn('#ff8a4c and oklch(0.75 0.15 50)').map(cssColor),
+        ['#ff8a4c', 'oklch(0.75 0.15 50)'],
+    );
+});