Migrate Separator and Spacer to SCSS modules #731

vineethasok · 2025-12-16T23:26:11Z

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

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.

vercel · 2025-12-16T23:26:16Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
click-ui	Ready	Preview, Comment	Dec 17, 2025 0:24am

Copilot

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.

Copilot · 2025-12-16T23:26:43Z

src/components/Separator/Separator.tsx

+
+  return (
+    <div
+      role={decorative ? "none" : "separator"}


When role="separator", the aria-orientation attribute must be set even when orientation is "horizontal". The current condition orientation !== "horizontal" incorrectly omits aria-orientation for horizontal non-decorative separators, violating ARIA requirements.

Copilot · 2025-12-16T23:26:43Z

src/components/Typography/Text/Text.tsx

+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _Text as any


Using 'any' type defeats TypeScript's type safety. Consider using a more specific type or properly typing the forwardRef generic parameters to avoid type casting.

Copilot · 2025-12-16T23:26:44Z

.storybook/preview.module.scss

+.cuiThemeBlock {
+  position: absolute;
+  top: 0.5rem;
+  width: 96vw;


The magic number 96vw is unclear. Consider using a CSS variable or adding a comment explaining why 96vw is used instead of 100vw or 100%.

Copilot · 2025-12-16T23:26:44Z

scripts/generate-scss-theme.js

+  if (inRootBlock) {
+    // Check if this line contains a CSS variable for a migrated component
+    const isRelevantVariable = MIGRATED_COMPONENTS.some(component => {
+      const pattern = `--click-${component}`;


The hardcoded prefix '--click-' is duplicated throughout the codebase. Consider extracting this as a constant at the top of the file for easier maintenance if the prefix changes.

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 · 2025-12-17T20:06:38Z

build-tokens.js


 StyleDictionary.extend({
-  source: [`./tokens/**/!(${themes.join("|*.")}).json`],
+  source: [`./tokens/**/*.json`],


This makes me a little nervous

The issue I faced was missing types when the types where generated so I had to combine all the theme json to complete the complete list of the types we are using
This was identified when I worked on the scss migration branch

We could actually remove the css from being build as we are not using it at all
Also separate the logic for variable json and the types to 2 calls which would not cause any problems at all

gjones · 2025-12-17T20:07:17Z

build-tokens.js

+const generateThemeFromDictionary = (dictionary, valueFunc = value => value) => {
  const theme = {};
-  dictionary.allTokens.forEach((token) => {
-    _.setWith(theme, token.name, valueFunc(token.value), Object)


Calling @serdec as there's quite a lot of changes to the build-tokens.js and I don't know why.

we are only using lodash increases the packages size and we are only using lodash for only here and one another place
So I was thinking like it would be better to remove these to remove dependencies and reduce the package size

gjones

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?

vineethasok requested review from Kinzeng, Copilot, gjones and hoorayimhelping December 16, 2025 23:26

vineethasok self-assigned this Dec 16, 2025

vercel bot deployed to Preview December 16, 2025 23:26 View deployment

Copilot AI reviewed Dec 16, 2025

View reviewed changes

vercel bot deployed to Preview December 17, 2025 00:05 View deployment

Set color-scheme and data-theme on document root

6831cc3

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.

vercel bot deployed to Preview December 17, 2025 00:15 View deployment

Fix the chromatic UI diff error

9fde7a4

vercel bot deployed to Preview December 17, 2025 00:24 View deployment

gjones reviewed Dec 17, 2025

View reviewed changes

gjones approved these changes Dec 17, 2025

View reviewed changes

		// eslint-disable-next-line @typescript-eslint/no-explicit-any
		_Text as any

Migrate Separator and Spacer to SCSS modules #731

Are you sure you want to change the base?

Migrate Separator and Spacer to SCSS modules #731

Uh oh!

Conversation

vineethasok commented Dec 16, 2025

Uh oh!

vercel bot commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

gjones Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

vineethasok Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

vineethasok Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

gjones Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

vineethasok Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

gjones left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Dec 16, 2025 •

edited

Loading