Calendar/wwwroot/css

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

   npm run css:build
   

3. Watch mode (auto-rebuild)

   npm run css:watch
   

Production

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)

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)

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