Fix style mode bugs found in deep review#470
Merged
Merged
Conversation
…ailwind fixes Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
commit: |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
2 issues found across 14 files
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
Addresses the two cubic P2 reports plus thermo review findings: - Unit-gate the infinity clamp so a real large z-index keeps its value instead of being rewritten to the bound (css-property-builders.ts). - Skip the numeric->enum fallback for negative-prefixed classes so `-font-700` is a no-op instead of applying font-weight 700. - Extract splitNegativePrefix util to de-duplicate the sign handling. - Derive the tailwind chip table (single source of truth) and POSITION_KEYS from the registry so parallel lists can't drift. - Drop the redundant lastCommittedTweakKey shadow state (derive the last-committed key from insertion order). - Finish the cssKey->propertyKey rename for aggregate-capable keys. - Make the new e2e tests deterministic (poll + setSearchInputValue; non-reflowing border-radius for the out-of-range stepping case).
- Rename the edit-panel "tweak store" to "style store" to match the product's style mode: tweak-store.ts -> style-store.ts and all symbols (createStyleStore, applyStyle, hasPendingStyles, hasChangedStyleFor, stylesByKey, PropertyStyle). Behavior-preserving. - Rename commitTweak -> stepActiveProperty (it steps the active property and delegates to commit) and isUntweakedColor -> isUnchangedColor. - Add an e2e regression for a 3-way overlap (p-6 -> pt-8 -> px-2) that locks the prompt-matches-preview ordering across a full aggregate, a longhand, and an axis aggregate. - De-flake panel opening: share a hoverUntilSelected retry primitive (re-hover, moving the pointer away first) between openEditPanel and enterPromptMode, replacing their divergent ad-hoc hover waits.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 4c7bda4. Configure here.
Locks the (correct) last-write-wins behavior flagged by Bugbot: re- committing a wider aggregate over a prior per-side override fans out to every side in both the preview and the copied prompt, so they never desync. Dropping the covered longhand in applyStyle is what guarantees this — keeping it would show top=28 in the preview but emit top=8.
Collapse thin indirection in the style panel: drop the filteredProperties and isPendingDismiss rename-aliases (use styleStore.filteredProperties() and discardConfirmation.isPending() directly) and inline the stepFromPointer forwarder at its two call sites. Behavior-identical.
getButtonSpacingClass/getMinDimensionClass were one-line ternaries used once each, and both call sites already named the result locally. Inline them and delete the file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes the confirmed bugs from a deep review of style mode (edit panel):
tweak-store.ts): tweaks are now kept in commit-recency order (key re-inserted on commit), tweaks fully covered by a new wider commit are dropped, and a longhand stepped back to its original under a changed aggregate is still emitted in the prompt. Previouslypt-8→p-6→pt-1copied CSS that contradicted the on-screen preview.edit-panel/index.tsx,find-tailwind-class.ts): the chip was keyed offcssProperties[0], so the uniformpaddingrow showedpt-4instead ofp-4. Now keyed offproperty.key, with the comma-joined aggregate spellings (py,px,my,mx,size,inset,inset-x,inset-y) added to the lookup tables.oklch()percentage chroma parsed 100× too small (parse-any-color.ts):parsePercentOrNumberdivides by 100 and multiplied by a per-percent scale of0.004; the scale is now0.4(CSS Color 4: 100% chroma = 0.4). Typing/pastingoklch(70% 60% 25)no longer applies a near-gray.step-property.ts): stepping now widens the range to include the original value, so a 128px heading no longer snaps to 96px when pressing the increase arrow.rounded-fullinfinite radius (css-property-builders.ts): Chromium computescalc(infinity * 1px)to ~3.36e7px; values pastCSS_LENGTH_INFINITY_THRESHOLD_PXare capped to the row's max bound instead of displaying33554400px.sort-properties-by-recommendation.ts):"top,right,bottom,left","left,right","top,bottom"were missing from the rank map, soinset: 0overlays sorted their canonical row below z-index.tailwind-autoapply.ts):-m-4and-mt-[8px]now apply negative values; previously only the non-Tailwind spellingm--4worked.display/width/height(css-baseline-measurement.ts): the baseline clone is forced todisplay: none, so those keys compared as "author-modified" on every element; they now fall back to the heuristic (and thewidth,heightsize row is covered by it).cycle-control.tsx): arrows/label clicks now route throughonStep→commitTweaklike keyboard arrows, so they get the same flash/discard-prompt behavior.Tests
Added e2e regression coverage:
p-2on a uniform-padding row).rounded-fullclamped display.-m-4,-mt-[8px]).Verification
touch-modetest, passed on retry).pnpm build,pnpm typecheck,pnpm lint: clean.pnpm format: clean except a pre-existing issue inskills/react-grab/SKILL.md(untouched by this PR).Summary by cubic
Fixes style mode bugs so the preview and copied prompt stay in sync, Tailwind inputs (including negatives) apply correctly, and numeric/color handling is more robust. Also stabilizes opening the panel in tests.
Bug Fixes
py,px,size,inset,inset-x,inset-y); support canonical and arbitrary negatives (-m-4,-mt-[8px]); block negative-enum leaks (-font-700); derivePOSITION_KEYSfrom the registry.border-radiusfromrounded-fullto the row max for px units only (largez-indexvalues are preserved).oklch()percent chroma scale to 0.4 so inputs likeoklch(70% 60% 25)render correctly.display,width,height, andwidth,height, fall back to the heuristic instead of thedisplay:nonebaseline.onStep→ commit for consistent flash/discard behavior.p-6→pt-8→px-2and aggregate re-commit over a longhand), aggregate hint labels, out-of-range stepping,rounded-fullclamping, and negative Tailwind classes; stabilize with a sharedhoverUntilSelectedhelper for opening the panel.Refactors
createStyleStore,applyStyle,hasPendingStyles,hasChangedStyleFor); renamecommitTweaktostepActiveProperty; completecssKey→propertyKeynaming.styleStore.filteredProperties()anddiscardConfirmation.isPending()directly; inline the pointer step forwarder).utils/toolbar-layout.ts.Written for commit 0541152. Summary will update on new commits.