designlang 4.0.0 → 5.0.0

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <h1 align="center">designlang</h1>
+  <h1 align="center">DESIGNLANG</h1>
   <p align="center">Reverse-engineer any website's complete design system in one command.</p>
 </p>
 
@@ -7,6 +7,7 @@
   <a href="https://www.npmjs.com/package/designlang"><img src="https://img.shields.io/npm/v/designlang?color=blue&label=npm" alt="npm version"></a>
   <a href="https://github.com/Manavarya09/design-extract/blob/main/LICENSE"><img src="https://img.shields.io/github/license/Manavarya09/design-extract" alt="license"></a>
   <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/designlang" alt="node version"></a>
+  <a href="https://website-five-lime-65.vercel.app"><img src="https://img.shields.io/badge/website-live-red" alt="website"></a>
 </p>
 
 ---
@@ -127,6 +128,47 @@ designlang brands stripe.com vercel.com github.com linear.app
 
 Generates a matrix with color overlap analysis, typography comparison, spacing systems, and accessibility scores. Outputs both `brands.md` and `brands.html`.
 
+### 6. Clone Command
+
+Generate a working Next.js app with the extracted design applied:
+
+```bash
+designlang clone https://stripe.com
+cd cloned-design && npm install && npm run dev
+```
+
+One command → a running app with the site's colors, fonts, spacing, and component patterns.
+
+### 7. Design System Scoring
+
+Rate any site's design quality across 7 categories:
+
+```bash
+designlang score https://vercel.com
+```
+
+```
+  68/100  Grade: D
+
+  Color Discipline     ██████████░░░░░░░░░░ 50
+  Typography           ██████████████░░░░░░ 70
+  Spacing System       ████████████████░░░░ 80
+  Shadows              ██████████░░░░░░░░░░ 50
+  Border Radii         ████████░░░░░░░░░░░░ 40
+  Accessibility        ███████████████████░ 94
+  Tokenization         ████████████████████ 100
+```
+
+### 8. Watch Mode
+
+Monitor a site for design changes:
+
+```bash
+designlang watch https://stripe.com --interval 60
+```
+
+Checks hourly and alerts when colors, fonts, or accessibility scores change.
+
 ## All Features
 
 | Feature | Flag / Command | Description |
@@ -134,12 +176,16 @@ Generates a matrix with color overlap analysis, typography comparison, spacing s
 | Base extraction | `designlang <url>` | Colors, typography, spacing, shadows, radii, CSS vars, breakpoints, animations, components |
 | Layout system | automatic | Grid patterns, flex usage, container widths, gap values |
 | Accessibility | automatic | WCAG 2.1 contrast ratios for all fg/bg pairs |
+| Design scoring | automatic | 7-category quality rating (A-F) with actionable issues |
 | Dark mode | `--dark` | Extracts dark color scheme |
 | Multi-page | `--depth <n>` | Crawl N internal pages for site-wide tokens |
 | Screenshots | `--screenshots` | Capture buttons, cards, inputs, nav, hero, full page |
 | Responsive | `--responsive` | Crawl at 4 viewports, map breakpoint changes |
 | Interactions | `--interactions` | Capture hover/focus/active state transitions |
 | Everything | `--full` | Enable screenshots + responsive + interactions |
+| Clone | `designlang clone <url>` | Generate a working Next.js starter with extracted design |
+| Score | `designlang score <url>` | Rate design quality with visual bar chart breakdown |
+| Watch | `designlang watch <url>` | Monitor for design changes on interval |
 | Diff | `designlang diff <A> <B>` | Compare two sites (MD + HTML) |
 | Multi-brand | `designlang brands <urls...>` | N-site comparison matrix |
 | Sync | `designlang sync <url>` | Update local tokens from live site |
@@ -167,6 +213,9 @@ Options:
   --verbose               Detailed progress output
 
 Commands:
+  clone <url>             Generate a working Next.js starter from extracted design
+  score <url>             Rate design quality (7 categories, A-F, bar chart)
+  watch <url>             Monitor for design changes on interval
   diff <urlA> <urlB>      Compare two sites' design languages
   brands <urls...>        Multi-brand comparison matrix
   sync <url>              Sync local tokens with live site
