🌊 Week 1 — Building the Foundation of Pure Cascade, a CSS Health Analyzer

#sideprojects #showdev #tooling #css

Hi everyone 👋
Here’s my first weekly update on building Pure Cascade — a small DevTool that helps developers analyze and “clean up” their CSS.

💡 The Idea

CSS is powerful but messy.
Even well-structured projects quickly accumulate:

duplicate rules,
conflicting selectors,
and unused styles.

The goal of Pure Cascade is simple:

“Make CSS health as easy to measure as running Lighthouse.”

It will scan your project (or a live page), find issues, and visualize them as a “CSS Health Report”.

⚙️ Week 1 — Foundation

I spent this week laying down the groundwork instead of rushing into features.

Highlights:

✅ Structured the monorepo: /apps/web, /packages/analyzer, /apps/chrome-extension
✅ Created the React + Vite + TypeScript web app
✅ Built the initial UI: Upload and Report pages
✅ Connected mock data for the demo report
✅ Set up a minimal CI pipeline on GitLab
✅ Organized documentation and roadmap

Now the app already runs locally and shows a placeholder report — the architecture is ready for the real analyzer engine.

🔭 Next Steps

Week 2 will be all about the core logic — the analyzer package:

parse CSS with PostCSS,
count rules and selectors,
detect duplicates and conflicts,
output a real JSON report.

This will turn the project from “UI shell” into a working tool.

Thanks for following along — building in public really helps stay consistent.
If you’re curious about front-end tooling or CSS internals, follow for weekly progress. 🌊