前端【免费下载链接】stylexStyleX is the styling system for ambitious user interfaces.项目地址https://gitcode.com/gh_mirrors/st/stylex点击查看免费下载StyleX 是面向高要求 UI 的原子化 CSS-in-JS 方案。本指南以仓库内 example-vite-react 示例为骨架讲解如何在一个 TypeScript 就绪的 React 项目中通过stylexjs/unplugin在 Vite 构建期完成 StyleX 样式的编译与聚合最终让浏览器只下载一份 CSS 文件。读完本文你将掌握插件接入的完整配置、开发期 HMR 与构建期 CSS 注入的底层原理以及配套的 ESLint、TypeScript 与常用命令的实战用法。项目概览与前置条件该示例是一个可直接运行的 TypeScript React 项目应用代码全部用 StyleX 书写样式Vite 负责打包与开发服务器stylexjs/unplugin的 Vite 适配器在构建时把各个模块中通过stylex.create声明的样式提取出来编译成原子 CSS 规则并追加到 Vite 自身产出的 CSS 资源上从而让浏览器只加载一份样式表。运行它需要满足以下前置条件Node.js 18Vite与vitejs/plugin-react示例使用 Vite ^7.3.2TypeScript与tsc -b用于对构建做类型检查项目构建命令即tsc -b vite buildstylexjs/unplugin负责 StyleX 的编译与 CSS 聚合。依赖清单可直接参考 examples/example-vite-react/package.json运行时依赖包括react/react-dom^19.2.0、stylexjs/stylex0.19.1与stylexjs/shared-ui0.19.1用于验证外部库的 StyleX 集成开发依赖则包括stylexjs/unplugin0.19.1、vitejs/plugin-react、typescript、eslint、typescript-eslint以及stylexjs/eslint-plugin等。安装依赖在示例目录下执行npm install由于示例依赖stylexjs/stylex与stylexjs/unplugin等本地发布的包安装完成后即可直接使用下面的 Vite 配置与命令。Vite 配置插件顺序与最小接入核心配置位于 examples/example-vite-react/vite.config.tsimport { defineConfig } from vite; import react from vitejs/plugin-react; import stylex from stylexjs/unplugin; // https://vite.dev/config/ export default defineConfig({ plugins: [stylex.vite(), react({})], });这里有两个关键点stylex.vite()必须放在 React 插件之前。StyleX 的转换发生在模块解析/转换阶段先执行可保证 React Fast Refresh热更新机制不受影响样式与组件状态都能正常热替换。开箱即用、无需额外配置。项目自带的 TypeScript 感知 ESLint 与编译器配置已经指向正确的tsconfigRootDir见下文 ESLint 小节插件默认的importSources: [stylex, stylexjs/stylex]也能覆盖示例中stylexjs/stylex的导入。从stylexjs/unplugin的源码看Vite 适配器由 packages/stylexjs/unplugin/src/vite.js 通过attachViteHooks挂载到 Vite 的生命周期上config钩子会把检测到的、依赖stylexjs/stylex的包如stylexjs/shared-ui自动加入optimizeDeps.exclude与ssr.optimizeDeps.exclude避免这些包被 Vite 预构建缓存后丢失 StyleX 编译generateBundle与writeBundle钩子则负责把聚合出的 CSS 写回产物。CSS 入口与构建期样式聚合机制示例特意保留了一个极简的 CSS 入口 examples/example-vite-react/src/index.css/* Placeholder to ensure Vite emits a CSS asset for StyleX aggregation. */ :root { --stylex-injection: 0; }根组件入口 examples/example-vite-react/src/main.tsx 中通过import ./index.css引入它注释也写明了意图保证 Vite 在开发与构建时都产出 CSS 资源供 StyleX 插件把聚合结果追加进去。聚合机制的原理在 packages/stylexjs/unplugin/src/vite.js 中非常清晰generateBundle阶段调用plugin.__stylexCollectCss?.()收集全部已转换模块的 StyleX CSS再通过pickCssAssetFromRollupBundle(bundle, cssInjectionTarget)挑选一个既有 CSS 资源默认匹配index.css/style.css否则取第一个.css资源把 StyleX 的 CSS 以追加方式写入并替换为带哈希的新文件replaceCssAssetWithHashedCopy如果产物中没有任何 CSS 资源例如纯 JS 项目writeBundle钩子会兜底在assets/目录下写出一个stylex.css文件保证样式不丢失。这意味着只要项目里存在任意一个被 Vite 产出的 CSS 文件StyleX 的样式就会被追加到该文件末尾浏览器最终只加载一份样式表。多个输出如 SSR 场景下的 client/SSR 双产物时每个输出都会拥有自己独立的聚合 CSS。开发模式与 HMR虚拟模块与轻量运行时开发环境下stylexjs/unplugin不是把 CSS 写盘而是通过虚拟模块实时供给。关键常量定义在 packages/stylexjs/unplugin/src/consts.jsDEV_CSS_PATH /virtual:stylex.css开发期 CSS 端点由configureServer中间件直接以text/css返回plugin.__stylexCollectCss?.()的实时结果见 vite.jsVIRTUAL_STYLEX_RUNTIME_SCRIPT一个注入页面的轻量运行时脚本负责在 HMR 时以fetch(DEV_CSS_PATH ?t Date.now(), { cache: no-store })重新拉取 CSS写入style id__stylex_virtual__节点并监听stylex:css-update与vite:afterUpdate事件延迟 180ms 防抖VIRTUAL_STYLEX_CSS_ONLY_SCRIPT只做 CSS 链接刷新为link加时间戳参数绕缓存的极简 shim适用于只需样式的场景。在devMode: full下transformIndexHtml会自动往 HTMLhead注入script src/id/virtual:stylex:runtime与指向DEV_CSS_PATH的link relstylesheet。如果某些框架因 CORS 或资源代理导致该 script 标签无法加载官方建议改用import(virtual:stylex:runtime)或import(virtual:stylex:css-only)从本地客户端 shim 中引入详见 packages/stylexjs/unplugin/README.md 的 Dev HTML injection 一节。示例本身在 Vite 默认插件顺序下无需手动注入这些标签打开example:dev后即可体验“改一行样式、浏览器即时生效”的开发流程。常用命令速查示例在 examples/example-vite-react/package.json 中定义了如下脚本均需在examples/example-vite-react目录下执行# HMR-ready dev server with StyleX transforms npm run example:dev # Type-check Vite build StyleX CSS aggregation npm run example:build # Preview the production build npm run example:serveexample:dev等价于vite启动带 HMR 的开发服务器StyleX 样式由虚拟模块实时注入example:build等价于tsc -b vite build先以 project references 模式对tsconfig.app.json/tsconfig.node.json做类型检查再执行 Vite 构建与 StyleX CSS 聚合example:serve等价于vite preview本地预览构建产物可验证“单 CSS 文件”的最终效果。此外执行npm run lint可以运行 ESLint其中已包含 StyleX 专项规则。应用代码中的 StyleX 实战用法示例应用 examples/example-vite-react/src/App.tsx 集中展示了 StyleX 在日常开发中的几种典型写法const styles stylex.create({ container: { minHeight: 100vh, display: grid, placeItems: center, padding: 2rem, textAlign: center, }, logo: { height: 6em, padding: 1.5em, willChange: filter, transitionProperty: filter, transitionDuration: 300ms, filter: { :hover: drop-shadow(0 0 2em #646cffaa) }, }, animated: { animationName: { media (prefers-reduced-motion: no-preference): spin }, animationDuration: { media (prefers-reduced-motion: no-preference): 20s, }, animationTimingFunction: { media (prefers-reduced-motion: no-preference): linear, }, animationIterationCount: { media (prefers-reduced-motion: no-preference): infinite, }, }, linkHover: { color: { default: null, :hover: #535bf2 } }, buttonInteractive: { borderColor: { :hover: #646cff }, outline: { :focus-visible: 4px auto -webkit-focus-ring-color }, }, });要点包括伪类与伪元素filter: { :hover: ... }直接内联对象语法媒体查询通过media (prefers-reduced-motion: no-preference)键限定动画属性尊重用户的减少动态偏好默认值 状态值color: { default: null, :hover: #535bf2 }用default键显式表达“默认无此属性、hover 时生效”动画stylex.keyframes({ from: {...}, to: {...} })声明关键帧再通过animationName引用组合使用渲染时用{...stylex.props(styles.link, styles.linkHover)}把多个样式对象合并到元素上。组件同时从stylexjs/shared-ui导入了Button与设计令牌import { Button } from stylexjs/shared-ui; import { tokens } from stylexjs/shared-ui/tokens.stylex; // ... h1 {...stylex.props(styles.h1)}Vite React/h1 // styles.h1: { fontSize: 3.2em, lineHeight: 1.1, color: tokens.primaryColor }令牌定义位于 packages/shared-ui/src/tokens.stylex.tsimport * as stylex from stylexjs/stylex; export const tokens stylex.defineVars({ primaryColor: blue, secondaryColor: green, padding: 10px, });这验证了一个重要场景项目内/外部的库只要通过stylexjs/unplugin构建其 StyleX 样式与令牌也能被统一编译并聚合进同一份 CSS——这正是插件在config钩子中把stylexjs/shared-ui加入optimizeDeps.exclude的原因。类型检查与 ESLint 配置example:build中的tsc -b使用 examples/example-vite-react/tsconfig.json 的 project references 指向两个子配置其中 tsconfig.app.json 以 bundler 模式moduleResolution: bundler编译src启用了strict、noUnusedLocals等严格选项并允许import ./App.tsx这类带扩展名的导入。ESLint 配置 examples/example-vite-react/eslint.config.js 同时启用了 StyleX 专项规则与 React 生态规则const stylexRules { stylexjs/valid-styles: error, stylexjs/no-unused: error, stylexjs/no-legacy-contextual-styles: error, stylexjs/sort-keys: [error, { order: recess }], };四条规则分别负责校验样式对象是否合法、删除未使用的样式、禁止已废弃的上下文样式写法以及按 “recess” 顺序强制样式键排序。parserOptions.tsconfigRootDir指向配置所在目录因此 README 中说“无需额外配置”即指 ESLint 与编译器的tsconfig根目录指向已经就位。插件可配置项一览如果要在自己的项目中使用stylex.vite()可参考 packages/stylexjs/unplugin/README.md 中的共享选项以下是核心项非全部选项说明默认值dev是否启用开发模式转换依据NODE_ENV/BABEL_ENV自动推断importSources需要扫描转换的导入源[stylex, stylexjs/stylex]useCSSLayers是否以 CSS Layers 输出falsecssInjectionTarget(fileName) boolean选择要追加的 CSS 资源匹配index.css、style.css或第一个.cssexternalPackages强制按应用代码处理、并排除出 Vite 依赖预构建的包名自动发现依赖stylexjs/stylex的包devModefull \| css-only \| off仅 VitefulldevPersistToDisk开发期把规则持久化到node_modules/.stylex/rules.json供多 Vite 环境共享 CSSfalselightningcssOptions透传给 lightningcss 的选项targets、exclude等依据 Browserslist 自动降级一个值得注意的坑lightningcss 会对不支持light-dark()的浏览器目标做降级而 StyleX 按模块提取 CSS 导致color-scheme往往不在同一份 CSS 中降级后的变量可能未定义、暗色模式静默失效。解决方案是在.browserslistrc中声明原生支持light-dark()的目标Chrome ≥ 123、Firefox ≥ 120、Safari ≥ 17.5或通过lightningcssOptions.exclude显式关闭Features.LightDark的降级。小结通过examples/example-vite-react可以完整走通一条“React Vite TypeScript StyleX”的现代前端链路stylex.vite()放在 React 插件之前接入构建期自动把 StyleX 样式聚合进 Vite 的 CSS 资源默认index.css/style.css缺失时兜底输出stylex.css开发期通过/virtual:stylex.css虚拟端点与轻量运行时实现即改即生效的 HMRtsc -b负责类型检查ESLint 的 StyleX 规则保障样式写法规范。将这套配置与仓库内的其他示例如 example-vite、example-nextjs对照阅读即可快速把 StyleX 迁移到任意 Vite 生态项目中。赞分享前端【免费下载链接】stylexStyleX is the styling system for ambitious user interfaces.项目地址https://gitcode.com/gh_mirrors/st/stylex点击查看免费下载相关推荐5 分钟跑通 Speech To Speech免费开源的语音到语音转换管道让麦克风直连 AI 语音回复5 分钟跑通 Speech To Speech免费开源的语音到语音转换管道让麦克风直连 AI 语音回复 Speech To Speech 是一条基于 Hug前端使用 StyleX 与 esbuild通过 stylexjs/unplugin 在构建期编译并聚合样式使用 StyleX 与 esbuild通过 stylexjs/unplugin 在构建期编译并聚合样式 StyleX 是面向复杂用户界面的样式系统而 es前端Trivy Kubernetes 集群安全扫描实战指南trivy k8s 命令、RBAC 权限、合规报告与 KBOMTrivy Kubernetes 集群安全扫描实战指南trivy k8s 命令、RBAC 权限、合规报告与 KBOM Trivy 是面向容器、Kubernet前端上一篇3个实战技巧快速上手MDUT数据库安全测试的终极指南下一篇3步搞定医疗挂号健康160自动化预约脚本实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考