Skip to content

chore: 🤖 clear scss setup (technical debt)#784

Merged
punkbit merged 31 commits into
mainfrom
chore/tech-debt-clear-scss-setup
Feb 20, 2026
Merged

chore: 🤖 clear scss setup (technical debt)#784
punkbit merged 31 commits into
mainfrom
chore/tech-debt-clear-scss-setup

Conversation

@punkbit
Copy link
Copy Markdown
Contributor

@punkbit punkbit commented Jan 28, 2026

Why?

The following PR cleans up the build configuration, token generation and related processes. By removing legacy styling setups and simplifying the token generation to only the required setup. This work is important before starting to migrate off styled components. Effectively, reducing technical debt.

For example, the SCSS setup is not providing any value, e.g. there was an unused 320KB file named src/styles/tokens-light-dark.scss.

It seems that the setup is promoted as offering "tree-shaking" benefits, but I suspect this is not correct from what I could assess. With that being said, even if the consumer app, only use a single variable, the entire 320KB of CSS custom properties would be spit into the final CSS bundle!

Considering that variables change with time, and if not managed correctly, might increase dramatically, the file size would increase and make the app's distributed bundle size increase for no additional value. Think that tree shaking means a sort of static analysis that has to determine which tokens (bits of code) are not used, to remove them safely. It's not the case here with the current setup, e.g. the whole ":root" stuff would go in.

Other changes might have extended to removing legacy, unused or orphaned CSS files found in the project.

Finally, the changes here help to clear or reduce some of the technical debt, e.g. taking a step back before jumping much further. There are other pending PR, which once merged will allow further progress to improve the code base. Please do take a moment to check them here.

⚠️ WARNING: Depends on #783, which should be merged firstly.
🤖 Switch base branch to main, once #783 merged

How?

  • Removed SCSS/CSS Modules configuration from Vite and deleted unused stylesheet files (App.css, Home.module.css)
  • Reorganised the scripts location
  • Streamlined token generation to output only required files (reduced at least ~320KB)
  • Cleaned up deprecated theme types and standardized theme name constants
    no secrets or API keys
  • Make the format script reusable, e.g. use it in the generate-token statement
  • Renamed the build-token script as generate-token, as found in the actual package.json

Preview?

src/theme directory

src/theme
├── ClickUIProvider
│   ├── ClickUIProvider.tsx
│   └── index.ts
├── index.ts
├── theme.tsx
└── tokens
    ├── variables.dark.ts
    └── variables.light.ts

3 directories, 6 files

.scripts directory

.scripts
├── bash
│   ├── changeset-verification
│   └── format
└── js
    └── generate-tokens.js

3 directories, 3 files

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Jan 28, 2026

🦋 Changeset detected

Latest commit: 3cefda8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@clickhouse/click-ui Minor

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

@vercel
Copy link
Copy Markdown

vercel Bot commented Jan 28, 2026

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

Project Deployment Actions Updated (UTC)
click-ui Ready Ready Preview, Comment Feb 12, 2026 6:28pm

Request Review

@punkbit punkbit changed the title chore: 🤖 clear scss setup (tech debt) chore: 🤖 clear scss setup (technical debt) Jan 28, 2026
@punkbit punkbit changed the base branch from main to chore/tech-debt-consolidate-dev-environment January 28, 2026 18:46
Comment thread README.md
Base automatically changed from chore/tech-debt-consolidate-dev-environment to main January 29, 2026 09:51
@punkbit punkbit marked this pull request as ready for review February 3, 2026 10:30
Copy link
Copy Markdown
Collaborator

@gjones gjones left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code looks logical enough, no issues from me there.
I pulled and tested the branch, the generate:tokens scripts still works.
Visually tested the test environment and saw no regressions so 👍 from me.

@punkbit punkbit merged commit 970cdfb into main Feb 20, 2026
7 checks passed
@punkbit punkbit deleted the chore/tech-debt-clear-scss-setup branch February 20, 2026 17:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants