Feature: update to not use styled-components by krishan711 · Pull Request #228 · kibalabs/ui-react

krishan711 · 2025-11-26T21:27:19Z

Description

Screenshots:

Checklist:

I have updated the CHANGELOG with a summary of my changes
I have updated the documentation accordingly

Copilot

Pull request overview

This PR migrates the codebase from styled-components to vanilla CSS with CSS custom properties and cascade layers. The migration introduces new CSS files for components (Text, Box, Button) and replaces styled-components with standard React elements using inline styles and CSS classes.

Key Changes

Removed styled-components dependency and replaced with vanilla CSS files using @layer for separation of structure and theme concerns
Introduced legacy compatibility layer (legacyThemeCompat.ts) with stub functions for backward compatibility during migration
Converted global styles from createGlobalStyle to a functional component that injects CSS via <style> tags with dangerouslySetInnerHTML

Reviewed changes

Copilot reviewed 12 out of 13 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
src/util/legacyThemeCompat.ts	New compatibility layer providing stub functions for legacy theme exports and inline style conversion utilities
src/util/index.ts	Exports the new legacy compatibility functions
src/theming/themeContext.tsx	Replaces styled-components' `createGlobalStyle` with functional component using CSS layers
src/particles/text/styles.css	New CSS file defining Text component styles with structure and theme layers
src/particles/text/component.tsx	Removes styled-components, uses vanilla `<span>` with inline styles for dynamic properties
src/particles/box/styles.css	New CSS file for Box component with responsive breakpoints and variant classes
src/particles/box/component.tsx	Replaces StyledBox with `<div>` using CSS custom properties for responsive dimensions
src/atoms/button/styles.css	New CSS file for Button component with state-based styling
src/atoms/button/component.tsx	Removes styled-components, uses dynamic component type (`button`/`a`/`CoreLink`) with inline alignment styles
src/app/kibaApp.tsx	Removes StyledMainView in favor of inline styles on standard `<div>`
src/app/globalCss.tsx	Converts from `createGlobalStyle` to functional component using memoized CSS string injection
package.json	Changes build dependency from exact to caret version for pre-release package
package-lock.json	Updates lockfile to reflect package.json version change

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-26T21:31:31Z

