Migrate to SCSS modules and add build-time theming #680
+54,328
−23,145
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
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.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
💡 Enable Vercel Agent with $100 free credit for automated AI reviews |
Update package.json and package-lock.json to reflect the new version 0.0.234-sc-deprecation.1. This is for testing the functionality
…App Router compatibility Add the "use client" directive to 42 component files to ensure proper client-side rendering in Next.js 13+ App Router environments. These components use React hooks, event handlers, and browser APIs that require client-side execution. Components updated: - Form components (Checkbox, Switch, RadioGroup, TextField, NumberField, etc.) - Interactive UI (Button, IconButton, Dropdown, Popover, Dialog, etc.) - Layout components (Accordion, Tabs, Table, FileTabs, etc.) - Navigation (Pagination, Sidebar components) - Feedback (Alert, Toast, Tooltip, HoverCard, ProgressBar) - Data input (DatePicker, FileUpload, AutoComplete, Select) This change enables these components to work seamlessly in React Server Component contexts while maintaining their interactive functionality. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Eliminates the 'classic' theme from theme lists, configuration, and code logic. Removes classic theme token files and CSS, updates documentation, and refactors theme hooks and context to only support 'light', 'dark', and 'system' themes. Cleans up unused auto theme logic and ensures all theme switching and CSS variable generation use the new approach.
|
do we want to migrate to scss? i thought we opted for standard css |
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 |
my preference is strongly for css as overtime it tends to include the best features from scss and doesn't add any other dependency |
Introduces a new config/ directory with universal configuration plugins for Vite, Webpack, Rollup, and Next.js, including a shared core, type definitions, and documentation. Updates package.json and package-lock.json to add new devDependencies and peerDependencies for bundler support. Adds tsconfig.config.json for TypeScript configuration of the new plugins.
…eration Replaces 'systemModeOverrides' with a top-level 'dark' property in theme config for dark mode overrides. Updates ClickUIProvider and ServerClickUIProvider to merge dark overrides and generate CSS variables using light-dark() only for color variables, with separate handling for non-color variables. Cleans up config loading, adds getThemeValue utility, and updates Vite plugin to match new config structure.
Updated dayjs plugin imports to use explicit .js extensions in DateDetails.tsx. Refactored linkStyles.ts to use double quotes for consistency and converted linkClasses to an arrow function. Added import for global theme styles in index.ts to ensure styles are included when using the library.
Add Node.js environment to ESLint config, update .gitignore to exclude generated SCSS and CSS declaration files, and adjust VSCode settings to hide these files from search and file explorer. Refactor Vite config to bundle all CSS into one file, enforce consistent CSS module class names, and improve external dependency handling for React and other libraries.
Major documentation overhaul for Click UI theme configuration: rewrote BUILD_TIME_CONFIG_CLICK_UI.md as a full API reference, added CONFIG_ARCHITECTURE.md to explain config/plugin design, and updated README.md and config/README.md for clearer quick start and plugin setup. Added CLI bin/click-ui.js and bin/commands/init.js for config file scaffolding. Removed legacy click-ui-config.example.js and src/theme/README.md. Added practical examples for Vite, Webpack, Rollup, Next.js, and updated provider/usage docs for new config structure.
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.
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.