[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71284":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},71284,"vanilla-extract","vanilla-extract-css\u002Fvanilla-extract","vanilla-extract-css","Zero-runtime Stylesheets-in-TypeScript","https:\u002F\u002Fvanilla-extract.style",null,"TypeScript",10378,346,33,49,0,4,8,9,12,42.62,"MIT License",false,"master",[],"2026-06-12 02:02:50","# 🧁 vanilla-extract\n\n**Zero-runtime Stylesheets-in-TypeScript.**\n\nWrite your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time.\n\nBasically, it’s [“CSS Modules](https:\u002F\u002Fgithub.com\u002Fcss-modules\u002Fcss-modules)-in-TypeScript” but with scoped CSS Variables + heaps more.\n\n🔥   All styles generated at build time — just like [Sass](https:\u002F\u002Fsass-lang.com), [Less](http:\u002F\u002Flesscss.org), etc.\n\n✨   Minimal abstraction over standard CSS.\n\n🦄   Works with any front-end framework — or even without one.\n\n🌳   Locally scoped class names — just like [CSS Modules.](https:\u002F\u002Fgithub.com\u002Fcss-modules\u002Fcss-modules)\n\n🚀   Locally scoped [CSS Variables](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FUsing_CSS_custom_properties), `@keyframes` and `@font-face` rules.\n\n🎨   High-level theme system with support for simultaneous themes. No globals!\n\n🛠   Utils for generating variable-based `calc` expressions.\n\n💪   Type-safe styles via [CSSType.](https:\u002F\u002Fgithub.com\u002Ffrenic\u002Fcsstype)\n\n🏃‍♂️   Optional runtime version for development and testing.\n\n🙈   Optional API for dynamic runtime theming.\n\n---\n\n🌐 [Check out the documentation site for setup guides, examples and API docs.](https:\u002F\u002Fvanilla-extract.style)\n\n\n\n---\n\n🖥   [Try it out for yourself in CodeSandbox.](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fgithub\u002Fvanilla-extract-css\u002Fvanilla-extract\u002Ftree\u002Fmaster\u002Fexamples\u002Fwebpack-react?file=\u002Fsrc\u002FApp.css.ts)\n\n---\n\n**Write your styles in `.css.ts` files.**\n\n```ts\n\u002F\u002F styles.css.ts\n\nimport { createTheme, style } from '@vanilla-extract\u002Fcss';\n\nexport const [themeClass, vars] = createTheme({\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n\nexport const exampleStyle = style({\n  backgroundColor: vars.color.brand,\n  fontFamily: vars.font.body,\n  color: 'white',\n  padding: 10\n});\n```\n\n> 💡 Once you've [configured your build tooling,](https:\u002F\u002Fvanilla-extract.style\u002Fdocumentation\u002Fgetting-started\u002F) 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.\n\n**Then consume them in your markup.**\n\n```ts\n\u002F\u002F app.ts\n\nimport { themeClass, exampleStyle } from '.\u002Fstyles.css.ts';\n\ndocument.write(`\n  \u003Csection class=\"${themeClass}\">\n    \u003Ch1 class=\"${exampleStyle}\">Hello world!\u003C\u002Fh1>\n  \u003C\u002Fsection>\n`);\n```\n\n---\n\nWant to work at a higher level while maximising style re-use? Check out  🍨 [Sprinkles](https:\u002F\u002Fvanilla-extract.style\u002Fdocumentation\u002Fpackages\u002Fsprinkles), our official zero-runtime atomic CSS framework, built on top of vanilla-extract.\n\n---\n\n## Thanks\n\n- [Nathan Nam Tran](https:\u002F\u002Ftwitter.com\u002Fnaistran) for creating [css-in-js-loader](https:\u002F\u002Fgithub.com\u002Fnaistran\u002Fcss-in-js-loader), which served as the initial starting point for [treat](https:\u002F\u002Fseek-oss.github.io\u002Ftreat), the precursor to this library.\n- [Stitches](https:\u002F\u002Fstitches.dev\u002F) for getting us excited about CSS-Variables-in-JS.\n- [SEEK](https:\u002F\u002Fwww.seek.com.au) for giving us the space to do interesting work.\n\n## License\n\nMIT.\n","vanilla-extract 是一个在 TypeScript 中编写样式表的工具，它允许开发者使用本地作用域的类名和 CSS 变量，并在构建时生成静态 CSS 文件。其核心功能包括零运行时开销、支持局部作用域的 CSS 变量、关键帧动画及字体规则等，还提供了一套高级的主题系统以支持同时存在的多个主题。此外，vanilla-extract 通过 CSSType 提供类型安全的样式定义，并且能够与任何前端框架兼容或独立使用。非常适合需要高性能、高度可维护性的现代Web应用开发场景，特别是当项目已经采用TypeScript作为主要开发语言时。",2,"2026-06-11 03:36:59","high_star"]