css-to-class

What problem does it solve?

css-to-class eliminates the maintenance burden of “utility soup” by turning long class attribute strings into a single semantic CSS class that’s easier to read, reuse, and refactor.

Core Features & Use Cases

• Class list to single semantic selector: Converts an element’s multi-class value into one named class under consistent kebab-case rules.
• Resolves declarations from your project CSS: Greps discovered project .css files to inline the actual property/value declarations for each utility token.
• Preserves at-rule context: Keeps declarations that originate inside @media, @supports, or @layer in nested form so responsive/feature behavior remains correct.
• Handles unresolved tokens safely: Emits placeholders for any tokens that can’t be resolved from existing CSS so you can fill gaps manually.

Quick Start

Extract the utility declarations from the provided HTML element into a new single semantic class in your project CSS, using css-to-class with your element’s class attribute as input.