@vidhyasagarthakur/css-tracker

Runtime CSS usage tracker plugin for DevToolkit.

What It Does

• Scans runtime DOM classes
• Observes class changes through MutationObserver
• Compares runtime usage against classes extracted from stylesheets
• Emits report events when toolkit stops

Install

pnpm add @vidhyasagarthakur/css-tracker @vidhyasagarthakur/core

Plugin Usage

import { createToolkit } from "@vidhyasagarthakur/core";
import { cssTrackerPlugin, type CSSTrackerEvents } from "@vidhyasagarthakur/css-tracker";

const toolkit = createToolkit<CSSTrackerEvents>({
  plugins: [cssTrackerPlugin({ reportOnStop: true })],
});

toolkit.on("css:report", (report) => {
  console.log(report.usagePercent);
});

Tracker Report

CSSTrackerReport includes:

• used and usedCount
• unused and unusedCount
• total
• usagePercent
• topUsedClasses

Exposed APIs

• cssTrackerPlugin(options)
• CSSTracker
• extractClassesFromStylesheets()

Notes

• Cross-origin stylesheets may be skipped by browser security rules.
• Report quality depends on access to stylesheet rules at runtime.

License

MIT