Calendar/wwwroot/css/README.md

# CSS Build Process

Dette projekt bruger PostCSS til at kompilere moderne nested CSS til browser-kompatibel CSS.

## Mappestruktur

```
wwwroot/css/
├── src/                          # Source CSS filer med nesting
│   ├── calendar-base-css.css
│   ├── calendar-layout-css.css
│   └── ...
├── calendar-base-css.css         # Compiled CSS (genereret automatisk)
├── calendar-layout-css.css       # Compiled CSS (genereret automatisk)
└── ...
```

## Workflow

### Development

1. **Rediger CSS i `src/` mappen**
   - Brug moderne CSS nesting
   - Skriv nested selectors med `&`
   - Brug CSS custom properties

2. **Build CSS**
   ```bash
   npm run css:build
   ```

3. **Watch mode (auto-rebuild)**
   ```bash
   npm run css:watch
   ```

### Production

```bash
npm run css:build:prod
```

Dette vil:
- Kompilere nested CSS
- Tilføje vendor prefixes (autoprefixer)
- Minificere CSS (cssnano)
- Fjerne comments

## CSS Nesting Eksempel

### Source (src/calendar-layout-css.css)

```css
swp-allday-container {
  display: grid;
  
  swp-allday-event {
    height: 22px;
    padding: 2px 4px;
    
    &[data-type="meeting"] {
      background: var(--color-event-meeting);
      
      &.highlight {
        background: var(--color-event-meeting-hl);
      }
    }
    
    &:hover {
      opacity: 0.9;
    }
    
    swp-event-title {
      font-size: 12px;
    }
  }
}
```

### Compiled (calendar-layout-css.css)

```css
swp-allday-container {
  display: grid;
}

swp-allday-container swp-allday-event {
  height: 22px;
  padding: 2px 4px;
}

swp-allday-container swp-allday-event[data-type="meeting"] {
  background: var(--color-event-meeting);
}

swp-allday-container swp-allday-event[data-type="meeting"].highlight {
  background: var(--color-event-meeting-hl);
}

swp-allday-container swp-allday-event:hover {
  opacity: 0.9;
}

swp-allday-container swp-allday-event swp-event-title {
  font-size: 12px;
}
```

## Fordele ved CSS Nesting

1. **Mindre gentagelse** - Ingen behov for at gentage parent selectors
2. **Bedre læsbarhed** - Strukturen matcher DOM hierarkiet
3. **Lettere vedligeholdelse** - Relaterede styles er grupperet
4. **Mindre CSS** - Færre bytes i source filer
5. **Bedre organisation** - Logisk gruppering af styles

## PostCSS Plugins

- **postcss-nesting**: Konverterer nested CSS til flat CSS
- **autoprefixer**: Tilføjer vendor prefixes automatisk
- **cssnano**: Minificerer CSS i production mode

## Vigtige Noter

⚠️ **Rediger ALDRIG de compiled CSS filer direkte!**
- Alle ændringer skal laves i `src/` mappen
- De compiled filer bliver overskrevet ved hver build

⚠️ **Husk at køre build før commit**
- Sørg for at både source og compiled filer er opdateret
- Kør `npm run css:build` før du committer

## Browser Support

PostCSS sikrer kompatibilitet med:
- Chrome/Edge (sidste 2 versioner)
- Firefox (sidste 2 versioner)
- Safari (sidste 2 versioner)

## Troubleshooting

### CSS ændringer vises ikke

1. Tjek at du har kørt `npm run css:build`
2. Tjek at du redigerer filer i `src/` mappen
3. Hard refresh browseren (Ctrl+Shift+R)

### Build fejl

1. Tjek CSS syntax i source filerne
2. Sørg for at alle `{` har matchende `}`
3. Tjek at nesting er korrekt formateret