esbuild 기반 css.Build로 실현하는 초고속 CSS 번들링과 최적화

Context

최신 CSS 기능의 브라우저 호환성 확보를 위해 Sass나 PostCSS 같은 외부 프로세서 의존성 발생. 다수 CSS 파일의 번들링과 Minification 처리를 위한 별도 빌드 도구 구성의 복잡성 증가.

Technical Solution

• Hugo v.0.158.0에 도입된 esbuild 기반 css.Build 함수를 통한 CSS 처리 파이프라인 통합
• 외부 도구 없이 단일 빌드 프로세스 내에서 CSS Bundling 및 Minification을 수행하는 구조
• esbuild의 CSS 전용 기능을 활용한 최신 문법의 Transpilation 및 Browser-prefixing 자동화
• Dart Sass의 이진 파일이나 PostCSS의 JavaScript 런타임 없이 동작하는 경량화된 빌드 설계
• Baseline 2023 기준의 최신 CSS Nesting 문법을 브라우저 호환 버전으로 변환하는 전략
• Browserslist 및 Baseline 리스트를 활용한 타겟 브라우저 버전 정의 및 검증 프로세스 적용

Key Takeaway

빌드 도구 자체에 고성능 엔진(esbuild)을 내장함으로써 개발 생산성을 저해하는 외부 툴체인의 복잡도를 낮추고 빌드 속도를 극대화하는 전략.