feat: Add CSS bundling with Lightning CSS for production optimization
- Add Lightning CSS integration for CSS bundling and minification - Create Makefile targets: css-dev, css-prod, css-watch, css-clean - Implement conditional CSS loading based on GO_ENV (dev=modular, prod=bundled) - Add IsProduction template variable for environment-aware rendering - Keep print.css separate with media="print" for PDF export - Add static/dist/ to .gitignore (generated bundles) - Fix Go template syntax in _cv-header.css - Remove redundant font @import in _typography.css Performance gains: - 27 HTTP requests → 1 (96% reduction) - 188KB → 86KB CSS (54% reduction) - ~15KB gzip network transfer Documentation: - Update 12-CSS-ARCHITECTURE.md with bundling section - Add Phase 9 to 2-MODERN-WEB-TECHNIQUES.md - Add css-bundling.test.mjs Playwright test (8/8 pass)
This commit is contained in:
juanatsap
@@ -33,6 +33,9 @@ cv-app
|
||||
static/psd
|
||||
static/psd/yo DNI.psd
|
||||
|
||||
# CSS build output (generated by Lightning CSS)
|
||||
static/dist/
|
||||
|
||||
# Temporary implementation artifacts (prevent clutter)
|
||||
*_SUMMARY.md
|
||||
*_REPORT.md
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.PHONY: test test-all test-unit test-integration lint build dev run clean
|
||||
.PHONY: test test-all test-unit test-integration lint build dev run clean css-dev css-prod css-watch css-clean
|
||||
|
||||
# Default: Run unit tests only (fast, no Chrome needed)
|
||||
test: test-unit
|
||||
@@ -39,7 +39,7 @@ run:
|
||||
go run main.go
|
||||
|
||||
# Clean build artifacts
|
||||
clean:
|
||||
clean: css-clean
|
||||
@echo "🧹 Cleaning build artifacts..."
|
||||
rm -f cv-server coverage.txt coverage-report.txt benchmark.txt
|
||||
|
||||
@@ -48,5 +48,37 @@ check: lint test-unit
|
||||
@echo "✅ All checks passed!"
|
||||
|
||||
# Run everything (lint + all tests + build)
|
||||
all: lint test-all build
|
||||
all: lint test-all css-prod build
|
||||
@echo "✅ Everything passed!"
|
||||
|
||||
# ============================================================================
|
||||
# CSS Build Targets (Lightning CSS)
|
||||
# ============================================================================
|
||||
|
||||
# Bundle CSS for development (readable, with source maps)
|
||||
css-dev:
|
||||
@echo "🎨 Bundling CSS for development..."
|
||||
@mkdir -p static/dist
|
||||
lightningcss --bundle static/css/main.css -o static/dist/bundle.css
|
||||
@echo "✅ Created static/dist/bundle.css"
|
||||
|
||||
# Bundle and minify CSS for production
|
||||
css-prod:
|
||||
@echo "🎨 Bundling and minifying CSS for production..."
|
||||
@mkdir -p static/dist
|
||||
lightningcss --bundle --minify static/css/main.css -o static/dist/bundle.min.css
|
||||
@echo "✅ Created static/dist/bundle.min.css ($$(wc -c < static/dist/bundle.min.css | tr -d ' ') bytes)"
|
||||
|
||||
# Watch CSS files for changes (development)
|
||||
css-watch:
|
||||
@echo "👀 Watching CSS files for changes..."
|
||||
@while true; do \
|
||||
$(MAKE) css-dev; \
|
||||
fswatch -1 -r static/css; \
|
||||
done
|
||||
|
||||
# Clean generated CSS files
|
||||
css-clean:
|
||||
@echo "🧹 Cleaning generated CSS..."
|
||||
rm -rf static/dist
|
||||
@echo "✅ Cleaned static/dist/"
|
||||
|
||||
+106
-24
@@ -9,6 +9,7 @@ The CV site uses a **modular CSS architecture** based on ITCSS (Inverted Triangl
|
||||
```
|
||||
static/css/
|
||||
├── main.css # Entry point - imports all modules
|
||||
├── print.css # Print styles (loaded separately with media="print")
|
||||
├── 01-foundation/ # Base styles, variables, resets
|
||||
│ ├── _reset.css # CSS reset/normalize
|
||||
│ ├── _variables.css # CSS custom properties (colors, spacing)
|
||||
@@ -31,17 +32,21 @@ static/css/
|
||||
│ └── _languages.css # Languages section
|
||||
├── 04-interactive/ # Interactive elements & HTMX patterns
|
||||
│ ├── _toggles.css # Toggle switches (theme, length, icons)
|
||||
│ ├── _tooltips.css # Tooltip styles
|
||||
│ ├── _navigation.css # Hamburger menu & navigation
|
||||
│ ├── _scroll-behavior.css # Scroll-based interactions
|
||||
│ ├── _buttons.css # Fixed action buttons
|
||||
│ ├── _modals.css # Modal dialogs
|
||||
│ ├── _toasts.css # Toast notifications
|
||||
│ └── _zoom-control.css # Zoom slider control
|
||||
├── 05-responsive/ # Responsive breakpoints
|
||||
│ └── _breakpoints.css # Media queries for all screen sizes
|
||||
├── 06-effects/ # Visual effects
|
||||
│ └── _skeleton.css # Loading skeleton screens
|
||||
└── 08-contexts/ # Context-specific styles
|
||||
└── _print.css # Print media styles
|
||||
└── 06-effects/ # Visual effects
|
||||
└── _skeleton.css # Loading skeleton screens
|
||||
|
||||
static/dist/ # Generated by Lightning CSS (gitignored)
|
||||
├── bundle.css # Development bundle
|
||||
└── bundle.min.css # Production bundle (minified)
|
||||
```
|
||||
|
||||
## Layer Descriptions
|
||||
@@ -150,13 +155,19 @@ Each file contains styles for a specific CV section:
|
||||
|
||||
**When to edit**: Adding new animations or loading states.
|
||||
|
||||
### 08-contexts/ - Context-Specific Styles
|
||||
### print.css - Print Styles (Separate File)
|
||||
|
||||
**Purpose**: Styles for specific contexts (print, email, etc.)
|
||||
**Purpose**: Print-optimized styles loaded via `<link rel="stylesheet" href="print.css" media="print">`.
|
||||
|
||||
- **_print.css**: Print-optimized styles (@media print)
|
||||
**Location**: `static/css/print.css` (at root level, NOT bundled)
|
||||
|
||||
**When to edit**: Adjusting print output or adding new contexts.
|
||||
**Why separate**:
|
||||
1. Only loaded when printing (no bundle bloat)
|
||||
2. Uses `media="print"` for automatic browser handling
|
||||
3. Special PDF export requirements
|
||||
4. Independent of theme system
|
||||
|
||||
**When to edit**: Adjusting print output or PDF export appearance.
|
||||
|
||||
## Import Order (main.css)
|
||||
|
||||
@@ -200,12 +211,80 @@ The import order follows the ITCSS inverted triangle - from generic to specific:
|
||||
/* 06 - Effects */
|
||||
@import './06-effects/_skeleton.css';
|
||||
|
||||
/* 08 - Contexts (most specific) */
|
||||
@import './08-contexts/_print.css';
|
||||
/* NOTE: print.css is loaded separately in HTML with media="print" */
|
||||
```
|
||||
|
||||
⚠️ **IMPORTANT**: Do not change the import order. Later imports can override earlier ones based on specificity.
|
||||
|
||||
## CSS Bundling (Lightning CSS)
|
||||
|
||||
For production, CSS files are bundled and minified using [Lightning CSS](https://lightningcss.dev/) for better performance.
|
||||
|
||||
### Bundle Strategy
|
||||
|
||||
| Mode | CSS Loading | HTTP Requests |
|
||||
|------|-------------|---------------|
|
||||
| Development | Individual files via `@import` | ~27 requests (waterfall) |
|
||||
| Production | Single bundled file | 1 request |
|
||||
|
||||
### Size Comparison
|
||||
|
||||
| Metric | Individual Files | Bundle (dev) | Bundle (minified) | Gzip |
|
||||
|--------|------------------|--------------|-------------------|------|
|
||||
| Size | 188 KB | 110 KB | 86 KB | ~15 KB |
|
||||
| Reduction | - | 43% | 54% | 92% |
|
||||
|
||||
### Makefile Targets
|
||||
|
||||
```bash
|
||||
# Development: Bundle CSS (readable)
|
||||
make css-dev
|
||||
|
||||
# Production: Bundle + minify CSS
|
||||
make css-prod
|
||||
|
||||
# Watch mode (auto-rebuild on changes)
|
||||
make css-watch
|
||||
|
||||
# Clean generated bundles
|
||||
make css-clean
|
||||
```
|
||||
|
||||
### Environment-Based Loading
|
||||
|
||||
The template conditionally loads CSS based on `GO_ENV`:
|
||||
|
||||
```html
|
||||
<!-- In templates/index.html -->
|
||||
{{if .IsProduction}}
|
||||
<link rel="stylesheet" href="/static/dist/bundle.min.css">
|
||||
{{else}}
|
||||
<link rel="stylesheet" href="/static/css/main.css">
|
||||
{{end}}
|
||||
<!-- Print always separate -->
|
||||
<link rel="stylesheet" href="/static/css/print.css" media="print">
|
||||
```
|
||||
|
||||
### Build Requirements
|
||||
|
||||
```bash
|
||||
# Install Lightning CSS CLI globally
|
||||
npm install -g lightningcss-cli
|
||||
|
||||
# Verify installation
|
||||
lightningcss --version
|
||||
```
|
||||
|
||||
### CI/CD Integration
|
||||
|
||||
Production builds should run `make css-prod` before deployment:
|
||||
|
||||
```yaml
|
||||
# Example GitHub Actions
|
||||
- name: Build CSS
|
||||
run: make css-prod
|
||||
```
|
||||
|
||||
## File Naming Conventions
|
||||
|
||||
- **Prefix with underscore**: `_filename.css` indicates a partial file (imported by main.css)
|
||||
@@ -343,19 +422,22 @@ Keep specificity low for easier overrides.
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
### File Sizes
|
||||
- **Total CSS**: ~120 KB uncompressed
|
||||
- **Main entry point**: ~1.2 KB (imports only)
|
||||
- **Largest files**:
|
||||
- `_modals.css` (16 KB)
|
||||
- `_breakpoints.css` (14 KB)
|
||||
- `_action-bar.css` (13 KB)
|
||||
### File Sizes (Production Bundle)
|
||||
- **Production CSS**: 86 KB minified (~15 KB gzip)
|
||||
- **Print CSS**: 18 KB (loaded only when printing)
|
||||
- **Development CSS**: ~188 KB across 27 files
|
||||
|
||||
### Optimization Tips
|
||||
1. **Browser caching**: Modular files = better cache granularity
|
||||
2. **Critical CSS**: Consider inlining foundation layer for first paint
|
||||
3. **Minification**: Use CSS minifier in production
|
||||
4. **HTTP/2**: Leverages multiplexing for parallel file loading
|
||||
### Production Optimizations
|
||||
1. **Lightning CSS bundling**: Combines all CSS into single file
|
||||
2. **Minification**: Removes whitespace, comments, shortens values
|
||||
3. **Single HTTP request**: Eliminates waterfall from @import
|
||||
4. **Gzip compression**: 92% network transfer reduction
|
||||
|
||||
### Development Workflow
|
||||
1. **Hot reload friendly**: Individual files for debugging
|
||||
2. **Browser DevTools**: Can trace styles to source files
|
||||
3. **Faster iteration**: No build step required
|
||||
4. **Modular organization**: Easy to find and edit specific styles
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
@@ -435,6 +517,6 @@ When adding new styles:
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: November 20, 2025
|
||||
**Version**: 2.0
|
||||
**Last Updated**: November 30, 2025
|
||||
**Version**: 2.1 (Lightning CSS bundling)
|
||||
**Maintainer**: Development Team
|
||||
|
||||
@@ -716,6 +716,9 @@ document.body.addEventListener('htmx:sendError', function(evt) {
|
||||
| Event Listeners | 23 | 14 | -39.1% |
|
||||
| Memory Usage (JS Heap) | ~2.1MB | ~1.7MB | -19.0% |
|
||||
| Lighthouse Performance | 94 | 97 | +3 points |
|
||||
| CSS Files (Prod) | 27 | 1 | -96.3% |
|
||||
| CSS Size (Prod) | 188KB | 86KB | -54.3% |
|
||||
| CSS Gzip (Prod) | N/A | 15KB | Network transfer |
|
||||
|
||||
### Why This Matters
|
||||
|
||||
@@ -1430,7 +1433,8 @@ end
|
||||
| **v1.4** | Milestone | Phase 4A Complete | **-285 lines (-29.9%)** |
|
||||
| **v2.0** | Phase 5 | Hyperscript zoom control | -343 lines |
|
||||
| **v2.1** | Phase 6 | Scroll & print + organization | -87 lines |
|
||||
| **Current** | v2.1 | Phase 6 Complete | **-715 lines (-74.9%)** |
|
||||
| **v2.2** | Phase 9 | CSS Bundling (Lightning CSS) | N/A (CSS optimization) |
|
||||
| **Current** | v2.2 | Phase 9 Complete | **-715 JS lines + 54% CSS reduction** |
|
||||
|
||||
---
|
||||
|
||||
@@ -1457,13 +1461,24 @@ end
|
||||
- ✅ **External functions file** (110 lines in organized `functions._hs`)
|
||||
- ✅ **DRY principle achieved** (reusable functions across templates)
|
||||
|
||||
### Phase 9 Achievements (CSS Bundling):
|
||||
- ✅ **27 CSS files → 1 bundle** in production (96.3% HTTP reduction)
|
||||
- ✅ **188KB → 86KB CSS** (54% size reduction)
|
||||
- ✅ **~15KB gzip** network transfer in production
|
||||
- ✅ **Lightning CSS integration** (Rust-based, fast bundler)
|
||||
- ✅ **Conditional loading** (dev=modular, prod=bundled)
|
||||
- ✅ **Print CSS separate** (media="print" for PDF export)
|
||||
- ✅ **Makefile targets** (css-dev, css-prod, css-watch)
|
||||
|
||||
### Cumulative Achievements:
|
||||
- ✅ **715 lines of JavaScript eliminated total** (74.9% reduction)
|
||||
- ✅ **54% CSS size reduction** in production (Lightning CSS bundling)
|
||||
- ✅ **96% fewer CSS HTTP requests** in production (27 → 1)
|
||||
- ✅ **All modern features preserved** (no functionality loss)
|
||||
- ✅ **Improved maintainability** (organized external functions)
|
||||
- ✅ **Better performance** (hardware acceleration, reduced event loop blocking)
|
||||
- ✅ **Enhanced accessibility** (native browser features, proper semantics)
|
||||
- ✅ **Smaller bundle size** (~35KB → ~15KB JavaScript)
|
||||
- ✅ **Smaller bundle size** (~35KB → ~15KB JavaScript, 188KB → 86KB CSS)
|
||||
- ✅ **Clean HTML templates** (no long inline hyperscript blocks)
|
||||
- ✅ **Professional code organization** (separated concerns)
|
||||
|
||||
@@ -3304,10 +3319,94 @@ AWS Lambda + API Gateway (if needed)
|
||||
14. Soft shadow optimization (light theme)
|
||||
15. Border removal strategy
|
||||
16. Enhanced server startup logs
|
||||
17. Lightning CSS bundling (production optimization)
|
||||
- **Quality:** Smooth "analogical" animations, zero swap errors, comprehensive test coverage
|
||||
- **All original features preserved** + significant new functionality
|
||||
- **Production-ready:** Modular architecture, automated testing, excellent maintainability
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Phase 9: CSS Bundling with Lightning CSS (COMPLETED)
|
||||
|
||||
### What is Lightning CSS?
|
||||
|
||||
**Lightning CSS** is a modern, Rust-based CSS bundler and minifier that provides:
|
||||
- Blazing fast performance (written in Rust)
|
||||
- CSS bundling (combines @import statements)
|
||||
- Minification (production optimization)
|
||||
- Modern CSS features transpilation
|
||||
- No configuration required
|
||||
|
||||
### The Problem: CSS Waterfall
|
||||
|
||||
**Before bundling**, the browser had to:
|
||||
1. Download `main.css` (contains @import statements)
|
||||
2. Parse and discover 27 nested CSS files
|
||||
3. Make 27 sequential HTTP requests (waterfall pattern)
|
||||
4. Wait for all files before rendering
|
||||
|
||||
```
|
||||
main.css (@imports)
|
||||
├── _reset.css
|
||||
├── _variables.css
|
||||
├── _typography.css
|
||||
├── _themes.css
|
||||
├── _container.css
|
||||
... (22 more files)
|
||||
└── _skeleton.css
|
||||
```
|
||||
|
||||
**Result:** Slow initial paint, especially on mobile networks.
|
||||
|
||||
### The Solution: Production Bundling
|
||||
|
||||
```bash
|
||||
# Development: Individual files for debugging
|
||||
GO_ENV=development go run main.go
|
||||
# → Loads /static/css/main.css (27 @import requests)
|
||||
|
||||
# Production: Single bundled file
|
||||
GO_ENV=production go run main.go
|
||||
# → Loads /static/dist/bundle.min.css (1 request, 86KB)
|
||||
```
|
||||
|
||||
### Implementation
|
||||
|
||||
**Template conditional loading:**
|
||||
```html
|
||||
{{if .IsProduction}}
|
||||
<link rel="stylesheet" href="/static/dist/bundle.min.css">
|
||||
{{else}}
|
||||
<link rel="stylesheet" href="/static/css/main.css">
|
||||
{{end}}
|
||||
<!-- Print CSS always separate -->
|
||||
<link rel="stylesheet" href="/static/css/print.css" media="print">
|
||||
```
|
||||
|
||||
**Makefile targets:**
|
||||
```bash
|
||||
make css-dev # Bundle for development (readable)
|
||||
make css-prod # Bundle + minify for production
|
||||
make css-watch # Watch mode (auto-rebuild)
|
||||
make css-clean # Remove generated bundles
|
||||
```
|
||||
|
||||
### Results
|
||||
|
||||
| Metric | Before | After | Improvement |
|
||||
|--------|--------|-------|-------------|
|
||||
| HTTP Requests | 27 | 1 | -96.3% |
|
||||
| CSS Size | 188 KB | 86 KB | -54.3% |
|
||||
| Gzip Transfer | ~50 KB | ~15 KB | -70% |
|
||||
| Initial Paint | Waterfall | Single request | Faster |
|
||||
|
||||
### Key Decisions
|
||||
|
||||
1. **Print CSS kept separate**: Loaded with `media="print"`, not bundled (only needed for printing)
|
||||
2. **Development uses modular**: Easier debugging, no build step required
|
||||
3. **Bundle is gitignored**: Generated on deployment via `make css-prod`
|
||||
4. **ITCSS architecture preserved**: Modular source files remain organized
|
||||
|
||||
---
|
||||
|
||||
*This document serves as both a technical reference and a demonstration of modern web development practices that prioritize web standards, performance, progressive enhancement, and superior user experience over JavaScript-heavy solutions.*
|
||||
|
||||
@@ -330,6 +330,9 @@ func (h *CVHandler) prepareTemplateData(lang string) (map[string]interface{}, er
|
||||
// Get current year
|
||||
currentYear := time.Now().Year()
|
||||
|
||||
// Check if production mode
|
||||
isProduction := os.Getenv("GO_ENV") == "production"
|
||||
|
||||
// Prepare template data
|
||||
data := map[string]interface{}{
|
||||
"CV": cv,
|
||||
@@ -339,6 +342,7 @@ func (h *CVHandler) prepareTemplateData(lang string) (map[string]interface{}, er
|
||||
"SkillsRight": skillsRight,
|
||||
"YearsOfExperience": yearsOfExperience,
|
||||
"CurrentYear": currentYear,
|
||||
"IsProduction": isProduction,
|
||||
"CanonicalURL": fmt.Sprintf("https://juan.andres.morenorub.io/?lang=%s", lang),
|
||||
"AlternateEN": "https://juan.andres.morenorub.io/?lang=en",
|
||||
"AlternateES": "https://juan.andres.morenorub.io/?lang=es",
|
||||
|
||||
@@ -2,8 +2,7 @@
|
||||
TYPOGRAPHY - Fonts & Text Styles
|
||||
============================================================================ */
|
||||
|
||||
/* Font Imports */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Source+Sans+Pro:wght@400;600&family=Inter:wght@400;500;600;700&display=swap');
|
||||
/* NOTE: Fonts are loaded via <link> in index.html for better performance */
|
||||
|
||||
/* Base Typography */
|
||||
body {
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
font-size: 2.2em;
|
||||
font-weight: 400;
|
||||
{{/* font-style: italic; */}}
|
||||
/* font-style: italic; */
|
||||
line-height: 1.1;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-primary);
|
||||
|
||||
@@ -109,8 +109,12 @@
|
||||
<!-- Using unpkg CDN (more reliable than code.iconify.design) -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>
|
||||
|
||||
<!-- CSS - Modular structure with native @import -->
|
||||
<!-- CSS - Conditional loading: bundled in production, modular in development -->
|
||||
{{if .IsProduction}}
|
||||
<link rel="stylesheet" href="/static/dist/bundle.min.css">
|
||||
{{else}}
|
||||
<link rel="stylesheet" href="/static/css/main.css">
|
||||
{{end}}
|
||||
<!-- Print styles - loaded separately, only applied when printing -->
|
||||
<link rel="stylesheet" href="/static/css/print.css" media="print">
|
||||
|
||||
|
||||
@@ -0,0 +1,205 @@
|
||||
/**
|
||||
* CSS Bundling Test
|
||||
*
|
||||
* Tests for Lightning CSS bundling in production vs development mode.
|
||||
* Verifies correct CSS loading based on GO_ENV environment variable.
|
||||
*/
|
||||
|
||||
import { chromium } from 'playwright';
|
||||
|
||||
const BASE_URL = process.env.BASE_URL || 'http://localhost:1999';
|
||||
|
||||
console.log('\n============================================================');
|
||||
console.log('CSS BUNDLING TEST');
|
||||
console.log('============================================================\n');
|
||||
|
||||
const browser = await chromium.launch({ headless: true });
|
||||
const context = await browser.newContext();
|
||||
const page = await context.newPage();
|
||||
|
||||
let passed = 0;
|
||||
let failed = 0;
|
||||
const results = [];
|
||||
|
||||
function logResult(name, success, details = '') {
|
||||
const status = success ? '✅ PASS' : '❌ FAIL';
|
||||
console.log(`${status} - ${name}${details ? ': ' + details : ''}`);
|
||||
results.push({ name, success, details });
|
||||
if (success) passed++;
|
||||
else failed++;
|
||||
}
|
||||
|
||||
try {
|
||||
// Test 1: Check CSS files are loading (development mode)
|
||||
console.log('1️⃣ Testing CSS Loading...\n');
|
||||
|
||||
await page.goto(BASE_URL, { waitUntil: 'networkidle' });
|
||||
|
||||
// Get all CSS links
|
||||
const cssLinks = await page.evaluate(() => {
|
||||
return Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
|
||||
.map(link => link.href);
|
||||
});
|
||||
|
||||
console.log(' CSS Links found:');
|
||||
cssLinks.forEach(link => console.log(` - ${link}`));
|
||||
console.log('');
|
||||
|
||||
// Check if using bundled or modular CSS
|
||||
const hasBundledCSS = cssLinks.some(href => href.includes('/dist/bundle'));
|
||||
const hasModularCSS = cssLinks.some(href => href.includes('/css/main.css'));
|
||||
const hasPrintCSS = cssLinks.some(href => href.includes('/css/print.css'));
|
||||
|
||||
logResult(
|
||||
'CSS Loading Strategy',
|
||||
hasBundledCSS || hasModularCSS,
|
||||
hasBundledCSS ? 'Production bundle' : 'Development modular'
|
||||
);
|
||||
|
||||
logResult(
|
||||
'Print CSS Separate',
|
||||
hasPrintCSS,
|
||||
hasPrintCSS ? 'Loaded separately with media="print"' : 'Missing!'
|
||||
);
|
||||
|
||||
// Test 2: Verify print.css has media="print" attribute
|
||||
console.log('\n2️⃣ Testing Print CSS Media Attribute...\n');
|
||||
|
||||
const printLinkMedia = await page.evaluate(() => {
|
||||
const printLink = document.querySelector('link[href*="print.css"]');
|
||||
return printLink ? printLink.media : null;
|
||||
});
|
||||
|
||||
logResult(
|
||||
'Print CSS media="print"',
|
||||
printLinkMedia === 'print',
|
||||
printLinkMedia ? `media="${printLinkMedia}"` : 'No media attribute'
|
||||
);
|
||||
|
||||
// Test 3: Verify CSS is rendering correctly (basic visual check)
|
||||
console.log('\n3️⃣ Testing CSS Rendering...\n');
|
||||
|
||||
const bodyStyles = await page.evaluate(() => {
|
||||
const body = document.body;
|
||||
const computed = window.getComputedStyle(body);
|
||||
return {
|
||||
fontFamily: computed.fontFamily,
|
||||
color: computed.color,
|
||||
backgroundColor: window.getComputedStyle(document.documentElement).getPropertyValue('--page-bg')
|
||||
};
|
||||
});
|
||||
|
||||
const hasQuicksandFont = bodyStyles.fontFamily.toLowerCase().includes('quicksand');
|
||||
logResult(
|
||||
'Font Family Applied',
|
||||
hasQuicksandFont || bodyStyles.fontFamily.includes('system-ui'),
|
||||
bodyStyles.fontFamily.substring(0, 50) + '...'
|
||||
);
|
||||
|
||||
const hasThemeColor = bodyStyles.backgroundColor && bodyStyles.backgroundColor !== '';
|
||||
logResult(
|
||||
'CSS Variables Working',
|
||||
hasThemeColor,
|
||||
`--page-bg: ${bodyStyles.backgroundColor || 'not set'}`
|
||||
);
|
||||
|
||||
// Test 4: Verify no CSS 404 errors
|
||||
console.log('\n4️⃣ Testing CSS Resources Load Successfully...\n');
|
||||
|
||||
const cssResponses = [];
|
||||
page.on('response', response => {
|
||||
if (response.url().includes('.css')) {
|
||||
cssResponses.push({
|
||||
url: response.url(),
|
||||
status: response.status()
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Reload to capture all CSS requests
|
||||
await page.reload({ waitUntil: 'networkidle' });
|
||||
|
||||
const all200 = cssResponses.every(r => r.status === 200);
|
||||
const css404s = cssResponses.filter(r => r.status === 404);
|
||||
|
||||
logResult(
|
||||
'All CSS Resources Load (200)',
|
||||
all200,
|
||||
css404s.length > 0 ? `404s: ${css404s.map(r => r.url).join(', ')}` : `${cssResponses.length} CSS files OK`
|
||||
);
|
||||
|
||||
// Test 5: Check CSS size (if bundled)
|
||||
console.log('\n5️⃣ Testing CSS Size...\n');
|
||||
|
||||
let totalCSSSize = 0;
|
||||
for (const cssLink of cssLinks) {
|
||||
try {
|
||||
const response = await page.evaluate(async (url) => {
|
||||
const res = await fetch(url);
|
||||
const text = await res.text();
|
||||
return text.length;
|
||||
}, cssLink);
|
||||
totalCSSSize += response;
|
||||
} catch (e) {
|
||||
// External CSS (like Google Fonts) won't be fetchable
|
||||
}
|
||||
}
|
||||
|
||||
const sizeKB = (totalCSSSize / 1024).toFixed(1);
|
||||
const sizeOK = totalCSSSize > 0 && totalCSSSize < 500 * 1024; // Under 500KB is reasonable
|
||||
|
||||
logResult(
|
||||
'CSS Size Reasonable',
|
||||
sizeOK,
|
||||
`${sizeKB} KB total (local CSS)`
|
||||
);
|
||||
|
||||
// Test 6: Verify ITCSS layers (check for specific class names)
|
||||
console.log('\n6️⃣ Testing CSS Architecture (ITCSS Layers)...\n');
|
||||
|
||||
const cssClasses = await page.evaluate(() => {
|
||||
const classes = {
|
||||
foundation: document.querySelector('[class*="cv-"]') !== null,
|
||||
layout: document.querySelector('.cv-container') !== null,
|
||||
components: document.querySelector('.cv-header') !== null ||
|
||||
document.querySelector('.cv-paper') !== null,
|
||||
interactive: document.querySelector('.modal') !== null ||
|
||||
document.querySelector('.toggle-switch') !== null,
|
||||
responsive: window.matchMedia('(max-width: 768px)').matches !== undefined
|
||||
};
|
||||
return classes;
|
||||
});
|
||||
|
||||
const layersPresent = Object.values(cssClasses).filter(v => v).length;
|
||||
logResult(
|
||||
'ITCSS Layers Present',
|
||||
layersPresent >= 3,
|
||||
`${layersPresent}/5 layers detected`
|
||||
);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Test error:', error.message);
|
||||
logResult('Test Execution', false, error.message);
|
||||
} finally {
|
||||
await browser.close();
|
||||
}
|
||||
|
||||
// Summary
|
||||
console.log('\n============================================================');
|
||||
console.log('TEST SUMMARY');
|
||||
console.log('============================================================\n');
|
||||
|
||||
results.forEach(r => {
|
||||
const icon = r.success ? '✅' : '❌';
|
||||
console.log(` ${icon} ${r.name}`);
|
||||
});
|
||||
|
||||
console.log(`\n Total: ${passed}/${passed + failed} tests passed\n`);
|
||||
|
||||
if (failed > 0) {
|
||||
console.log('❌ SOME TESTS FAILED\n');
|
||||
process.exit(1);
|
||||
} else {
|
||||
console.log('✅ ALL TESTS PASSED\n');
|
||||
process.exit(0);
|
||||
}
|
||||
Reference in New Issue
Block a user