Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Migrate to SCSS modules and add build-time theming#680

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Draft
vineethasok wants to merge43 commits intomain
base:main
Choose a base branch
Loading
frommigrate-styled-components

Conversation

@vineethasok
Copy link
Collaborator

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.

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.
@vineethasokvineethasok self-assigned thisOct 1, 2025
@vercel
Copy link

vercelbot commentedOct 1, 2025
edited
Loading

The latest updates on your projects. Learn more aboutVercel for GitHub.

ProjectDeploymentPreviewCommentsUpdated (UTC)
click-uiErrorErrorNov 18, 2025 4:14pm

Update package.json and package-lock.json to reflect the new version 0.0.234-sc-deprecation.1. This is for testing the functionality
vineethasokand others added2 commitsOctober 9, 2025 15:31
…App Router compatibilityAdd 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 <noreply@anthropic.com>
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.
@serdec
Copy link
Member

do we want to migrate to scss? i thought we opted for standard css

@vineethasok
Copy link
CollaboratorAuthor

vineethasok commentedOct 13, 2025
edited
Loading

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

@serdec
Copy link
Member

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.
…erationReplaces '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.
Introduces utility types for type-safe polymorphic React components in src/utils/polymorphic/index.ts, including documentation and usage examples in README.md. Adds index.test.tsx to demonstrate type safety, SCSS module compatibility, ref forwarding, and real-world usage scenarios.
Introduces a capitalize function that capitalizes the first letter of a string and converts kebab-case to PascalCase. Includes comprehensive unit tests for various input scenarios.
Updated Container, EllipsisContent, GridContainer, Link, and Text components to use shared polymorphic types from utils/polymorphic for improved type safety and flexibility. Replaced manual capitalization logic with a shared capitalize utility. Adjusted SvgImageElement to wrap SVG in a div for consistent styling.
Updated css-generator utilities to handle arrays, generating indexed CSS variables for array elements. Extended NestedJSONObject and ConfigThemeValues types to support arrays and booleans. Added comprehensive tests for array and nested value handling in CSS variable generation.
Updated Icon.module.scss to apply sizing classes to the wrapper instead of SVG, ensuring SVGs inherit dimensions. Added the disableDefaultSize prop to Icon, allowing consumers to prevent default size classes for custom sizing via className. Updated Icon.tsx and types.ts accordingly, and refactored imports in Icon.stories.tsx for consistency.
Moved common styles for FileUpload components into a new FileUploadCommon.module.scss file. Updated FileUpload.tsx and FileMultiUpload.tsx to import and use shared classes, reducing duplication and improving maintainability. Component-specific SCSS files now only contain unique styles.
Introduces new SCSS mixins for empty and base button styles, refactors components to use these mixins, and removes redundant EmptyButton usage in favor of native buttons. Updates color variable references for consistency, improves icon sizing and specificity, and streamlines theme handling in CodeBlock and chart color stories. Also fixes minor logic and style issues in Card, Collapsible, Popover, and VerticalStepper components.
Removed all files related to the bundler plugin system and configuration architecture, including config plugins for Vite, Webpack, Rollup, and Next.js. Added a new CLI workflow for theme generation: users now create a config file, generate custom theme CSS via the CLI, and import the CSS directly in their app. Introduced new CLI commands and utilities for config loading and CSS generation, and updated documentation to reflect the new workflow.
Deleted example files for App, Next.js, Rollup, Vite, and Webpack from the examples directory. This cleanup removes sample usage and configuration code for Click UI integrations.
Deleted vite-plugin TypeScript, JavaScript, and type definition files. This removes the Click UI Vite plugin implementation and its type declarations from the project.
Replaces inline chart color rendering in chartColors.stories.tsx with a ChartColorComponent and removes the now-unused chartColors.stories.module.scss file. Also cleans up comments and unused code in App.tsx.
Introduces src/styles/cui.css as a combined entrypoint for default theme and component styles, updating documentation to recommend its use. Adds _cui-variants.scss with modern variant mixins, and extends _mixins.scss with new helpers for full-width, sidebar, form, input, menu item, and SVG styling. Updates build-tokens.js to always use objects in setWith, and adjusts Vite config to output cui-components.css instead of style.css.
Expanded the README and Introduction.mdx with detailed instructions for custom theming using the Click UI CLI, clarified style import options, and explained the build-time CSS approach. Updated references to new CSS entry points and improved documentation on theme switching and CSS variable usage.
Introduces a `size` prop to CardHorizontal, supporting 'sm' and 'md' variants. Updates SCSS and theme variables to provide size-specific spacing and gap values. Storybook stories and usage are updated to demonstrate and control the new size prop. Also refactors FileMultiUpload to improve file status display and action button layout.
Reordered and grouped CSS custom properties in cui-default-theme.css for better maintainability and alignment with token structure. Updated theme config merging logic in config.ts to use a merged base theme plus theme-specific overrides. Fixed and reordered several type definitions in tokens/types.ts to match the new token structure and property order. Adjusted variables.json to align with the new structure and fixed some color values for consistency.
Replaced hardcoded and outdated color variables for 'cuiRed' and 'cuiSlate' classes with updated CSS custom properties to ensure consistency with global chart color definitions.
Refactors input style assignment in GenericLabel and Label stories for clarity. Updates icon and SVG sizing to use 'inherit' instead of '100%' in both SCSS and mixins. Sets default 'size' prop to 'md' for Logo, Flags, and Payments components. Adjusts color, typography, and sizing variables in cui-default-theme.css for improved consistency and visual alignment.
Refactored CheckInCircle and FilterIcon components to eliminate unnecessary nested <svg> tags, simplifying the SVG structure and preventing potential rendering issues.
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

No reviews

Assignees

@vineethasokvineethasok

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@vineethasok@serdec@elizabetdev

[8]ページ先頭

©2009-2025 Movatter.jp