Bli kvitt Less på 1-2-3
En stegvis guide til hvordan du kan kompilere Less til CSS for å fjerne craco-less.
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.
Mathias har nylig gjort denne migrasjonen i en av appene sine, så ta gjerne en titt på PRen hans for et ryddig eksempel på endringene som skal til.
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:
For å gjøre dette steget raskt kan du kopiere de relevante pakkenavnene (nav-frontend-*-style
) fra dependencies i package.json, paste linjene der du vil importere stilene, for så å mikse og trikse med multi-cursor/macros.
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!
Om du er en av de heldige få som bruker CRACO til mer enn bare Less kan du istedenfor å fjerne CRACO helt bare fjerne pakken craco-less
og referanser til den i craco.config.js
. Denne committen er et eksempel på hvordan det kan gjøres.
Bidragsytere
Flere blogginnlegg
I arbeidet med å lage et strategisk fundament for den visuelle identiteten til NAV utforsker vi to verktøy som kan bli gull verdt i det daglige (design)arbeidet med nav.no.
Alexander Flammier Muskaug
Vi utforsker fargebruken på de nye sidemalene.
Jørgen Maristuen
Etter flere runder med designiterasjoner og brukertesting er den nye malen for produktsider klar! Her er en oppsummering av de viktigste designgrepene vi har gjort.
Martin Berglund