Skip to content

v0.0.33 - Shorthand fixes

Choose a tag to compare

@TheJaredWilcurt TheJaredWilcurt released this 02 Sep 16:18
· 23 commits to main since this release

Code and Release notes by Claude Opus 5 High:

What was failing

Three shorthands tests, all about whitespace that CSS doesn't need:

  • 0023 — border:4px solid#0000 and border-image:url(border.png)30 round
  • 0031 — font-variation-settings:"wght"600,"wdth"75
  • 0035 — border:var(--bw)var(--bs)var(--bc)

What I changed

New tokens.js — a CSS Syntax tokenizer for values, plus elideRedundantSeparators(). This replaces four overlapping regex helpers (elideSpaceBeforeHexColors, elideSpaceAfterParentheses, elideSpaceAfterStrings, hasCommaSeparatedEntries) with one rule: a whitespace run goes only when

  1. one of its neighbours spells out the boundary itself (ends with )/]/}/quote, or starts with #/!/quote/bracket),
  2. the two tokens re-tokenize unchanged when written together (so 4px solid stays, solid #0000 collapses), and
  3. neither side is a +/- math operator.

Custom properties are now excluded, since their whitespace is a token they store (0020, 0021). src\value\tokens.js:476-503

config.js — added hasPositionalComponents(), derived from shorthandMap rather than hard-coded: a shorthand is positional when its longhands are the same property repeated per side/axis (padding-top/-right/..., row-gap, border-top-left-radius). Those keep their separators when assembled from longhands (shorthands/0034); type-distinguished shorthands like border and border-image don't (0023, 0035).

minify.js — separator removal now happens once, at the end, after all color shortening; the border style/width reorder regex now verifies the second component actually is a width before swapping.

Verification beyond the test suite

I diffed output against the pre-change code over 193 real-world CSS files (real-world-css-libraries, without running npm run real): net -79 bytes, timings unchanged. Every file that grew was a bug fix — the old ordering emitted invalid CSS such as border:1px solidsilver and border:6px solidred (the color shortener rewrote #c0c0c0 back to a name after the space had already been dropped). The one genuine size increase is tw-animate-css, where a custom property now correctly keeps its whitespace tokens.