fix(design-sanitize): stop nuking CSS on scroll-behavior

[echobt]

Summary

• Root cause of ugly screenshots: filter_css treated any behavior: substring as IE XSS CSS, so legitimate scroll-behavior:smooth wiped entire <style> blocks. Chromium then screenshotted class-only HTML → unstyled pages. Confirmed on prod (e.g. ClearRail run with full design system CSS in raw, zero <style> after sanitize).
• Fix: match only the IE behavior: property (not suffixes), soft-strip @import …; while keeping remaining rules, keep hard-nuke for expression( / url(javascript: / -moz-binding.
• Docs: clarify that external <link rel=stylesheet> / Tailwind CDN is stripped (expected); miners must embed CSS; document reject taxonomy for miners.

Prod evidence (master, design_run)

• ~21 recent runs lost all <style> via the scroll-behavior false positive (css_stripped + css_blocked).
• Styled vs bare screenshots compared: kept-style looks designed; nuked-style is default browser chrome.
• External <link> strip is intentional (security); not the dominant prod failure mode right now.

Reject taxonomy (terminal runs ≈163)

Status	Count	%	Why
scored	105	64%	Clean (or legacy cheat-scored)
rejected	33	20%	All pre-LLM copy gate (near_identical_harness_copy / ast_architecture_copy)
failed	22	14%	18× harness NoneType.__dict__, 4× stuck timeout
awaiting_admin	3	2%	Clean, waiting for winners

Test plan

• cargo test -p design-sanitize
• xtask design-check / external-docs-check
• After promote: new runs with scroll-behavior keep CSS in screenshots
• Ops follow-up: re-sanitize stored raw_html + backfill-screenshots (or force recapture) for historical ugly PNGs — existing artifacts stay broken until reprocessed

Deploy note

Does not touch metagraph cache / real-seal. Promote design-challenge (+ any image that vendors design-sanitize). Historical screenshots need a one-shot re-sanitize from design_artifact.raw_html then screenshot backfill.

Summary by CodeRabbit

• Bug Fixes

  • Improved CSS sanitization to preserve safe presentation styles such as scroll-behavior.
  • Continued blocking dangerous CSS patterns, including IE-specific behavior: rules.
  • Preserved valid style rules when removing unsafe @import statements.
  • Prevented safe CSS comments and constructs from causing entire style blocks to be removed.

• Documentation

  • Clarified CSS sanitization rules, supported styling methods, external stylesheet restrictions, and run rejection conditions.

[coderabbitai]

Warning

Review limit reached

@echobt, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 12 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 01406db5-a372-4093-b24a-b807161ee322

📥 Commits

Reviewing files that changed from the base of the PR and between 24c397b and 6b7f7f5.

📒 Files selected for processing (3)

• crates/design-sanitize/src/lib.rs
• docs/DESIGN_CHALLENGE.md
• docs/external-miner/design.md

📝 Walkthrough

Walkthrough

The CSS sanitizer now soft-strips @import, preserves scroll-behavior, and hard-nukes dangerous CSS. Style block and inline-style handling track stripping separately. Regression tests and sanitizer documentation cover the updated behavior and rendering requirements.

Changes

CSS Sanitization

Layer / File(s)	Summary
CSS filter behavior crates/design-sanitize/src/lib.rs	filter_css now reports stripped content, soft-strips @import, and detects standalone IE behavior: properties.
Style filtering and regression coverage crates/design-sanitize/src/lib.rs	Style blocks and inline styles distinguish soft-stripping from empty results. Tests cover safe presentation CSS, comments, imports, and IE behavior.
Sanitization requirements docs/DESIGN_CHALLENGE.md, docs/external-miner/design.md	Documentation specifies embedded CSS requirements, rejected CSS patterns, allowed image sources, and run outcome causes.

Estimated code review effort: 3 (Moderate) | ~20 minutes

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/design-screenshot-css

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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