chore(css): remove styled-components as a dependency - #1151
Merged
Conversation
Migrated components no longer use styled-components, but several comments still referenced it. Reword these to describe current behavior; no code changes. Keeps the `mounted` flag in useInitialTheme (SSR/hydration gate); only its stale TODO comment is updated. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Remove the deprecated `linkStyles` and `StyledLinkProps` public exports. Both were built on styled-components' `css` template and had no internal consumers (the Link component renders from Link.module.css). Consumers should use the `Link` component with the `component` prop instead. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace styled-components' runtime theme delivery (ThemeProvider/useTheme) with click-ui's own React context (src/theme/ThemeContext). The public ClickUIProvider/ThemeProvider API is unchanged; consumers of useCUITheme, Flyout, CodeBlock, and the Assets read the identical theme object. The old createGlobalStyle body rule is reproduced with a behavior-preserving effect on ThemeProvider that sets document.body text/background from the resolved theme. Story-local styled components and the Storybook ThemeBlock decorator are converted to inline styles / the new useTheme; GenericMenu's test wrapper now uses click-ui's ThemeProvider. Drops the babel-plugin-styled-components transform from vite.config and removes styled-components from dependencies, peerDependencies, and resolutions. Verified byte-for-byte against the full visual-regression suite (1237 snapshots, 0 diffs) plus typecheck, build, and 518 unit tests. BREAKING CHANGE: styled-components is no longer a peer dependency; the deprecated linkStyles/StyledLinkProps exports were removed in the prior commit. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: e2ec603 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Complete the CUI-171 sweep across the files the ticket names: - Correct the Badge.module.css comments that claimed Icon injects a styled-components rule at runtime (Icon is a CSS Module now); reframe the doubled-class specificity rationale in terms of CSS Module bundle order. The doubled-class rules themselves are left for the cascade-layer follow-up. - Reword pre-migration references in GenericLabel, Label, SidebarNavigation*, Text, and Title module CSS to drop the now-removed dependency's framing while keeping the current-behavior rationale. - Update the CodeBlock story comment and the codeblock.spec.ts header to describe the buttons rendering via IconButton directly, and fix the stale `@covers src/components/EmptyButton` directive to `IconButton` (CodeBlock no longer renders EmptyButton, so affected-spec selection was mis-targeted). Comment-only changes plus one `@covers` directive; no behavior change. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
XOP
reviewed
Jul 17, 2026
… via CSS
Address review feedback:
- Move ThemeProvider next to ThemeContext under src/theme/ (context and
provider co-located; public export path via providers/index.ts unchanged).
- Replace the imperative document.body inline-style effect with a declarative
`body { color; background-color }` rule in src/theme/styles/global.css using
the token custom properties. It swaps with `data-cui-theme` and ships in the
`@layer clickui` layer, so any consumer `body` rule overrides it. Non-breaking:
ClickUIProvider sets data-cui-theme, and this is lower-priority than the old
inline styles (which would have clobbered a consumer's own body color).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Swap the hard-coded `borderRadius: '4px'` for `var(--click-grid-radii-sm)` (the sm step of the shared radius scale the Grid component uses, = 0.25rem). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Fold the lower-level ThemeProvider into ClickUIProvider and drop it from the
public API. ClickUIProvider now provides the theme React context directly
(alongside the data-cui-theme attribute, persistence, toast, and tooltip it
already owned) and imports the base token CSS. Having two public providers —
one that fully themed and one that only half-themed (never set data-cui-theme,
so CSS Module components stayed light) — was a documented footgun.
BREAKING CHANGE: the `ThemeProvider` export is removed. Replace any bare
`<ThemeProvider theme={…}>` with `<ClickUIProvider theme={…}>`.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Move the ThemeBlock component and the withTheme decorator out of preview.tsx into .storybook/withThemeDecorator.tsx, leaving preview.tsx with just Storybook config. Addresses optional review feedback. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
Storybook Preview Deployed✅ Preview URL: https://click-948o08fvk-clickhouse.vercel.app Built from commit: |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit e2ec603. Configure here.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 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.
Summary
Completes the CSS Modules migration by removing styled-components entirely. Every component already renders from CSS Modules — styled-components survived only as the runtime theme-delivery mechanism (its
ThemeProvider/useThemeReact context) plus some stale comments, deprecated exports, and build config. This replaces that runtime with click-ui's own React context and drops the dependency.Delivered as four reviewable commits:
.tsx/.test.tsx) — pure comment rewording, no behavior change. KeepsuseInitialTheme'smountedflag (SSR/hydration gate); only its stale TODO is updated.linkStyles/StyledLinkPropspublic exports (built on styled-components'css, no internal consumers)..module.csssweep the cleanup ticket calls for: corrects Badge comments that claimed Icon injects styled-components at runtime (Icon is a CSS Module now), rewords pre-migration references in GenericLabel/Label/SidebarNavigation*/Text/Title, and fixes the functional@covers EmptyButton→IconButtondirective in the CodeBlock spec (CodeBlock rendersIconButtondirectly now, so affected-spec selection was mis-targeted). The doubled-class /:where()override rules themselves are left for the cascade-layer follow-up — only their stale comments are reconciled here.How the theme runtime was replaced
src/theme/ThemeContext.ts: a plain React context typed asTheme(defaultthemes.light) plus auseTheme(): Themehook — a drop-in for styled-components'useThemedelivering the identical theme object.ThemeProvidernow wraps children in that context and reproduces the oldcreateGlobalStylebody rule with a behavior-preserving effect that setsdocument.bodytext/background from the resolved theme (restored on unmount). The publicClickUIProvider/ThemeProviderAPI is unchanged for consumers.useThemecall sites (useCUITheme,CodeBlock,Flyout, and the four Assets) now import from the new context.declare module 'styled-components'type augmentation.styledcomponents and the StorybookThemeBlockdecorator converted to inline styles / the newuseTheme;GenericMenu's test wrapper uses click-ui's ownThemeProvider.babel-plugin-styled-componentsfromvite.config.ts; removedstyled-componentsfromdependencies,peerDependencies, andresolutions.Breaking changes
styled-componentsis no longer a peer dependency (remove it if your app doesn't use it directly).linkStyles/StyledLinkPropsexports removed — use theLinkcomponent with thecomponentprop.A
majorchangeset is included.Behavior note for reviewers
Body styling is now an inline-style effect rather than a global stylesheet rule, so it has higher specificity than the old injected rule — a theoretical edge case only if a consumer app styles
bodyand relied on beating the old rule.Verification
tsc --noEmit,lint:code,format(Prettier),stylelintall cleanyarn buildsucceeds with styled-components uninstalledstyled-componentsreferences remain in source,.storybook,vite.config.ts,package.json, oryarn.lock🤖 Generated with Claude Code