https://github.com/rayjason/inline-html-styles
Inline (Tailwind) CSS stylesheets into HTML style attributes.
https://github.com/rayjason/inline-html-styles
css html juice postcss postcss-plugin tailwindcss
Last synced: 7 months ago
JSON representation
Inline (Tailwind) CSS stylesheets into HTML style attributes.
- Host: GitHub
- URL: https://github.com/rayjason/inline-html-styles
- Owner: RayJason
- License: mit
- Created: 2023-09-28T21:18:16.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-29T11:55:02.000Z (about 2 years ago)
- Last Synced: 2024-10-27T11:18:24.224Z (12 months ago)
- Topics: css, html, juice, postcss, postcss-plugin, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 31.3 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README-zh_CN.md
- License: LICENSE
Awesome Lists containing this project
README
# 内联 HTML Styles
将（Tailwind）CSS 样式表转换为 HTML 内联 Style 样式
[English](./README.md) | 中文
## ✨ 功能
- 单位转换（rem -> px）
- 将 CSS 样式表变量转换为静态
- 简化 CSS 样式表的 calc() 表达式
- 将 CSS 样式表内联到 HTML 样式属性中
## 🤹 场景
当你使用 Vue / React 和 **TailwindCSS** 开发静态页面时，针对以下场景，你可以使用这种方法将 CSS 样式表内联到 HTML 样式属性中。
- ✉️ 邮件
- ☘️ 微信文章
当然，我建议你应该先编译为静态站点（**SSG**）。这样便于你直接使用 HTML 和 CSS 字符串。
## 📦 安装
```bash
bun add inline-html-styles
```
```bash
pnpm add inline-html-styles
```
```bash
yarn add inline-html-styles
```
```bash
npm install inline-html-styles
```
你也可以添加 `-D` 参数将其安装为开发依赖项，具体取决于你的项目或使用场景。
## 🔨 使用
#### 转换单位 `rem` 为 `px`
你可以将 CSS 单位从 `rem` 转换为 `px`。
```javascript
const html = `
`
const css = `.my-style { width: 10rem }`
const result = inlineStylesIntoHtml(html, css)
// 结果：
```
#### 简化基础 `calc`
该函数可以在你的 CSS 中简化基础的 `calc` 表达式。
```javascript
const html = `
`
const css = `.my-style { width: calc(20px - 4px) }`
const result = inlineStylesIntoHtml(html, css)
// 结果：
```
#### 简化嵌套 `calc`
即使是嵌套的 `calc` 表达式也可以被简化。
```javascript
const html = `
`
const css = `.my-style { width: calc(20px - calc(10px - 6px)) }`
const result = inlineStylesIntoHtml(html, css)
// 结果：
```
#### `calc` 中不同单位不会被简化
当 `calc` 表达式涉及不同的单位时，它们将不会被简化，但会被适当地转换。
```javascript
const html = `
`
const css = `.my-style { width: calc(100vh - 4rem) }`
const result = inlineStylesIntoHtml(html, css)
// 结果：
```
#### 转换数值变量
数值型的 CSS 变量也可以被处理，并参与 calc 的简化。
```javascript
const html = `
`
const css = `.my-style { --tw-space-y: 2; margin-top:calc(.5rem * var(--tw-space-y)) }`
const result = inlineStylesIntoHtml(html, css)
// 结果：
```
#### 转换颜色变量
CSS 颜色变量也可以被应用。
```javascript
const html = `
`
const css = `.my-style { --my-color: #888888; color: var(--my-color) }`
const result = inlineStylesIntoHtml(html, css)
// 结果：
```
#### 完整文件示例
你还可以在单个样式规则中使用多个属性，包括自定义属性（CSS 变量）。
```javascript
const html = `
`
const css = `
.my-style {
--tw-space-y: 2;
--my-color: #888888;
width: 10rem;
margin-top:calc(.5rem * var(--tw-space-y));
height: calc(100vh - 4rem);
color: var(--my-color);
}`
const result = inlineStylesIntoHtml(html, css)
// 结果：
```
## 🧩 API
### inlineStyles(html, css, options)
#### options.remToPx
是否将 `rem` 转换为 `px`。
类型：`boolean`
默认值：`true`
#### options.convertCssVariables
是否将 CSS 变量转换为静态。
类型：`boolean`
默认值：`true`
### 📖 参考
- [Tailwind CSS for Email](https://github.com/jakobo/codedrift/discussions/104)
- [juice](https://github.com/Automattic/juice)