@css-inline/css-inline 0.12.0 → 0.13.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 +24 -8
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -39,6 +39,7 @@ into:
|
|
|
39
39
|
- Resolves external stylesheets (including local files)
|
|
40
40
|
- Works on Linux, Windows, and macOS
|
|
41
41
|
- Supports HTML5 & CSS3
|
|
42
|
+
- Tested on Node.js 18 & 20.
|
|
42
43
|
|
|
43
44
|
## Playground
|
|
44
45
|
|
|
@@ -57,7 +58,7 @@ npm i @css-inline/css-inline
|
|
|
57
58
|
## Usage
|
|
58
59
|
|
|
59
60
|
```typescript
|
|
60
|
-
import { inline } from "css-inline";
|
|
61
|
+
import { inline } from "@css-inline/css-inline";
|
|
61
62
|
|
|
62
63
|
var inlined = inline(
|
|
63
64
|
`
|
|
@@ -109,6 +110,21 @@ The `data-css-inline="ignore"` attribute also allows you to skip `link` and `sty
|
|
|
109
110
|
</body>
|
|
110
111
|
```
|
|
111
112
|
|
|
113
|
+
Alternatively, you may keep `style` from being removed by using the `data-css-inline="keep"` attribute.
|
|
114
|
+
This is useful if you want to keep `@media` queries for responsive emails in separate `style` tags:
|
|
115
|
+
|
|
116
|
+
```html
|
|
117
|
+
<head>
|
|
118
|
+
<!-- Styles below are not removed -->
|
|
119
|
+
<style data-css-inline="keep">h1 { color:blue; }</style>
|
|
120
|
+
</head>
|
|
121
|
+
<body>
|
|
122
|
+
<h1>Big Text</h1>
|
|
123
|
+
</body>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
Such tags will be kept in the resulting HTML even if the `keep_style_tags` option is set to `false`.
|
|
127
|
+
|
|
112
128
|
## WebAssembly
|
|
113
129
|
|
|
114
130
|
`css-inline` also ships a WebAssembly module built with `wasm-bindgen` to run in browsers.
|
|
@@ -137,19 +153,19 @@ The `data-css-inline="ignore"` attribute also allows you to skip `link` and `sty
|
|
|
137
153
|
## Performance
|
|
138
154
|
|
|
139
155
|
`css-inline` is powered by efficient tooling from Mozilla's Servo project and significantly outperforms other JavaScript alternatives in terms of speed.
|
|
140
|
-
Most of the time it achieves over a **
|
|
156
|
+
Most of the time it achieves over a **3x** speed advantage compared to the next fastest alternative.
|
|
141
157
|
|
|
142
158
|
Here is the performance comparison:
|
|
143
159
|
|
|
144
|
-
| | Size | `css-inline 0.
|
|
145
|
-
|
|
146
|
-
| Basic | 230 B | 15.
|
|
147
|
-
| Realistic-1 | 8.58 KB |
|
|
148
|
-
| Realistic-2 | 4.3 KB |
|
|
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**) |
|
|
149
165
|
|
|
150
166
|
The "Basic" case was obtained from benchmarking the example from the Usage section.
|
|
151
167
|
|
|
152
|
-
The benchmarking code is available in the `benches/bench.ts` file. The benchmarks were conducted using the stable `rustc 1.
|
|
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`.
|
|
153
169
|
|
|
154
170
|
## License
|
|
155
171
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@css-inline/css-inline",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.13.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",
|
|
@@ -96,13 +96,13 @@
|
|
|
96
96
|
},
|
|
97
97
|
"packageManager": "yarn@4.0.2",
|
|
98
98
|
"optionalDependencies": {
|
|
99
|
-
"@css-inline/css-inline-win32-x64-msvc": "0.
|
|
100
|
-
"@css-inline/css-inline-darwin-x64": "0.
|
|
101
|
-
"@css-inline/css-inline-linux-x64-gnu": "0.
|
|
102
|
-
"@css-inline/css-inline-darwin-arm64": "0.
|
|
103
|
-
"@css-inline/css-inline-linux-arm64-gnu": "0.
|
|
104
|
-
"@css-inline/css-inline-linux-arm64-musl": "0.
|
|
105
|
-
"@css-inline/css-inline-linux-arm-gnueabihf": "0.
|
|
106
|
-
"@css-inline/css-inline-linux-x64-musl": "0.
|
|
99
|
+
"@css-inline/css-inline-win32-x64-msvc": "0.13.0",
|
|
100
|
+
"@css-inline/css-inline-darwin-x64": "0.13.0",
|
|
101
|
+
"@css-inline/css-inline-linux-x64-gnu": "0.13.0",
|
|
102
|
+
"@css-inline/css-inline-darwin-arm64": "0.13.0",
|
|
103
|
+
"@css-inline/css-inline-linux-arm64-gnu": "0.13.0",
|
|
104
|
+
"@css-inline/css-inline-linux-arm64-musl": "0.13.0",
|
|
105
|
+
"@css-inline/css-inline-linux-arm-gnueabihf": "0.13.0",
|
|
106
|
+
"@css-inline/css-inline-linux-x64-musl": "0.13.0"
|
|
107
107
|
}
|
|
108
108
|
}
|