@css-inline/css-inline 0.13.2 → 0.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +67 -7
  2. package/index.d.ts +2 -0
  3. package/index.js +2 -1
  4. package/js-binding.d.ts +8 -0
  5. package/js-binding.js +2 -1
  6. package/package.json +11 -11
package/README.md CHANGED
@@ -37,6 +37,7 @@ into:
37
37
  - Inlines CSS from `style` and `link` tags
38
38
  - Removes `style` and `link` tags
39
39
  - Resolves external stylesheets (including local files)
40
+ - Optionally caches external stylesheets
40
41
  - Works on Linux, Windows, and macOS
41
42
  - Supports HTML5 & CSS3
42
43
  - Tested on Node.js 18 & 20.
@@ -75,6 +76,41 @@ var inlined = inline(
75
76
  // Do something with the inlined HTML, e.g. send an email
76
77
  ```
77
78
 
79
+ Note that `css-inline` automatically adds missing `html` and `body` tags, so the output is a valid HTML document.
80
+
81
+ Alternatively, you can inline CSS into an HTML fragment, preserving the original structure:
82
+
83
+ ```javascript
84
+ import { inlineFragment } from "@css-inline/css-inline";
85
+
86
+ var inlined = inlineFragment(
87
+ `
88
+ <main>
89
+ <h1>Hello</h1>
90
+ <section>
91
+ <p>who am i</p>
92
+ </section>
93
+ </main>
94
+ `,
95
+ `
96
+ p {
97
+ color: red;
98
+ }
99
+
100
+ h1 {
101
+ color: blue;
102
+ }
103
+ `
104
+ );
105
+ // HTML becomes this:
106
+ // <main>
107
+ // <h1 style="color: blue;">Hello</h1>
108
+ // <section>
109
+ // <p style="color: red;">who am i</p>
110
+ // </section>
111
+ // </main>
112
+ ```
113
+
78
114
  ### Configuration
79
115
 
80
116
  - `inlineStyleTags`. Specifies whether to inline CSS from "style" tags. Default: `true`
@@ -82,6 +118,7 @@ var inlined = inline(
82
118
  - `keepLinkTags`. Specifies whether to keep "link" tags after inlining. Default: `false`
83
119
  - `baseUrl`. The base URL used to resolve relative URLs. If you'd like to load stylesheets from your filesystem, use the `file://` scheme. Default: `null`
84
120
  - `loadRemoteStylesheets`. Specifies whether remote stylesheets should be loaded. Default: `true`
121
+ - `cache`. Specifies caching options for external stylesheets (for example, `{size: 5}`). Default: `null`
85
122
  - `extraCss`. Extra CSS to be inlined. Default: `null`
86
123
  - `preallocateNodeCapacity`. **Advanced**. Preallocates capacity for HTML nodes during parsing. This can improve performance when you have an estimate of the number of nodes in your HTML document. Default: `32`
87
124
 
@@ -125,6 +162,29 @@ This is useful if you want to keep `@media` queries for responsive emails in sep
125
162
 
126
163
  Such tags will be kept in the resulting HTML even if the `keep_style_tags` option is set to `false`.
127
164
 
165
+ You can also cache external stylesheets to avoid excessive network requests:
166
+
167
+ ```typescript
168
+ import { inline } from "@css-inline/css-inline";
169
+
170
+ var inlined = inline(
171
+ `
172
+ <html>
173
+ <head>
174
+ <link href="http://127.0.0.1:1234/external.css" rel="stylesheet">
175
+ <style>h1 { color:red }</style>
176
+ </head>
177
+ <body>
178
+ <h1>Test</h1>
179
+ </body>
180
+ </html>
181
+ `,
182
+ { cache: { size: 5 } },
183
+ );
184
+ ```
185
+
186
+ Caching is disabled by default.
187
+
128
188
  ## WebAssembly
129
189
 
130
190
  `css-inline` also ships a WebAssembly module built with `wasm-bindgen` to run in browsers.
@@ -148,7 +208,7 @@ Such tags will be kept in the resulting HTML even if the `keep_style_tags` optio
148
208
  </script>
149
209
  ```
150
210
 
151
- **NOTE**: WASM module currently lacks support for fetching stylesheets from network or filesystem.
211
+ **NOTE**: WASM module currently lacks support for fetching stylesheets from network or filesystem and caching.
152
212
 
153
213
  ## Performance
154
214
 
@@ -157,15 +217,15 @@ Most of the time it achieves over a **3x** speed advantage compared to the next
157
217
 
158
218
  Here is the performance comparison:
159
219
 
160
- | | Size | `css-inline 0.13.0` | `css-inline-wasm 0.13.0` | `juice 10.0.0` | `inline-css 4.0.2` |
161
- |-------------|---------|---------------------|--------------------------|----------------------|----------------------|
162
- | Basic | 230 B | 15.34 µs | 19.99 µs (**1.30x**) | 56.70 µs (**3.69x**) | 67.95 µs (**4.42x**) |
163
- | Realistic-1 | 8.58 KB | 333.22 µs | 434.59 µs (**1.30x**) | 1.07 ms (**3.23x**) | 1.24 ms (**3.73x**) |
164
- | Realistic-2 | 4.3 KB | 195.80 µs | 261.09 µs (**1.33x**) | 0.99 ms (**5.10x**) | 0.76 ms (**3.90x**) |
220
+ | | Size | `css-inline 0.14.0` | `css-inline-wasm 0.13.0` | `juice 10.0.0` | `inline-css 4.0.2` |
221
+ |-------------|---------|---------------------|--------------------------|-----------------------|----------------------|
222
+ | Basic | 230 B | 16.82 µs | 20.92 µs (**1.24x**) | 57.00 µs (**3.38x**) | 68.43 µs (**4.06x**) |
223
+ | Realistic-1 | 8.58 KB | 351.74 µs | 452.28 µs (**1.28x**) | 859.10 µs (**2.44x**) | 1.04 ms (**2.98x**) |
224
+ | Realistic-2 | 4.3 KB | 203.25 µs | 269.54 µs (**1.32x**) | 1.02 ms (**5.04x**) | 861.32 µs (**4.23x**) |
165
225
 
166
226
  The "Basic" case was obtained from benchmarking the example from the Usage section.
167
227
 
168
- The benchmarking code is available in the `benches/bench.ts` file. The benchmarks were conducted using the stable `rustc 1.75.0` on Node.js `v21.1.0`.
228
+ The benchmarking code is available in the `benches/bench.ts` file. The benchmarks were conducted using the stable `rustc 1.77.1` on Node.js `v21.1.0`.
169
229
 
170
230
  ## License
171
231
 
package/index.d.ts CHANGED
@@ -29,3 +29,5 @@ export interface Options {
29
29
  }
30
30
  /** Inline CSS styles from <style> tags to matching elements in the HTML tree and return a string. */
31
31
  export function inline(html: string, options?: Options | undefined | null): string
32
+ /** Inline CSS styles into an HTML fragment. */
33
+ export function inlineFragment(html: string, css: string, options?: Options | undefined | null): string
package/index.js CHANGED
@@ -252,6 +252,7 @@ if (!nativeBinding) {
252
252
  throw new Error(`Failed to load native binding`)
253
253
  }
254
254
 
255
- const { inline } = nativeBinding
255
+ const { inline, inlineFragment } = nativeBinding
256
256
 
257
257
  module.exports.inline = inline
258
+ module.exports.inlineFragment = inlineFragment
package/js-binding.d.ts CHANGED
@@ -3,6 +3,10 @@
3
3
 
4
4
  /* auto-generated by NAPI-RS */
5
5
 
6
+ export interface StylesheetCache {
7
+ /** Cache size. */
8
+ size: number
9
+ }
6
10
  export interface Options {
7
11
  /**
8
12
  * Whether to inline CSS from "style" tags.
@@ -19,6 +23,8 @@ export interface Options {
19
23
  baseUrl?: string
20
24
  /** Whether remote stylesheets should be loaded or not. */
21
25
  loadRemoteStylesheets?: boolean
26
+ /** An LRU Cache for external stylesheets. */
27
+ cache?: StylesheetCache
22
28
  /** Additional CSS to inline. */
23
29
  extraCss?: string
24
30
  /**
@@ -29,5 +35,7 @@ export interface Options {
29
35
  }
30
36
  /** Inline CSS styles from <style> tags to matching elements in the HTML tree and return a string. */
31
37
  export function inline(html: string, options?: Options | undefined | null): string
38
+ /** Inline CSS styles into an HTML fragment. */
39
+ export function inlineFragment(html: string, css: string, options?: Options | undefined | null): string
32
40
  /** Get the package version. */
33
41
  export function version(): string
package/js-binding.js CHANGED
@@ -281,7 +281,8 @@ if (!nativeBinding) {
281
281
  throw new Error(`Failed to load native binding`)
282
282
  }
283
283
 
284
- const { inline, version } = nativeBinding
284
+ const { inline, inlineFragment, version } = nativeBinding
285
285
 
286
286
  module.exports.inline = inline
287
+ module.exports.inlineFragment = inlineFragment
287
288
  module.exports.version = version
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@css-inline/css-inline",
3
- "version": "0.13.2",
3
+ "version": "0.14.1",
4
4
  "description": "High-performance library for inlining CSS into HTML 'style' attributes",
5
5
  "main": "index.js",
6
6
  "repository": "https://github.com/Stranger6667/css-inline",
@@ -98,15 +98,15 @@
98
98
  },
99
99
  "packageManager": "yarn@4.0.2",
100
100
  "optionalDependencies": {
101
- "@css-inline/css-inline-win32-x64-msvc": "0.13.2",
102
- "@css-inline/css-inline-darwin-x64": "0.13.2",
103
- "@css-inline/css-inline-linux-x64-gnu": "0.13.2",
104
- "@css-inline/css-inline-darwin-arm64": "0.13.2",
105
- "@css-inline/css-inline-linux-arm64-gnu": "0.13.2",
106
- "@css-inline/css-inline-linux-arm64-musl": "0.13.2",
107
- "@css-inline/css-inline-linux-arm-gnueabihf": "0.13.2",
108
- "@css-inline/css-inline-linux-x64-musl": "0.13.2",
109
- "@css-inline/css-inline-android-arm64": "0.13.2",
110
- "@css-inline/css-inline-android-arm-eabi": "0.13.2"
101
+ "@css-inline/css-inline-win32-x64-msvc": "0.14.1",
102
+ "@css-inline/css-inline-darwin-x64": "0.14.1",
103
+ "@css-inline/css-inline-linux-x64-gnu": "0.14.1",
104
+ "@css-inline/css-inline-darwin-arm64": "0.14.1",
105
+ "@css-inline/css-inline-linux-arm64-gnu": "0.14.1",
106
+ "@css-inline/css-inline-linux-arm64-musl": "0.14.1",
107
+ "@css-inline/css-inline-linux-arm-gnueabihf": "0.14.1",
108
+ "@css-inline/css-inline-linux-x64-musl": "0.14.1",
109
+ "@css-inline/css-inline-android-arm64": "0.14.1",
110
+ "@css-inline/css-inline-android-arm-eabi": "0.14.1"
111
111
  }
112
112
  }