{"id":30058762,"url":"https://github.com/winjs-dev/winjs-plugin-unocss","last_synced_at":"2026-04-08T20:51:41.062Z","repository":{"id":308497506,"uuid":"1032962473","full_name":"winjs-dev/winjs-plugin-unocss","owner":"winjs-dev","description":"Unocss plugin for WinJS.","archived":false,"fork":false,"pushed_at":"2026-03-31T08:44:46.000Z","size":532,"stargazers_count":2,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-31T10:27:37.763Z","etag":null,"topics":["css","plugin","postcss","rsbuild","styling","unocss","utility-first","webpack","winjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/winjs-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-06T05:17:50.000Z","updated_at":"2025-12-15T06:40:42.000Z","dependencies_parsed_at":"2025-08-06T09:27:01.826Z","dependency_job_id":"2bf25274-1d18-42c8-b835-778a97dfdfc0","html_url":"https://github.com/winjs-dev/winjs-plugin-unocss","commit_stats":null,"previous_names":["winjs-dev/winjs-plugin-unocss"],"tags_count":1,"template":false,"template_full_name":"winjs-dev/winjs-plugin-template","purl":"pkg:github/winjs-dev/winjs-plugin-unocss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-unocss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-unocss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-unocss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-unocss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/winjs-dev","download_url":"https://codeload.github.com/winjs-dev/winjs-plugin-unocss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-unocss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31573788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","plugin","postcss","rsbuild","styling","unocss","utility-first","webpack","winjs"],"created_at":"2025-08-08T00:04:17.309Z","updated_at":"2026-04-08T20:51:41.052Z","avatar_url":"https://github.com/winjs-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# winjs-plugin-unocss\n\n适配 WinJS 的 UnoCSS 插件，提供原子化 CSS 的即时按需生成能力。\n\n\u003cp\u003e\n  \u003ca href=\"https://npmjs.com/package/@winner-fed/plugin-unocss\"\u003e\n   \u003cimg src=\"https://img.shields.io/npm/v/@winner-fed/plugin-unocss?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"license\" /\u003e\n  \u003ca href=\"https://npmcharts.com/compare/@winner-fed/plugin-unocss?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@winner-fed/plugin-unocss.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"downloads\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n## 功能特性\n\n- ⚡ **即时按需生成** - 基于使用的类名实时生成样式，无需预构建\n- 🎨 **原子化 CSS** - 提供丰富的原子化 CSS 类名，快速构建样式\n- 🔧 **灵活配置** - 支持自定义预设、快捷方式和规则\n- 📦 **多预设支持** - 内置多种预设，包括图标、属性化、字体等\n- 🚀 **性能优化** - 只生成实际使用的样式，极大减少 CSS 体积\n- 🔄 **热重载** - 开发环境下支持样式热重载\n- 🛠️ **TypeScript 支持** - 完整的 TypeScript 类型定义\n- 🏗️ **多构建工具支持** - 同时支持 Webpack、Vite 和 Rsbuild 构建工具\n\n## 安装\n\n```bash\nnpm install @winner-fed/plugin-unocss unocss\n# 或者\nyarn add @winner-fed/plugin-unocss unocss\n# 或者\npnpm add @winner-fed/plugin-unocss unocss\n```\n\n## 配置\n\n### 基本配置\n\n在 WinJS 项目中启用插件：\n\n```typescript\n// .winrc.ts\nimport { defineConfig } from 'win';\n\nexport default defineConfig({\n  plugins: ['@winner-fed/plugin-unocss'],\n  unocss: {\n    // 插件配置选项（可选）\n    // 插件会自动检测项目构建工具类型（Webpack/Vite/Rsbuild）\n  }\n});\n```\n\n插件支持的构建工具：\n\n- **Webpack**: 使用 `@unocss/webpack` 进行集成\n- **Vite**: 使用 `@unocss/postcss` 通过 PostCSS 集成\n- **Rsbuild**: 使用 `@unocss/postcss` 通过 PostCSS 集成\n\n### UnoCSS 配置\n\n在项目根目录创建 `uno.config.ts` 文件：\n\n```typescript\n// uno.config.ts\nimport {\n  defineConfig,\n  presetAttributify,\n  presetIcons,\n  presetUno,\n  presetWebFonts,\n} from 'unocss';\n\nexport default defineConfig({\n  presets: [\n    presetAttributify(),\n    presetIcons(),\n    presetWebFonts({\n      provider: 'google',\n      fonts: {\n        sans: 'Roboto',\n      },\n    }),\n    presetUno(),\n  ],\n  shortcuts: [\n    [\n      'btn',\n      'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50',\n    ],\n  ],\n});\n```\n\n## 使用示例\n\n### 基本使用\n\n安装并配置插件后，可以在 Vue 组件中直接使用 UnoCSS 类名：\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"min-h-screen bg-gray-100 py-8\"\u003e\n    \u003cdiv class=\"max-w-4xl mx-auto px-4\"\u003e\n      \u003ch1 class=\"text-3xl font-bold text-center mb-8 text-gray-800\"\u003e\n        UnoCSS 示例\n      \u003c/h1\u003e\n      \n      \u003c!-- 按钮示例 --\u003e\n      \u003cdiv class=\"flex gap-4 mb-8\"\u003e\n        \u003cbutton class=\"btn\"\u003e自定义按钮\u003c/button\u003e\n        \u003cbutton class=\"px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600\"\u003e\n          蓝色按钮\n        \u003c/button\u003e\n        \u003cbutton class=\"px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600\"\u003e\n          绿色按钮\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \n      \u003c!-- 卡片示例 --\u003e\n      \u003cdiv class=\"bg-white rounded-lg shadow-md p-6 mb-8\"\u003e\n        \u003ch2 class=\"text-xl font-semibold mb-4\"\u003e卡片标题\u003c/h2\u003e\n        \u003cp class=\"text-gray-600 leading-relaxed\"\u003e\n          这是一个使用 UnoCSS 构建的卡片组件，展示了原子化 CSS 的强大功能。\n        \u003c/p\u003e\n      \u003c/div\u003e\n      \n      \u003c!-- 网格布局示例 --\u003e\n      \u003cdiv class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\"\u003e\n        \u003cdiv class=\"bg-white p-4 rounded-lg shadow\"\u003e项目 1\u003c/div\u003e\n        \u003cdiv class=\"bg-white p-4 rounded-lg shadow\"\u003e项目 2\u003c/div\u003e\n        \u003cdiv class=\"bg-white p-4 rounded-lg shadow\"\u003e项目 3\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n// 无需额外导入，UnoCSS 会自动生成对应的样式\n\u003c/script\u003e\n```\n\n### 属性化模式\n\n启用 `presetAttributify` 后，可以使用属性化的写法：\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv \n    bg=\"gray-100\" \n    text=\"center\" \n    p=\"8\"\n    class=\"min-h-screen\"\n  \u003e\n    \u003ch1 \n      text=\"3xl bold gray-800\" \n      mb=\"8\"\n    \u003e\n      属性化示例\n    \u003c/h1\u003e\n    \n    \u003cbutton \n      bg=\"blue-500 hover:blue-600\" \n      text=\"white\" \n      px=\"4\" \n      py=\"2\" \n      rounded\n      cursor=\"pointer\"\n    \u003e\n      属性化按钮\n    \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n### 图标使用\n\n启用 `presetIcons` 后，可以直接使用图标：\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"flex items-center gap-2\"\u003e\n    \u003ci class=\"i-heroicons-home text-xl\"\u003e\u003c/i\u003e\n    \u003cspan\u003e首页\u003c/span\u003e\n  \u003c/div\u003e\n  \n  \u003cdiv class=\"flex items-center gap-2\"\u003e\n    \u003ci class=\"i-carbon-user text-xl\"\u003e\u003c/i\u003e\n    \u003cspan\u003e用户\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## 配置选项\n\n### 插件配置\n\n```typescript\n// .winrc.ts\nexport default defineConfig({\n  unocss: {\n    // 插件会根据构建工具自动选择集成方式\n    // 无需额外配置，开箱即用\n  }\n});\n```\n\n\u003e **注意**：旧版本的 `watch` 配置项已废弃，插件现在会自动处理文件监听。\n\n### UnoCSS 配置选项\n\n在 `uno.config.ts` 中可以配置：\n\n- **presets**: 预设配置\n- **rules**: 自定义规则\n- **shortcuts**: 快捷方式\n- **theme**: 主题配置\n- **variants**: 变体配置\n- **extractors**: 提取器配置\n- **transformers**: 转换器配置\n\n## 预设介绍\n\n### @unocss/preset-uno\n\n提供 Tailwind CSS 兼容的实用工具类：\n\n```typescript\npresetUno()\n```\n\n### @unocss/preset-attributify\n\n支持属性化模式：\n\n```typescript\npresetAttributify({\n  prefix: 'un-',\n  prefixedOnly: false,\n})\n```\n\n### @unocss/preset-icons\n\n提供图标支持：\n\n```typescript\npresetIcons({\n  scale: 1.2,\n  warn: true,\n  extraProperties: {\n    'display': 'inline-block',\n    'vertical-align': 'middle',\n  }\n})\n```\n\n### @unocss/preset-web-fonts\n\n提供网络字体支持：\n\n```typescript\npresetWebFonts({\n  provider: 'google',\n  fonts: {\n    sans: 'Roboto',\n    mono: ['Fira Code', 'Fira Mono:400,700'],\n  }\n})\n```\n\n## 迁移指南\n\n### 从 unocss.config.ts 迁移\n\n如果你的项目中存在 `unocss.config.ts` 文件，请将其重命名为 `uno.config.ts`：\n\n```bash\nmv unocss.config.ts uno.config.ts\n```\n\n同时移除 `@unocss/cli` 依赖：\n\n```bash\nnpm uninstall @unocss/cli\n```\n\n### 配置更新\n\n旧的 `watch` 配置已不再需要，插件会自动处理文件监听。\n\n## 依赖要求\n\n- `unocss`: 最新版本（通过 catalog 管理）\n- `@unocss/webpack`: 最新版本（通过 catalog 管理）\n- `@unocss/postcss`: 最新版本（通过 catalog 管理）\n- `vue`: ^3.0.0 或 ^2.6.0（取决于项目配置）\n\n## 工作原理\n\n### Webpack 模式\n\n1. **Webpack 集成**：使用 `@unocss/webpack` 插件将 UnoCSS 集成到 Webpack 构建流程中\n2. **自动导入**：自动将 `uno.css` 添加到入口文件导入\n3. **别名设置**：设置 `uno.css` 别名为 `/__uno.css`，修复 mfsu 相关问题\n4. **优化处理**：启用 `realContentHash` 优化，确保样式文件的正确缓存\n5. **缓存优化**：禁用相关缓存以确保样式更新的实时性\n\n### Vite/Rsbuild 模式\n\n1. **PostCSS 集成**：使用 `@unocss/postcss` 插件通过 PostCSS 处理样式\n2. **自动处理**：构建工具自动扫描和处理 UnoCSS 类名\n3. **样式注入**：样式通过 PostCSS 流程自动注入到构建结果中\n\n### 通用流程\n\n1. **样式生成**：扫描源代码中的类名，按需生成对应的 CSS 样式\n2. **配置检测**：自动检测项目使用的构建工具类型\n3. **迁移提示**：检测旧版配置文件并提供迁移指引\n\n## 常见问题\n\n### Q: 样式没有生效？\n\nA: 请确保：\n\n1. 已正确安装 `unocss` 依赖\n2. 在 `.winrc.ts` 中启用了插件\n3. 创建了 `uno.config.ts` 配置文件\n4. 确认项目使用的构建工具（Webpack/Vite/Rsbuild）被插件正确识别\n\n### Q: 图标无法显示？\n\nA: 请确保：\n\n1. 在 `uno.config.ts` 中启用了 `presetIcons`\n2. 安装了对应的图标集，如 `@iconify-json/heroicons`\n3. 使用正确的图标命名格式\n\n### Q: 开发环境下样式更新慢？\n\nA: 这是正常现象，UnoCSS 需要扫描文件变更后重新生成样式。\n\n### Q: Vite/Rsbuild 模式下样式处理有问题？\n\nA: 请确保：\n\n1. 项目正确配置了 PostCSS\n2. 没有其他 PostCSS 插件冲突\n3. UnoCSS 的 PostCSS 插件已正确加载\n\n### Q: 出现 \"unocss?.watch 配置不再需要\" 警告？\n\nA: 这是正常的迁移提示，请移除 `.winrc.ts` 中的 `unocss.watch` 配置项。\n\n### Q: 出现 \"将 unocss.config.ts 修改为 uno.config.ts\" 警告？\n\nA: 请按照迁移指南重命名配置文件并移除 `@unocss/cli` 依赖。\n\n## 许可证\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-unocss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-unocss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-unocss/lists"}