672: Design Tokens, Web Compents, and Web Monetization

What It Covers

Chris and Dave explore design token implementation challenges, web component styling solutions including Shadow DOM performance benefits, and the revival of web monetization APIs with new browser prototypes from Igalia.

Key Questions Answered

• •Design Token Tooling: Style Dictionary requires strict type formatting—font weights like "semibold" must match exact CSS values or builds fail, creating friction when converting Figma tokens to production CSS that demands manual data munging.
• •CSS Module Scripts: Import CSS files using `import styles from './card.css' with { type: 'css' }` syntax to get constructible stylesheets for Shadow DOM injection, enabling component-adjacent CSS files without JavaScript string manipulation (Chrome only currently).
• •Shadow DOM Performance: Adopted stylesheets in Shadow DOM render significantly faster than global styles because they operate on isolated DOM subtrees, eliminating style invalidation checks across the entire document tree when selectors like h1 or IDs change.
• •Web Monetization Revival: Igalia submitted a Chromium prototype for web monetization APIs enabling micropayments through browser-native wallets, allowing creators to charge per-article access or receive streaming pennies while users consume content without traditional paywalls or invasive ad tracking.