Add granular variable sync preview with selective application #3599
Conversation
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
🦋 Changeset detectedLatest commit: bd3118f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Co-authored-by: six7 <4548309+six7@users.noreply.github.com>
Co-authored-by: six7 <4548309+six7@users.noreply.github.com>
Co-authored-by: six7 <4548309+six7@users.noreply.github.com>
Co-authored-by: six7 <4548309+six7@users.noreply.github.com>
Copilot
AI
changed the title
Copilot finished work on behalf of
six7
September 25, 2025 11:08
|
|
|
Commit SHA:854b7b7e190183e556d922e24b475d0601190cb6 Test coverage results 🧪
|
|
Commit SHA:854b7b7e190183e556d922e24b475d0601190cb6 |
- Ensure collections are created using the same logic as original createLocalVariablesInPlugin - Fix collection/mode determination in handleCreateVariable to properly match themes - Add explicit collectionName for token sets to use 'Default' collection - Prevent variables from being created in separate collections incorrectly This maintains the 1:1 logic where variables are organized by theme groups while only creating the actual changes that were selected in the preview.
- Add debug logs to previewVariableSync to trace token data capture - Add debug logs to applyVariableChanges to trace the creation process - Add debug logs to all setter functions (color, number, string, boolean) - Fix setter functions to properly handle new variables (undefined existingValue) - This should help identify why variables are created with blank values
- Add special handling for TokenTypes.FONT_WEIGHTS that come as arrays - Use token.value[0] for font weight arrays (same as original logic) - This fixes issue where font weights like ['Regular'] were not being set properly - Now font weight variables will get the correct string value instead of 'String value'
- Add normalizeTokenValue() function to handle font weight arrays early - Apply normalization in preview generation, not at variable creation - Store normalized values in tokenData to ensure consistency - This prevents font weights from always appearing as 'changed' in preview - Fixes comparison logic between existing variables and new values - Both preview display and variable creation now use the same normalized values
- Improve getCurrentVariableValue() to properly format Figma variable values
- Add proper handling for color objects (RGB/RGBA) using figmaRGBToHex
- Add proper formatting for variable references, booleans, numbers, strings
- Improve getFormattedTokenValue() to handle complex references properly
- Add comprehensive debug logging to shouldUpdateVariable()
- This fixes 'apples to oranges' comparisons that showed false changes
- Colors now compare '#2d3748' vs '#2d3748' instead of '[object Object]' vs '#2d3748'
- References compare '{dimension.xs}' vs '{dimension.xs}' properly
- Modify getFormattedTokenValue() to use resolved values instead of rawValue expressions
- Only treat as reference if the resolved VALUE contains unresolved curly braces
- Add proper handling for empty/null/undefined token values
- Add comprehensive debug logging to token set processing
- This should fix issues where preview showed '{dimension.xs} * {dimension.scale}'
but actual resolved value was '8', causing false change detection
- Now both current and new values should show actual resolved numbers/strings
- Resolve variable aliases to their actual values instead of showing as references
- Add proper rounding (3 decimal places) to prevent precision mismatches
- Try to resolve referenced variables to numbers/strings/colors when possible
- Only show as reference when the value truly can't be resolved
- Apply consistent rounding to both current and new values for comparison
- This should fix: 'Current: {dimension.xs} New: 4' → 'Current: 4 New: 4'
- And: 'Current: 13.600000381469727 New: 13.6' → 'Current: 13.6 New: 13.6'
- Improve mode-aware reference resolution (same collection = same mode, different collection = find matching mode name)
- Add smart reference comparison to avoid resolving references unnecessarily
- When both current and new values are references, compare reference names directly
- Only fallback to value comparison when reference comparison fails
- Add comprehensive debug logging for mode selection and reference resolution
- Fix TypeScript type issues with VariableAlias type checking
- This should fix issues where Light/Dark mode variables got wrong values
- And where {accent.default} vs #7f9cf5 showed as different when referencing same value
- Reduce verbose debug output to essential information - Focus on mode-specific operations: CREATE/UPDATE with mode names - Show variable values and reference resolution clearly - Remove excessive object dumping and repetitive logs - Key logs now: variable reads, reference chains, update decisions - This should make it easier to identify Dark mode creation/update issues
- Change preview logic from theme-centric to collection-centric approach - Group themes by collection name and process all tokens from all modes - Ensure each variable gets preview entries for ALL modes in its collection - Fix issue where only first mode was updated in Light/Dark collections - Resolve 'second mode is never updated' problem - Clean up duplicate function definitions and fix linting issues - Add progress tracking document for future reference Fixes the core multi-mode variable processing issue in variable sync preview.
- Add theme selection and processing visibility - Show token generation statistics per theme - Log UPDATE/SKIP/CREATE decisions per theme - Add final summary breakdown by mode - Reduce debug noise, focus on critical decision points - Ready to identify why Dark mode shows 'No changes' This will help determine: - Whether Dark theme is processed at all - Whether tokens are generated for Dark theme - What comparison logic causes false 'no changes'
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Problem
The current variable synchronization process automatically updates all variables, including existing ones. For teams with formal review and version control processes, this behavior is risky as it provides no visibility into what changes will be made before they're applied.
Solution
This PR implements a comprehensive Variable Sync Preview system that shows users exactly what will change before any variables are created, updated, or deleted. Users can then selectively choose which changes to apply.
Key Features
🔍 Sync Preview Modal
⚙️ Granular Control
🚀 Optimized Architecture
Technical Implementation
New Async Messages:
Enhanced UI Flow:
Example Preview Output:
Benefits
This addresses the core need for safer variable syncing while maintaining the existing workflow for users who want to apply all changes automatically.
Original prompt
💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.