Skip to content

Add stylelint for CSS not covered by Biome#265

Merged
twschiller merged 1 commit into
mainfrom
add-stylelint
Jun 15, 2026
Merged

Add stylelint for CSS not covered by Biome#265
twschiller merged 1 commit into
mainfrom
add-stylelint

Conversation

@twschiller

Copy link
Copy Markdown
Contributor

What

Adds stylelint (extending stylelint-config-standard) to lint CSS that Biome cannot reach. Biome formats standalone .css files, but it does not parse CSS embedded in HTML or Astro <style> blocks — so the extension popup/options styles and the docs component styles were previously unlinted.

Scope

Package Target Notes
extension <style> in src/popup.html, src/options.html via postcss-html; BEM class pattern + no-descending-specificity disabled (component-grouped CSS)
demo-site src/**/*.css adds stylelint-config-tailwindcss so Tailwind's at-rules aren't flagged
docs scoped <style> in *.astro via postcss-html; custom-property-pattern disabled (Starlight --sl-* tokens)

Integration

  • Folded into each package's existing check script, so it runs in the current CI jobs (extension preflight, demo-site check, docs check) — no ci.yml changes needed.
  • Added pre-commit local hooks for extension + demo-site, mirroring the existing ESLint local-hook pattern. docs has no pre-commit hook because the pre-commit CI job only installs extension + demo-site deps; docs CSS is covered by the docs CI check.
  • Each package gets a self-contained stylelint.config.js (matching the per-package ESLint convention).

Existing CSS changes (auto-fix)

Ran --fix on the existing styles to conform to config-standard:

  • Blank lines inserted between rules (rule-empty-line-before).
  • Modern color/media notation (rgb(0 0 0 / …), (width <= 50rem)).
  • The deprecated clip: rect(...) visually-hidden technique swapped for clip-path: inset(50%) (Chromium-only target, fully supported).

Verification

bun run check passes in all three packages, knip stays clean (extension), and the new pre-commit stylelint hooks pass.

🤖 Generated with Claude Code

Biome formats standalone .css files but does not parse CSS embedded in
HTML or Astro <style> blocks, so the popup/options styles and the docs
component styles were unlinted. Add stylelint (config-standard) to each
package that has CSS:

- extension: lints the <style> blocks in src/popup.html and
  src/options.html via postcss-html. BEM class pattern and
  no-descending-specificity are disabled (component-grouped CSS).
- demo-site: lints src/**/*.css, with stylelint-config-tailwindcss for
  Tailwind's at-rules.
- docs: lints the scoped <style> in .astro components via postcss-html.

Wired into each package's `check` script (so it runs in the existing CI
jobs and `preflight`) plus pre-commit hooks for extension + demo-site,
mirroring the ESLint local-hook pattern. Existing CSS auto-fixed to
conform (blank lines between rules, modern color/media notation); the
deprecated `clip` visually-hidden technique swapped for `clip-path`.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 15, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
agent-browser-shield-demo-site Ready Ready Preview, Comment Jun 15, 2026 11:57am

Request Review

@twschiller twschiller merged commit 77514b6 into main Jun 15, 2026
7 checks passed
@twschiller twschiller deleted the add-stylelint branch June 15, 2026 12:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant