Usage

Inline styles read flat — every property looks the same. Style Pastel tints each declaration by category so they fall into visual groups at a glance:

Usage

Layout (blue) — display, align-items, gap, …
Box (emerald) — padding, margin, width, …
Surface (pink) — background, border-radius, box-shadow, …
Typography (amber) — font-size, color, line-height, …
Motion (violet) — transition, transform, …
Other (gray) — cursor, user-select, pointer-events, …

Works in both style="..." strings and JSX style={{ ... }} objects (kebab-case and camelCase classify the same way).

Features

Category-based coloring — every declaration's property name is colored by category
CSS variable highlighting — both --brand: red; declarations and var(--brand) references inside values get a distinct cool tone (slate-300)
Multi-attribute support — picks up style, :style (Vue), [style] (Angular), ngStyle, and JSX style={ ` ... ` } template literals
Long property aware — padding-inline-start, border-top-left-radius, -webkit-mask-image, etc. classify by their longest matching prefix
Debounced updates — re-highlights 150ms after edits to stay snappy on large files

Categories

Six high-level groups, sharing the same palette as Tailwind Pastel so the visual language stays consistent if you use both:

Category	Color	Covers
Layout	Blue	`display`, `position`, `flex`/`grid`, `gap`, `justify/align/place-*`, `overflow`
Box	Emerald	sizing (`width`, `height`, `min/max-`) and spacing (`padding-`, `margin-*`)
Typography	Amber	`font-`, `color`, `text-`, `line-height`, `letter-spacing`, `white-space`
Surface	Pink	`background-`, `border-`, `outline-`, `box-shadow`, `opacity`, `filter`, `mask-`
Motion	Violet	`transition-`, `animation-`, `transform`, `translate`, `rotate`, `scale`
Other	Gray	`cursor`, `user-select`, `pointer-events`, `scroll-*`, `touch-action`, fallback

CSS custom properties (--brand) and var(--brand) references use a separate slate tone so they stand out from regular property names.

Supported Languages

TypeScript React (.tsx)
JavaScript React (.jsx)
HTML
Vue
Svelte
Astro

Detection

Style strings are extracted from the following attribute forms:

style="..." / style='...' (HTML, Svelte, Astro, JSX)
style={ ` ... ` } (JSX tagged-template inside expression — no ${} interpolation)
style={{ ... }} (JSX object form — camelCase keys, kebab-case quoted keys, vendor prefixes like WebkitMaskImage, and '--brand' custom properties all classify correctly)
:style="..." (Vue)
[style]="..." (Angular property binding)
ngStyle="..." (Angular)

For string-based attributes, each prop: value; pair becomes one token. Parentheses and brackets in values are respected, so commas/semicolons inside rgb(0, 0, 0) or calc(100% - 16px) don't split a declaration.

For JSX object form, each key: value pair becomes one token, separated at top-level ,. String literals, template literals (including ${} interpolation), comments, and nested ()/[]/{} are all skipped when looking for the separator. Spread (...base) and computed keys ([expr]) are ignored.

Configuration

Setting	Type	Default	Description
`stylePastel.enabled`	`boolean`	`true`	Enable category highlighting

Commands

Command	Description
`Style Pastel: Toggle Highlighting`	Flip `stylePastel.enabled` — writes to workspace settings if defined there, otherwise to global.
`Style Pastel: Inspect Declaration at Cursor`	Shows the category of the declaration under the cursor in the status bar (debug helper).