@@ -203,12 +252,13 @@ Running `designlang https://vercel.com --full`:
   Shadows: 11 unique shadows
   Radii: 10 unique values
   Breakpoints: 45 breakpoints
-  Components: 4 patterns detected
+  Components: 11 types detected
   CSS Vars: 407 custom properties
   Layout: 55 grids, 492 flex containers
   Responsive: 4 viewports, 3 breakpoint changes
   Interactions: 8 state changes captured
   A11y: 94% WCAG score (7 failing pairs)
+  Design Score: 68/100 (D) — 4 issues
 ```
 
 ## How It Works
@@ -230,6 +280,10 @@ npx skills add Manavarya09/design-extract
 
 In Claude Code, use `/extract-design <url>`.
 
+## Website
+
+**[website-five-lime-65.vercel.app](https://website-five-lime-65.vercel.app)** — the brutalist product page.
+
 ## Contributing
 
 See [CONTRIBUTING.md](CONTRIBUTING.md). PRs welcome!

package/bin/design-extract.js

@@ -21,6 +21,8 @@ import { syncDesign } from '../src/sync.js';
 import { compareBrands, formatBrandMatrix, formatBrandMatrixHtml } from '../src/multibrand.js';
 import { generateClone } from '../src/clone.js';
 import { watchSite } from '../src/watch.js';
+import { diffDarkMode } from '../src/darkdiff.js';
+import { applyDesign } from '../src/apply.js';
 import { nameFromUrl } from '../src/utils.js';
 
 const program = new Command();
@@ -28,7 +30,7 @@ const program = new Command();
 program
   .name('designlang')
   .description('Extract the complete design language from any website')
-  .version('4.0.0');
+  .version('5.0.0');
 
 // ── Main command: extract ──────────────────────────────────────
 program
@@ -45,6 +47,8 @@ program
   .option('--responsive', 'capture design at multiple breakpoints')
   .option('--interactions', 'capture hover/focus/active states')
   .option('--full', 'enable all extra captures (screenshots, responsive, interactions)')
+  .option('--cookie <cookies...>', 'cookies for authenticated pages (name=value)')
+  .option('--header <headers...>', 'custom headers (name:value)')
   .option('--no-history', 'skip saving to history')
   .option('--verbose', 'show detailed progress')
   .action(async (url, opts) => {
@@ -61,6 +65,16 @@ program
 
     try {
       spinner.text = `Crawling${opts.depth > 0 ? ` (depth: ${opts.depth})` : ''}...`;
+      // Parse auth options
+      const cookies = opts.cookie || [];
+      const headers = {};
+      if (opts.header) {
+        for (const h of opts.header) {
+          const [name, ...rest] = h.split(':');
+          if (name && rest.length) headers[name.trim()] = rest.join(':').trim();
+        }
+      }
+
       const design = await extractDesignLanguage(url, {
         width: opts.width,
         height: parseInt(opts.height) || 800,
@@ -69,6 +83,8 @@ program
         depth: opts.depth,
         screenshots: opts.screenshots || opts.full,
         outDir,
+        cookies: cookies.length > 0 ? cookies : undefined,
+        headers: Object.keys(headers).length > 0 ? headers : undefined,
       });
 
       // Responsive capture
@@ -163,6 +179,25 @@ program
         console.log(`  ${chalk.gray('Design Score:')} ${gradeColor(`${s.overall}/100 (${s.grade})`)}${s.issues.length > 0 ? ` — ${s.issues.length} issues` : ''}`);
       }
 
+      // New v5 extractors
+      if (design.gradients && design.gradients.count > 0) {
+        console.log(`  ${chalk.gray('Gradients:')} ${design.gradients.count} unique gradients`);
+      }
+      if (design.zIndex && design.zIndex.allValues.length > 0) {
+        console.log(`  ${chalk.gray('Z-Index:')} ${design.zIndex.allValues.length} layers${design.zIndex.issues.length > 0 ? ` (${design.zIndex.issues.length} issues)` : ''}`);
+      }
+      if (design.icons && design.icons.count > 0) {
+        console.log(`  ${chalk.gray('Icons:')} ${design.icons.count} SVG icons (${design.icons.dominantStyle || 'mixed'})`);
+      }
+      if (design.fonts && design.fonts.fonts.length > 0) {
+        const sources = design.fonts.fonts.map(f => f.source).filter((v, i, a) => a.indexOf(v) === i);
+        console.log(`  ${chalk.gray('Font Files:')} ${design.fonts.fonts.length} fonts (${sources.join(', ')})`);
+      }
+      if (design.images && design.images.patterns.length > 0) {
+        const total = design.images.patterns.reduce((s, p) => s + p.count, 0);
+        console.log(`  ${chalk.gray('Images:')} ${total} images, ${design.images.patterns.length} style patterns`);
+      }
+
       // Accessibility summary
       if (design.accessibility) {
         const a = design.accessibility;
@@ -486,4 +521,44 @@ program
     }
   });
 
+// ── Apply command ──────────────────────────────────────────
+program
+  .command('apply <url>')
+  .description('Extract and apply design directly to your project')
+  .option('-d, --dir <path>', 'project directory', '.')
+  .option('--framework <type>', 'force framework (tailwind, shadcn, css)')
+  .option('--cookie <cookies...>', 'cookies for authenticated pages')
+  .option('--header <headers...>', 'custom headers')
+  .action(async (url, opts) => {
+    if (!url.startsWith('http')) url = `https://${url}`;
+
+    console.log('');
+    console.log(chalk.bold('  designlang apply'));
+    console.log(chalk.gray(`  ${url} → ${resolve(opts.dir)}`));
+    console.log('');
+
+    const spinner = ora('Extracting design...').start();
+
+    try {
+      const result = await applyDesign(url, {
+        dir: resolve(opts.dir),
+        framework: opts.framework,
+        cookies: opts.cookie,
+        headers: opts.header ? Object.fromEntries(opts.header.map(h => { const [k, ...v] = h.split(':'); return [k.trim(), v.join(':').trim()]; })) : undefined,
+      });
+
+      spinner.succeed(`Applied ${result.framework} design!`);
+      console.log('');
+      for (const f of result.applied) {
+        console.log(`  ${chalk.green('✓')} ${chalk.cyan(f.file)} — ${f.type}`);
+      }
+      console.log('');
+
+    } catch (err) {
+      spinner.fail('Apply failed');
+      console.error(chalk.red(`\n  ${err.message}\n`));
+      process.exit(1);
+    }
+  });
+
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.",
   "type": "module",
   "bin": {

package/src/apply.js

@@ -0,0 +1,65 @@
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { extractDesignLanguage } from './index.js';
+import { formatTailwind } from './formatters/tailwind.js';
+import { formatCssVars } from './formatters/css-vars.js';
+import { formatShadcnTheme } from './formatters/theme.js';
+
+export async function applyDesign(url, options = {}) {
+  const { dir = '.', framework } = options;
+  const design = await extractDesignLanguage(url, options);
+  const detected = framework || detectFramework(dir);
+  const applied = [];
+
+  if (detected === 'tailwind' || detected === 'auto') {
+    const twPath = findFile(dir, ['tailwind.config.js', 'tailwind.config.ts', 'tailwind.config.mjs']);
+    if (twPath) {
+      writeFileSync(twPath, formatTailwind(design), 'utf-8');
+      applied.push({ file: twPath, type: 'tailwind' });
+    }
+  }
+
+  if (detected === 'shadcn' || detected === 'auto') {
+    const globalsPath = findFile(dir, [
+      'app/globals.css', 'src/app/globals.css', 'styles/globals.css',
+      'src/styles/globals.css', 'src/index.css', 'app/global.css',
+    ]);
+    if (globalsPath) {
+      const existing = readFileSync(globalsPath, 'utf-8');
+      const shadcnVars = formatShadcnTheme(design);
+      // Replace existing @layer base block or append
+      const layerRegex = /@layer\s+base\s*\{[\s\S]*?\n\}/;
+      const updated = layerRegex.test(existing)
+        ? existing.replace(layerRegex, shadcnVars)
+        : existing + '\n\n' + shadcnVars;
+      writeFileSync(globalsPath, updated, 'utf-8');
+      applied.push({ file: globalsPath, type: 'shadcn' });
+    }
+  }
+
+  if (detected === 'css' || detected === 'auto') {
+    const cssVarsContent = formatCssVars(design);
+    const cssPath = join(dir, 'design-variables.css');
+    writeFileSync(cssPath, cssVarsContent, 'utf-8');
+    applied.push({ file: cssPath, type: 'css-variables' });
+  }
+
+  return { design, applied, framework: detected };
+}
+
+function detectFramework(dir) {
+  if (findFile(dir, ['tailwind.config.js', 'tailwind.config.ts', 'tailwind.config.mjs'])) {
+    // Check for shadcn
+    if (findFile(dir, ['components.json'])) return 'shadcn';
+    return 'tailwind';
+  }
+  return 'auto';
+}
+
+function findFile(dir, candidates) {
+  for (const c of candidates) {
+    const p = join(dir, c);
+    if (existsSync(p)) return p;
+  }
+  return null;
+}

package/src/crawler.js

@@ -5,18 +5,36 @@ import { join } from 'path';
 const MAX_ELEMENTS = 5000;
 
 export async function crawlPage(url, options = {}) {
-  const { width = 1280, height = 800, wait = 0, dark = false, depth = 0, screenshots = false, outDir = '' } = options;
+  const { width = 1280, height = 800, wait = 0, dark = false, depth = 0, screenshots = false, outDir = '', executablePath, browserArgs, cookies, headers } = options;
 
-  const browser = await chromium.launch({ headless: true });
+  const browser = await chromium.launch({
+    headless: true,
+    ...(executablePath && { executablePath }),
+    ...(browserArgs && { args: browserArgs }),
+  });
   const context = await browser.newContext({
     viewport: { width, height },
     colorScheme: 'light',
+    ...(headers && { extraHTTPHeaders: headers }),
   });
+
+  // Set cookies if provided
+  if (cookies && cookies.length > 0) {
+    await context.addCookies(cookies.map(c => {
+      if (typeof c === 'string') {
+        const [name, ...rest] = c.split('=');
+        return { name, value: rest.join('='), url };
+      }
+      return c;
+    }));
+  }
   const page = await context.newPage();
 
-  await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+  await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+  // Wait for network to settle — but don't hang on sites with persistent connections
+  await page.waitForLoadState('networkidle').catch(() => {});
   if (wait > 0) await page.waitForTimeout(wait);
-  await page.evaluate(() => document.fonts.ready);
+  await page.evaluate(() => document.fonts.ready).catch(() => {});
 
   const title = await page.title();
   const lightData = await extractPageData(page);
@@ -33,8 +51,9 @@ export async function crawlPage(url, options = {}) {
     const internalLinks = await discoverInternalLinks(page, url, depth);
     for (const link of internalLinks) {
       try {
-        await page.goto(link, { waitUntil: 'networkidle', timeout: 20000 });
-        await page.evaluate(() => document.fonts.ready);
+        await page.goto(link, { waitUntil: 'domcontentloaded', timeout: 20000 });
+        await page.waitForLoadState('networkidle').catch(() => {});
+        await page.evaluate(() => document.fonts.ready).catch(() => {});
         const pageData = await extractPageData(page);
         additionalPages.push({ url: link, data: pageData });
       } catch { /* skip failed pages */ }
@@ -50,8 +69,9 @@ export async function crawlPage(url, options = {}) {
       colorScheme: 'dark',
     });
     const darkPage = await darkContext.newPage();
-    await darkPage.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
-    await darkPage.evaluate(() => document.fonts.ready);
+    await darkPage.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+    await darkPage.waitForLoadState('networkidle').catch(() => {});
+    await darkPage.evaluate(() => document.fonts.ready).catch(() => {});
     darkData = await extractPageData(darkPage);
     await darkContext.close();
   } else {
@@ -269,6 +289,69 @@ async function extractPageData(page) {
       }
     } catch { /* no access */ }
 
+    // SVG icons
+    results.icons = [];
+    for (const svg of document.querySelectorAll('svg')) {
+      const rect = svg.getBoundingClientRect();
+      if (rect.width > 4 && rect.width < 200 && rect.height > 4 && rect.height < 200) {
+        results.icons.push({
+          svg: svg.outerHTML,
+          width: rect.width,
+          height: rect.height,
+          viewBox: svg.getAttribute('viewBox') || '',
+          classList: Array.from(svg.classList).join(' '),
+          fill: svg.getAttribute('fill') || getComputedStyle(svg).fill || '',
+          stroke: svg.getAttribute('stroke') || getComputedStyle(svg).stroke || '',
+        });
+      }
+    }
+
+    // Font data
+    results.fontData = { fontFaces: [], googleFontsLinks: [], documentFonts: [] };
+    try {
+      for (const sheet of document.styleSheets) {
+        try {
+          for (const rule of sheet.cssRules) {
+            if (rule instanceof CSSFontFaceRule) {
+              results.fontData.fontFaces.push({
+                family: rule.style.getPropertyValue('font-family').replace(/['"]/g, ''),
+                style: rule.style.getPropertyValue('font-style') || 'normal',
+                weight: rule.style.getPropertyValue('font-weight') || '400',
+                src: rule.style.getPropertyValue('src') || '',
+              });
+            }
+          }
+        } catch { /* cross-origin */ }
+      }
+    } catch {}
+    for (const link of document.querySelectorAll('link[href*="fonts.googleapis.com"]')) {
+      results.fontData.googleFontsLinks.push(link.href);
+    }
+    for (const font of document.fonts) {
+      results.fontData.documentFonts.push({ family: font.family.replace(/['"]/g, ''), style: font.style, weight: font.weight, status: font.status });
+    }
+
+    // Image data
+    results.images = [];
+    for (const img of document.querySelectorAll('img, picture img, [role="img"]')) {
+      const rect = img.getBoundingClientRect();
+      if (rect.width < 5 || rect.height < 5) continue;
+      const cs = getComputedStyle(img);
+      results.images.push({
+        tag: img.tagName.toLowerCase(),
+        src: img.src || '',
+        width: rect.width,
+        height: rect.height,
+        objectFit: cs.objectFit,
+        objectPosition: cs.objectPosition,
+        borderRadius: cs.borderRadius,
+        filter: cs.filter,
+        opacity: cs.opacity,
+        aspectRatio: cs.aspectRatio,
+        classList: Array.from(img.classList).join(' '),
+      });
+    }
+
     return results;
   }, MAX_ELEMENTS);
 }

package/src/darkdiff.js

@@ -0,0 +1,65 @@
+export function diffDarkMode(lightDesign, darkDesign) {
+  const changes = [];
+
+  // Color changes
+  const lightColors = new Set(lightDesign.colors.all.map(c => c.hex));
+  const darkColors = new Set(darkDesign.colors.all.map(c => c.hex));
+
+  const addedInDark = darkDesign.colors.all.filter(c => !lightColors.has(c.hex));
+  const removedInDark = lightDesign.colors.all.filter(c => !darkColors.has(c.hex));
+
+  if (addedInDark.length > 0 || removedInDark.length > 0) {
+    changes.push({
+      category: 'colors',
+      light: lightDesign.colors.all.length,
+      dark: darkDesign.colors.all.length,
+      added: addedInDark.map(c => c.hex),
+      removed: removedInDark.map(c => c.hex),
+    });
+  }
+
+  // CSS variable changes
+  const lightVars = flattenVars(lightDesign.variables);
+  const darkVars = flattenVars(darkDesign.variables);
+  const varChanges = [];
+
+  for (const [key, lightVal] of Object.entries(lightVars)) {
+    const darkVal = darkVars[key];
+    if (darkVal && darkVal !== lightVal) {
+      varChanges.push({ name: key, light: lightVal, dark: darkVal });
+    }
+  }
+  const newDarkVars = Object.entries(darkVars)
+    .filter(([key]) => !lightVars[key])
+    .map(([name, dark]) => ({ name, light: null, dark }));
+
+  if (varChanges.length > 0 || newDarkVars.length > 0) {
+    changes.push({
+      category: 'cssVariables',
+      changed: varChanges,
+      newInDark: newDarkVars,
+    });
+  }
+
+  return {
+    hasChanges: changes.length > 0,
+    changes,
+    summary: {
+      colorsChanged: (addedInDark.length + removedInDark.length) || 0,
+      variablesChanged: varChanges.length,
+      newDarkVariables: newDarkVars.length,
+    },
+  };
+}
+
+function flattenVars(variables) {
+  const flat = {};
+  for (const [, group] of Object.entries(variables)) {
+    if (typeof group === 'object') {
+      for (const [key, val] of Object.entries(group)) {
+        flat[key] = val;
+      }
+    }
+  }
+  return flat;
+}

package/src/extractors/animations.js

@@ -2,6 +2,8 @@ export function extractAnimations(computedStyles, keyframes) {
   const transitionSet = new Set();
   const easingSet = new Set();
   const durationSet = new Set();
+  const animationNames = new Set();
+  const transitionProperties = {};
 
   for (const el of computedStyles) {
     if (el.transition && el.transition !== 'all 0s ease 0s' && el.transition !== 'none') {
@@ -13,16 +15,50 @@ export function extractAnimations(computedStyles, keyframes) {
 
       const eMatch = el.transition.match(/(ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier\([^)]+\))/g);
       if (eMatch) eMatch.forEach(e => easingSet.add(e));
+
+      // Extract which properties are animated
+      const parts = el.transition.split(',').map(s => s.trim());
+      for (const part of parts) {
+        const prop = part.split(/\s+/)[0];
+        if (prop && prop !== 'all') {
+          transitionProperties[prop] = (transitionProperties[prop] || 0) + 1;
+        }
+      }
+    }
+
+    // Capture animation usage
+    if (el.animation && el.animation !== 'none 0s ease 0s 1 normal none running' && el.animation !== 'none') {
+      const nameMatch = el.animation.match(/^([\w-]+)/);
+      if (nameMatch && nameMatch[1] !== 'none') animationNames.add(nameMatch[1]);
     }
   }
 
+  // Enhanced keyframes with timing and properties changed
+  const enhancedKeyframes = keyframes.map(kf => {
+    const propertiesAnimated = new Set();
+    for (const step of kf.steps) {
+      const props = step.style.split(';').map(s => s.split(':')[0].trim()).filter(Boolean);
+      props.forEach(p => propertiesAnimated.add(p));
+    }
+    return {
+      name: kf.name,
+      steps: kf.steps,
+      propertiesAnimated: [...propertiesAnimated],
+      isUsed: animationNames.has(kf.name),
+    };
+  });
+
+  // Sort transition properties by usage
+  const sortedProps = Object.entries(transitionProperties)
+    .sort((a, b) => b[1] - a[1])
+    .map(([prop, count]) => ({ property: prop, count }));
+
   return {
     transitions: [...transitionSet],
     easings: [...easingSet],
     durations: [...durationSet],
-    keyframes: keyframes.map(kf => ({
-      name: kf.name,
-      steps: kf.steps,
-    })),
+    keyframes: enhancedKeyframes,
+    transitionProperties: sortedProps,
+    animationNames: [...animationNames],
   };
 }

package/src/extractors/components.js

@@ -131,9 +131,32 @@ export function extractComponents(computedStyles) {
     };
   }
 
+  // Generate CSS snippets for each component
+  for (const [type, data] of Object.entries(components)) {
+    if (data.baseStyle) {
+      const style = type === 'tables' ? { ...data.baseStyle } : data.baseStyle;
+      delete style.cellStyle;
+      data.css = styleToCss(`.${type.replace(/s$/, '')}`, style);
+    }
+  }
+
   return components;
 }
 
+function styleToCss(selector, style) {
+  const propMap = {
+    backgroundColor: 'background-color', color: 'color', fontSize: 'font-size',
+    fontWeight: 'font-weight', paddingTop: 'padding-top', paddingRight: 'padding-right',
+    paddingBottom: 'padding-bottom', paddingLeft: 'padding-left',
+    borderRadius: 'border-radius', boxShadow: 'box-shadow', borderColor: 'border-color',
+    maxWidth: 'max-width', position: 'position',
+  };
+  const lines = Object.entries(style)
+    .filter(([, v]) => v)
+    .map(([k, v]) => `  ${propMap[k] || k}: ${v};`);
+  return `${selector} {\n${lines.join('\n')}\n}`;
+}
+
 function mostCommonStyle(elements, properties) {
   const style = {};
   for (const prop of properties) {