stylus-expert

# Stylus Expert (Verdensklasse .styl)

Dette skill sikrer **super-optimerede**, vedligeholdelige `.styl`-filer der kompilerer til minimal, konsistent CSS. Det er projekt-uafhængigt og bygger på Stylus-sproget; design tokens og filstruktur tilpasses det konkrete projekt.

---

## 1. Når skal skillen bruges?

- Oprette eller redigere filer med endelse `.styl` i **ethvert** projekt
- Refaktorere gentagen CSS til mixins/funktioner
- Tilføje komponenter, sider eller states i Stylus
- Beslutninger om import-rækkefølge, variabler eller iteration

---

## 2. Stylus-sproget – kort reference

**Kilde:** [stylus-lang.com](https://stylus-lang.com/docs/) (Node.js-preprocessor, ekspressiv og dynamisk CSS).

### 2.1 Valgfri syntaks

- **Kolonner, semikoloner, kommaer og krøllede parenteser** kan udelades.
- **Indentation** definerer blokke.
- Standard-CSS er også tilladt.

### 2.2 Sprogfunktioner

| Feature | Beskrivelse |
|--------|-------------|
| **Variabler** | `name = value`; genbrug i hele filen. |
| **Mixins** | Defineres som funktioner; kaldes som *statement* i en selector → egenskaber kopieres ind. Parenteser kan udelades: `border-radius 5px`. |
| **Funktioner** | Samme syntaks som mixins; returnerer værdi, bruges i udtryk: `padding add(10px, 5)`. |
| **arguments** | Lokal variabel med alle overførte argumenter; nyttig til `border-radius()` med vilkårlige værdier. |
| **Interpolation** | `{variabel}` i selectors og værdier: `border-{side} args`. |
| **Parent reference** | `&` refererer parent-selector (fx i mixins: `&.even`, `&:hover`). |
| **Iteration** | `for [key, index] in expression` (arrays, ranges `(1..5)`, strings). Postfix: `sum += n for n in nums`. |
| **Conditionals** | `if` / `else`; postfix: `padding 0 if !nested`. |
| **@import** | Indlæs andre `.styl`-filer. |
| **Over 60 built-ins** | fx `unit()`, `round()`, `unquote()`, `length()`, `split()`, `join()`, `selector()`. |

### 2.3 Mixin vs. funktion

- **Mixin:** Kaldes som statement i selector; udvider til egenskaber (og evt. nested selectors med `&`).
- **Funktion:** Kaldes i udtryk; returnerer værdi (fx i `padding fn(1,2)`).

---

## 3. Filstruktur (tilpas til projektet)

- **Entry-fil:** Typisk én `main.styl` eller `index.styl` der importerer resten; rækkefølge ofte: tokens/globals først, derefter base, layout, komponenter, sider, responsive.
- **Tokens:** Hvis projektet har design tokens, ofte i `tokens.styl` eller tilsvarende med `:root { --name value }`; i .styl bruges `var(--name)`. Verificer i den aktuelle kodebase.
- **Opdeling:** Base (reset, body), komponenter, side-specifikke filer, evt. `mobile.styl` eller media i samme fil – følg det projektet allerede gør.
- **Build:** Tjek `package.json` eller build-config for `stylus` / `stylus --compress`; brug den eksisterende pipeline.

**Regel:** Opfind ikke filstier, mixin-navne eller token-navne. Verificer i det aktuelle repo (søg i .styl og evt. .css).

---

## 4. Super-optimering – regler

### 4.1 DRY med mixins

- Gentagne **blokke af egenskaber** (fx knap-base, kort-base, radius+skygge) udtrækkes til mixins.
- Mixins med **default-argumenter** og `arguments` reducerer duplikat (fx én `radius()` der understøtter 1–4 værdier).

### 4.2 Design tokens (når projektet bruger dem)

- Hvis projektet har tokens (fx `:root` i tokens.styl eller design-tokens.css), brug **altid** `var(--token)` til farver, spacing, radius, skygger, typografi.
- Hvis der ikke er tokens, brug variabler øverst i .styl-filen i stedet for magiske værdier; undgå hardcodede `#hex`, `12px` spredt overalt.

### 4.3 Konsistent syntaks

- **Indentation-baseret** uden kolonner/semikoloner, i tråd med de øvrige .styl-filer i projektet.
- **Én egenskab per linje**; gruppér relaterede (fx transition + box-shadow).
- **Kommentarer:** blokkommentar `/** ... */` til fil/sektion; `//` til korte noter.

### 4.4 Parent reference (`&`)

- Brug `&` til **pseudo-klasser og modifier-klasser** (`.btn:hover`, `.dropdown.open`) i stedet for at gentage selector.
- I mixins: `&` refererer den selector mixin kaldes fra – brug til striping, hover-states, etc.

### 4.5 Iteration – når det giver mening

- **for/in** over ranges eller lister: fx hjælpeklasser (margin/padding) eller keyframes med numre.
- Brug kun iteration hvor det fjerner **reel** duplikat og holder læsbarheden.

### 4.6 Output og komprimering

- Optimér .styl for læsbarhed og DRY; lad compiler håndtere minifikation (fx `stylus --compress`).

---

## 5. Eksempler (optimerede mønstre)

### 5.1 Mixin med arguments (radius)

```stylus
radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments

.some-card
radius 12px
// eller radius var(--radius-lg) hvis projektet har tokens
```

### 5.2 Knap-variant med &

```stylus
btn-base()
padding 12px 24px
border none
border-radius 12px
font-weight 600
cursor pointer
transition transform 0.2s ease, box-shadow 0.2s ease
display inline-flex
align-items center
gap 8px

.btn-primary
btn-base()
background #7c3aed
color #fff
&:hover:not(:disabled)
transform translateY(-2px)
```

(Erstat med `var(--...)` hvor projektet har design tokens.)

### 5.3 Iteration (spacing-klasser – kun ved behov)

```stylus
for i in 1..6
.mt-{i}
margin-top var(--space-{i})
```

Kun hvis projektet har `--space-1` … `--space-6` og faktisk bruger sådanne klasser.

### 5.4 @keyframes

```stylus
@keyframes spin
to
transform rotate(360deg)
```

---

## 6. Do's og don'ts

**Gør:**

- Bruge design tokens (`var(--token)`) når projektet har dem; ellers Stylus-variabler øverst.
- Udtrække gentagne blokke til mixins; bruge `&` for hover/state.
- Følge den **eksisterende** fil- og import-struktur i det aktuelle projekt.
- Skrive indentation-baseret, konsistent med øvrige .styl-filer.
- Dokumentere fil-purpose med kort blokkommentar øverst.
- Verificere filstier og token-/klassenavne i kodebasen.

**Undgå:**

- Magiske tal eller farver uden variabel/token.
- At opfinde filstier eller token-navne der ikke findes i repoet.
- Unødvendig iteration eller for komplekse mixins.
- At bryde eksisterende selector- eller HTML-klassenavne (tjek .html/.js).

---

## 7. Integration i projektet

- Hvis projektet har et design-system eller UI-skill: .styl implementerer det visuelle; følg projektets tokens og komponentnavne.
- Hvis projektet har UX-/flow-dokumentation: .styl ændrer ikke flows, kun udtryk og struktur.

---

## 8. Referencer

- Stylus docs: https://stylus-lang.com/docs/
- Mixins: https://stylus-lang.com/docs/mixins.html
- Iteration: https://stylus-lang.com/docs/iteration.html
- Functions: https://stylus-lang.com/docs/functions.html