How I Built a Modern Design Token Extractor: Solving CORS, Shadow DOM, and W3C DTCG Specs

How I Built a Modern Design Token Extractor: Solving CORS, Shadow DOM, and W3C DTCG Specs

Extracting design tokens from live websites sounds simple on paper—until you actually try to build a tool that handles modern frontend architectures.

When working on Token Inspector, my Chrome extension designed to bridge the gap between live web styles, Tailwind CSS, Figma (Tokens Studio), and Shadcn UI, I quickly ran into deep architectural walls. Traditional scrapers and basic CSS parsers fall apart the moment they encounter external CDNs, cross-origin security errors, or encapsulated web components.

In this article, I want to share how I solved these bottlenecks in the latest v2 update, handling everything from strict W3C standards to Shadow DOM traversal.

---

1. The Trap of window.getComputedStyle() vs. Live Stylesheets

Most quick scripts rely on window.getComputedStyle() to grab colors, spacing, and font sizes from DOM elements. While easy, this approach has a massive flaw: it flattens the values.

If a button uses background-color: var(--primary-500), getComputedStyle returns the resolved computed color (e.g., rgb(37, 99, 235)). You completely lose the semantic relationship and alias links like {colors.primary.500}.

The Solution:
To preserve raw variables and aliases, the parser must iterate directly through document.styleSheets and inspect live CSS rules (cssRules). This allows the extension to capture raw strings like var(--token-name) and map them back to proper DTCG alias syntax.

2. Bypassing CORS Errors Gracefully

Reading live stylesheets comes with a catch: if a website loads styles from an external CDN or Google Fonts (a different origin), the browser throws a strict SecurityError due to CORS policies.

If your parser isn't armored, a single third-party stylesheet will crash your entire extraction loop.

The Solution:
We wrapped the stylesheet traversal in robust try/catch blocks per sheet. If a stylesheet is completely unreachable due to strict CORS policies, it is skipped gracefully without breaking the main extraction thread:

for (const sheet of document.styleSheets) {
  try {
    const rules = sheet.cssRules;
    // Process rules...
  } catch (e) {
    // Gracefully handle cross-origin stylesheets without crashing
    console.warn("Skipping cross-origin stylesheet due to CORS restrictions.");
  }
}

3. Conquering Shadow DOM and Lit Components

Modern component-based frameworks (like Lit, Shoelace, or custom web components) encapsulate their styles inside a Shadow DOM using adoptedStyleSheets on each shadow root. Standard document.styleSheets is completely blind to these.

The Solution:
To ensure zero tokens are left behind, the scanner performs a recursive traversal through all open shadow roots (shadowRoot with mode: 'open') across the DOM tree, harvesting their adoptedStyleSheets alongside global rules:

function scanElement(element) {
  if (element.shadowRoot) {
    // Inspect adoptedStyleSheets inside the shadow root
    for (const sheet of element.shadowRoot.adoptedStyleSheets || []) {
      processRules(sheet.cssRules);
    }
    // Recursively check children inside shadow DOM
    scanSubTree(element.shadowRoot);
  }
  // Continue traversal...
}

(Note: Closed shadow roots remain intentionally invisible by browser design, but open roots cover the vast majority of modern component libraries).

4. Standardizing Output: W3C DTCG 2025.10 & Shadcn UI

With clean raw data captured, the extension formats the output to match modern ecosystem standards:

• W3C DTCG 2025.10 Spec: Colors are no longer dumped as flat hex strings. They are mapped into structured objects containing colorSpace, components, alpha, and hex properties, making them natively compatible with advanced token managers like Figma Tokens Studio.
• Shadcn UI & Tailwind: Automatically maps extracted variables to standard --background, --foreground, and --primary variables, complete with light/dark mode separation and fallback heuristics.

---

Conclusion & Try Token Inspector
Building developer tools requires anticipating edge cases where the browser's security model and modern component architecture collide. By combining direct stylesheet parsing, safe CORS handling, and recursive Shadow DOM crawlers, Token Inspector turns messy live DOMs into clean, production-ready design systems in seconds.

If you are building design systems or juggling Tailwind and Figma syncs, you can install the extension right now:

📥 https://chromewebstore.google.com/detail/token-inspector-%E2%80%94-ui-desi/ahhkpfngdhkjiipkhfnefpkiniliafdh?hl=es&authuser=0

(Looking for the Pro features? You can grab your license on https://matyoro.gumroad.com/l/token-inspector?_gl=1*p1bw03*_ga*NzE5ODkxODI3LjE3OTA4NjIwNTY.*_ga_6LJN6D94N6*czE3OTE4NDA5NzUkbzQyJGcxJHQxNzkxODQxNDQ4JGo2MCRsMCRoMA.. and use the code REDDITPRO at checkout for an exclusive developer discount!)

I’d love to hear your thoughts or how you handle token synchronization in your own tech stacks in the comments below!