fix: accept fr units in the CSS snippet linter - #597

Summary

The CSS snippet editor shows a lint error on valid grid code like grid-template-columns: minmax(0, 1fr) minmax(0, 1fr). The CSSLint version bundled with WordPress (1.0.4) does not know the fr unit, so it reports "Unexpected token '1fr'" or "Expected RBRACE". This change wraps the CSS lint helper so CSSLint sees px in place of fr. The saved code is not touched.

Fixes #380

Changes

src/js/entries/editor.ts

Before:
The lint/css helper registered by WordPress ran CSSLint on the raw editor text.

After:

const cssLint = (<{ lint?: Record<string, LintHelper> }> <unknown> CodeMirror).lint?.css

// CSSLint rejects the fr unit, so lint with px in its place. Both are two characters, which keeps marker positions.
if (cssLint) {
	registerHelper('lint', 'css', (text: string, ...args: unknown[]) =>
		cssLint(text.replace(/(?<digit>\d)fr\b/gi, '$1px'), ...args))
}

Why: fr and px have the same length, so line and column of any real error stay the same. The lint options and the editor instance are passed through as they are. If the WordPress helper is missing, nothing changes.

tests/e2e/css-lint-fr-units.spec.ts

New Playwright test. It first adds broken CSS and waits for an error mark, so we know the linter ran. Then it adds fr grid code and expects no error marks.

Testing

Test 1: Reported case

1. Add a new snippet with type Styles.
2. Paste .a { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }.
   Result: no lint error.

Test 2: Other fr forms

1. Paste repeat(3, 1fr), .5fr 2.25FR and grid-template: "a b" 1fr / 1fr 2fr; in a CSS snippet.
   Result: no lint error.

Test 3: Real errors still work

1. Paste a rule with 1fr and a missing closing brace.
   Result: one error on the missing brace line, with the same line and column as before.
2. Paste .a { width: 10foo; }.
   Result: still flagged.

Test 4: No regressions

1. PHP snippet with a syntax error still shows its lint mark.
2. Save a CSS snippet that uses fr.
   Result: saved code still has fr.

Note: fr in a place where CSS does not allow it (for example width: 1fr) is no longer flagged. Before this change it was only flagged by the same parse error that valid grid code got. Other CSSLint gaps (named grid lines, gap, custom properties) are out of scope here.