-
-
Notifications
You must be signed in to change notification settings - Fork 367
Add Opt-in to exported CSS Vars and clean generated CSS code #200
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Add Opt-in to exported CSS Vars and clean generated CSS code #200
Conversation
@llanesluis is attempting to deploy a commit to the tweakcn OSS program Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughA new boolean preference, Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CodePanel
participant PreferencesStore
participant ThemeStyleGenerator
User->>CodePanel: Open Preferences popover
User->>CodePanel: Toggle "Include font variables" switch
CodePanel->>PreferencesStore: setIncludeFontVariables(value)
CodePanel->>ThemeStyleGenerator: generateThemeCode(..., { includeFontVariables })
ThemeStyleGenerator-->>CodePanel: Return generated CSS with/without font variables
CodePanel-->>User: Display updated generated code
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Possibly related PRs
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/editor/code-panel.tsx (1)
218-221
: Consider improving the explanatory text.The current text "If you handle fonts separately, turn this OFF" could be more specific about what "handling fonts separately" means.
- <span className="text-muted-foreground text-xs text-pretty"> - If you handle fonts separately, turn this OFF. - </span> + <span className="text-muted-foreground text-xs text-pretty"> + Disable if you manage font definitions outside of this theme (e.g., in a separate CSS file or via @import). + </span>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
components/editor/code-panel.tsx
(6 hunks)store/preferences-store.ts
(4 hunks)utils/theme-style-generator.ts
(5 hunks)
🔇 Additional comments (10)
store/preferences-store.ts (1)
16-16
: LGTM! Clean implementation of the new preference.The new
includeFontVariables
preference follows the established patterns in the store, with proper TypeScript typing, sensible default value, and consistent setter implementation.Also applies to: 22-22, 34-34, 52-54
components/editor/code-panel.tsx (3)
37-37
: LGTM! Proper integration with the preferences store.The component correctly reads the
includeFontVariables
state and passes it to the theme code generator. The integration follows React and Zustand best practices.Also applies to: 41-41, 50-52
174-231
: Well-structured UI enhancement with good UX.The restructured layout effectively groups related controls and the new preferences popover provides clear context for the font variables option. The explanatory text helps users understand when to disable this feature.
138-138
: Good responsive design improvements.The className changes improve button sizing consistency and add proper responsive width handling.
Also applies to: 248-248
utils/theme-style-generator.ts (6)
71-73
: Well-defined type for preferences.The
GenerateVarsPreferences
type is appropriately named and uses optional properties, allowing for future extensibility.
75-82
: Proper implementation of conditional font variables.The function correctly destructures the preferences with a sensible default and conditionally generates font variables based on the user preference.
Also applies to: 85-85
119-129
: Good refactoring of tracking variables generation.The new
generateInlineTrackingVariables
function properly handles the conditional generation based on whether letter-spacing is "0em", avoiding unnecessary CSS when not needed.
131-201
: Consistent implementation of preferences in Tailwind v4 theme.The function properly handles the
includeFontVariables
preference and maintains consistency with the main theme generation logic.
203-208
: Clean function signature extension.The main
generateThemeCode
function properly accepts the new preferences parameter with appropriate defaults and passes it through to the generation functions consistently.Also applies to: 220-223
100-116
: All Clear: No Dark-Mode Dependencies FoundA repository-wide search in CSS/SCSS/TS/TSX for
--font-*
,--radius-*
,--tracking-*
, and--spacing-*
under a.dark
context returned zero matches. Removing these overrides in dark mode will not impact any existing themes.
Superb change! |
Sure I'll merge main and check for conflicts |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
utils/theme-style-generator.ts (1)
203-290
: Functional implementation with room for improvement.The conditional font family inclusion works correctly. The string-based approach for building the config is functional, though consider using object composition for better maintainability in the future.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/editor/code-panel.tsx
(8 hunks)utils/theme-style-generator.ts
(8 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- components/editor/code-panel.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
utils/theme-style-generator.ts (4)
types/theme.ts (1)
ThemeStyles
(72-72)types/editor.ts (1)
ThemeEditorState
(18-27)types/index.ts (1)
ColorFormat
(53-53)utils/color-converter.ts (1)
colorFormatter
(14-46)
🔇 Additional comments (7)
utils/theme-style-generator.ts (7)
2-6
: Import statements look good.The added imports are appropriate for the new functionality and type safety requirements.
71-73
: Well-structured preferences type.The
GenerateVarsPreferences
type provides a clean interface for controlling theme generation options.
75-117
: Clean implementation of conditional font variables.The function correctly implements the opt-in behavior for font variables while maintaining backward compatibility with the default value of
true
. The separation of variables between light and dark modes is appropriate.
119-130
: Smart optimization for tracking variables.The function efficiently avoids generating tracking variables when letter-spacing is zero, reducing unnecessary CSS output.
131-201
: Well-implemented Tailwind V4 inline theme generator.The function correctly handles the conditional inclusion of font variables and properly generates the
@theme inline
block for Tailwind V4.
292-320
: Correct propagation of preferences parameter.The function properly passes the preferences through to all relevant sub-functions while maintaining backward compatibility.
322-336
: Preferences parameter correctly integrated.The function properly accepts and forwards the preferences parameter to the Tailwind V3 config generator.
Additions:
2025-07-28.17-40-41.mp4
These are the diffs in code for
:root
,.dark
and@theme inline
.Same theme, but with vars cleaned up.
Summary by CodeRabbit
New Features
UI Improvements