chore(plugin-vscode): migrate to OKLCH (color → culori)#759
chore(plugin-vscode): migrate to OKLCH (color → culori)#759paanSinghCoder merged 3 commits intomainfrom
Conversation
Convert all 157 token color values across the plugin's TS data files to oklch() strings, matching the apsara CSS token format. Mechanical, byte-identical: every value is byte-identical in 8-bit sRGB after re-parsing the rounded oklch() output, with CIEDE2000 ΔE < 0.5. Files: - src/tokens/primitives/gray.ts (12) - src/tokens/primitives/accent.ts (13) - src/tokens/primitives/appearance.ts (96) - src/tokens/color.ts (24 overlays) - src/tokens/effects.ts (12 shadow rgba) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace the 'color' npm package (no OKLCH support) with culori across
the plugin's color parsing and serialization paths.
- colorToVSCodeColor: parses oklch()/hex/rgb/etc. via culori, returns
VS Code's {red,green,blue,alpha} sRGB shape, clamped to [0, 1]
- VSCodeColorToColor: emits oklch() strings on picker writes so user
edits stay consistent with the apsara design system convention
Bump plugin version 0.1.1 → 0.2.0 (picker writeback format change).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe VS Code plugin was updated to version 0.2.0. The color dependency was changed from Sequence Diagram(s)(Skipped: changes are internal conversions and token value replacements, not multi-component sequential flows.) Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/plugin-vscode/src/lib/utils.ts (1)
1-13: Add regression coverage for the new color pipeline.The parser/serializer swap looks coherent, but a few round-trip cases for
oklch(),transparent,currentColor, andinheritwould help lock down the new behavior.Also applies to: 55-101
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/plugin-vscode/src/lib/utils.ts` around lines 1 - 13, Add regression tests that exercise the parser/serializer round-trip for color inputs `oklch(...)`, `transparent`, `currentColor`, and `inherit` using the same pipeline referenced in the utils module: call parse and then serialize (the serializer used by the plugin) and assert the result is equivalent to the input; specifically exercise conversion paths that use toOklch and toRgb (converter('oklch') / converter('rgb')), and ensure rounding/clamping behavior via round and clamp01 does not break fidelity. Implement tests that feed representative oklch values (including edge cases like zero/chroma extremes), the literal keywords "transparent", "currentColor", and "inherit", and assert that parse -> serialize -> parse produces equivalent color semantics (and that tokens/TOKEN_PREFIX behavior is preserved). Ensure failures are captured as test assertions so regressions in the new color pipeline are caught.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/plugin-vscode/src/lib/utils.ts`:
- Around line 1-13: Add regression tests that exercise the parser/serializer
round-trip for color inputs `oklch(...)`, `transparent`, `currentColor`, and
`inherit` using the same pipeline referenced in the utils module: call parse and
then serialize (the serializer used by the plugin) and assert the result is
equivalent to the input; specifically exercise conversion paths that use toOklch
and toRgb (converter('oklch') / converter('rgb')), and ensure rounding/clamping
behavior via round and clamp01 does not break fidelity. Implement tests that
feed representative oklch values (including edge cases like zero/chroma
extremes), the literal keywords "transparent", "currentColor", and "inherit",
and assert that parse -> serialize -> parse produces equivalent color semantics
(and that tokens/TOKEN_PREFIX behavior is preserved). Ensure failures are
captured as test assertions so regressions in the new color pipeline are caught.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: dc865b7f-53aa-4456-aaa7-221f911e9873
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
packages/plugin-vscode/package.jsonpackages/plugin-vscode/src/lib/utils.tspackages/plugin-vscode/src/tokens/color.tspackages/plugin-vscode/src/tokens/effects.tspackages/plugin-vscode/src/tokens/primitives/accent.tspackages/plugin-vscode/src/tokens/primitives/appearance.tspackages/plugin-vscode/src/tokens/primitives/gray.ts
Replaces culori (~9 KB gzipped) with color-convert. Tokens are now parsed via a small oklch regex and converted via color-convert's oklch <-> rgb routes, with manual unit scaling (CSS L 0-1 / C 0-~0.4 vs color-convert's 0-100 range) and a chroma=0 hue pin (color-convert returns an arbitrary hue for grays). A type shim covers color-convert's missing oklch types in 3.1.3. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
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 `@packages/plugin-vscode/src/lib/utils.ts`:
- Around line 15-16: The OKLCH_REGEX (and the similar regexes around lines
73-79) use [\d.]+ which permits malformed numbers like "0..5" or ".", so update
those regexes to use a strict numeric token (e.g., match either an integer or a
decimal with at most one dot and optional leading/trailing digits such as
(?:\d+(\.\d+)?|\.\d+)) for each numeric capture group; then keep the existing
parseFloat usage so invalid strings no longer reach parseFloat and the function
can correctly return null on invalid input.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2bab1eb2-8337-4d6f-a126-12da7d9c176c
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
packages/plugin-vscode/package.jsonpackages/plugin-vscode/src/lib/utils.tspackages/plugin-vscode/tsconfig.json
✅ Files skipped from review due to trivial changes (2)
- packages/plugin-vscode/tsconfig.json
- packages/plugin-vscode/package.json
| const OKLCH_REGEX = | ||
| /^\s*oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\s*\)\s*$/; |
There was a problem hiding this comment.
Tighten the OKLCH numeric matcher.
[\d.]+ accepts malformed components like 0..5 or ., and the later parseFloat call will truncate or return NaN instead of failing closed. That breaks the null-on-invalid-input contract here.
Proposed fix
+const OKLCH_NUMBER = String.raw`(?:\d+\.?\d*|\.\d+)`;
const OKLCH_REGEX =
- /^\s*oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\s*\)\s*$/;
+ new RegExp(
+ String.raw`^\s*oklch\(\s*(${OKLCH_NUMBER})\s+(${OKLCH_NUMBER})\s+(${OKLCH_NUMBER})(?:\s*\/\s*(${OKLCH_NUMBER}))?\s*\)\s*$`
+ );
…
const l = Number.parseFloat(lStr) * CSS_TO_CC;
const c = Number.parseFloat(cStr) * CSS_TO_CC;
const h = Number.parseFloat(hStr);
const alpha = aStr === undefined ? 1 : Number.parseFloat(aStr);
+ if (![l, c, h, alpha].every(Number.isFinite)) {
+ return null;
+ }Also applies to: 73-79
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/plugin-vscode/src/lib/utils.ts` around lines 15 - 16, The
OKLCH_REGEX (and the similar regexes around lines 73-79) use [\d.]+ which
permits malformed numbers like "0..5" or ".", so update those regexes to use a
strict numeric token (e.g., match either an integer or a decimal with at most
one dot and optional leading/trailing digits such as (?:\d+(\.\d+)?|\.\d+)) for
each numeric capture group; then keep the existing parseFloat usage so invalid
strings no longer reach parseFloat and the function can correctly return null on
invalid input.
rohanchkrabrty
left a comment
rohanchkrabrty
left a comment
There was a problem hiding this comment.
Check if color-convert can be used directly to generate string, instead of computing the string. If we don't use raw function, the library handles the rounding part for us too.
|
@rohanchkrabrty Checked. No oklch stringifier. color-convert only stringifies rgb.hex ("FF0000"). Every oklch path returns a numeric tuple thus we still need the oklch(${L} ${C} ${H}) template. PR good to go. |
3 participants
Summary
oklch()to match the apsara CSS migrationcolornpm package forculori(the old one can't parseoklch())Screen.Recording.2026-04-28.at.2.50.22.PM.mov