Cchkpit

sheriff-v2-upgrade

Oppgrader fra Sheriff v1 til Sheriff v2

migration
Public
18 executions
Apply to Repository

Run locally

npx codemod sheriff-v2-upgrade

Sheriff V2 CSS Oppdatering Codemod

Vi har laget en codemod for å oppgradere fra Sheriff v1 over til Sheriff V2.
Det er rykende fersk release candidate versjon, som vi setter pris på om du hjelper oss teste.

Bruk av denne codemoden

Du kan kjøre denne codemoden med følgende kommando:

bash

Codemoden vil automatisk søke gjennom alle JavaScript, TypeScript, JSX, TSX og MDX-filer i prosjektet ditt (unntatt node_modules) og oppdatere CSS-klassene fra V1 til V2.

Husk å ha kodebasen din i en tilstand hvor du kan tilbakestille endringene gjort av Codemoden, i tilfelle noe går galt.

Lokal testing

Du kan kjøre codemoden lokalt med denne kommandoen

bash

Om du vil kjøre codemoden i mappen du står i, så kan du bytte ut $TARGET_FOLDER med .

Hva denne codemoden gjør

Denne codemoden utfører følgende transformasjoner:

1. Oppgraderer Sheriff-komponenter

  • sds-paragraph, sds-label og sds-detail (pluss wrapperne) blir til sds-text/SDSTextWrapper, og vi legger på fornuftige size-attributter (xl, sm, xs) når det mangler.
  • sds-link blir konvertert til rene <a>-tagger.
  • sds-notification og SDSNotificationWrapper blir til sds-alert/SDSAlertWrapper. variant flyttes til data-palette, og vi setter variant="primary" som default for alerts.
  • Endrer v1 size (s/m/l) til nye v2 size (sm/md/lg)

2. Konverterer numeriske verdier til t-skjorte-størrelser

Oppdaterer numeriske verdier brukt i V1 i stack- og spacing-klasser til t-skjorte-størrelser som er brukt i V2:

V1 (Numerisk)V2 (T-skjorte)
14xs
23xs
32xs
4xs
5sm
6md
7lg
8xl
92xl
103xl
11-144xl

3. Oppdaterer radius-klasser

Den samme transformasjonen blir brukt for radius-klasser.

V1V2Kommentar
sds-radius-2sds-radius-xs0.125rem → 2px
sds-radius-4sds-radius-sm0.25rem → 4px
sds-radius-6sds-radius-md0.375rem → 8px

4. Oppdaterer fargeklasser

Codemoden oppdaterer en rekke fargeklasser, inkludert:

  • Bakgrunnsfarger
  • Overflatefarger
  • Tekstfarger
  • Kantfarger
  • Ikonfarger
  • Varselfarger (kritisk, advarsel, oppmerksomhet, suksess, info)

Eksempler på før og etter

Tekst-komponenter

Før

tsx

Etter

tsx

Lenker

Før

tsx

Etter

tsx

Notifications blir til alerts

Før

tsx

Etter

tsx

Stack-klasser

Før

tsx

Etter

tsx

Spacing-klasser

Før

tsx

Etter

tsx

Radius-klasser

Før

tsx

Etter

tsx

Fargeklasser

Før

tsx

Etter

tsx
Before

This is one example from the codemod's test cases. The codemod may handle many more cases.

Ready to contribute?

Build your own codemod and share it with the community.

Publish a codemodJoin the community