0Pricing
CSS Academy · Aula

Vanilla Extract: CSS-in-JS sem tempo de execução

Escreva CSS com segurança de tipos usando Vanilla Extract, que gera arquivos CSS estáticos durante a compilação.

Vanilla Extract: CSS-in-JS sem tempo de execução é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

O que é o Vanilla Extract?

Vanilla Extract é uma biblioteca de CSS-in-JS que não gera nenhuma sobrecarga em tempo de execução. O CSS é definido em TypeScript e compilado para arquivos CSS estáticos durante a compilação — oferecendo segurança de tipos sem injeção de estilos em tempo de execução.

Princípio fundamental

Ao contrário de styled-components ou Emotion, o Vanilla Extract é executado inteiramente durante a compilação. A importação de JavaScript é a API usada para escrever os estilos; a saída são arquivos CSS simples. Nenhum JavaScript é executado no cliente para aplicar os estilos.

Convenção de arquivos

Os arquivos do Vanilla Extract usam a extensão .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'
  }
});

Uso em componentes

Importe o nome de classe exportado e aplique-o:

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

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

Contratos de tema

O recurso mais poderoso do Vanilla Extract: defina um contract de tema (um formato de tokens) e crie vários temas que o implementem:

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

Crie várias variantes de um estilo sem repetição:

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]}>

Receitas com @vanilla-extract/recipes

A função recipe do pacote de receitas combina estilos básicos e variantes de forma elegante:

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 para classes utilitárias

@vanilla-extract/sprinkles gera classes utilitárias a partir de um conjunto de tokens — como um Tailwind com segurança de tipos e sem custo em tempo de execução:

Segurança de tipos

Como os estilos são objetos TypeScript, você obtém preenchimento automático completo na IDE e verificação de tipos para nomes e valores de propriedades CSS. Erros de digitação nos nomes das propriedades são detectados durante a compilação, não em tempo de execução.

Integração com ferramentas de compilação

O Vanilla Extract integra-se ao Vite, webpack, esbuild e Next.js por meio de adaptadores dedicados. O CSS extraído é servido como um arquivo estático.

Quando escolher o Vanilla Extract

Escolha o Vanilla Extract quando quiser:

  • Segurança completa de tipos do TypeScript para seus estilos
  • Nenhuma sobrecarga de CSS-in-JS em tempo de execução
  • Saída CSS estática para obter o máximo desempenho
  • Um sistema robusto de temas com contracts de tokens verificados por tipo

Verificação rápida

Qual é a principal vantagem de desempenho do Vanilla Extract em comparação com CSS-in-JS em tempo de execução, como styled-components?

Recapitulação

Vanilla Extract é uma biblioteca de CSS-in-JS orientada a TypeScript e sem custo em tempo de execução. Defina estilos em arquivos .css.ts usando objetos JavaScript com segurança de tipos. A compilação gera arquivos CSS estáticos. Os contratos de tema oferecem suporte a vários temas com verificação de tipos. styleVariants e recipe lidam elegantemente com variantes de componentes. O custo zero em tempo de execução faz dela uma opção ideal para aplicações críticas em termos de desempenho.

Perguntas Frequentes

A aula “Vanilla Extract: CSS-in-JS sem tempo de execução” é grátis?

Sim — o texto completo de “Vanilla Extract: CSS-in-JS sem tempo de execução” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Vanilla Extract: CSS-in-JS sem tempo de execução”?

Escreva CSS com segurança de tipos usando Vanilla Extract, que gera arquivos CSS estáticos durante a compilação. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Vanilla Extract: CSS-in-JS sem tempo de execução”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Styled-components: literais de modelo marcados
  2. Emotion: css() e styled()
  3. Módulos CSS: estilos com escopo
  4. Vanilla Extract: CSS-in-JS sem tempo de execução
← Voltar para CSS Academy