Migrate Separator and Spacer to SCSS modules #731
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
Refactored Separator and Spacer components to use SCSS modules for styling instead of styled-components. Added new SCSS files, updated Storybook configuration and preview to support SCSS, and introduced a script to generate a filtered CSS theme for SCSS-migrated components. Updated package.json, .gitignore, and index.ts to ensure proper CSS variable imports and side effects. Also added utility functions and mixins for SCSS, and improved Storybook controls for these components.
vineethasok
requested review from
Kinzeng,
Copilot,
gjones and
hoorayimhelping
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates the Separator and Spacer components from styled-components to SCSS modules as the first step in a broader SCSS migration strategy. The changes introduce SCSS infrastructure, build tooling, and utility functions to support this transition while maintaining compatibility with the existing design system.
Key changes:
- Refactored Separator and Spacer components to use SCSS modules with CSS variables
- Added SCSS build infrastructure including mixins, variants, and theme generation
- Updated Storybook configuration to support SCSS compilation
Reviewed changes
Copilot reviewed 23 out of 27 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Added copyCSSPlugin to bundle SCSS theme CSS and configured SCSS import aliases |
| src/utils/capitalize.ts | Added utility function to convert strings and kebab-case to PascalCase |
| src/utils/capitalize.test.ts | Added comprehensive test coverage for capitalize utility |
| src/theme/tokens/variables.json | Reordered JSON properties and updated color values (no functional changes) |
| src/theme/tokens/types.ts | Reordered TypeScript interface properties to match JSON structure |
| src/styles/cui.css | Added main CSS entry point with theme imports |
| src/styles/cui-scss-theme.css | Generated filtered CSS variables for SCSS-migrated components |
| src/styles/_mixins.scss | Added comprehensive SCSS mixins library for component styling |
| src/styles/_cui-variants.scss | Added SCSS variant mixins using :where() for low specificity |
| src/index.ts | Added auto-import of SCSS theme CSS |
| src/components/Typography/Text/Text.tsx | Fixed TypeScript type casting for forwardRef |
| src/components/Spacer/Spacer.tsx | Migrated from styled-components to SCSS modules |
| src/components/Spacer/Spacer.stories.tsx | Updated story controls and removed TypeScript story types |
| src/components/Spacer/Spacer.module.scss | Added SCSS module with size variants |
| src/components/Separator/Separator.tsx | Migrated from Radix primitives to SCSS with semantic HTML |
| src/components/Separator/Separator.stories.tsx | Updated story controls and removed TypeScript story types |
| src/components/Separator/Separator.module.scss | Added SCSS module with orientation and size variants |
| scripts/generate-scss-theme.js | Added script to generate filtered CSS theme for migrated components |
| package.json | Added SCSS dependencies, sideEffects field, and CSS export path |
| build-tokens.js | Removed lodash dependency, implemented custom setWith function |
| .storybook/preview.tsx | Migrated ThemeBlock from styled-components to SCSS module |
| .storybook/preview.module.scss | Added SCSS module for Storybook preview layout |
| .storybook/main.ts | Added SCSS preprocessor configuration with modern-compiler API |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Refactored ThemeBlock in Storybook to accept a theme prop and set color-scheme for better light/dark support. Updated SCSS theme generation script to always include Storybook-specific variables. Added --click-storybook-global-background to SCSS theme and improved preview styles for better layout handling.
Added a useEffect to update the document root's color-scheme and data-theme attributes based on the selected theme. This enables support for the CSS light-dark() function and improves theme handling.
gjones
reviewed
Dec 17, 2025
gjones
reviewed
Dec 17, 2025
gjones
approved these changes
Dec 17, 2025
Collaborator
gjones
left a comment
gjones
left a comment
There was a problem hiding this comment.
Overall functionality is good. So 👍
There's quite a few changes to the build-tokens.js file in here, I'm unsure why they would be in with the separator and spacer updates. What do they do?
Regenerated yarn.lock to update and add new package versions, reflecting changes in project dependencies. This may include upgrades, security patches, or compatibility improvements.
Updated SCSS files for Separator and Spacer components to replace CSS custom properties with SCSS tokens variables for consistency and maintainability. Added data-cui attributes to both components for improved DOM identification and testing.
Removed legacy CSS files and replaced them with SCSS modules for global and app styles. Updated imports and file references throughout the codebase to use SCSS. Deleted the generate-scss-theme script and filtered theme CSS, as SCSS modules now handle component styling. Updated documentation to clarify CSS import requirements and migration status.
Removed legacy global CSS files and updated styles to use SCSS modules. Updated Storybook and Vite configuration for modern SCSS compiler support. Cleaned up README and code references to legacy CSS imports, and improved VSCode TypeScript settings.
Moved SCSS preprocessor configuration to root vite.config.ts to prevent CSS injection order issues with styled-components. Storybook now inherits SCSS settings from the main Vite config.
Set `cssCodeSplit` to false in Storybook Vite config to ensure styled-components styles are injected after CSS modules. This resolves specificity problems when using the polymorphic 'as' prop in components.
kunalpanchal
reviewed
Jan 6, 2026
ariser
approved these changes
Jan 8, 2026
Collaborator
ariser
left a comment
ariser
left a comment
There was a problem hiding this comment.
lgtm in general, but I'm not sure why we need these variant mixins
| * capitalize('space-between') // 'SpaceBetween' | ||
| * capitalize('space-around') // 'SpaceAround' | ||
| */ | ||
| export const capitalize = (str: string): string => { |
Collaborator
There was a problem hiding this comment.
the naming is ambiguous
toPascalCase, toUpperCamelCase?
or even kebabToPascalCase, as it expects input to be in a specific format
Comment on lines
+5
to
+14
| @include variants.variant('cuiHorizontal') { | ||
| width: 100%; | ||
| border-top: 0.0625rem solid tokens.$clickSeparatorColorStrokeDefault; | ||
|
|
||
| @include variants.variant('cuiSizeXs') { | ||
| margin: tokens.$clickSeparatorHorizontalSpaceYXs tokens.$clickSeparatorHorizontalSpaceXAll; | ||
| } | ||
| @include variants.variant('cuiSizeSm') { | ||
| margin: tokens.$clickSeparatorHorizontalSpaceYSm tokens.$clickSeparatorHorizontalSpaceXAll; | ||
| } |
Collaborator
There was a problem hiding this comment.
you'll have to walk me though this
why do we need these mixins instead of simply writing
.cuiSeparator {
&.cuiHorizontal {
...
&.cuiSizeXs {
...
}
}
}?
and if we are creating these utils, the least they can do is allow us to not include this cui prefix all the time
| display: flex; | ||
|
|
||
| @include variants.variant('cuiSizeXs') { | ||
| padding: tokens.$clickSpacerHorizontalSpaceYXs tokens.$clickSpacerHorizontalSpaceXAll; |
Collaborator
There was a problem hiding this comment.
Do I understand this right, all SCSS tokens are actually pointing at native CSS variables? So on the consumer side, we're free to override any css variable value to adjust the styles if we need?
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.
Refactored Separator and Spacer components to use SCSS modules for styling instead of styled-components. Added new SCSS files, updated Storybook configuration and preview to support SCSS, and introduced a script to generate a filtered CSS theme for SCSS-migrated components. Updated package.json, .gitignore, and index.ts to ensure proper CSS variable imports and side effects. Also added utility functions and mixins for SCSS, and improved Storybook controls for these components.
Note: This is the first step to migrating components to scss one