Forem: Pure Cascade

Pure Cascade — Week 4: Chrome Extension MVP

Pure Cascade — Wed, 12 Nov 2025 14:41:09 +0000

This week was rough— probably the hardest so far.
We hit a wall of unexpected bugs:

Chrome’s CSP blocking injected scripts,
mysterious “file isn’t UTF-8” errors,
weird Vite + MV3 alias resolution quirks,
and several executeScript dead ends that broke silently.

It took dozens of micro-fixes and re-architecture steps, but the result is solid:

✅ What we accomplished

Stable Vite build with browser polyfills (path-browserify, fs shim).
MV3-safe architecture: content scripts loaded via manifest, no unsafe eval.
Full analyzer integration — local import from monorepo (packages/analyzer/src).
CSS collection (inline + cross-domain via background FETCH_CSS).
Popup UI: Analyze / Reset / Copy / Download / Open in Web App.
Live updates between background ↔ popup with chrome.storage.
Metrics & highlights: score, files, rules, selectors, declarations, conflicts (color-coded).
Logging system — background logs visible in popup.
Web report page with search, filters, pagination for conflicts/duplicates.
Minimal permissions, icons, version sync, and tests on real sites.

💡 Lessons learned

MV3 demands a fundamentally different mindset — “injecting code” is replaced by data passing and manifest-declared scripts.
Avoid relying on DevTools console: service worker logs are the real goldmine.
Always check file encodings and path resolution inside monorepos — the defaults bite hard.

🚀 What’s next

Week 5 focuses on Analyzer Insights & Web Dashboard: visualizations, distributions, CI-friendly exports, and richer filtering UX.

After fighting through so many invisible walls, it feels amazing to finally click “Analyze” and watch a clean, working report pop up.

🌊 Week 3 — Pure Cascade now measures your CSS quality

Pure Cascade — Sat, 25 Oct 2025 14:36:17 +0000

This week Pure Cascade grew up from a parser into a CSS quality monitor.

🔧 What’s new

Duplicate detection — finds repeating selectors and declarations

Conflict detection — highlights properties with multiple conflicting values across files

CSS Health Score (0–100) — a quick numeric view of how “clean” your CSS is

JSON Export — download your analysis report directly from the browser

Now the tool doesn’t just count — it actually evaluates the structure and consistency of your styles.

💡 Why this matters

CSS debt usually hides in repetition and inconsistency.
Pure Cascade can now tell you where and how much that debt costs you.

It’s a small step toward making maintainable CSS measurable.

🚀 Next

Chrome extension MVP

Analyze live pages right from DevTools

Visualize conflicts and health score interactively

Week 3 done — Pure Cascade now has a brain.

buildinpublic #frontend #css #devtools #typescript #vite

🌊 Week 2 — Pure Cascade now actually analyzes your CSS

Pure Cascade — Sat, 25 Oct 2025 11:49:11 +0000

This week, Pure Cascade stopped being a UI mockup and became a working tool.

🔧 What’s new

Built the core analyzer using PostCSS

Added metrics for:

total rules / selectors / declarations

unique selectors

property frequency

Implemented ZIP import — you can now drop a project archive right into the browser and get a real JSON report.

Connected everything: front → analyzer → report.

It’s still raw, but it already parses real CSS and shows meaningful data.

🧩 Why this matters

The hardest part isn’t building UI — it’s making the system actually understand CSS.
Now that the parsing and counting pipeline works, adding more logic (duplicates, conflicts, health score) is straightforward.

🚀 Next

detect duplicate selectors and conflicting declarations

compute a CSS “health score”

display it nicely in the Report page

Once that’s in, Pure Cascade will evolve from “parser” into a true CSS health monitor.

Small step, big unlock — now it’s analyzing real code.

buildinpublic #frontend #css #devtool #react #typescript #vite

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

Pure Cascade — Sat, 18 Oct 2025 15:23:07 +0000

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. 🌊

buildinpublic #frontend #css #devtool #vite #react #typescript #webdev

🚀 Building a CSS DevTool in Public (6 Hours/Week Challenge)

Pure Cascade — Wed, 15 Oct 2025 05:54:11 +0000

Hi everyone 👋

I’m starting a small, honest experiment: building a DevTool that helps developers analyze and optimize CSS faster.

I’ll be doing it in public — sharing my process, mistakes, and small wins along the way.

Constraints:
🕕 Only 6 hours per week
💻 No team, no funding
🎯 Goal: working demo in 6 weeks

Why?
Because writing and maintaining CSS can be painful. I want to explore how automation and better UX can save time for developers.

Follow this journey if you’re into:

front-end development (React/Vue/TypeScript)

CSS tooling & optimization

building small, useful products in public

Let’s see where this goes 🚀

You can also follow my progress on X (Twitter) → @PureCascadeCSS