Skip to content

feat: detect inconsistent line-height values in CSS audit#42

Open
fracergu wants to merge 1 commit into
nujovich:mainfrom
fracergu:main
Open

feat: detect inconsistent line-height values in CSS audit#42
fracergu wants to merge 1 commit into
nujovich:mainfrom
fracergu:main

Conversation

@fracergu
Copy link
Copy Markdown
Contributor

@fracergu fracergu commented Jun 6, 2026

Summary

  • Audit step now collects every line-height declaration and font: …/<lh> shorthand, clusters near-duplicates against a canonical scale, and flags unitless-vs-px mixing
  • New field lineHeights in AuditReport (found, suggestedScale, unitlessMix)
  • Wired through UserDecisionsbuildResolvePrompt so the resolve step uses audited line-heights as a starting point
  • Chaos score gains +1 when unitlessMix is true

Before vs After — AuditReport shape

Before

{
  "brand": "", "chaosScore": 1, "summary": "...",
  "colorClusters": [...], "fonts": [...],
  "spacing": { "found": [...], "suggestedScale": {...}, "nonScaleValues": [...] }
}

After

{
  "brand": "", "chaosScore": 1, "summary": "...",
  "colorClusters": [...], "fonts": [...],
  "spacing": { "found": [...], "suggestedScale": {...}, "nonScaleValues": [...] },
  "lineHeights": {
    "found": [1.2, 1.25, 1.5, 1.75],
    "suggestedScale": { "tight": 1.2, "snug": 1.25, "normal": 1.5, "relaxed": 1.75 },
    "unitlessMix": true
  }
}

Real-world validation

The full pipeline was validated end-to-end against a real LLM (DeepSeek V4 Flash) using DEEPSEEK_API_KEY. Sample CSS with mixed unitless line-heights produced:

audit.lineHeights.found: [1.2, 1.5, 1.6, 1.75]resolve.tokens.typography.lineHeights: {"tight": 1.2, "normal": 1.5, "relaxed": 1.75}

How to test

  1. Paste any CSS with line-height declarations into the playground or run npx mint-ds audit ./path
  2. Check that the audit report now includes lineHeights
  3. Resolve tokens and verify typography.lineHeights appears in mint-ds.tokens.json
  4. Export to any target — line-heights should be present in the generated output

Checklist

  • npx tsc --noEmit passes with no errors
  • Tested with real CSS input through the full audit → tokens → export flow
  • UI is responsive on mobile (tested at 375px width) — no UI layout changes, only data flow
  • No new Spanish strings introduced — all user-facing text is English
  • No hardcoded colors or values that should be CSS variables

Extend the audit pipeline to collect, cluster, and score line-height
values from legacy CSS.

- Add LineHeightAudit interface (found, suggestedScale, unitlessMix)
- Add STEP 4 to audit prompt: collects line-height declarations and
  font/.../<lh> shorthands, clusters near-duplicates against a canonical
  scale (tight/snug/normal/relaxed/loose), flags unitless-vs-px mixing
- Track unitlessMix in chaos score (+1 when true)
- Wire lineHeights through UserDecisions and defaultDecisions so the
  resolve step receives audited data as a starting point
- Update playground UI (AuditView) to pass lineHeights on resolve
- Add test coverage for all new prompt content and fixture shapes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant