vanilla extract

? baunilha-extrato

Folhas de estilo zero runimes-typescript.

Escreva seus estilos no TypeScript (ou JavaScript) com nomes de classe com escopo local e variáveis ​​CSS e, em seguida, gera arquivos CSS estáticos no horário de construção.

Basicamente, são "módulos CSS em tipos de descrição", mas com variáveis ​​CSS com escopo + montes mais.

Todos os estilos gerados no horário de construção - assim como Sass, menos, etc.

Abstração mínima sobre CSS padrão.

? Funciona com qualquer estrutura front-end-ou mesmo sem uma.

? Nomes de classes com escopo local - assim como os módulos CSS.

Variáveis ​​CSS com escopo local, @keyframes e @font-face Regras.

? Sistema temático de alto nível com suporte para temas simultâneos. Sem globais!

? Utils para gerar expressões calc baseadas em variáveis.

? Estilos seguros de tipo via csstype.

? ‍♂️ Versão opcional de tempo de execução para desenvolvimento e teste.

? API opcional para temas dinâmicos de tempo de execução.

---

Confira o site de documentação para guias de configuração, exemplos e documentos de API.

---

? Experimente por si mesmo no Código e caixa.

---

Escreva seus estilos nos arquivos .css.ts .

 // styles.css.ts

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

export const [ themeClass , vars ] = createTheme ( {
  color : {
    brand : 'blue'
  } ,
  font : {
    body : 'arial'
  }
} ) ;

export const exampleStyle = style ( {
  backgroundColor : vars . color . brand ,
  fontFamily : vars . font . body ,
  color : 'white' ,
  padding : 10
} ) ;

Depois de configurar sua ferramenta de compilação, esses arquivos .css.ts serão avaliados no horário de construção. Nenhum dos códigos nesses arquivos será incluído no seu pacote final. Pense nisso como usar o TypeScript como seu pré -processador em vez de sass, menos, etc.

Em seguida, consuma -os em sua marcação.

 // app.ts

import { themeClass , exampleStyle } from './styles.css.ts' ;

document . write ( `
  <section class=" ${ themeClass } ">
    <h1 class=" ${ exampleStyle } ">Hello world!</h1>
  </section>
` ) ;

---

Deseja trabalhar em um nível superior e maximizar a reutilização do estilo? Confira ? Sprinkles, nossa estrutura oficial de CSS atômica zero, construída em cima do extrato de baunilha.

---

Obrigado

• Nathan Nam Tran para criar o carregador CSS-in-JS, que serviu de ponto de partida inicial para o tratamento, o precursor dessa biblioteca.
• Pontos para nos empolgar com o CSS-variável-in-js.
• Procure nos dar espaço para fazer um trabalho interessante.

Licença

Mit.