CSS Academy · leksjon

Vanilla Extract: CSS-in-JS uten kjøretidskostnad

Skriv typesikker CSS med Vanilla Extract, som genererer statiske CSS-filer under byggingen.

Leksjon 4 av 413 trinn

Vanilla Extract: CSS-in-JS uten kjøretidskostnad er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva er Vanilla Extract?

Vanilla Extract er et CSS-in-JS-bibliotek som ikke medfører noen kjøretidskostnad. CSS defineres i TypeScript og kompileres til statiske CSS-filer ved byggetid, noe som gir typesikkerhet uten å sette inn stiler ved kjøring.

Hovedprinsipp

I motsetning til styled-components eller Emotion kjører Vanilla Extract utelukkende ved byggetid. JavaScript-importen er API-et for å skrive stiler, mens resultatet er vanlige CSS-filer. Det kjøres ingen JavaScript på klienten for å bruke stilene.

Filkonvensjon

Vanilla Extract-filer bruker filendelsen .css.ts:

// button.css.ts
import { style } from '@vanilla-extract/css';

export const button = style({
  background: 'royalblue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '4px',
  cursor: 'pointer',
  ':hover': {
    background: '#2563eb'
  }
});

Bruk i komponenter

Importer det eksporterte klassenavnet og bruk det:

import { button } from './button.css.ts';

function Button({ children }) {
  return <button className={button}>{children}</button>;
}

Temakontrakter

Den kraftigste funksjonen i Vanilla Extract er å definere en temakontrakt (en token-struktur) og opprette flere temaer som implementerer den:

import { createTheme, createThemeContract } from '@vanilla-extract/css';

const contract = createThemeContract({
  color: { primary: null, bg: null }
});

export const lightTheme = createTheme(contract, {
  color: { primary: '#3b82f6', bg: '#ffffff' }
});

export const darkTheme = createTheme(contract, {
  color: { primary: '#60a5fa', bg: '#111827' }
});

styleVariants

Opprett flere varianter av en stil uten å gjenta kode:

import { styleVariants } from '@vanilla-extract/css';

export const variants = styleVariants({
  primary: { background: 'royalblue' },
  danger:  { background: 'crimson' },
  ghost:   { background: 'transparent', border: '1px solid royalblue' }
});

// <Button className={variants[variant]}>

Oppskrifter med @vanilla-extract/recipes

recipe-funksjonen fra recipes-pakken kombinerer grunnstiler og varianter på en elegant måte:

import { recipe } from '@vanilla-extract/recipes';

export const button = recipe({
  base: { padding: '10px 20px', borderRadius: '4px' },
  variants: {
    color: {
      primary: { background: 'royalblue', color: 'white' },
      danger:  { background: 'crimson', color: 'white' }
    },
    size: {
      sm: { fontSize: '0.875rem' },
      lg: { fontSize: '1.25rem' }
    }
  }
});

Sprinkles for verktøyklasser

@vanilla-extract/sprinkles genererer verktøyklasser fra et token-sett – som Tailwind med typesikkerhet og uten kjøretidskostnad:

Typesikkerhet

Siden stilene er TypeScript-objekter, får De full autoutfylling i IDE-en og typesjekking av CSS-egenskapsnavn og -verdier. Skrivefeil i egenskapsnavn oppdages ved byggetid, ikke ved kjøring.

Integrasjon med byggeverktøy

Vanilla Extract integreres med Vite, webpack, esbuild og Next.js via dedikerte adaptere. Den uthentede CSS-en leveres som en statisk fil.

Når bør De velge Vanilla Extract?

Velg Vanilla Extract når De ønsker:

Full TypeScript-typesikkerhet for stilene
Ingen kjøretidskostnad for CSS-in-JS
Statisk CSS-resultat for maksimal ytelse
Et robust system for temaer med typesjekkede token-kontrakter

Kort kontroll

Hva er den viktigste ytelsesfordelen ved Vanilla Extract sammenlignet med CSS-in-JS som styled-components, som kjører ved runtime?

Besvar den i den interaktive leksjonen

Oppsummering

Vanilla Extract er et TypeScript-først, CSS-in-JS-bibliotek uten kjøretidskostnad. Definer stiler i .css.ts-filer ved hjelp av typesikre JavaScript-objekter. Ved byggetid genereres statiske CSS-filer. Temakontrakter gir typesikker støtte for flere temaer. styleVariants og recipe håndterer komponentvarianter på en elegant måte. Den manglende kjøretidskostnaden gjør biblioteket ideelt for applikasjoner der ytelse er avgjørende.

Gratis å komme i gang

Lær deg CSS med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Vanilla Extract: CSS-in-JS uten kjøretidskostnad» gratis?

Ja – hele teksten i «Vanilla Extract: CSS-in-JS uten kjøretidskostnad» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Vanilla Extract: CSS-in-JS uten kjøretidskostnad»?

Skriv typesikker CSS med Vanilla Extract, som genererer statiske CSS-filer under byggingen. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Vanilla Extract: CSS-in-JS uten kjøretidskostnad»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?

Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Styled-components: merkede template-literals
Emotion: css() og styled()
CSS Modules: avgrensede stiler
Vanilla Extract: CSS-in-JS uten kjøretidskostnad

← Tilbake til CSS Academy