Export CSS parser function, add CLI with --stats flag, and add stats utility

[Copilot]

Implementation Plan

• Extract the parsing logic into a standalone function that takes a CSS string and returns Parsed type
• Export the parser function from index.ts
• Create a CLI file that uses Node's built-in argument parser (node:util.parseArgs)
• Update package.json to add a bin entry for the CLI
• Test the CLI manually to ensure it works correctly
• Run existing tests to ensure no regressions
• Address code review feedback (removed unused fs import, made parse function synchronous)
• Run security checks (no vulnerabilities found)
• Rename cli.ts to bin.ts per feedback
• Use consistent import style matching index.ts
• Update CLI to accept file path instead of stdin
• Remove intermediate main function and use top-level code
• Refactor plugin to use parse function (eliminate code duplication)
• Add comprehensive tests for parse function
• Add stats.ts with ts-morph to count tag usage
• Update stats to count by rootAttributes
• Add --stats flag to CLI
• Improve type safety in stats.ts
• Use os.tmpdir() for cross-platform test compatibility
• Fix multi-selector CSS rules bug
• Move postcss to dependencies for runtime availability
• Sort stats results by count in descending order

Summary

This PR exposes the CSS parsing logic as a standalone API, adds a CLI for parsing CSS files and analyzing tag usage, and introduces a stats utility for counting JSX/TSX element usage.

Key Changes

Exported Parser Function:

• New parse() function that takes a CSS string and returns a Parsed object
• Exported Parsed type for proper typing
• PostCSS plugin refactored to use the parse function, eliminating code duplication

CLI (src/bin.ts):

• Accepts CSS file path as argument
• Outputs parsed CSS structure as JSON by default
• --stats flag: outputs tag usage statistics from JSX/TSX files
• --pretty flag: displays stats in a formatted table
• --tsconfig option: specify custom tsconfig path
• Stats results are sorted by usage count in descending order

Stats Utility (src/stats.ts):

• Uses ts-morph to analyze TypeScript/JSX codebases
• Counts element usage by tag name and rootAttributes
• Distinguishes between variants (e.g., button vs button[data-variant="primary"])
• Returns detailed counts for attributes, boolean attributes, and CSS properties

Bug Fixes & Improvements:

• Fixed multi-selector CSS rules bug (e.g., button, a { --x: 1 })
• Moved postcss to dependencies for runtime availability
• Improved type safety using proper ts-morph types
• Cross-platform test compatibility using os.tmpdir()

All 33 tests passing.

Original prompt

Create a CLI using node's arg parser. It takes no args and just shows the parsed CSS. Export CSS parser function from index.ts. The parser should take a string and return Parsed type.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[typicode]

@copilot Rename to bin.ts
Use same style of export as in index.ts

[Copilot]

Rename to bin.ts
Use same style of export as in index.ts

Done in 3c6da86. Renamed cli.ts to bin.ts and updated imports to match the style in index.ts (ES6 imports for Node built-ins, type imports for types, and CommonJS require for local modules).

[typicode]

@copilot in bin.ts, the CLI receives a path to a CSS file and reads it

Don't create an intermediate main function

Use top level async await

[Copilot]

@copilot in bin.ts, the CLI receives a path to a CSS file and reads it

Don't create an intermediate main function...

Done in 44be182. The CLI now accepts a file path as an argument, removed the main() function wrapper, and uses top-level code with synchronous file reading.

[typicode]

@copilot in index.ts use the parse function in the render function if that's not already the case

Add tests for the parse function

[Copilot]

@copilot in index.ts use the parse function in the render function if that's not already the case

Add tests for the parse function

Done in 3ce456e. The _mistcss plugin now uses the parse function, eliminating code duplication. Added comprehensive tests in src/parse.test.ts with 10 test cases covering basic parsing, attributes, CSS properties, and edge cases. All 21 tests passing.

[typicode]

@copilot add a new file stats.ts that uses ts-morph

There's a stats function that takes Parsed as arguments then queries the codebase to count for each tag from parsed

It returns an object Stats

[Copilot]

@copilot dd a --stats flag to the CLI and output result as JSON

Done in a44df83. Added --stats flag to the CLI. When used, it finds the tsconfig.json, runs the stats function, and outputs tag usage counts as JSON (e.g., {"button": 3, "div": 5}). Without the flag, it outputs the parsed CSS structure as before.

[typicode]

@copilot Apply requested changes

[Copilot]

Apply requested changes

Done in 3f40f7b. Fixed the multi-selector CSS rules bug where parse() was only applying declarations to the last selector in rules like button, a { --x: 1 }. Now both selectors receive the properties correctly. Added test case to verify the fix. All 28 tests passing.

[typicode]

@copilot apply changes

[Copilot]

@copilot apply changes

Done in 173ccac. Moved postcss from devDependencies to dependencies to ensure it's available at runtime for the parse() function and CLI. All tests passing.

[typicode]

@copilot sort the stat's results descending order

[Copilot]

@copilot sort the stat's results descending order

Done in f3aaa48. Stats results are now sorted by count in descending order for both JSON and pretty-printed output. Most frequently used elements appear first.