Stylelint

Stylelint-configen til Aksel hjelper deg å bruke tokens riktig, unngå feil og hindre teknisk gjeld.

Installasjon

yarn add -D @navikt/aksel-stylelint stylelint
npm install -D @navikt/aksel-stylelint stylelint

Bruk

Det skal være tilstrekkelig å legge til følgende i stylelint-konfigurasjonen din:

"stylelint": {
  "extends": [
    ...,
    "@navikt/aksel-stylelint/recommended"
  ],
  ...
}

Regler

aksel/design-token-exists

Sjekker bruk av tokens med prefix —-ax-. Gir feilmelding hvis token ikke eksisterer i token-pakka vår.

// ❌ Feil:
html {
    --ax-my-own-color-bg-hover: #f2f2f2;
    ^^^^^^^^^^^^^^^^^^^^^^^^^^
    background-color: var(--ax-my-own-color-bg-hover);
                          ^^^^^^^^^^^^^^^^^^^^^^^^^^
}

// ✅ Riktig:
html {
  background-color: var(--ax-bg-default);
}

aksel/design-token-no-global-override

Sjekker at du ikke overskriver tokens med prefix —-ax-. Disse er ikke meningen at man skal overskrive, med mindre man themer løsningen sin til et annet sub-brand.

// ❌ Feil:
div {
    --ax-bg-default: #f2f2f2;
    ^^^^^^^^^^^^^^^
}

aksel/no-internal-tokens

Forbyr bruk eller overstyring av interne CSS-variabler brukt i Aksel. Interne variabler bør ikke brukes utenfor designsystemet, og de kan endres eller fjernes av Aksel uten varsel. Vær oppmerksom på at regelen bare sjekker prefikset til tokenet, og ikke om det faktisk finnes i designsystemet. Selv om de ikke eksisterer, bør prefiksene til designsystemet unngås.

// ❌ Feil:
a {
  --__axc-some-property: pink;
  ^^^^^^^^^^^^^^^^^^^^^
  color: var(--__axc-some-property);
}            ^^^^^^^^^^^^^^^^^^^^^

// ✅ Riktig:
a {
  --some-property: pink;
  color: var(--some-property);
}

aksel/no-class-override

Advarer når du prøver å overstyre stiler fra Aksel (@navikt/ds-css). Regelen sjekker om du bruker klasser som starter med .aksel-.

Overstyring av stiler i designsystemet frarådes. Vi ønsker å ha et mest mulig konsistent utseende og følelse på tvers av applikasjoner fra Nav. Overstyring av klasser introduserer også teknisk gjeld i løsningene dine da dette lett kan brekke ved senere oppdateringer av designsystemet.

// ❌ Feil:
.aksel-button {
 ^^^^^^^^^^^^
  margin-bottom: var(--ax-space-4);
}

// ✅ Riktig:
.custom-class {
  margin-bottom: var(--ax-space-4);
}

aksel/no-deprecated-classes

Advarer når du prøver å bruke utdaterte CSS-klassenavn.

// ❌ Feil
.aksel-deprecated-example {
^^^^^^^^^^^^^^^^^^^^^^^^^
}

aksel/no-legacy-classes

Advarer når du prøver å bruke utdaterte CSS-klassenavn som starter med .navds.

// ❌ Feil
.navds-deprecated-example {
^^^^^^^^^^^^^^^^^^^^^^^^^
}

Kode

Du finner koden til plugin'en her, og NPM-pakken vår her.