Envelopes

Envelopes let you collapse a full utility string into one named class and reopen it when you need to edit. They are stored in elevate.env.json and applied anywhere you use env:name.

Create An Envelope

Add env:name alongside your utilities. On save, Elevate captures the utilities and condenses the class list to just env:name.

<div class="env:card pd-x:d4 bg-color:red mg-t:d1 @hover:[bg-color:blue]">
  Env definition
</div>

After save, the class list becomes:

<div class="env:card"></div>

Open An Envelope

To edit an envelope, use env:name:open. On save, Elevate expands the class list and keeps the :open marker so it stays open until you close it. While open, edits update the registry on save.

<div class="env:card:open"></div>

Expands to:

<div class="env:card:open pd-x:d4 bg-color:red mg-t:d1 @hover:[bg-color:blue]"></div>

Close An Envelope

Remove :open and save to condense back to a single class:

<div class="env:card"></div>

Envelope Lifecycle (What Changes In The File)

1. Define

   • You write env:card alongside utilities.
   • On save, Elevate records the utilities into elevate.env.json and rewrites the class list to only env:card.

2. Open

   • You change the class to env:card:open.
   • On save, Elevate expands the stored utilities into the class list and keeps :open so the envelope stays editable.
   • While open, every save updates the envelope registry with your edits.

3. Close

   • You remove :open.
   • On save, Elevate collapses the class list back to env:card and the registry keeps the latest version.

Combined Example

This shows breakpoints and states captured inside an envelope:

<div class="env:card pd:d4 bg-color:indigo-3 text:white /sm/ pd:d6 /lg/ bg-color:indigo @hover:[bg-color:indigo-2_text:white]">
  Card
</div>

On save, this becomes:

<div class="env:card"></div>

Rules And Notes

• Prefer one envelope per class list. Multiple env definitions skip auto-condense.
• Names allow letters, numbers, and dashes.
• Breakpoints and state blocks are captured as part of the envelope.
• Combinator directives are allowed; they target relatives of the env element (implicit env scope).
• Auto rewrite only runs on static class strings. Dynamic className expressions are skipped.
• env:open expansion only runs when the class list contains only env tokens (plus optional ctx or breakpoint markers).