vanilla extract

? ваниль-экстракт

Zero-Runtime Stylesships-In-Typscript.

Напишите свои стили в TypeScript (или JavaScript) с локальными именами классов и переменными CSS, а затем генерируйте статические файлы CSS во время сборки.

По сути, это «модули CSS-модулей в типе», но с более широкими переменными CSS + куча больше.

Все стили, генерируемые во время сборки - точно так же, как нахал, меньше и т. Д.

Минимальная абстракция над стандартными CSS.

? Работает с любыми фронтальными рамками-или даже без него.

? Локально обзорные названия классов - точно так же, как модули CSS.

Локально осеянные переменные CSS, правила @keyframes и @font-face .

? Система темы высокого уровня при поддержке одновременных тем. Нет глобалов!

? UTIL для генерации calc на основе переменных.

? Тип-безопасные стили через CSStype.

? ‍♂️ необязательная версия времени выполнения для разработки и тестирования.

? Необязательный API для динамического тематического времени выполнения.

---

Проверьте сайт документации для руководств по настройке, примеров и документов API.

---

? Попробуйте это сами в CodeSandbox.

---

Напишите свои стили в файлах .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
} ) ;

После того, как вы настроили свой инструмент сборки, эти файлы .css.ts будут оценены во время сборки. Ни один из кодов в этих файлах не будет включен в ваш последний пакет. Думайте об этом как о использовании TypeScript в качестве вашего препроцессора вместо SASS, меньше и т. Д.

Затем потребляйте их в своей наценке.

 // app.ts

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

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

---

Хотите работать на более высоком уровне при максимизации повторного использования стиля? Проверить ? Sprinkles, наша официальная атомная структура CSS-атомного уровня, построенная на вершине ванильной экспрессии.

---

Спасибо

• Nathan Nam Tran для создания CSS-In-JS-Loader, который послужил первоначальной отправной точкой для лечения, предшественником этой библиотеки.
• Швы, чтобы вызвать нас от CSS-Variables-In-JS.
• Поиск, чтобы дать нам место, чтобы сделать интересную работу.

Лицензия

Грань