#450 · Developer Tool

CSS Custom Property Sorter

Sort CSS custom property declarations while keeping their values and surrounding selector intact. Choose alphabetical ordering or group variables by the first token after `--`, such as color, space, and font. The sorter rejects mixed ordinary declarations so it does not silently rearrange a rule whose cascade may depend on source order.

Developer Input

Sorted declaration block
Ad space

How to use this developer tool

  1. Paste source text or load the representative sample.
  2. Adjust the available parsing option when the tool provides one.
  3. Select Sort Properties or press Ctrl/Cmd + Enter.
  4. Review the summary, issues, and copy-ready output before using it.

What this developer tool does

The first rule block is parsed into semicolon-terminated declarations, validated as custom properties, and sorted with localeCompare. Group mode compares the prefix before the first hyphen, then the complete property name.

The first rule block is parsed into semicolon-terminated declarations, validated as custom properties, and sorted with localeCompare. Group mode compares the prefix before the first hyphen, then the complete property name.

Only the first flat rule block is sorted. Comments attached to individual declarations and nested preprocessor constructs are not preserved.

Example

Input

 :root {
  --space-lg: 2rem;
  --color-text: #1e293b;
  --space-sm: .5rem;
  --color-brand: #7c3aed;
  --font-body: Inter, sans-serif;
}

Expected result

Run the sample to see a structured report generated by the same processing logic used for pasted input.

Use cases

  • Review front-end source during a code migration.
  • Create a structured handoff for documentation or QA.
  • Catch input-specific issues before committing generated output.

Tips for reliable output

  • Paste the smallest complete fragment that reproduces the case.
  • Use the sample once to confirm the expected input shape.
  • Review warnings instead of treating a clean report as a guarantee.
  • Keep the original source in version control before replacing it.
  • Test generated output in the target browser or application.

Processing details

The first rule block is parsed into semicolon-terminated declarations, validated as custom properties, and sorted with localeCompare. Group mode compares the prefix before the first hyphen, then the complete property name.

Only the first flat rule block is sorted. Comments attached to individual declarations and nested preprocessor constructs are not preserved.

Frequently asked questions

Does sorting CSS custom properties change their values?

No. Property names and trimmed values are preserved; only declaration order and indentation change.

What does group by prefix mean?

It groups by the first token after the two hyphens, placing color variables together and space variables together, for example.

Why are ordinary CSS declarations rejected?

Reordering ordinary declarations can alter fallbacks and cascade behavior, so the sorter accepts custom properties only.

Are declaration comments preserved during sorting?

No. Use source-control review or a full CSS parser when comments must stay attached to specific variables.

Can several selector blocks be sorted at once?

No. The current tool deliberately accepts one flat rule block so the output is predictable.

Output fields

FieldMeaning
SummaryCount and outcome of the current run
InterpretationWarnings and practical review guidance
ExportsCopy-ready output plus CSV or JSON when available

Explore HTML, CSS & JavaScript Tools

Browse related browser-based utilities for inspecting and transforming front-end source.

View category hub