vanilla-extract README

The project's README from github.com/vanilla-extract-css/vanilla-extract. As one markdown file: README.md.

🧁 vanilla-extract

Zero-runtime Stylesheets-in-TypeScript.

Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time.

Basically, it’s “CSS Modules-in-TypeScript” but with scoped CSS Variables + heaps more.

🔥   All styles generated at build time — just like Sass, Less, etc.

✨   Minimal abstraction over standard CSS.

🦄   Works with any front-end framework — or even without one.

🌳   Locally scoped class names — just like CSS Modules.

🚀   Locally scoped CSS Variables, @keyframes and @font-face rules.

🎨   High-level theme system with support for simultaneous themes. No globals!

🛠   Utils for generating variable-based calc expressions.

💪   Type-safe styles via CSSType.

🏃‍♂️   Optional runtime version for development and testing.

🙈   Optional API for dynamic runtime theming.

🌐 Check out the documentation site for setup guides, examples and API docs.

🖥   Try it out for yourself in CodeSandbox.

Write your styles in .css.ts files.

// 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
});

💡 Once you've configured your build tooling, these .css.ts files will be evaluated at build time. None of the code in these files will be included in your final bundle. Think of it as using TypeScript as your preprocessor instead of Sass, Less, etc.

Then consume them in your markup.

// app.ts

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

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

Want to work at a higher level while maximising style re-use? Check out 🍨 Sprinkles, our official zero-runtime atomic CSS framework, built on top of vanilla-extract.

Contributing

Thanks

License

MIT.

vanilla-extract (vanilla-extract-css/vanilla-extract)

Searching Database…

10.4K ·GitHub
Vanilla-extract
这是什么？vanilla-extract 让你用 TypeScript（或 JavaScript）编写 CSS 样式，类名和 CSS 变量都是局部作用域，并在构建时把所有内容编译成静态 CSS 文件，运行时零开销。
它是 CSS 框架，还是更像预处理器？它是一个构建时编译器/库，不是框架。你可以把 TypeScript 当作预处理器来用，替代 Sass 或 Less。它可以配合任何前端框架使用，也可以完全不用框架。
我该如何开始用它编写样式？你在 .css.ts 文件中编写样式，像普通代码一样把它们导入到标记中。只要构建工具配置完成，这些文件就会在构建时被执行并编译为 CSS。
我需要额外的打包工具插件才能使用吗？是的。你需要为构建工具（webpack、Vite、esbuild 等）配置 vanilla-extract 插件；文档网站提供了针对不同打包工具的设置指南。
我的 TypeScript 样式代码会被打进生产环境的包里吗？不会。.css.ts 文件中的代码都不会包含在最终的 JS 包里。这些代码会被剥离，浏览器只加载生成的静态 CSS。
主题系统是什么样的？vanilla-extract 提供高级主题系统，支持同时存在多个主题，且不使用全局 CSS 变量，因此不同主题可以在同一页面上共存而不互相冲突。
Sprinkles 是什么？Sprinkles 是本项目官方的零运行时原子化 CSS 框架，基于 vanilla-extract 构建，面向希望使用更高层、类似工具类（utility-style）API 并最大化复用样式的团队。
我能在测试或开发中使用运行时样式吗？可以。vanilla-extract 提供可选的运行时版本，适用于开发和测试场景，还提供用于动态运行时主题的可选 API。
生成的类名和 CSS 变量会自动限定作用域吗？会。类名和 CSS 变量（包括 @keyframes 和 @font-face 规则）默认都是局部作用域，类似 CSS Modules 的工作方式。
What are similar projects?linaria, tamagui, styled-components, material-components-web, chakra-ui, unocss, postcss, stylex
Which topics is it in?type-safe, css-in-js, css3, webpack, build-tool, design-system, theme, vite, css, web-development, npm, frontend
Creator
vanilla-extract-css
Size
10.6 MB
Stars
10.4K
Updated
CommitOct 08Release@vanilla-extract/[email protected]Oct 08
Age
5y
Commits · 90 Days