{"id":17859887,"url":"https://github.com/rayjason/inline-html-styles","last_synced_at":"2025-03-20T19:31:19.189Z","repository":{"id":197071030,"uuid":"697969534","full_name":"RayJason/inline-html-styles","owner":"RayJason","description":"Inline (Tailwind) CSS stylesheets into HTML style attributes.","archived":false,"fork":false,"pushed_at":"2023-09-29T11:55:02.000Z","size":32,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-27T11:18:24.224Z","etag":null,"topics":["css","html","juice","postcss","postcss-plugin","tailwindcss"],"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/RayJason.png","metadata":{"files":{"readme":"README-zh_CN.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}},"created_at":"2023-09-28T21:18:16.000Z","updated_at":"2024-08-20T07:32:55.000Z","dependencies_parsed_at":"2024-10-03T16:34:23.492Z","dependency_job_id":"eab48d1d-7b84-4fde-975a-fe8e82779921","html_url":"https://github.com/RayJason/inline-html-styles","commit_stats":null,"previous_names":["rayjason/inline-html-styles","rayjason/inline-styles"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RayJason%2Finline-html-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RayJason%2Finline-html-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RayJason%2Finline-html-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RayJason%2Finline-html-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RayJason","download_url":"https://codeload.github.com/RayJason/inline-html-styles/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221796279,"owners_count":16881822,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","html","juice","postcss","postcss-plugin","tailwindcss"],"created_at":"2024-10-28T07:03:51.069Z","updated_at":"2024-10-28T07:03:51.740Z","avatar_url":"https://github.com/RayJason.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 内联 HTML Styles\n\n将（Tailwind）CSS 样式表转换为 HTML 内联 Style 样式\n\n![npm](https://img.shields.io/badge/inline--html--styles-blue?logo=npm\u0026link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Finline-html-styles)\n![npm](https://img.shields.io/npm/v/inline-html-styles)\n![npm 包大小](https://img.shields.io/bundlephobia/min/inline-html-styles)\n![LICENSE](https://img.shields.io/npm/l/inline-html-styles)\n\n\u003c/div\u003e\n\n[English](./README.md) | 中文\n\n## ✨ 功能\n\n- 单位转换（rem -\u003e px）\n- 将 CSS 样式表变量转换为静态\n- 简化 CSS 样式表的 calc() 表达式\n- 将 CSS 样式表内联到 HTML 样式属性中\n\n## 🤹 场景\n\n当你使用 Vue / React 和 **TailwindCSS** 开发静态页面时，针对以下场景，你可以使用这种方法将 CSS 样式表内联到 HTML 样式属性中。\n\n- ✉️ 邮件\n- ☘️ 微信文章\n\n当然，我建议你应该先编译为静态站点（**SSG**）。这样便于你直接使用 HTML 和 CSS 字符串。\n\n## 📦 安装\n\n```bash\nbun add inline-html-styles\n```\n\n```bash\npnpm add inline-html-styles\n```\n\n```bash\nyarn add inline-html-styles\n```\n\n```bash\nnpm install inline-html-styles\n```\n\n你也可以添加 `-D` 参数将其安装为开发依赖项，具体取决于你的项目或使用场景。\n\n## 🔨 使用\n\n#### 转换单位 `rem` 为 `px`\n\n你可以将 CSS 单位从 `rem` 转换为 `px`。\n\n```javascript\nconst html = `\u003cdiv class=\"my-style\"\u003e\u003c/div\u003e`\nconst css = `.my-style { width: 10rem }`\n\nconst result = inlineStylesIntoHtml(html, css)\n// 结果：\u003cdiv style=\"width: 160px;\"\u003e\u003c/div\u003e\n```\n\n#### 简化基础 `calc`\n\n该函数可以在你的 CSS 中简化基础的 `calc` 表达式。\n\n```javascript\nconst html = `\u003cdiv class=\"my-style\"\u003e\u003c/div\u003e`\nconst css = `.my-style { width: calc(20px - 4px) }`\n\nconst result = inlineStylesIntoHtml(html, css)\n// 结果：\u003cdiv style=\"width: 16px;\"\u003e\u003c/div\u003e\n```\n\n#### 简化嵌套 `calc`\n\n即使是嵌套的 `calc` 表达式也可以被简化。\n\n```javascript\nconst html = `\u003cdiv class=\"my-style\"\u003e\u003c/div\u003e`\nconst css = `.my-style { width: calc(20px - calc(10px - 6px)) }`\n\nconst result = inlineStylesIntoHtml(html, css)\n// 结果：\u003cdiv style=\"width: 16px;\"\u003e\u003c/div\u003e\n```\n\n#### `calc` 中不同单位不会被简化\n\n当 `calc` 表达式涉及不同的单位时，它们将不会被简化，但会被适当地转换。\n\n```javascript\nconst html = `\u003cdiv class=\"my-style\"\u003e\u003c/div\u003e`\nconst css = `.my-style { width: calc(100vh - 4rem) }`\n\nconst result = inlineStylesIntoHtml(html, css)\n// 结果：\u003cdiv style=\"width: calc(100vh - 64px);\"\u003e\u003c/div\u003e\n```\n\n#### 转换数值变量\n\n数值型的 CSS 变量也可以被处理，并参与 calc 的简化。\n\n```javascript\nconst html = `\u003cdiv class=\"my-style\"\u003e\u003c/div\u003e`\nconst css = `.my-style { --tw-space-y: 2; margin-top:calc(.5rem * var(--tw-space-y)) }`\n\nconst result = inlineStylesIntoHtml(html, css)\n// 结果：\u003cdiv style=\"margin-top: 16px;\"\u003e\u003c/div\u003e\n```\n\n#### 转换颜色变量\n\nCSS 颜色变量也可以被应用。\n\n```javascript\nconst html = `\u003cdiv class=\"my-style\"\u003e\u003c/div\u003e`\nconst css = `.my-style { --my-color: #888888; color: var(--my-color) }`\n\nconst result = inlineStylesIntoHtml(html, css)\n// 结果：\u003cdiv style=\"color: #888888;\"\u003e\u003c/div\u003e\n```\n\n#### 完整文件示例\n\n你还可以在单个样式规则中使用多个属性，包括自定义属性（CSS 变量）。\n\n```javascript\nconst html = `\u003cdiv class=\"my-style\"\u003e\u003c/div\u003e`\nconst css = `\n  .my-style {\n    --tw-space-y: 2;\n    --my-color: #888888;\n    width: 10rem;\n    margin-top:calc(.5rem * var(--tw-space-y));\n    height: calc(100vh - 4rem);\n    color: var(--my-color);\n  }`\n\nconst result = inlineStylesIntoHtml(html, css)\n// 结果：\u003cdiv style=\"width: 160px; margin-top: 16px; height: calc(100vh - 64px); color: #888888;\"\u003e\u003c/div\u003e\n```\n\n## 🧩 API\n\n### inlineStyles(html, css, options)\n\n#### options.remToPx\n\n是否将 `rem` 转换为 `px`。\n\n类型：`boolean`  \n默认值：`true`\n\n#### options.convertCssVariables\n\n是否将 CSS 变量转换为静态。\n\n类型：`boolean`  \n默认值：`true`\n\n### 📖 参考\n\n- [Tailwind CSS for Email](https://github.com/jakobo/codedrift/discussions/104)\n- [juice](https://github.com/Automattic/juice)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayjason%2Finline-html-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frayjason%2Finline-html-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayjason%2Finline-html-styles/lists"}