feat: update options

Author: RayJason

README-zh_CN.md

@@ -143,7 +143,25 @@ const result = inlineStylesIntoHtml(html, css)
 // 结果：<div style="width: 160px; margin-top: 16px; height: calc(100vh - 64px); color: #888888;"></div>
 ```
 
+## 🧩 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)
+- [juice](https://github.com/Automattic/juice)

README.md

@@ -56,10 +56,12 @@ You can also add -D to install it as a development dependency, depending on your
 You can convert CSS units from `rem` to `px`.
 
 ```javascript
+import inlineStyles from 'inline-html-styles'
+
 const html = `<div class="my-style"></div>`
 const css = `.my-style { width: 10rem }`
 
-const result = inlineStylesIntoHtml(html, css)
+const result = inlineStyles(html, css)
 // Result: <div style="width: 160px;"></div>
 ```
 
@@ -68,10 +70,12 @@ const result = inlineStylesIntoHtml(html, css)
 The function can simplify basic `calc` expressions in your CSS.
 
 ```javascript
+import inlineStyles from 'inline-html-styles'
+
 const html = `<div class="my-style"></div>`
 const css = `.my-style { width: calc(20px - 4px) }`
 
-const result = inlineStylesIntoHtml(html, css)
+const result = inlineStyles(html, css)
 // Result: <div style="width: 16px;"></div>
 ```
 
@@ -80,10 +84,12 @@ const result = inlineStylesIntoHtml(html, css)
 Even nested `calc` expressions can be simplified.
 
 ```javascript
+import inlineStyles from 'inline-html-styles'
+
 const html = `<div class="my-style"></div>`
 const css = `.my-style { width: calc(20px - calc(10px - 6px)) }`
 
-const result = inlineStylesIntoHtml(html, css)
+const result = inlineStyles(html, css)
 // Result: <div style="width: 16px;"></div>
 ```
 
@@ -92,10 +98,12 @@ const result = inlineStylesIntoHtml(html, css)
 When `calc` expressions involve different units, they will not be simplified but will be converted appropriately.
 
 ```javascript
+import inlineStyles from 'inline-html-styles'
+
 const html = `<div class="my-style"></div>`
 const css = `.my-style { width: calc(100vh - 4rem) }`
 
-const result = inlineStylesIntoHtml(html, css)
+const result = inlineStyles(html, css)
 // Result: <div style="width: calc(100vh - 64px);"></div>
 ```
 
@@ -104,10 +112,12 @@ const result = inlineStylesIntoHtml(html, css)
 CSS variables that are numerical can also be processed. And participate in calc Simplify
 
 ```javascript
+import inlineStyles from 'inline-html-styles'
+
 const html = `<div class="my-style"></div>`
 const css = `.my-style { --tw-space-y: 2; margin-top:calc(.5rem * var(--tw-space-y)) }`
 
-const result = inlineStylesIntoHtml(html, css)
+const result = inlineStyles(html, css)
 // Result: <div style="margin-top: 16px;"></div>
 ```
 
@@ -116,10 +126,12 @@ const result = inlineStylesIntoHtml(html, css)
 CSS color variables can be applied as well.
 
 ```javascript
+import inlineStyles from 'inline-html-styles'
+
 const html = `<div class="my-style"></div>`
 const css = `.my-style { --my-color: #888888; color: var(--my-color) }`
 
-const result = inlineStylesIntoHtml(html, css)
+const result = inlineStyles(html, css)
 // Result: <div style="color: #888888;"></div>
 ```
 
@@ -128,6 +140,8 @@ const result = inlineStylesIntoHtml(html, css)
 You can also use multiple properties, including custom properties (CSS variables), in a single style rule.
 
 ```javascript
+import inlineStyles from 'inline-html-styles'
+
 const html = `<div class="my-style"></div>`
 const css = `
   .my-style {
@@ -139,11 +153,29 @@ const css = `
     color: var(--my-color);
   }`
 
-const result = inlineStylesIntoHtml(html, css)
+const result = inlineStyles(html, css)
 // Result: <div style="width: 160px; margin-top: 16px; height: calc(100vh - 64px); color: #888888;"></div>
 ```
 
-### Reference
+## 🧩 API
+
+### inlineStyles(html, css, options)
+
+#### options.remToPx
+
+Whether to convert `rem` to `px`.  
+
+Type: `boolean`  
+Default: `true`
+
+#### options.convertCssVariables
+
+Whether to convert CSS variables to static.  
+
+Type: `boolean`  
+Default: `true`
+
+## Reference
 
 - [Tailwind CSS for Email](https://github.com/jakobo/codedrift/discussions/104)
 - [juice](https://github.com/Automattic/juice)

dist/index.d.ts

@@ -1,10 +1,21 @@
+/**
+ * 配置
+ * Config
+ * @interface Config
+ * @property {boolean} remToPx 是否将 CSS 单位 rem 转换为 px
+ * @property {boolean} convertCssVariables 是否将 CSS 变量转换为常量
+ */
+interface Options {
+    remToPx?: boolean;
+    convertCssVariables?: boolean;
+}
 /**
  * 将 CSS 处理并内联到 HTML 中
  * Process and inline CSS into HTML
  * @param {string} html
  * @param {string} css
- * @param {boolean} remToPx 是否将 rem 转换为 px / Convert CSS units from rem to px?
+ * @param {Options} options
  * @returns {string}
  */
-declare const inlineStyles: (html: string, css: string, remToPx?: boolean) => string;
+declare const inlineStyles: (html: string, css: string, options?: Options) => string;
 export default inlineStyles;

dist/index.js

@@ -1,6 +1,6 @@
 {
   "name": "inline-html-styles",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Inline (Tailwind) CSS stylesheets into HTML style attributes.",
   "author": "RayJason <https://github.com/RayJason>",
   "license": "MIT",

package.json

@@ -45,19 +45,29 @@ const handleCssVariables = (style: string): string => {
   return styleWithoutDefinitions || ''
 }
 
+/**
+ * 配置
+ * Config
+ * @interface Config
+ * @property {boolean} remToPx 是否将 CSS 单位 rem 转换为 px
+ * @property {boolean} convertCssVariables 是否将 CSS 变量转换为常量
+ */
+interface Options {
+  remToPx?: boolean
+  convertCssVariables?: boolean
+}
+
 /**
  * 将 CSS 处理并内联到 HTML 中
  * Process and inline CSS into HTML
  * @param {string} html
  * @param {string} css
- * @param {boolean} remToPx 是否将 rem 转换为 px / Convert CSS units from rem to px?
+ * @param {Options} options
  * @returns {string}
  */
-const inlineStyles = (
-  html: string,
-  css: string,
-  remToPx: boolean = true
-): string => {
+const inlineStyles = (html: string, css: string, options?: Options): string => {
+  const { remToPx = true, convertCssVariables = true } = options || {}
+
   // 将 CSS 单位 rem 转换为 px
   // Convert CSS units from rem to px
   const basePx = 16
@@ -71,7 +81,10 @@ const inlineStyles = (
 
   // 将 CSS 变量转换为常量
   // Convert CSS variables to static
-  const cssWithoutVariables = handleCssVariables(cssWithUnitConversion)
+  let cssWithoutVariables = cssWithUnitConversion
+  if (convertCssVariables) {
+    cssWithoutVariables = handleCssVariables(cssWithUnitConversion)
+  }
 
   // 简化 calc() 表达式
   // Simplify calc() expressions