v141 · css

Theme Snapshot

Click any component to snapshot all its CSS custom properties via getComputedStyle(). Chrome 141 fixed the bug where custom properties were missing from CSSStyleDeclaration enumeration — this tool uses that fix to extract, group, and export every design token scoped to any element, without crawling stylesheets.

Feature detection: checking…
Themed components — click any card to snapshot its custom properties none selected
Brand

Brand component

Primary blue design system. Defines 10 custom properties for colours, spacing, and typography.

click to snapshot
Emerald

Emerald component

Green palette with rounded corners. A different spacing scale and font weight versus the brand theme.

click to snapshot
Warm

Warm component

Orange-rust palette with sharp corners and a larger base font. All tokens differ from the other themes.

click to snapshot
Snapshot — click a component above
← Click a themed component to enumerate its CSS custom properties via getComputedStyle()

Before Chrome 141 vs After

Before — Chrome <141

Custom properties were missing from enumeration. getComputedStyle(el).length only counted standard properties. Custom properties had to be found by crawling document.styleSheets.

// Old workaround: for (const sheet of document.styleSheets) { try { for (const rule of sheet.cssRules) { // crawl rules — doesn't give // element-scoped cascade values } } catch(e) { // cross-origin: skip } }

After — Chrome 141+

Custom properties appear in CSSStyleDeclaration enumeration. Iterate the style object directly — inherited values, !important, and cascade all resolved correctly.

// New way (Chrome 141+): const style = getComputedStyle(el); for (const prop of style) { if (prop.startsWith('--')) { // includes ALL custom properties, // including inherited ones } } // style.length is now correct too
/* Enumerate all custom properties on an element */
function snapshotTokens(el) {
  const style = window.getComputedStyle(el);
  const tokens = {};

  // Chrome 141+: custom properties appear in enumeration
  for (const prop of style) {
    if (prop.startsWith('--')) {
      tokens[prop] = style.getPropertyValue(prop).trim();
    }
  }

  // style.length now includes custom properties too
  console.log(`Total properties: ${style.length}`);
  console.log(`Custom properties: ${Object.keys(tokens).length}`);

  return tokens;
}

see also