@css-inline/css-inline 0.13.1 → 0.14.0
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.
- package/README.md +67 -7
- package/index.d.ts +2 -0
- package/index.js +2 -1
- package/js-binding.d.ts +8 -0
- package/js-binding.js +2 -1
- 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.
|
|
161
|
-
|
|
162
|
-
| Basic | 230 B |
|
|
163
|
-
| Realistic-1 | 8.58 KB |
|
|
164
|
-
| Realistic-2 | 4.3 KB |
|
|
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.
|
|
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.
|
|
3
|
+
"version": "0.14.0",
|
|
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.
|
|
102
|
-
"@css-inline/css-inline-darwin-x64": "0.
|
|
103
|
-
"@css-inline/css-inline-linux-x64-gnu": "0.
|
|
104
|
-
"@css-inline/css-inline-darwin-arm64": "0.
|
|
105
|
-
"@css-inline/css-inline-linux-arm64-gnu": "0.
|
|
106
|
-
"@css-inline/css-inline-linux-arm64-musl": "0.
|
|
107
|
-
"@css-inline/css-inline-linux-arm-gnueabihf": "0.
|
|
108
|
-
"@css-inline/css-inline-linux-x64-musl": "0.
|
|
109
|
-
"@css-inline/css-inline-android-arm64": "0.
|
|
110
|
-
"@css-inline/css-inline-android-arm-eabi": "0.
|
|
101
|
+
"@css-inline/css-inline-win32-x64-msvc": "0.14.0",
|
|
102
|
+
"@css-inline/css-inline-darwin-x64": "0.14.0",
|
|
103
|
+
"@css-inline/css-inline-linux-x64-gnu": "0.14.0",
|
|
104
|
+
"@css-inline/css-inline-darwin-arm64": "0.14.0",
|
|
105
|
+
"@css-inline/css-inline-linux-arm64-gnu": "0.14.0",
|
|
106
|
+
"@css-inline/css-inline-linux-arm64-musl": "0.14.0",
|
|
107
|
+
"@css-inline/css-inline-linux-arm-gnueabihf": "0.14.0",
|
|
108
|
+
"@css-inline/css-inline-linux-x64-musl": "0.14.0",
|
|
109
|
+
"@css-inline/css-inline-android-arm64": "0.14.0",
|
|
110
|
+
"@css-inline/css-inline-android-arm-eabi": "0.14.0"
|
|
111
111
|
}
|
|
112
112
|
}
|