+  const variantClasses = (variant?.split('-') || []).join(' ');
+
  return (
-    // @ts-ignore: as prop doesn't match type required
-    <StyledButton
+    // @ts-ignore: dynamic component type
+    <Component
      id={props.id}
-      className={getClassName(Button.displayName, className, isFullWidth && 'fullWidth', isFullHeight && 'fullHeight', !isEnabled && 'disabled', ...(variant?.split('-') || []))}
-      $theme={props.theme}
-      $isLoading={props.isLoading || false}
+      className={getClassName(
+        Button.displayName,
+        className,
+        'KibaButton-base',
+        isFullWidth && 'fullWidth',
+        isFullHeight && 'fullHeight',
+        !isEnabled && 'disabled',
+        props.isLoading && 'isLoading',
+        variantClasses,


The variant classes are being joined with spaces and passed as a single class name, but getClassName expects individual arguments to be spread. The line should be ...(variant?.split('-') || []) instead of variantClasses to properly spread the variant class names. Currently, a variant like "primary-large" would be added as a single class "primary large" instead of two separate classes "primary" and "large".

Copilot · 2025-11-26T21:31:31Z

+  const shouldBreakOnWords = props.shouldBreakOnWords === true || props.shouldBreakOnWords === undefined;
+  const TagComponent = (props.tag || getTextTag(variant)) as React.ElementType;
+  const dynamicStyle: React.CSSProperties = {
+    ...(lineLimit ? { WebkitLineClamp: lineLimit } : {}),
+    ...(shouldBreakOnWords ? { wordBreak: 'break-word' as const } : {}),
+    ...(props.shouldBreakAnywhere ? { wordBreak: 'break-all' as const } : {}),
+    ...(props.alignment ? { textAlign: props.alignment } : {}),
+  };


The alignmentResponsive prop is defined in the component interface but is never used in the implementation. In the old styled-components version, this was handled via fieldToResponsiveCss, but the new implementation only applies props.alignment and ignores props.alignmentResponsive. This means responsive alignment functionality has been lost in the migration.

Copilot · 2025-11-26T21:31:32Z

+  const TagComponent = (props.tag || getTextTag(variant)) as React.ElementType;
+  const dynamicStyle: React.CSSProperties = {
+    ...(lineLimit ? { WebkitLineClamp: lineLimit } : {}),
+    ...(shouldBreakOnWords ? { wordBreak: 'break-word' as const } : {}),
+    ...(props.shouldBreakAnywhere ? { wordBreak: 'break-all' as const } : {}),


Conflicting wordBreak assignments can result in the wrong value being applied. If both shouldBreakOnWords and shouldBreakAnywhere are true, the spread operator will overwrite 'break-word' with 'break-all'. Consider using a single conditional to determine the correct wordBreak value, e.g., wordBreak: props.shouldBreakAnywhere ? 'break-all' : (shouldBreakOnWords ? 'break-word' : undefined).

Suggested change

const TagComponent = (props.tag || getTextTag(variant)) as React.ElementType;

const dynamicStyle: React.CSSProperties = {

...(lineLimit ? { WebkitLineClamp: lineLimit } : {}),

...(shouldBreakOnWords ? { wordBreak: 'break-word' as const } : {}),

...(props.shouldBreakAnywhere ? { wordBreak: 'break-all' as const } : {}),

const wordBreak = props.shouldBreakAnywhere

? 'break-all'

: (shouldBreakOnWords ? 'break-word' : undefined);

const TagComponent = (props.tag || getTextTag(variant)) as React.ElementType;

const dynamicStyle: React.CSSProperties = {

...(lineLimit ? { WebkitLineClamp: lineLimit } : {}),

...(wordBreak ? { wordBreak } : {}),

Copilot · 2025-11-26T21:31:32Z

+  const combinedStyles: React.CSSProperties = {
+    ...themeStyles,
+    // @ts-expect-error CSS custom properties are valid but not in CSSProperties type
+    '--kiba-box-display': blockType,
+    '--kiba-box-width': width,
+    '--kiba-box-width-sm': props.widthResponsive?.small,
+    '--kiba-box-width-md': props.widthResponsive?.medium,
+    '--kiba-box-width-lg': props.widthResponsive?.large,
+    '--kiba-box-width-xl': props.widthResponsive?.extraLarge,
+    '--kiba-box-height': height,
+    '--kiba-box-height-sm': props.heightResponsive?.small,
+    '--kiba-box-height-md': props.heightResponsive?.medium,
+    '--kiba-box-height-lg': props.heightResponsive?.large,
+    '--kiba-box-height-xl': props.heightResponsive?.extraLarge,
+    '--kiba-box-max-width': props.maxWidth,
+    '--kiba-box-max-width-sm': props.maxWidthResponsive?.small,
+    '--kiba-box-max-width-md': props.maxWidthResponsive?.medium,
+    '--kiba-box-max-width-lg': props.maxWidthResponsive?.large,
+    '--kiba-box-max-width-xl': props.maxWidthResponsive?.extraLarge,
+    '--kiba-box-max-height': props.maxHeight,
+    '--kiba-box-max-height-sm': props.maxHeightResponsive?.small,
+    '--kiba-box-max-height-md': props.maxHeightResponsive?.medium,
+    '--kiba-box-max-height-lg': props.maxHeightResponsive?.large,
+    '--kiba-box-max-height-xl': props.maxHeightResponsive?.extraLarge,
+    '--kiba-box-min-width': props.minWidth,
+    '--kiba-box-min-width-sm': props.minWidthResponsive?.small,
+    '--kiba-box-min-width-md': props.minWidthResponsive?.medium,
+    '--kiba-box-min-width-lg': props.minWidthResponsive?.large,
+    '--kiba-box-min-width-xl': props.minWidthResponsive?.extraLarge,
+    '--kiba-box-min-height': props.minHeight,
+    '--kiba-box-min-height-sm': props.minHeightResponsive?.small,
+    '--kiba-box-min-height-md': props.minHeightResponsive?.medium,
+    '--kiba-box-min-height-lg': props.minHeightResponsive?.large,
+    '--kiba-box-min-height-xl': props.minHeightResponsive?.extraLarge,
+    '--kiba-box-z-index': props.zIndex !== undefined ? String(props.zIndex) : undefined,
+    '--kiba-box-position': props.position,
+  };


Setting CSS custom properties to undefined may result in the string 'undefined' being assigned as the CSS value instead of being omitted. This will break the CSS fallback chain. Consider filtering out undefined values before constructing the styles object, or explicitly set them to null or empty string when they should be omitted.

Copilot · 2025-11-26T21:31:32Z

+      className={getClassName(
+        Button.displayName,
+        className,
+        'KibaButton-base',


The class name 'KibaButton-base' is added but does not appear to be defined in the CSS file. This will have no effect and should either be removed or the corresponding CSS should be added to styles.css.

Copilot · 2025-11-26T21:31:33Z

+        style={{
+          // @ts-ignore
+          alignItems: childAlignment,
+          // @ts-ignore
+          justifyContent: contentAlignment,
+        }}


The Alignment enum values are being used directly for CSS properties, but they need to be converted first. The old implementation used getChildAlignmentCss and getContentAlignmentCss functions which convert enum values like Alignment.Start to valid CSS values like flex-start.

The code should use getFlexItemAlignment(childAlignment) for alignItems and getFlexContentAlignment(contentAlignment) for justifyContent instead of using the raw enum values.

Copilot · 2025-11-26T21:31:33Z

  },
  "devDependencies": {
-    "@kibalabs/build": "0.13.3-next.10",
+    "@kibalabs/build": "^0.13.3-next.10",


The version specifier was changed from an exact version 0.13.3-next.10 to a caret range ^0.13.3-next.10. This is inconsistent with how pre-release versions should be handled. The caret (^) operator treats pre-release versions specially and may not behave as expected. For pre-release versions, it's better to use exact versions or tilde (~) to avoid unexpected updates.

Suggested change

"@kibalabs/build": "^0.13.3-next.10",

"@kibalabs/build": "0.13.3-next.10",

.

cd46eb5

Copilot AI review requested due to automatic review settings November 26, 2025 21:27

Copilot started reviewing on behalf of krishan711 November 26, 2025 21:27 View session

Copilot finished reviewing on behalf of krishan711 November 26, 2025 21:30

Copilot AI reviewed Nov 26, 2025

View reviewed changes

krishan711 added 25 commits November 26, 2025 21:44

.

4e2e966

.

e052b10

.

5d8fe82

.

1a56f5d

.

293eeed

.

a7a91aa

.

d1e3ac0

.

1d08d21

.

ebbc60f

.

f74ac47

.

2dc91ef

.

15a8be2

.

1ac8a37

.

45bfee8

.

da9ec62

.

a8418fc

.

c38970d

.

7cb1735

.

76d1392

.

d1a9459

.

58730e2

.

3844b49

.

c41b32b

.

9dbbb39

.

29a4481

krishan711 added 10 commits November 28, 2025 21:43

.

32de46b

.

c389a38

.

bd958b3

.

916c685

.

cdc1194

.

c2904ec

.

de394c6

.

a848d33

.

d36a194

.

651c9cb

krishan711 merged commit 7ecbd96 into main Nov 29, 2025
4 checks passed

krishan711 deleted the stylex_radixui branch November 29, 2025 21:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: update to not use styled-components#228

Feature: update to not use styled-components#228
krishan711 merged 36 commits into
mainfrom
stylex_radixui

krishan711 commented Nov 26, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Nov 26, 2025

Uh oh!

Copilot AI Nov 26, 2025

Uh oh!

Copilot AI Nov 26, 2025

Uh oh!

Copilot AI Nov 26, 2025

Uh oh!

Copilot AI Nov 26, 2025

Uh oh!

Copilot AI Nov 26, 2025

Uh oh!

Copilot AI Nov 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	"@kibalabs/build": "^0.13.3-next.10",
	"@kibalabs/build": "0.13.3-next.10",

Conversation

krishan711 commented Nov 26, 2025

Description

Screenshots:

Checklist:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants