@miaskiewicz/turbo-dom 0.5.8 → 0.7.0

package/src/runtime/cascade.mjs

@@ -1,5 +1,6 @@
 // Partial computed-style cascade — resolves getComputedStyle from injected <style>
-// sheets (emotion/MUI `.css-HASH { … }`), inline styles, and specificity ordering.
+// sheets (emotion/MUI `.css-HASH { … }`), inline styles, and specificity ordering (Selectors 4
+// specificity per rule item, selectors.mjs `specificity()`, then source order).
 //
 // PERF: every hot path (parse, querySelectorAll, getElementsBy*, matching, events)
 // NEVER calls getComputedStyle — only test assertions do. So all work here is lazy,
@@ -14,12 +15,13 @@
 // CSS custom-property resolution. Colors ARE canonicalized to rgb()/rgba() (color.mjs)
 // and bare-0 lengths to `0px`, matching what a browser serializes.
 
-import { matchesSelector } from './selectors.mjs';
+import { compareSpecificity, matchesSelector, matchesSlotted, ruleSelectors, specificity } from './selectors.mjs';
 import { COLOR_PROPS, canonicalizeColor } from './color.mjs';
 
 const kebab = (s) => s.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
 
-// Longhand → shorthand fallback for single-token shorthands (mirrors dom.mjs styleGet).
+// Longhand → shorthand fallback for single-token shorthands of the computed map (the inline
+// el.style itself expands shorthands since turbo-dom#90, css-shorthand.mjs).
 const SHORTHAND_OF = {
   'background-color': 'background',
   'margin-top': 'margin', 'margin-right': 'margin', 'margin-bottom': 'margin', 'margin-left': 'margin',
@@ -75,14 +77,6 @@ function parseDecls(text, into) {
   return map;
 }
 
-// rough WHATWG specificity: a*10000 + b*100 + c (ids, classes/attrs/pseudos, types)
-function specificity(sel) {
-  const a = (sel.match(/#[\w-]+/g) || []).length;
-  const b = (sel.match(/\.[\w-]+|\[[^\]]*\]|:[\w-]+/g) || []).length;
-  const c = (sel.match(/(^|[\s>+~])[a-zA-Z][\w-]*/g) || []).length;
-  return a * 10000 + b * 100 + c;
-}
-
 // Brace-depth scan: emit only depth-1 rules whose selector isn't an at-rule; the
 // bodies of @media/@keyframes (nested braces) are skipped wholesale.
 function parseStylesheet(css, startOrder, rules) {
@@ -105,9 +99,11 @@ function parseStylesheet(css, startOrder, rules) {
     while (k < n && depth > 0) { const ch = css[k]; if (ch === '{') depth++; else if (ch === '}') depth--; k++; }
     if (sel && sel[0] !== '@') {
       const decls = parseDecls(css.slice(j + 1, k - 1));
-      if (decls.size) for (const part of sel.split(',')) {
-        const t = part.trim();
-        if (t) rules.push({ selector: t, decls, spec: specificity(t), order: order++ });
+      // the prelude is a selector LIST split at top-level commas only (`:is(a, b)` stays
+      // whole); an invalid list drops the whole rule, as in a browser; each item carries its
+      // Selectors 4 specificity (mirrors rtdom::cascade::parse_stylesheet)
+      if (decls.size) for (const t of ruleSelectors(sel)) {
+        rules.push({ selector: t, decls, spec: specificity(t), order: order++ });
       }
     } else { order++; }
     i = k;
@@ -148,8 +144,8 @@ const SLOTTED_RE = /::slotted\(([^)]*)\)/;      // ::slotted(sel)
 // Collect rules from one index that apply to `el` under a given `kind`:
 //  'normal'  — el matched against the selector (skips :host/::slotted rules)
 //  'host'    — el is a shadow host; match the inner of a :host[(sel)] rule
-//  'slotted' — el is a slotted light node; match the inner of ::slotted(sel)
-function collectMatched(el, rules, kind, into) {
+//  'slotted' — el is a slotted light node assigned to `slot`; match ::slotted() rules
+function collectMatched(el, rules, kind, into, slot) {
   for (let i = 0; i < rules.length; i++) {
     const r = rules[i];
     const sel = r.selector;
@@ -157,16 +153,14 @@ function collectMatched(el, rules, kind, into) {
     const slotM = SLOTTED_RE.exec(sel);
     if (kind === 'normal') {
       if (hostM || slotM) continue; // shadow-only selectors never match plain elements
-      try { if (matchesSelector(el, sel)) into.push(r); } catch { /* unsupported → skip */ }
+      try { if (matchesSelector(el, sel, null)) into.push(r); } catch { /* unsupported → skip */ }
     } else if (kind === 'host') {
       if (!hostM) continue;
       const inner = hostM[1];
       if (inner === undefined) into.push(r);
-      else try { if (matchesSelector(el, inner.trim())) into.push(r); } catch { /* skip */ }
-    } else { // slotted
-      if (!slotM) continue;
-      const inner = (slotM[1] || '*').trim() || '*';
-      try { if (matchesSelector(el, inner)) into.push(r); } catch { /* skip */ }
+      else try { if (matchesSelector(el, inner.trim(), null)) into.push(r); } catch { /* skip */ }
+    } else if (slotM && matchesSlotted(el, slot, sel)) { // slotted
+      into.push(r);
     }
   }
 }
@@ -192,7 +186,7 @@ function flattenedParent(el) {
 }
 
 function applyMatched(matched, out) {
-  matched.sort((x, y) => x.spec - y.spec || x.order - y.order);
+  matched.sort((x, y) => compareSpecificity(x.spec, y.spec) || x.order - y.order);
   for (const r of matched) for (const [k, val] of r.decls) out.set(k, val);
 }
 
@@ -260,7 +254,7 @@ export function makeGetComputedStyle() {
       if (el.__shadow) collectMatched(el, getIndex(el.__shadow, v), 'host', matched);
       // slotted light node: overlay ::slotted rules from the slot's shadow root
       const slot = el.assignedSlot;
-      if (slot) { const sr = slot.getRootNode(); if (sr.__isShadowRoot) collectMatched(el, getIndex(sr, v), 'slotted', matched); }
+      if (slot) { const sr = slot.getRootNode(); if (sr.__isShadowRoot) collectMatched(el, getIndex(sr, v), 'slotted', matched, slot); }
     }
     applyMatched(matched, map);
 

package/src/runtime/color.mjs

@@ -3,7 +3,7 @@
 // `toHaveStyle` compares the element's computed value against the expected value
 // AS STRINGS, after each is run through the DOM's own normalization — so to match
 // a browser (and jsdom) both getComputedStyle (cascade.mjs) and inline style
-// read-back (dom.mjs styleGet) must canonicalize. This module is the shared core.
+// read-back (dom.mjs makeStyle) must canonicalize. This module is the shared core.
 //
 // PERF: only ever called from getComputedStyle + el.style reads (test/app time),
 // and only for properties in COLOR_PROPS. Parse/query/match/event hot paths never

package/src/runtime/css-shorthand-table.mjs

@@ -0,0 +1,238 @@
+// Chrome 156's CSSStyleDeclaration shorthand table and longhand aliases: the same data as turbo-dom's
+// crates/turbo-dom/src/rtdom/css_shorthand/table.rs and block.rs LONGHAND_ALIASES, measured from Chrome
+// 156 (crates/turbo-dom/tests/fixtures/css_shorthand_chrome156.json; test/css-shorthand-chrome.test.mjs
+// checks both against it). Rows: [name, canonical, grammar, allowInitial, longhands].
+export const SHORTHAND_TABLE = [
+  ["-webkit-animation", "animation", "animation", false, ["animation-duration", "animation-timing-function", "animation-delay", "animation-iteration-count", "animation-direction", "animation-fill-mode", "animation-play-state", "animation-name", "animation-timeline", "animation-range-start", "animation-range-end"]],
+  ["-webkit-border-after", "border-block-end", "border-block-end", true, ["border-block-end-width", "border-block-end-style", "border-block-end-color"]],
+  ["-webkit-border-before", "border-block-start", "border-block-start", true, ["border-block-start-width", "border-block-start-style", "border-block-start-color"]],
+  ["-webkit-border-end", "border-inline-end", "border-inline-end", true, ["border-inline-end-width", "border-inline-end-style", "border-inline-end-color"]],
+  ["-webkit-border-radius", "border-radius", "-webkit-border-radius", false, ["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius"]],
+  ["-webkit-border-start", "border-inline-start", "border-inline-start", true, ["border-inline-start-width", "border-inline-start-style", "border-inline-start-color"]],
+  ["-webkit-column-rule", "column-rule", "column-rule", false, ["column-rule-width", "column-rule-style", "column-rule-color"]],
+  ["-webkit-columns", "columns", "columns", false, ["column-width", "column-count", "column-height", "column-wrap"]],
+  ["-webkit-flex", "flex", "flex", false, ["flex-grow", "flex-shrink", "flex-basis"]],
+  ["-webkit-flex-flow", "flex-flow", "flex-flow", false, ["flex-direction", "flex-wrap"]],
+  ["-webkit-mask", "mask", "mask", false, ["mask-image", "-webkit-mask-position-x", "-webkit-mask-position-y", "mask-size", "mask-repeat", "mask-origin", "mask-clip", "mask-composite", "mask-mode"]],
+  ["-webkit-mask-box-image", "-webkit-mask-box-image", "-webkit-mask-box-image", true, ["-webkit-mask-box-image-source", "-webkit-mask-box-image-slice", "-webkit-mask-box-image-width", "-webkit-mask-box-image-outset", "-webkit-mask-box-image-repeat"]],
+  ["-webkit-mask-position", "mask-position", "-webkit-mask-position", false, ["-webkit-mask-position-x", "-webkit-mask-position-y"]],
+  ["-webkit-text-emphasis", "text-emphasis", "text-emphasis", true, ["text-emphasis-style", "text-emphasis-color"]],
+  ["-webkit-text-stroke", "-webkit-text-stroke", "-webkit-text-stroke", true, ["-webkit-text-stroke-width", "-webkit-text-stroke-color"]],
+  ["-webkit-transition", "transition", "transition", false, ["transition-property", "transition-duration", "transition-timing-function", "transition-delay", "transition-behavior"]],
+  ["animation", "animation", "animation", false, ["animation-duration", "animation-timing-function", "animation-delay", "animation-iteration-count", "animation-direction", "animation-fill-mode", "animation-play-state", "animation-name", "animation-timeline", "animation-range-start", "animation-range-end"]],
+  ["animation-range", "animation-range", "animation-range", false, ["animation-range-start", "animation-range-end"]],
+  ["background", "background", "background", true, ["background-image", "background-position-x", "background-position-y", "background-size", "background-repeat", "background-attachment", "background-origin", "background-clip", "background-color"]],
+  ["background-position", "background-position", "background-position", false, ["background-position-x", "background-position-y"]],
+  ["border", "border", "border", false, ["border-top-color", "border-top-style", "border-top-width", "border-right-color", "border-right-style", "border-right-width", "border-bottom-color", "border-bottom-style", "border-bottom-width", "border-left-color", "border-left-style", "border-left-width", "border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"]],
+  ["border-block", "border-block", "border-block", false, ["border-block-start-color", "border-block-start-style", "border-block-start-width", "border-block-end-color", "border-block-end-style", "border-block-end-width"]],
+  ["border-block-color", "border-block-color", "border-block-color", false, ["border-block-start-color", "border-block-end-color"]],
+  ["border-block-end", "border-block-end", "border-block-end", true, ["border-block-end-width", "border-block-end-style", "border-block-end-color"]],
+  ["border-block-start", "border-block-start", "border-block-start", true, ["border-block-start-width", "border-block-start-style", "border-block-start-color"]],
+  ["border-block-style", "border-block-style", "border-block-style", false, ["border-block-start-style", "border-block-end-style"]],
+  ["border-block-width", "border-block-width", "border-block-width", false, ["border-block-start-width", "border-block-end-width"]],
+  ["border-bottom", "border-bottom", "border-bottom", false, ["border-bottom-width", "border-bottom-style", "border-bottom-color"]],
+  ["border-color", "border-color", "border-color", false, ["border-top-color", "border-right-color", "border-bottom-color", "border-left-color"]],
+  ["border-image", "border-image", "border-image", false, ["border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"]],
+  ["border-inline", "border-inline", "border-inline", false, ["border-inline-start-color", "border-inline-start-style", "border-inline-start-width", "border-inline-end-color", "border-inline-end-style", "border-inline-end-width"]],
+  ["border-inline-color", "border-inline-color", "border-inline-color", false, ["border-inline-start-color", "border-inline-end-color"]],
+  ["border-inline-end", "border-inline-end", "border-inline-end", true, ["border-inline-end-width", "border-inline-end-style", "border-inline-end-color"]],
+  ["border-inline-start", "border-inline-start", "border-inline-start", true, ["border-inline-start-width", "border-inline-start-style", "border-inline-start-color"]],
+  ["border-inline-style", "border-inline-style", "border-inline-style", false, ["border-inline-start-style", "border-inline-end-style"]],
+  ["border-inline-width", "border-inline-width", "border-inline-width", false, ["border-inline-start-width", "border-inline-end-width"]],
+  ["border-left", "border-left", "border-left", false, ["border-left-width", "border-left-style", "border-left-color"]],
+  ["border-radius", "border-radius", "border-radius", false, ["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius"]],
+  ["border-right", "border-right", "border-right", false, ["border-right-width", "border-right-style", "border-right-color"]],
+  ["border-spacing", "border-spacing", "border-spacing", false, ["-webkit-border-horizontal-spacing", "-webkit-border-vertical-spacing"]],
+  ["border-style", "border-style", "border-style", false, ["border-top-style", "border-right-style", "border-bottom-style", "border-left-style"]],
+  ["border-top", "border-top", "border-top", false, ["border-top-width", "border-top-style", "border-top-color"]],
+  ["border-width", "border-width", "border-width", false, ["border-top-width", "border-right-width", "border-bottom-width", "border-left-width"]],
+  ["column-rule", "column-rule", "column-rule", false, ["column-rule-width", "column-rule-style", "column-rule-color"]],
+  ["column-rule-inset", "column-rule-inset", "column-rule-inset", false, ["column-rule-inset-cap-start", "column-rule-inset-cap-end", "column-rule-inset-junction-start", "column-rule-inset-junction-end"]],
+  ["column-rule-inset-cap", "column-rule-inset-cap", "column-rule-inset-cap", false, ["column-rule-inset-cap-start", "column-rule-inset-cap-end"]],
+  ["column-rule-inset-end", "column-rule-inset-end", "column-rule-inset-end", false, ["column-rule-inset-cap-end", "column-rule-inset-junction-end"]],
+  ["column-rule-inset-junction", "column-rule-inset-junction", "column-rule-inset-junction", false, ["column-rule-inset-junction-start", "column-rule-inset-junction-end"]],
+  ["column-rule-inset-start", "column-rule-inset-start", "column-rule-inset-start", false, ["column-rule-inset-cap-start", "column-rule-inset-junction-start"]],
+  ["columns", "columns", "columns", false, ["column-width", "column-count", "column-height", "column-wrap"]],
+  ["contain-intrinsic-size", "contain-intrinsic-size", "contain-intrinsic-size", false, ["contain-intrinsic-width", "contain-intrinsic-height"]],
+  ["container", "container", "container", false, ["container-name", "container-type"]],
+  ["corner-block-end-shape", "corner-block-end-shape", "corner-block-end-shape", false, ["corner-end-start-shape", "corner-end-end-shape"]],
+  ["corner-block-start-shape", "corner-block-start-shape", "corner-block-start-shape", false, ["corner-start-start-shape", "corner-start-end-shape"]],
+  ["corner-bottom-shape", "corner-bottom-shape", "corner-bottom-shape", false, ["corner-bottom-left-shape", "corner-bottom-right-shape"]],
+  ["corner-inline-end-shape", "corner-inline-end-shape", "corner-inline-end-shape", false, ["corner-start-end-shape", "corner-end-end-shape"]],
+  ["corner-inline-start-shape", "corner-inline-start-shape", "corner-inline-start-shape", false, ["corner-start-start-shape", "corner-end-start-shape"]],
+  ["corner-left-shape", "corner-left-shape", "corner-left-shape", false, ["corner-top-left-shape", "corner-bottom-left-shape"]],
+  ["corner-right-shape", "corner-right-shape", "corner-right-shape", false, ["corner-top-right-shape", "corner-bottom-right-shape"]],
+  ["corner-shape", "corner-shape", "corner-shape", false, ["corner-top-left-shape", "corner-top-right-shape", "corner-bottom-right-shape", "corner-bottom-left-shape"]],
+  ["corner-top-shape", "corner-top-shape", "corner-top-shape", false, ["corner-top-left-shape", "corner-top-right-shape"]],
+  ["flex", "flex", "flex", false, ["flex-grow", "flex-shrink", "flex-basis"]],
+  ["flex-flow", "flex-flow", "flex-flow", false, ["flex-direction", "flex-wrap"]],
+  ["font", "font", "font", false, ["font-style", "font-variant-ligatures", "font-variant-caps", "font-variant-numeric", "font-variant-east-asian", "font-variant-alternates", "font-variant-position", "font-variant-emoji", "font-weight", "font-stretch", "font-size", "line-height", "font-family", "font-optical-sizing", "font-size-adjust", "font-kerning", "font-feature-settings", "font-variation-settings", "font-language-override"]],
+  ["font-synthesis", "font-synthesis", "font-synthesis", false, ["font-synthesis-weight", "font-synthesis-style", "font-synthesis-small-caps"]],
+  ["font-variant", "font-variant", "font-variant", false, ["font-variant-ligatures", "font-variant-caps", "font-variant-alternates", "font-variant-numeric", "font-variant-east-asian", "font-variant-position", "font-variant-emoji"]],
+  ["gap", "gap", "gap", false, ["row-gap", "column-gap"]],
+  ["grid", "grid", "grid", false, ["grid-template-rows", "grid-template-columns", "grid-template-areas", "grid-auto-flow", "grid-auto-rows", "grid-auto-columns"]],
+  ["grid-area", "grid-area", "grid-area", false, ["grid-row-start", "grid-column-start", "grid-row-end", "grid-column-end"]],
+  ["grid-column", "grid-column", "grid-column", false, ["grid-column-start", "grid-column-end"]],
+  ["grid-gap", "gap", "gap", false, ["row-gap", "column-gap"]],
+  ["grid-row", "grid-row", "grid-row", false, ["grid-row-start", "grid-row-end"]],
+  ["grid-template", "grid-template", "grid-template", false, ["grid-template-rows", "grid-template-columns", "grid-template-areas"]],
+  ["inset", "inset", "inset", false, ["top", "right", "bottom", "left"]],
+  ["inset-block", "inset-block", "inset-block", false, ["inset-block-start", "inset-block-end"]],
+  ["inset-inline", "inset-inline", "inset-inline", false, ["inset-inline-start", "inset-inline-end"]],
+  ["interest-delay", "interest-delay", "interest-delay", false, ["interest-delay-start", "interest-delay-end"]],
+  ["list-style", "list-style", "list-style", true, ["list-style-position", "list-style-image", "list-style-type"]],
+  ["margin", "margin", "margin", false, ["margin-top", "margin-right", "margin-bottom", "margin-left"]],
+  ["margin-block", "margin-block", "margin-block", false, ["margin-block-start", "margin-block-end"]],
+  ["margin-inline", "margin-inline", "margin-inline", false, ["margin-inline-start", "margin-inline-end"]],
+  ["marker", "marker", "marker", false, ["marker-start", "marker-mid", "marker-end"]],
+  ["mask", "mask", "mask", false, ["mask-image", "-webkit-mask-position-x", "-webkit-mask-position-y", "mask-size", "mask-repeat", "mask-origin", "mask-clip", "mask-composite", "mask-mode"]],
+  ["mask-position", "mask-position", "mask-position", false, ["-webkit-mask-position-x", "-webkit-mask-position-y"]],
+  ["offset", "offset", "offset", false, ["offset-position", "offset-path", "offset-distance", "offset-rotate", "offset-anchor"]],
+  ["outline", "outline", "outline", true, ["outline-color", "outline-style", "outline-width"]],
+  ["overflow", "overflow", "overflow", false, ["overflow-x", "overflow-y"]],
+  ["overscroll-behavior", "overscroll-behavior", "overscroll-behavior", false, ["overscroll-behavior-x", "overscroll-behavior-y"]],
+  ["padding", "padding", "padding", false, ["padding-top", "padding-right", "padding-bottom", "padding-left"]],
+  ["padding-block", "padding-block", "padding-block", false, ["padding-block-start", "padding-block-end"]],
+  ["padding-inline", "padding-inline", "padding-inline", false, ["padding-inline-start", "padding-inline-end"]],
+  ["place-content", "place-content", "place-content", false, ["align-content", "justify-content"]],
+  ["place-items", "place-items", "place-items", false, ["align-items", "justify-items"]],
+  ["place-self", "place-self", "place-self", false, ["align-self", "justify-self"]],
+  ["position-try", "position-try", "position-try", false, ["position-try-order", "position-try-fallbacks"]],
+  ["row-rule", "row-rule", "row-rule", false, ["row-rule-width", "row-rule-style", "row-rule-color"]],
+  ["row-rule-inset", "row-rule-inset", "row-rule-inset", false, ["row-rule-inset-cap-start", "row-rule-inset-cap-end", "row-rule-inset-junction-start", "row-rule-inset-junction-end"]],
+  ["row-rule-inset-cap", "row-rule-inset-cap", "row-rule-inset-cap", false, ["row-rule-inset-cap-start", "row-rule-inset-cap-end"]],
+  ["row-rule-inset-end", "row-rule-inset-end", "row-rule-inset-end", false, ["row-rule-inset-cap-end", "row-rule-inset-junction-end"]],
+  ["row-rule-inset-junction", "row-rule-inset-junction", "row-rule-inset-junction", false, ["row-rule-inset-junction-start", "row-rule-inset-junction-end"]],
+  ["row-rule-inset-start", "row-rule-inset-start", "row-rule-inset-start", false, ["row-rule-inset-cap-start", "row-rule-inset-junction-start"]],
+  ["rule", "rule", "rule", false, ["column-rule-width", "column-rule-style", "column-rule-color", "row-rule-width", "row-rule-style", "row-rule-color"]],
+  ["rule-break", "rule-break", "rule-break", false, ["row-rule-break", "column-rule-break"]],
+  ["rule-color", "rule-color", "rule-color", false, ["column-rule-color", "row-rule-color"]],
+  ["rule-inset", "rule-inset", "rule-inset", false, ["row-rule-inset-cap-start", "row-rule-inset-cap-end", "row-rule-inset-junction-start", "row-rule-inset-junction-end", "column-rule-inset-cap-start", "column-rule-inset-cap-end", "column-rule-inset-junction-start", "column-rule-inset-junction-end"]],
+  ["rule-inset-cap", "rule-inset-cap", "rule-inset-cap", false, ["row-rule-inset-cap-start", "row-rule-inset-cap-end", "column-rule-inset-cap-start", "column-rule-inset-cap-end"]],
+  ["rule-inset-end", "rule-inset-end", "rule-inset-end", false, ["column-rule-inset-cap-end", "column-rule-inset-junction-end", "row-rule-inset-cap-end", "row-rule-inset-junction-end"]],
+  ["rule-inset-junction", "rule-inset-junction", "rule-inset-junction", false, ["row-rule-inset-junction-start", "row-rule-inset-junction-end", "column-rule-inset-junction-start", "column-rule-inset-junction-end"]],
+  ["rule-inset-start", "rule-inset-start", "rule-inset-start", false, ["column-rule-inset-cap-start", "column-rule-inset-junction-start", "row-rule-inset-cap-start", "row-rule-inset-junction-start"]],
+  ["rule-style", "rule-style", "rule-style", false, ["column-rule-style", "row-rule-style"]],
+  ["rule-visibility-items", "rule-visibility-items", "rule-visibility-items", false, ["column-rule-visibility-items", "row-rule-visibility-items"]],
+  ["rule-width", "rule-width", "rule-width", false, ["column-rule-width", "row-rule-width"]],
+  ["scroll-margin", "scroll-margin", "scroll-margin", false, ["scroll-margin-top", "scroll-margin-right", "scroll-margin-bottom", "scroll-margin-left"]],
+  ["scroll-margin-block", "scroll-margin-block", "scroll-margin-block", false, ["scroll-margin-block-start", "scroll-margin-block-end"]],
+  ["scroll-margin-inline", "scroll-margin-inline", "scroll-margin-inline", false, ["scroll-margin-inline-start", "scroll-margin-inline-end"]],
+  ["scroll-padding", "scroll-padding", "scroll-padding", false, ["scroll-padding-top", "scroll-padding-right", "scroll-padding-bottom", "scroll-padding-left"]],
+  ["scroll-padding-block", "scroll-padding-block", "scroll-padding-block", false, ["scroll-padding-block-start", "scroll-padding-block-end"]],
+  ["scroll-padding-inline", "scroll-padding-inline", "scroll-padding-inline", false, ["scroll-padding-inline-start", "scroll-padding-inline-end"]],
+  ["scroll-timeline", "scroll-timeline", "scroll-timeline", false, ["scroll-timeline-name", "scroll-timeline-axis"]],
+  ["text-box", "text-box", "text-box", false, ["text-box-trim", "text-box-edge"]],
+  ["text-decoration", "text-decoration", "text-decoration", true, ["text-decoration-line", "text-decoration-thickness", "text-decoration-style", "text-decoration-color"]],
+  ["text-emphasis", "text-emphasis", "text-emphasis", true, ["text-emphasis-style", "text-emphasis-color"]],
+  ["text-wrap", "text-wrap", "text-wrap", true, ["text-wrap-mode", "text-wrap-style"]],
+  ["timeline-trigger", "timeline-trigger", "timeline-trigger", false, ["timeline-trigger-name", "timeline-trigger-source", "timeline-trigger-activation-range-start", "timeline-trigger-activation-range-end", "timeline-trigger-active-range-start", "timeline-trigger-active-range-end"]],
+  ["timeline-trigger-activation-range", "timeline-trigger-activation-range", "timeline-trigger-activation-range", false, ["timeline-trigger-activation-range-start", "timeline-trigger-activation-range-end"]],
+  ["timeline-trigger-active-range", "timeline-trigger-active-range", "timeline-trigger-active-range", false, ["timeline-trigger-active-range-start", "timeline-trigger-active-range-end"]],
+  ["transition", "transition", "transition", false, ["transition-property", "transition-duration", "transition-timing-function", "transition-delay", "transition-behavior"]],
+  ["view-timeline", "view-timeline", "view-timeline", false, ["view-timeline-name", "view-timeline-axis", "view-timeline-inset"]],
+  ["white-space", "white-space", "white-space", true, ["white-space-collapse", "text-wrap-mode"]],
+];
+export const LONGHAND_ALIASES = [
+  ["-webkit-align-content", "align-content"],
+  ["-webkit-align-items", "align-items"],
+  ["-webkit-align-self", "align-self"],
+  ["-webkit-animation-delay", "animation-delay"],
+  ["-webkit-animation-direction", "animation-direction"],
+  ["-webkit-animation-duration", "animation-duration"],
+  ["-webkit-animation-fill-mode", "animation-fill-mode"],
+  ["-webkit-animation-iteration-count", "animation-iteration-count"],
+  ["-webkit-animation-name", "animation-name"],
+  ["-webkit-animation-play-state", "animation-play-state"],
+  ["-webkit-animation-timing-function", "animation-timing-function"],
+  ["-webkit-app-region", "app-region"],
+  ["-webkit-appearance", "appearance"],
+  ["-webkit-backface-visibility", "backface-visibility"],
+  ["-webkit-background-clip", "background-clip"],
+  ["-webkit-background-origin", "background-origin"],
+  ["-webkit-background-size", "background-size"],
+  ["-webkit-border-after-color", "border-block-end-color"],
+  ["-webkit-border-after-style", "border-block-end-style"],
+  ["-webkit-border-after-width", "border-block-end-width"],
+  ["-webkit-border-before-color", "border-block-start-color"],
+  ["-webkit-border-before-style", "border-block-start-style"],
+  ["-webkit-border-before-width", "border-block-start-width"],
+  ["-webkit-border-bottom-left-radius", "border-bottom-left-radius"],
+  ["-webkit-border-bottom-right-radius", "border-bottom-right-radius"],
+  ["-webkit-border-end-color", "border-inline-end-color"],
+  ["-webkit-border-end-style", "border-inline-end-style"],
+  ["-webkit-border-end-width", "border-inline-end-width"],
+  ["-webkit-border-start-color", "border-inline-start-color"],
+  ["-webkit-border-start-style", "border-inline-start-style"],
+  ["-webkit-border-start-width", "border-inline-start-width"],
+  ["-webkit-border-top-left-radius", "border-top-left-radius"],
+  ["-webkit-border-top-right-radius", "border-top-right-radius"],
+  ["-webkit-box-shadow", "box-shadow"],
+  ["-webkit-box-sizing", "box-sizing"],
+  ["-webkit-clip-path", "clip-path"],
+  ["-webkit-column-break-after", "break-after"],
+  ["-webkit-column-break-before", "break-before"],
+  ["-webkit-column-break-inside", "break-inside"],
+  ["-webkit-column-count", "column-count"],
+  ["-webkit-column-gap", "column-gap"],
+  ["-webkit-column-rule-color", "column-rule-color"],
+  ["-webkit-column-rule-style", "column-rule-style"],
+  ["-webkit-column-rule-width", "column-rule-width"],
+  ["-webkit-column-span", "column-span"],
+  ["-webkit-column-width", "column-width"],
+  ["-webkit-filter", "filter"],
+  ["-webkit-flex-basis", "flex-basis"],
+  ["-webkit-flex-direction", "flex-direction"],
+  ["-webkit-flex-grow", "flex-grow"],
+  ["-webkit-flex-shrink", "flex-shrink"],
+  ["-webkit-flex-wrap", "flex-wrap"],
+  ["-webkit-font-feature-settings", "font-feature-settings"],
+  ["-webkit-hyphenate-character", "hyphenate-character"],
+  ["-webkit-justify-content", "justify-content"],
+  ["-webkit-logical-height", "block-size"],
+  ["-webkit-logical-width", "inline-size"],
+  ["-webkit-margin-after", "margin-block-end"],
+  ["-webkit-margin-before", "margin-block-start"],
+  ["-webkit-margin-end", "margin-inline-end"],
+  ["-webkit-margin-start", "margin-inline-start"],
+  ["-webkit-mask-clip", "mask-clip"],
+  ["-webkit-mask-composite", "mask-composite"],
+  ["-webkit-mask-image", "mask-image"],
+  ["-webkit-mask-origin", "mask-origin"],
+  ["-webkit-mask-repeat", "mask-repeat"],
+  ["-webkit-mask-size", "mask-size"],
+  ["-webkit-max-logical-height", "max-block-size"],
+  ["-webkit-max-logical-width", "max-inline-size"],
+  ["-webkit-min-logical-height", "min-block-size"],
+  ["-webkit-min-logical-width", "min-inline-size"],
+  ["-webkit-opacity", "opacity"],
+  ["-webkit-order", "order"],
+  ["-webkit-padding-after", "padding-block-end"],
+  ["-webkit-padding-before", "padding-block-start"],
+  ["-webkit-padding-end", "padding-inline-end"],
+  ["-webkit-padding-start", "padding-inline-start"],
+  ["-webkit-perspective", "perspective"],
+  ["-webkit-perspective-origin", "perspective-origin"],
+  ["-webkit-print-color-adjust", "print-color-adjust"],
+  ["-webkit-shape-image-threshold", "shape-image-threshold"],
+  ["-webkit-shape-margin", "shape-margin"],
+  ["-webkit-shape-outside", "shape-outside"],
+  ["-webkit-text-emphasis-color", "text-emphasis-color"],
+  ["-webkit-text-emphasis-position", "text-emphasis-position"],
+  ["-webkit-text-emphasis-style", "text-emphasis-style"],
+  ["-webkit-text-size-adjust", "text-size-adjust"],
+  ["-webkit-transform", "transform"],
+  ["-webkit-transform-origin", "transform-origin"],
+  ["-webkit-transform-style", "transform-style"],
+  ["-webkit-transition-delay", "transition-delay"],
+  ["-webkit-transition-duration", "transition-duration"],
+  ["-webkit-transition-property", "transition-property"],
+  ["-webkit-transition-timing-function", "transition-timing-function"],
+  ["-webkit-user-select", "user-select"],
+  ["grid-column-gap", "column-gap"],
+  ["grid-row-gap", "row-gap"],
+  ["page-break-after", "break-after"],
+  ["page-break-before", "break-before"],
+  ["page-break-inside", "break-inside"],
+  ["word-wrap", "overflow-wrap"],
+];