npx @navikt/aksel css-imports

Bruk kommandolinje-verktøyet vårt til å håndtere CSS import i løsningen din. Da blir cascading + mye mer håndtert for deg!

Aksel tilbyr nå mer fleksibilitet når du skal importere komponent-styling til løsningen din. For de fleste vil det enkle ofte være det beste og all stylingen du trenger for å bruke Aksel kan hentes slik.

JSX/TSX
import "@navikt/ds-css";

CSS
@import "@navikt/ds-css";

Spesifisitet

Hvis man overskriver en del styling fra Aksel, ender man ofte opp med problemer med spesifisitet. Den nye CSS-løsningen layers løser dette. All styling importert fra Aksel vil her få lavest spesifisitet.

@import "@navikt/ds-css" layer(aksel);

Minified og prefikset

CSS fra @navikt/ds-css er ikke minified eller prefikset rett ut av boksen, men fra v2.9.0 vil all CSS ha en ekstra *.min.css-versjon som håndterer dette.

@import "@navikt/ds-css/dist/index.min.css";

De fleste moderne bundlere og frameworks håndterer dette automatisk. Dette vil defor være mest nyttig hvis man laster CSS fra CDN eller andre løsninger som ikke kjører post-processing med f.eks. postcss, eks inlinet CSS.

Globale stiler

Man kan velge å manuelt trekke inn bare deler av det globale stilsettet. Hvis man fortsatt ønsker all komponent relatert styling finner man den i components.css.

Globale stiler
@import "@navikt/ds-css/dist/global/fonts.css"; 
@import "@navikt/ds-css/dist/global/tokens.css"; 
@import "@navikt/ds-css/dist/global/reset.css"; 
@import "@navikt/ds-css/dist/global/baseline.css"; (required)
@import "@navikt/ds-css/dist/global/print.css"; 

Alle komponenter
@import "@navikt/ds-css/dist/components.css";

Opt-in komponentstyling

Det er ikke alltid man ønsker eller trenger å trekke inn all stylingen fra Aksel når man bruker komponentene. Dette vil være nyttig for web-components, løsninger som dekoratøren der hver eneste kB spart er viktig eller man bare ønsker å minske CSS-bundle med noen kB.

// Globale stiler
@import "@navikt/ds-css/dist/global/fonts.css";
@import "@navikt/ds-css/dist/global/tokens.css";
@import "@navikt/ds-css/dist/global/reset.css";
@import "@navikt/ds-css/dist/global/baseline.css";
@import "@navikt/ds-css/dist/global/print.css";

// Komponent stiler
@import "@navikt/ds-css/dist/component/typography.css";
@import "@navikt/ds-css/dist/component/accordion.css";
@import "@navikt/ds-css/dist/component/alert.css";
@import "@navikt/ds-css/dist/component/button.css";
@import "@navikt/ds-css/dist/component/loader.css";

CSS Cascading er viktig her, slik at typography.css alltid må være først i komponent-listen. Kommandolinje-verktøyet vårt håndterer dette for deg!

CDN

All styling finnes versjonert på NAV-CDN.

Hele stilsettet
<link 
  rel="preload" 
  href="https://cdn.nav.no/aksel/@navikt/ds-css/2.9.0/index.min.css" 
  as="style">
</link>
----

Globale stiler
<link 
  rel="preload" 
  href="https://cdn.nav.no/aksel/@navikt/ds-css/2.9.0/global/baseline.min.css" 
  as="style">
</link>
....

Komponent stiler
<link rel="preload" href="https://cdn.nav.no/aksel/@navikt/ds-css/2.9.0/component/typography.min.css" as="style"></link>
<link rel="preload" href="https://cdn.nav.no/aksel/@navikt/ds-css/2.9.0/component/accordion.min.css" as="style"></link>
....

Hvis man velger å bruke CDN for lasting av CSS, burde man låse @navikt/ds-react (+ alle andre Aksel-løsninger) til samme versjon. CDN støtter ikke semver, så man må manuelt oppdatere versjoner og holde dem i synk.

Hva med @navikt/ds-css-internal?

Fra versjon 4.0.0 er all styling fra denne pakken flyttet inn i @navikt/ds-css. Den vil da også være tilgjengelig på CDN sammen med all annen styling.