test: configure lint-css to check a11y and rtl

[alexdln]

In a recent issue (#1116), we removed all hardcoded font-size classes, migrated them to our own inner classes, and agreed to use rem everywhere. We also added an rtl:check step, which checks whether classes comply with rtl patterns. Based on this, I'm adding a check for hardcoded font-size classes and slightly refining the solution to prevent this logic from degrading

I also set up lint-staged support (it passes all files as a list in the format node run-script path-a path-b path-c) and added a script to lint-staged. This should work quickly for most cases and will make debugging easier

I renamed the command to lint:css because it is more familiar to the average developer and formally that's what this script does

Closes #1201

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 8, 2026 10:50am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 8, 2026 10:50am
npmx-lunaria	Ignored		Feb 8, 2026 10:50am

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

Replaces the RTL-only CSS linting with a unified UnoCSS check that includes both RTL and accessibility presets. Adds a new preset module (uno-preset-a11y.ts) that detects hardcoded font-size tokens (px and em), emits deduplicated warnings or routes them to a provided checker, and suggests existing text-size utilities. Introduces scripts/unocss-checker.ts to run checks per-file, updates package.json scripts and lint-staged, includes presetA11y in uno.config.ts (non‑CI), adds unit tests for the a11y preset, and makes a small class change in LicenseDisplay.vue.

Possibly related PRs

• chore: add RTL CSS Checker to autofix #1077: Replaces the standalone RTL checker with a unified unocss-checker and integrates UnoCSS presets — directly related to the checker/script changes in this PR.
• feat: rework fontsize classes with pixels to rem #1116: Introduces text-2xs through text-5xs utility classes that the new a11y preset references and suggests.

Suggested labels

a11y

Suggested reviewers

• danielroe
• userquin

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset, detailing the addition of a11y CSS checks, renaming rtl:check to lint:css, and implementing lint-staged support.
Linked Issues check	✅ Passed	All coding objectives from #1201 are satisfied: hardcoded font-size class detection via presetA11y, RTL pattern validation integration, and lint-staged file-list support implemented.
Out of Scope Changes check	✅ Passed	Changes in app/components/LicenseDisplay.vue updating text-[0.65em] to text-4xs align with the PR's font-size class refactoring objective and are within scope.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

test/unit/uno-preset-a11y.spec.ts (1)

5-93: Consider adding edge case tests for more comprehensive coverage.

The current tests cover the main paths well. For additional robustness, consider adding tests for:

• Empty input (no matching classes)
• Classes that should not trigger warnings (e.g., text-sm, text-base)
• Verifying resetA11yWarnings() correctly clears the deduplication state

This would help ensure the preset handles edge cases gracefully and that the deduplication logic works as expected across multiple generator runs.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

scripts/unocss-checker.ts (1)

38-48: Consider extracting the duplicated callback logic.

The A11y warning handler (lines 38-48) is nearly identical to the RTL handler (lines 27-37), differing only in the label [A11y] vs [RTL]. Extracting a helper function would reduce duplication.

♻️ Suggested refactor

+function createWarningHandler(
+  label: string,
+  warnings: Map<number, string[]>,
+  getContext: () => { idx: number; line: string; filename: string },
+): (warning: string, rule: string) => void {
+  return (warning, rule) => {
+    const { idx, line, filename } = getContext()
+    let entry = warnings.get(idx)
+    if (!entry) {
+      entry = []
+      warnings.set(idx, entry)
+    }
+    const ruleIdx = line.indexOf(rule)
+    entry.push(
+      `${COLORS.red} ❌ [${label}] ${filename}:${idx}${ruleIdx > -1 ? `:${ruleIdx + 1}` : ''} - ${warning}${COLORS.reset}`,
+    )
+  }
+}

Then use it:

const context = { idx: -1, line: '', filename }
const uno = await createGenerator({
  presets: [
    presetWind4(),
    presetRtl(createWarningHandler('RTL', warnings, () => context)),
    presetA11y(createWarningHandler('A11y', warnings, () => context)),
  ],
})
// Update context.idx and context.line in the loop

uno-preset-a11y.ts (1)

21-26: Consider documenting the mapping relationship with uno.config.ts.

The textPxToClass mapping corresponds to custom theme sizes in uno.config.ts (lines 46-49). A brief comment linking these would help maintainers keep them in sync.

📝 Suggested documentation

+// Maps pixel sizes to custom text classes defined in uno.config.ts theme.text
+// Keep in sync with theme configuration
 const textPxToClass: Record<number, string> = {
 }

[userquin]

Nice, I miss this one ❤️ (a11y statement page)