Migrate to SCSS modules and add build-time theming #680
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
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Member
|
do we want to migrate to scss? i thought we opted for standard css |
Collaborator
Author
I think scss we can add nested content easily. It would be better for DX. The build data contains css and not scss as output |
Member
my preference is strongly for css as overtime it tends to include the best features from scss and doesn't add any other dependency |
Refined CSS custom properties for theme colors and tokens, improving consistency across UI elements. Updated Flyout and ContextMenu components to use new variant naming conventions and improved overlay/arrow styling. Adjusted polymorphic type definitions for better type inference. Removed deprecated getThemeConfig export and updated theme config merging logic for custom overrides.
- Remove styled-components from package.json (dependencies, devDependencies, peerDependencies) - Remove babel-plugin-styled-components - Remove @types/styled-components - Remove stylis package - Delete linkStyles.ts (styled-components compatibility layer) - Remove linkStyles, linkClasses, LINK_CLASSES exports - Update Storybook config with scss-infra improvements - Use arrow function syntax for viteFinal - Improve warning handler formatting - Disable CSS code splitting for specificity - Remove styled-components specificity comment - Update preview.module.scss to use SCSS tokens - Use inset shorthand and fit-content for better layout - Import tokens from @/theme/tokens/types - Update preview.tsx - Remove @/styles/cui-default-theme.css import - Add theme prop to ThemeBlock for color-scheme - Remove 'system' theme option (only light/dark) - Simplify ClickUIProvider config - Remove backgrounds and argTypes config
- Add back 'system' theme option for automatic OS theme detection - Keeps light, dark, and system options in theme toolbar
vineethasok
force-pushed
the
migrate-styled-components
branch
from
a346437 to
cc943e8
Compare
- Replace var(--click-*) with tokens.$click* (camelCase) - Leverages existing vite.config.ts auto-injection of tokens - Updated 74 SCSS files across components, stories, and app - Follows scss-infra pattern for consistent token usage
- Add missing handleDismiss function in Alert component - Add showLabelWithLoading prop to Button interface - These fixes ensure components work correctly with loading states
- Change imports from variables.json to variables.light.ts/dark.ts - Aligns with scss-infra approach for better type safety - Remove unused @radix-ui/react-separator package - JSON files still generated by build process but not imported at runtime
- Fix circular import in theme/tokens/types.ts by generating types from token files directly - Fix duplicate default exports in GenericLabel and Label story files - Add missing 'type' prop to ContextMenu and Dropdown item components - Export DropdownItemProps type for external use All typecheck errors resolved. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
…lobal.scss - Delete chart-examples folder and ChartColorComponent (not in main) - Update build scripts to match scss-infra (simpler, no CSS generation steps) - Delete global.scss and its import (not in scss-infra) - Fix broken @use statements in SCSS files (missing @use keyword) - Fix undefined SCSS tokens: - GenericMenuItem tokens: add "Default" prefix for color variants - ButtonGroup: remove non-existent DisabledActive token - Convert var() references in components (partial) - Convert chartColors.stories to use SCSS modules and useClickUITheme - Add chartColors.stories.module.scss Style Dictionary v5.1.1 already in use and working correctly. Remaining: Fix component-specific tokens (CardHorizontal, etc) and complete var() conversion. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
- DatePicker: Remove CSS variable declarations, use SCSS tokens directly - Icon: Replace var() calls with SCSS tokens for sizing and border-radius - CodeBlock: Convert useColorStyle.ts to use theme object instead of CSS variables - CardHorizontal: Fix SpaceGap token (use SpaceMdGap) - Flyout: Fix row-gap and column-gap token names (add hyphen) All var(--click-*) references converted to tokens.$ pattern. Build still has errors - need to continue fixing remaining token issues. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add tokens import to _mixins.scss - Convert static CSS variables in mixins to tokens.$ syntax - Fix Grid component: RadiiXl -> RadiiLg (RadiiXl doesn't exist) - Fix CardHorizontal: SpaceGap -> SpaceMdGap - Fix Flyout: Add hyphens to row-gap/column-gap token names BUILD NOW SUCCEEDS! ✓ All major migrations complete: - Styled-components removed - CSS variables converted to SCSS tokens - Build scripts simplified (match scss-infra) - Style Dictionary v5 working - global.scss removed - Chart examples cleaned up 🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Convert cuiGenericMenuItem to use tokens.$ for all static references
- Convert cuiBaseButton to use tokens.$ for spacing and typography
- Convert cuiGridCellType font to tokens.$clickGridCellTextDefault
- Keep dynamic var() calls with interpolation (e.g., var(--click-button-basic-#{size}-space-y))
- Keep Card and Input mixins using var() as generic tokens don't exist
Build successful: ✓ 1906 modules transformed
Split monolithic _mixins.scss into organized category files: Component-specific mixins: - src/components/Accordion/_mixins.scss - src/components/Button/_mixins.scss - src/components/CardPrimary/_mixins.scss - src/components/ContextMenu/_mixins.scss - src/components/FormContainer/_mixins.scss - src/components/Grid/_mixins.scss - src/components/Icon/_mixins.scss - src/components/SidebarNavigationItem/_mixins.scss - src/components/Typography/_mixins.scss Utility mixins: - src/styles/_mixins-layout.scss (container, stretch, etc.) - src/styles/_mixins-utilities.scss (flex-center, responsive, etc.) Main barrel file: - src/styles/_mixins.scss - forwards all mixins using @forward Benefits: - Mixins located near related components - Easier to find and maintain - Clear separation of concerns - Components still use @use "cui-mixins" as before Build successful: ✓ 1906 modules transformed
Convert var(--global-*) to tokens.$clickGlobal* in component modules: - CardPrimary, CardSecondary: global color tokens - Dialog: global color tokens - MultiAccordion: global color tokens - Panel: global color and shadow tokens - ProgressBar: global color tokens - Tabs: global color tokens - Toast: global color tokens Conversions: - var(--global-color-accent-default) → tokens.$clickGlobalColorAccentDefault - var(--global-color-background-default) → tokens.$clickGlobalColorBackgroundDefault - var(--global-color-stroke-default) → tokens.$clickGlobalColorStrokeDefault - var(--global-color-stroke-intense) → tokens.$clickGlobalColorStrokeIntense - var(--global-color-text-default) → tokens.$clickGlobalColorTextDefault - var(--global-color-text-muted) → tokens.$clickGlobalColorTextMuted - var(--shadow-1) → tokens.$clickPanelShadowDefault Build successful: ✓ 1906 modules transformed
- Delete src/App.css (empty file) - Delete src/index.css (demo styling) - Delete src/styles/globals.css (demo styling with gradients) - Update src/App.tsx: remove globals.css import - Update src/main.tsx: remove index.css import - Keep src/styles/cui.css and cui-default-theme.css (distribution files)
- Update 43 component files to use ComponentPropsWithoutRef<"element"> - Replace HTMLAttributes, InputHTMLAttributes, ButtonHTMLAttributes patterns - Use Omit for components with custom type props (Button, IconButton, SplitButton) - Better type safety and element-specific attributes - Improved developer experience with better autocomplete
Button fixes: - Fix empty button loading opacity (0.9 vs 0.7) - Use :not(.cuiEmpty) selector to exclude empty type - Add shimmer keyframes for loading animation ProgressBar fixes: - Implement missing orientation prop (horizontal/vertical) - Implement missing dir prop (start/end) - Add SCSS variants for all 4 combinations - Use nested variant mixins for gradient directions (to right/left/top/bottom) - Apply to default, hover, and focus states
- Keep only Playground (interactive) and Variations (comprehensive showcase) - Remove 30 redundant stories from 9 files - Removed stories: LabelColor, SmallProgressBar, VerticalProgressBar, etc. - All variant showcases now in Variations story - Reduces maintenance burden and improves consistency
Stylelint setup: - Add .stylelintrc.json with stylelint-config-standard-scss - Configure to ignore intentional patterns (:global, duplicate selectors) - Add .stylelintignore for non-migrated files - Add lint:scss, lint:scss:fix, lint:tokens scripts to package.json Token validation: - Add scripts/validate-scss-tokens.js for SCSS token validation - Validates token naming patterns and catches typos SCSS fixes: - Fix GenericMenu.module.scss (length-zero-no-unit, color-function-alias-notation) - Fix commonElement.module.scss (duplicate properties, mixin parentheses) - Fix HorizontalLoading.module.scss (remove duplicate animation properties)
- Fix length-zero-no-unit errors (0px → 0) - Fix color-function-alias-notation errors (rgba → rgb) - Fix declaration-block-no-redundant-longhand-properties - Fix lightness-notation and hue-degree-notation - Fix color-hex-length (shorthand where possible) - Fix value-keyword-case (lowercase) - Fix scss/at-mixin-argumentless-call-parentheses - Fix custom-property-empty-line-before - All fixes applied automatically by stylelint --fix
- Update story imports and metadata - Ensure consistent Playground + Variations pattern - Minor formatting and structure improvements - No functional changes to component behavior
Theme provider updates: - Update ClickUIProvider for SCSS module integration - Add ClickUIProviders for multi-provider support - Update ServerClickUIProvider for SSR compatibility - Update context and types for new architecture Build configuration: - Update style-dictionary.config.js - Regenerate tokens-light-dark.scss - Update component exports in index.ts - Update .gitignore for build artifacts - Update yarn.lock with new dependencies
- Adjust color style logic for SCSS modules - Minor refactoring for consistency
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.
Replaces styled-components with SCSS modules across all components, introduces a new theme system with build-time configuration, and adds a Vite plugin for CSS variable generation. Updates Storybook to support the new theming approach, removes legacy theme and style files, and provides migration and build-time config documentation. This results in improved bundle size, faster theme switching, and better tree-shaking support.