fix: don't use unicodeSets regex feature, fix gradient transparency

[Aeledfyr]

The unicode sets / "v" flag are only supported since mid 2023; this replaces them with [a-fA-F0-9], which matches the CSS spec. https://caniuse.com/mdn-javascript_builtins_regexp_unicodesets

This also fixes support for 8-character #RRGGBBAA color codes. (The length was hardcoded as 7.)

Did you test your code?

I've tested this on desktop Firefox and Chrome on mobile, as well as an older version of Chrome on desktop: 100.0.4896.88-1.1 (which was stuck on a Connecting... screen before this was fixed).

Checklist

• Changes are clear, concise, and easy to review
• Code has been tested and works as intended
• Text/content changes support internationalization (i18n)
• Any new user-facing strings are properly localized

Summary by CodeRabbit

• Bug Fixes
  • Improved gradient color parsing to more reliably detect hex colors, preserving existing gradient appearance and behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: fba9245f-2e38-4436-9a1f-cc87b9c52042

📥 Commits

Reviewing files that changed from the base of the PR and between 06255ba and 2d583a9.

📒 Files selected for processing (1)

• src/components/Markup.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/Markup.tsx

---

📝 Walkthrough

Walkthrough

Replaced Unicode-property based gradient color parsing with an explicit ASCII hex digit regex. Introduced a dedicated HexColorRegex and rebuilt CustomColorExprRegex via string-based RegExp construction using the HexColorRegex sources; group structure and downstream usage remain unchanged.

Changes

Cohort / File(s)	Summary
Color parsing regex and construction src/components/Markup.tsx	Replaced \p{Hex_Digit} Unicode property usage with explicit ASCII hex ranges [a-fA-F0-9] (3–4 and 6–8 lengths). Added a HexColorRegex and reconstructed CustomColorExprRegex via string-based RegExp construction (keeps gradient group structure).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I nibble at hex with careful paws,
Swapping properties for ASCII laws,
Three to eight digits neatly spun,
Regex rebuilt—hop, parse, and run! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main changes: disabling unicodeSets regex feature and fixing gradient transparency/8-char color codes.
Description check	✅ Passed	The description covers the primary change, testing methodology, and completed checklist items; however, it lacks a dedicated 'What does this PR do?' section and omits screenshots.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

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

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/Markup.tsx`:
- Line 82: The current regex in Markup.tsx accepts 7-digit hex colors because it
uses {6,8}; update the hex-length part to require exact allowed lengths
(3,4,6,8) instead of a range. Replace the segment
`[a-fA-F0-9]{3,4}|[a-fA-F0-9]{6,8}` with an exact-length alternation like
`(?:[A-Fa-f0-9]{3}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})` in the regex
literal (the pattern assigned in Markup.tsx that starts with /^(?<colors>#...),
so malformed 7-digit hex like `#1234567` will no longer match and the fallback
behavior will work as intended.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d21448be-585a-4ffa-89e5-2dc2ed45a144

📥 Commits

Reviewing files that changed from the base of the PR and between 14c0d5a and 06255ba.

📒 Files selected for processing (1)

• src/components/Markup.tsx