Lunar Style CSS Compiler: Design Notes on CSS Build Validation

A build-tool design that checks Tailwind source detection and dynamic classes while validating both CSS size and visual regressions.

1. Start with existing build capabilities

These are design notes for a CSS build validation tool; they do not claim a separate compiler release or measured performance. Tailwind detects class candidates in source files and generates the required styles. An optimization design should therefore not assume that every utility class always ends up in the bundle.

Tailwind detects classes from strings in source files. This is different from AST analysis that understands program behavior, so dynamically constructed classes may go undetected. Check your configuration against the official source detection documentation.

2. Validation pipeline

• Use complete class names visible in the source instead of constructing them dynamically.
• Explicitly register paths omitted by default detection, such as shared UI packages.
• Compare responsive layouts, dark mode, and hover, focus, and disabled states before and after removing CSS.
• Measure gzip or Brotli transfer size under the same conditions, alongside uncompressed file size.

3. Interpreting the results

Reducing CSS size alone cannot guarantee that LCP falls below a particular threshold. Images, fonts, server response time, and the rendering path also matter. Record the device, cache state, network conditions, and number of runs before comparing build times and browser metrics.

This design calls for documenting configuration changes and reproducible measurement procedures, rather than unsupported reduction percentages or processing times.