I siste versjon av teknisk retning (mural) sier Truls og Audun at vi må "slutte å begynne med ting, og begynne å slutte med ting". Ikke bare er det artig formulert, det er også sant! Så, i et forsøk på å etterleve det, vil jeg hjelpe så mange team som mulig å slutte med Less.

Hvorfor slutte med Less, sier du? Jo, fordi verktøystøtten for Less blir stadig dårligere (hverken Create React App eller Next.js støtter Less ut av boksen), og fordi det finnes bedre alternativer i 2022: Gode, gamle CSS har fått features som gjør preprocessors mindre nødvendige. Eventuelt kan du bruke CSS Modules eller noe css-in-js greier. Eller, om du vil fortsette å leve i fortiden, kan du ty til Less sin erkerival Sass.

De fleste apper i NAV som bruker Less gjør det fordi de uansett måtte ha Less i pipelinen sin for å kunne ta i bruk de gamle pakkene til designsystemet (nav-frontend-*). Det er heldigvis ikke tilfellet lenger, for nå distribueres ferdig kompilert CSS for hver komponent. Så i denne guiden kvitter vi oss med Less uten å samtidig miste stilene til designsystemet!

Målet er altså raskeste vei vekk fra Less, og måten vi oppnår det er ved å kompilere til CSS, men før vi setter i gang er det et par ulemper du må vite om. For det første mister du referanser til variabler og mixins. Det nye komponentbiblioteket (@navikt/ds) introduserer "design tokens" i form av CSS Custom Properties, men å ta i bruk de tenker jeg er best å løse som en separat oppgave. For det andre finnes ikke nesting av stiler i CSS enda, så all nesting flates ut.

Om du på noe tidspunkt sitter fast, sliter med å forstå hva jeg har ment, eller har noen andre tilbakemeldinger er det bare å fyre løs på #frontend eller sende meg en direktemelding på Slack.

Steg 0: Sørg for å ha nyeste versjon av nav-frontend-*

Det har ikke skjedd mye nytt i nav-frontend-* de siste par åra, men siste versjon har ryddet i måten Less importeres, og de distribuerer ferdig kompilert CSS.

Steg 1: Kompilere Less til CSS

For å ivareta filstrukturen til de lokale stilarkene dine vil vi kompilere hver Less-fil separat. For at det skal fungere må vi forsikre oss om at Less-filer som refererer til variabler eller mixins har import-statments for de relevante filene. Sørg også for at importen gjøres med "(reference)", hvis ikke vil hver av de resulterende CSS-filene inkludere alle stilene fra nav-frontend-core.

Her er et eksempel på hvordan man kan importere variabler som en referanse fra nav-frontend-core (merk at importen ikke starter med tilde ~):

Etter at referansene er på plass er det på tide med en runde kommandolinjemagi:

Denne kommandoen søker etter filer som slutter på .less i src, kjører Less-kompilatoren for hver av de, og skriver output til en fil med .css-suffiks. For at den skal funke må du ha less som en avhengighet i prosjektet ditt.

Etter å ha kjørt kommandoen har du forhåpentligvis en flunkende ny CSS-fil per Less-fil. Det neste vi da må gjøre er å bytte ut imports av gammel Less med imports av ny CSS, og til det kan vi f.eks. bruke vår gamle venn find-and-replace i din nærmeste kode-editor: .less' → .css'

Alt som da skal gjenstå er å rydde opp etter moroa ved å slette alle less-filer: rm src/**/*.less.

Og vipps er du kvitt all Less-kode i prosjektet ditt! 🎉 

Steg 2: Importere nav-frontend-*-css

Selv om de lokale Less-filene nå er historie, så kompileres fortsatt Less fra nav-frontend-* i bygget. For å beholde de stilene etter at vi fjerner CRACO må vi importere CSSen deres separat. De ligger under /dist/main.css i hver pakke, og kan f.eks. importeres sånn:

Husk å importere de globale stilene fra core-pakken om du har behov for de:

Om du noe sted har en direkte import av stiler fra en nav-frontend-*-style-pakke (f.eks. nav-frontend-tabell-style), så må de byttes ut med tilsvarende /dist/main.css imports.

nav-datovelger

Om du bruker nav-datovelger så blir stilene derfra også distribuert som CSS, men under en litt annen sti:

Steg 3: Fjerne CRACO

Og da har vi kommet til steget der vi endelig kan kaste CRACO, Less og craco-less! Alt du trenger å gjøre nå er å bytte ut "craco" med "react-scripts" for build-, start- og test-scriptene i package.json:

Så kan du slette alle spor av CRACO, og leve lykkelig i alle dine dager!