Hopp til innhold

Smarte tips til refaktorering av spacing

Pio Rasch-Halvorsen

2021.10.26

Etter at vi har gjort om spacing-skalaen i Jøkul er det kanskje mange som har en stor refaktoreringsjobb foran seg. Her er noen tips som kan gjøre den litt lettere!

Det er et par ting som bør gjøres når du tar i bruk den nye spacing-skalaen. For det første må du bytte om til de nye navnene både der du har brukt hjelpeklasser og der du har brukt variablene i Sass. I tillegg bør du sørge for å importere Sass-variablene fra @fremtind/jkl-core/jkl. Med litt smart bruk av regex og søk-og-erstatt kan vi få til dette litt enklere enn man skulle tro.

Siden vi har endret navngivingen i skalaen kan man ikke bruke ett magisk regex-uttrykk for å refaktorere til de nye verdiene, men ved å ta et par små mellomsteg kan vi i hvert fall redusere det manuelle arbeidet ganske mye.

1. Hjelpeklassene

De gamle hjelpelklassene var på formen jkl-<type>-spacing--<steg>-<posisjon>, der type er layout eller component, steg er steget i den gamle skalaen (f.eks. large), og posisjon er top, right, bottom, left eller all.

De nye klassene er på formen jkl-spacing-<steg>--<posisjon>, der steg er et steg i den nye skalaen posisjon er det samme som i de gamle klassene. Med en regex søk-og-erstatt kan vi gjøre om fra det gamle til det nye formatet, men med steg og type fra den gamle skalaen. Da er vi klare for senere å oversette verdiene fra gammel til ny skala.

  • Vi søker etter jkl-(component|layout)-spacing--(\w+)-(\w+), og får da ut grupper for type, steg og posisjon. Disse kan vi sette inn i det nye formatet, f.eks. slik: jkl-spacing-<$1-$2>--$3.

  • Det finnes også en enda eldre skala med tall, som kun omfatter layout-spacing. Vi gjør om den på tilsvarende måte med søk jkl-spacing--(\w+)-(\d) og erstatt jkl-spacing-<tall-layout-$2>--$1.

2. Variablene

Variablene har ingen varianter for posisjon, så her blir regexen hakket enklere! Vi gjør om både den gamle og den eldgamle skalaen her også, til det samme formatet som vi brukte for hjelpeklassene.

  • For den gamle skalaen bruker du søk \$(component|layout)-spacing--(\w+) og erstatt $spacing-<$1-$2>
  • For den enda eldre skalaen med tall (som her omfatter "hele" skalaen) bruker du søk $spacing-(\d) og erstatt $spacing-<tall-komplett-$1>

3. Oversettingen

Nå har du fått både hjelpeklasser og variabler over i samme format, så det er på tide å faktisk oversette verdiene. Du må fortsatt gå gjennom verdiene en og en, men siden vi har fikset formatet holder det med erstatt alle én gang per skala og verdi!

Ta utgangspunkt i tabellene i migrasjonsguiden, og erstatt verdiene på følgende måte (ingen regex nødvendig!):

  • For komponent-/og layoutskala søk <component-xxs> og erstatt 3xs. Gjør tilsvarende med alle steg i tabellene for både layout- og komponentskalaene.
  • For den komplette tallskalaen søk <tall-komplett-1> og erstatt 3xs. Gjør tilsvarende for alle tallene i skalaen.
  • For tall-layoutskalaen søk <tall-layout-1> og erstatt l. Gjør tilsvarende for resten av tallene i skalaen.

Gratulerer! Du har nå oversatt alle gamle varianter av spacing med de nyeste! 🎉

4. Importene

Dette steget er foreløpig strengt tatt valgfritt, men vi anbefaler alle å gå over til den nye importen av Jøkul-variablene i Sass ved hjelp av @use. NB! Dette krever at man bruker nyeste versjon av Sass i prosjektet sitt, noe vi også anbefaler at man gjør.

Her har vi dessverre ingen magisk regex, siden det vil kunne variere fra prosjekt til prosjekt, men man ønsker å endre importen til @use '~@fremtind/jkl-core/jkl'; og prefikse alle variablene med jkl. Dette lar seg også i stor grad løse med søk-og-erstatt, du vet best hva du må lete etter i ditt prosjekt!