@maizzle/framework 3.7.2 → 3.7.3
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/.github/workflows/nodejs.yml +29 -29
- package/package.json +84 -84
- package/src/generators/posthtml.js +60 -60
- package/src/generators/tailwindcss.js +84 -84
- package/src/transformers/base-image-url.js +9 -9
- package/src/transformers/index.js +57 -57
- package/src/transformers/six-hex.js +10 -10
- package/test/expected/transformers/base-image-url.html +7 -7
- package/test/fixtures/transformers/base-image-url.html +7 -7
- package/test/test-misc.js +8 -8
- package/test/test-tailwind.js +73 -73
- package/test/test-transformers.js +320 -320
- package/xo.config.js +19 -19
|
@@ -1,320 +1,320 @@
|
|
|
1
|
-
const test = require('ava')
|
|
2
|
-
const Maizzle = require('../src')
|
|
3
|
-
const removePlaintextTags = require('../src/transformers/plaintext')
|
|
4
|
-
|
|
5
|
-
const path = require('path')
|
|
6
|
-
const {readFileSync} = require('fs')
|
|
7
|
-
|
|
8
|
-
const fixture = file => readFileSync(path.join(__dirname, 'fixtures/transformers', `${file}.html`), 'utf8')
|
|
9
|
-
const expected = file => readFileSync(path.join(__dirname, 'expected/transformers', `${file}.html`), 'utf8')
|
|
10
|
-
|
|
11
|
-
test('remove inline sizes', async t => {
|
|
12
|
-
const options = {
|
|
13
|
-
width: ['TD'],
|
|
14
|
-
height: ['TD']
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
const html = await Maizzle.removeInlineSizes('<td style="width:100%;height:10px;">test</td>', options)
|
|
18
|
-
|
|
19
|
-
t.is(html, '<td style="">test</td>')
|
|
20
|
-
})
|
|
21
|
-
|
|
22
|
-
test('remove inline background-color', async t => {
|
|
23
|
-
const html = await Maizzle.removeInlineBgColor(`<td style="background-color: red" bgcolor="red">test</td>`)
|
|
24
|
-
const html2 = await Maizzle.removeInlineBgColor(
|
|
25
|
-
`<td style="background-color: red" bgcolor="red">test</td>`,
|
|
26
|
-
{
|
|
27
|
-
inlineCSS: {
|
|
28
|
-
preferBgColorAttribute: true
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
)
|
|
32
|
-
|
|
33
|
-
t.is(html, '<td style="" bgcolor="red">test</td>')
|
|
34
|
-
t.is(html2, '<td style="" bgcolor="red">test</td>')
|
|
35
|
-
})
|
|
36
|
-
|
|
37
|
-
test('remove inline background-color (with tags)', async t => {
|
|
38
|
-
const html = await Maizzle.removeInlineBgColor(
|
|
39
|
-
`<table style="background-color: red"><tr><td style="background-color: red">test</td></tr></table>`,
|
|
40
|
-
['table']
|
|
41
|
-
)
|
|
42
|
-
|
|
43
|
-
t.is(html, '<table style="" bgcolor="red"><tr><td style="background-color: red">test</td></tr></table>')
|
|
44
|
-
})
|
|
45
|
-
|
|
46
|
-
test('inline CSS', async t => {
|
|
47
|
-
const html = `<div class="foo bar px-2 py-2">test</div>`
|
|
48
|
-
const css = `
|
|
49
|
-
.foo {color: red}
|
|
50
|
-
.bar {cursor: pointer}
|
|
51
|
-
.px-2 {
|
|
52
|
-
padding-left: 2px;
|
|
53
|
-
padding-right: 2px;
|
|
54
|
-
}
|
|
55
|
-
.py-2 {
|
|
56
|
-
padding-top: 2px;
|
|
57
|
-
padding-bottom: 2px;
|
|
58
|
-
}
|
|
59
|
-
`
|
|
60
|
-
|
|
61
|
-
const result = await Maizzle.inlineCSS(html, {
|
|
62
|
-
customCSS: css,
|
|
63
|
-
removeStyleTags: false,
|
|
64
|
-
styleToAttribute: {
|
|
65
|
-
'text-align': 'align'
|
|
66
|
-
},
|
|
67
|
-
applyWidthAttributes: ['TABLE'],
|
|
68
|
-
applyHeightAttributes: ['TD'],
|
|
69
|
-
mergeLonghand: ['div'],
|
|
70
|
-
excludedProperties: ['cursor'],
|
|
71
|
-
codeBlocks: {
|
|
72
|
-
RB: {
|
|
73
|
-
start: '<%',
|
|
74
|
-
end: '%>'
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
})
|
|
78
|
-
|
|
79
|
-
const result2 = await Maizzle.inlineCSS(html, {
|
|
80
|
-
customCSS: css,
|
|
81
|
-
mergeLonghand: true
|
|
82
|
-
})
|
|
83
|
-
|
|
84
|
-
t.is(result, '<div class="foo bar px-2 py-2" style="color: red; padding: 2px;">test</div>')
|
|
85
|
-
t.is(result2, '<div class="foo bar px-2 py-2" style="color: red; cursor: pointer; padding: 2px;">test</div>')
|
|
86
|
-
})
|
|
87
|
-
|
|
88
|
-
test('inline CSS (disabled)', async t => {
|
|
89
|
-
const html = `<div class="foo">test</div>`
|
|
90
|
-
const css = `.foo {color: red}`
|
|
91
|
-
|
|
92
|
-
const result = await Maizzle.inlineCSS(html, {inlineCSS: false, customCSS: css})
|
|
93
|
-
|
|
94
|
-
t.is(result, '<div class="foo">test</div>')
|
|
95
|
-
})
|
|
96
|
-
|
|
97
|
-
test('remove unused CSS', async t => {
|
|
98
|
-
const html = `<!DOCTYPE html>
|
|
99
|
-
<html>
|
|
100
|
-
<head>
|
|
101
|
-
<style>
|
|
102
|
-
.foo {color: red}
|
|
103
|
-
.bar-baz {color: blue}
|
|
104
|
-
.baz {color: white}
|
|
105
|
-
</style>
|
|
106
|
-
</head>
|
|
107
|
-
<body>
|
|
108
|
-
<div class="foo">test div with some text</div>
|
|
109
|
-
</body>
|
|
110
|
-
</html>`
|
|
111
|
-
|
|
112
|
-
const expected1 = `<!DOCTYPE html>
|
|
113
|
-
<html>
|
|
114
|
-
<head>
|
|
115
|
-
<style>
|
|
116
|
-
.foo {color: red}
|
|
117
|
-
.bar-baz {color: blue}
|
|
118
|
-
</style>
|
|
119
|
-
</head>
|
|
120
|
-
<body>
|
|
121
|
-
<div class="foo">test div with some text</div>
|
|
122
|
-
</body>
|
|
123
|
-
</html>`
|
|
124
|
-
|
|
125
|
-
const expected2 = `<!DOCTYPE html>
|
|
126
|
-
<html>
|
|
127
|
-
<head>
|
|
128
|
-
<style>
|
|
129
|
-
.foo {color: red}
|
|
130
|
-
</style>
|
|
131
|
-
</head>
|
|
132
|
-
<body>
|
|
133
|
-
<div class="foo">test div with some text</div>
|
|
134
|
-
</body>
|
|
135
|
-
</html>`
|
|
136
|
-
|
|
137
|
-
const withOptions = await Maizzle.removeUnusedCSS(html, {whitelist: ['.bar*']})
|
|
138
|
-
const enabled = await Maizzle.removeUnusedCSS(html, true)
|
|
139
|
-
|
|
140
|
-
t.is(withOptions, expected1)
|
|
141
|
-
t.is(enabled, expected2)
|
|
142
|
-
})
|
|
143
|
-
|
|
144
|
-
test('remove unused CSS (disabled)', async t => {
|
|
145
|
-
const html = `<!DOCTYPE html>
|
|
146
|
-
<html>
|
|
147
|
-
<head>
|
|
148
|
-
<style>
|
|
149
|
-
.foo {color: red}
|
|
150
|
-
</style>
|
|
151
|
-
</head>
|
|
152
|
-
<body>
|
|
153
|
-
<div class="foo">test div with some text</div>
|
|
154
|
-
</body>
|
|
155
|
-
</html>`
|
|
156
|
-
|
|
157
|
-
const expected = `<!DOCTYPE html>
|
|
158
|
-
<html>
|
|
159
|
-
<head>
|
|
160
|
-
<style>
|
|
161
|
-
.foo {color: red}
|
|
162
|
-
</style>
|
|
163
|
-
</head>
|
|
164
|
-
<body>
|
|
165
|
-
<div class="foo">test div with some text</div>
|
|
166
|
-
</body>
|
|
167
|
-
</html>`
|
|
168
|
-
|
|
169
|
-
const disabled = await Maizzle.removeUnusedCSS(html, {removeUnusedCSS: false})
|
|
170
|
-
const unset = await Maizzle.removeUnusedCSS(html)
|
|
171
|
-
|
|
172
|
-
t.is(disabled, expected)
|
|
173
|
-
t.is(unset, expected)
|
|
174
|
-
})
|
|
175
|
-
|
|
176
|
-
test('remove attributes', async t => {
|
|
177
|
-
const html = await Maizzle.removeAttributes(`<div style="" role="article"></div>`, [{name: 'role', value: 'article'}])
|
|
178
|
-
|
|
179
|
-
t.is(html, '<div></div>')
|
|
180
|
-
})
|
|
181
|
-
|
|
182
|
-
test('extra attributes', async t => {
|
|
183
|
-
const html = await Maizzle.applyExtraAttributes('<div />', {div: {role: 'article'}})
|
|
184
|
-
|
|
185
|
-
t.is(html, '<div role="article"></div>')
|
|
186
|
-
})
|
|
187
|
-
|
|
188
|
-
test('extra attributes (disabled)', async t => {
|
|
189
|
-
const html = await Maizzle.applyExtraAttributes('<img src="example.jpg">', {extraAttributes: false})
|
|
190
|
-
|
|
191
|
-
t.is(html, '<img src="example.jpg">')
|
|
192
|
-
})
|
|
193
|
-
|
|
194
|
-
test('base image URL', async t => {
|
|
195
|
-
const html = await Maizzle.applyBaseImageUrl(fixture('base-image-url'), 'https://example.com/')
|
|
196
|
-
|
|
197
|
-
t.is(html, expected('base-image-url'))
|
|
198
|
-
})
|
|
199
|
-
|
|
200
|
-
test('prettify', async t => {
|
|
201
|
-
// eslint-disable-next-line
|
|
202
|
-
const html = await Maizzle.prettify('<div><p>test</p></div>', {indent_inner_result: true})
|
|
203
|
-
const html2 = await Maizzle.prettify('<div><p>test</p></div>', true)
|
|
204
|
-
|
|
205
|
-
t.is(html, '<div>\n <p>test</p>\n</div>')
|
|
206
|
-
t.is(html2, '<div>\n <p>test</p>\n</div>')
|
|
207
|
-
})
|
|
208
|
-
|
|
209
|
-
test('prettify (disabled)', async t => {
|
|
210
|
-
const html = await Maizzle.prettify('<div><p>test</p></div>', {prettify: false})
|
|
211
|
-
|
|
212
|
-
t.is(html, '<div><p>test</p></div>')
|
|
213
|
-
})
|
|
214
|
-
|
|
215
|
-
test('minify', async t => {
|
|
216
|
-
const html = await Maizzle.minify('<div>\n\n<p>\n\ntest</p></div>', {lineLengthLimit: 10})
|
|
217
|
-
|
|
218
|
-
t.is(html, '<div><p>\ntest</p>\n</div>')
|
|
219
|
-
})
|
|
220
|
-
|
|
221
|
-
test('minify (disabled)', async t => {
|
|
222
|
-
const html = await Maizzle.minify('<div>\n\n<p>\n\ntest</p></div>', {minify: false})
|
|
223
|
-
|
|
224
|
-
t.is(html, '<div>\n\n<p>\n\ntest</p></div>')
|
|
225
|
-
})
|
|
226
|
-
|
|
227
|
-
test('removes plaintext tag', t => {
|
|
228
|
-
let html = removePlaintextTags('<plaintext>Removed</plaintext><div>Preserved</div>')
|
|
229
|
-
html = html.replace(/[^\S\r\n]+$/gm, '').trim()
|
|
230
|
-
|
|
231
|
-
t.is(html, '<div>Preserved</div>')
|
|
232
|
-
})
|
|
233
|
-
|
|
234
|
-
test('replace strings', async t => {
|
|
235
|
-
const html = await Maizzle.replaceStrings('initial text', {initial: 'updated'})
|
|
236
|
-
|
|
237
|
-
t.is(html, 'updated text')
|
|
238
|
-
})
|
|
239
|
-
|
|
240
|
-
test('safe class names', async t => {
|
|
241
|
-
const html = await Maizzle.safeClassNames('<div class="sm:text-left w-1.5">foo</div>', {'.': '_dot_'})
|
|
242
|
-
|
|
243
|
-
t.is(html, '<div class="sm-text-left w-1_dot_5">foo</div>')
|
|
244
|
-
})
|
|
245
|
-
|
|
246
|
-
test('safe class names (disabled)', async t => {
|
|
247
|
-
const html = await Maizzle.safeClassNames('<div class="sm:text-left">foo</div>', {safeClassNames: false})
|
|
248
|
-
|
|
249
|
-
t.is(html, '<div class="sm:text-left">foo</div>')
|
|
250
|
-
})
|
|
251
|
-
|
|
252
|
-
test('six digit hex', async t => {
|
|
253
|
-
const html = await Maizzle.ensureSixHEX('<td style="color: #ffc" bgcolor="#000"></td>')
|
|
254
|
-
|
|
255
|
-
t.is(html, '<td style="color: #ffffcc" bgcolor="#000000"></td>');
|
|
256
|
-
})
|
|
257
|
-
|
|
258
|
-
test('six digit hex (disabled)', async t => {
|
|
259
|
-
const html = await Maizzle.ensureSixHEX('<td style="color: #ffc" bgcolor="#000"></td>', {sixHex: false})
|
|
260
|
-
|
|
261
|
-
t.is(html, '<td style="color: #ffc" bgcolor="#000"></td>');
|
|
262
|
-
})
|
|
263
|
-
|
|
264
|
-
test('transform contents', async t => {
|
|
265
|
-
const html = await Maizzle.transformContents('<div uppercase>test</div>', {uppercase: string => string.toUpperCase()})
|
|
266
|
-
|
|
267
|
-
t.is(html, '<div>TEST</div>')
|
|
268
|
-
})
|
|
269
|
-
|
|
270
|
-
test('url parameters', async t => {
|
|
271
|
-
const html = await Maizzle.addURLParams('<a href="https://example.com">test</a>', {bar: 'baz', qix: 'qux'})
|
|
272
|
-
|
|
273
|
-
t.is(html, '<a href="https://example.com?bar=baz&qix=qux">test</a>')
|
|
274
|
-
})
|
|
275
|
-
|
|
276
|
-
test('attribute to style', async t => {
|
|
277
|
-
const html = `<table width="100%" height="600" align="left" bgcolor="#FFFFFF" background="https://example.com/image.jpg">
|
|
278
|
-
<tr>
|
|
279
|
-
<td align="center" valign="top"></td>
|
|
280
|
-
</tr>
|
|
281
|
-
</table>`
|
|
282
|
-
|
|
283
|
-
const expected = `<table width="100%" height="600" align="left" bgcolor="#FFFFFF" background="https://example.com/image.jpg" style="width: 100%; height: 600px; float: left; background-color: #FFFFFF; background-image: url('https://example.com/image.jpg')">
|
|
284
|
-
<tr style="">
|
|
285
|
-
<td align="center" valign="top" style="text-align: center; vertical-align: top"></td>
|
|
286
|
-
</tr>
|
|
287
|
-
</table>`
|
|
288
|
-
|
|
289
|
-
const html2 = `<table align="center">
|
|
290
|
-
<tr>
|
|
291
|
-
<td></td>
|
|
292
|
-
</tr>
|
|
293
|
-
</table>`
|
|
294
|
-
|
|
295
|
-
const expected2 = `<table align="center" style="margin-left: auto; margin-right: auto">
|
|
296
|
-
<tr style="">
|
|
297
|
-
<td style=""></td>
|
|
298
|
-
</tr>
|
|
299
|
-
</table>`
|
|
300
|
-
|
|
301
|
-
const withArray = await Maizzle.attributeToStyle(html, ['width', 'height', 'bgcolor', 'background', 'align', 'valign'])
|
|
302
|
-
const withOptionBoolean = await Maizzle.attributeToStyle(html2, {inlineCSS: {attributeToStyle: true}})
|
|
303
|
-
const withOptionArray = await Maizzle.attributeToStyle(html2, {inlineCSS: {attributeToStyle: ['align']}})
|
|
304
|
-
|
|
305
|
-
t.is(withArray, expected)
|
|
306
|
-
t.is(withOptionBoolean, expected2)
|
|
307
|
-
t.is(withOptionArray, expected2)
|
|
308
|
-
})
|
|
309
|
-
|
|
310
|
-
test('prevent widows', async t => {
|
|
311
|
-
const html = await Maizzle.preventWidows('lorem ipsum dolor')
|
|
312
|
-
|
|
313
|
-
t.is(html, 'lorem ipsum dolor')
|
|
314
|
-
})
|
|
315
|
-
|
|
316
|
-
test('markdown (disabled)', async t => {
|
|
317
|
-
const html = await Maizzle.markdown('> a quote', {markdown: false})
|
|
318
|
-
|
|
319
|
-
t.is(html, '> a quote')
|
|
320
|
-
})
|
|
1
|
+
const test = require('ava')
|
|
2
|
+
const Maizzle = require('../src')
|
|
3
|
+
const removePlaintextTags = require('../src/transformers/plaintext')
|
|
4
|
+
|
|
5
|
+
const path = require('path')
|
|
6
|
+
const {readFileSync} = require('fs')
|
|
7
|
+
|
|
8
|
+
const fixture = file => readFileSync(path.join(__dirname, 'fixtures/transformers', `${file}.html`), 'utf8')
|
|
9
|
+
const expected = file => readFileSync(path.join(__dirname, 'expected/transformers', `${file}.html`), 'utf8')
|
|
10
|
+
|
|
11
|
+
test('remove inline sizes', async t => {
|
|
12
|
+
const options = {
|
|
13
|
+
width: ['TD'],
|
|
14
|
+
height: ['TD']
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const html = await Maizzle.removeInlineSizes('<td style="width:100%;height:10px;">test</td>', options)
|
|
18
|
+
|
|
19
|
+
t.is(html, '<td style="">test</td>')
|
|
20
|
+
})
|
|
21
|
+
|
|
22
|
+
test('remove inline background-color', async t => {
|
|
23
|
+
const html = await Maizzle.removeInlineBgColor(`<td style="background-color: red" bgcolor="red">test</td>`)
|
|
24
|
+
const html2 = await Maizzle.removeInlineBgColor(
|
|
25
|
+
`<td style="background-color: red" bgcolor="red">test</td>`,
|
|
26
|
+
{
|
|
27
|
+
inlineCSS: {
|
|
28
|
+
preferBgColorAttribute: true
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
)
|
|
32
|
+
|
|
33
|
+
t.is(html, '<td style="" bgcolor="red">test</td>')
|
|
34
|
+
t.is(html2, '<td style="" bgcolor="red">test</td>')
|
|
35
|
+
})
|
|
36
|
+
|
|
37
|
+
test('remove inline background-color (with tags)', async t => {
|
|
38
|
+
const html = await Maizzle.removeInlineBgColor(
|
|
39
|
+
`<table style="background-color: red"><tr><td style="background-color: red">test</td></tr></table>`,
|
|
40
|
+
['table']
|
|
41
|
+
)
|
|
42
|
+
|
|
43
|
+
t.is(html, '<table style="" bgcolor="red"><tr><td style="background-color: red">test</td></tr></table>')
|
|
44
|
+
})
|
|
45
|
+
|
|
46
|
+
test('inline CSS', async t => {
|
|
47
|
+
const html = `<div class="foo bar px-2 py-2">test</div>`
|
|
48
|
+
const css = `
|
|
49
|
+
.foo {color: red}
|
|
50
|
+
.bar {cursor: pointer}
|
|
51
|
+
.px-2 {
|
|
52
|
+
padding-left: 2px;
|
|
53
|
+
padding-right: 2px;
|
|
54
|
+
}
|
|
55
|
+
.py-2 {
|
|
56
|
+
padding-top: 2px;
|
|
57
|
+
padding-bottom: 2px;
|
|
58
|
+
}
|
|
59
|
+
`
|
|
60
|
+
|
|
61
|
+
const result = await Maizzle.inlineCSS(html, {
|
|
62
|
+
customCSS: css,
|
|
63
|
+
removeStyleTags: false,
|
|
64
|
+
styleToAttribute: {
|
|
65
|
+
'text-align': 'align'
|
|
66
|
+
},
|
|
67
|
+
applyWidthAttributes: ['TABLE'],
|
|
68
|
+
applyHeightAttributes: ['TD'],
|
|
69
|
+
mergeLonghand: ['div'],
|
|
70
|
+
excludedProperties: ['cursor'],
|
|
71
|
+
codeBlocks: {
|
|
72
|
+
RB: {
|
|
73
|
+
start: '<%',
|
|
74
|
+
end: '%>'
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
})
|
|
78
|
+
|
|
79
|
+
const result2 = await Maizzle.inlineCSS(html, {
|
|
80
|
+
customCSS: css,
|
|
81
|
+
mergeLonghand: true
|
|
82
|
+
})
|
|
83
|
+
|
|
84
|
+
t.is(result, '<div class="foo bar px-2 py-2" style="color: red; padding: 2px;">test</div>')
|
|
85
|
+
t.is(result2, '<div class="foo bar px-2 py-2" style="color: red; cursor: pointer; padding: 2px;">test</div>')
|
|
86
|
+
})
|
|
87
|
+
|
|
88
|
+
test('inline CSS (disabled)', async t => {
|
|
89
|
+
const html = `<div class="foo">test</div>`
|
|
90
|
+
const css = `.foo {color: red}`
|
|
91
|
+
|
|
92
|
+
const result = await Maizzle.inlineCSS(html, {inlineCSS: false, customCSS: css})
|
|
93
|
+
|
|
94
|
+
t.is(result, '<div class="foo">test</div>')
|
|
95
|
+
})
|
|
96
|
+
|
|
97
|
+
test('remove unused CSS', async t => {
|
|
98
|
+
const html = `<!DOCTYPE html>
|
|
99
|
+
<html>
|
|
100
|
+
<head>
|
|
101
|
+
<style>
|
|
102
|
+
.foo {color: red}
|
|
103
|
+
.bar-baz {color: blue}
|
|
104
|
+
.baz {color: white}
|
|
105
|
+
</style>
|
|
106
|
+
</head>
|
|
107
|
+
<body>
|
|
108
|
+
<div class="foo">test div with some text</div>
|
|
109
|
+
</body>
|
|
110
|
+
</html>`
|
|
111
|
+
|
|
112
|
+
const expected1 = `<!DOCTYPE html>
|
|
113
|
+
<html>
|
|
114
|
+
<head>
|
|
115
|
+
<style>
|
|
116
|
+
.foo {color: red}
|
|
117
|
+
.bar-baz {color: blue}
|
|
118
|
+
</style>
|
|
119
|
+
</head>
|
|
120
|
+
<body>
|
|
121
|
+
<div class="foo">test div with some text</div>
|
|
122
|
+
</body>
|
|
123
|
+
</html>`
|
|
124
|
+
|
|
125
|
+
const expected2 = `<!DOCTYPE html>
|
|
126
|
+
<html>
|
|
127
|
+
<head>
|
|
128
|
+
<style>
|
|
129
|
+
.foo {color: red}
|
|
130
|
+
</style>
|
|
131
|
+
</head>
|
|
132
|
+
<body>
|
|
133
|
+
<div class="foo">test div with some text</div>
|
|
134
|
+
</body>
|
|
135
|
+
</html>`
|
|
136
|
+
|
|
137
|
+
const withOptions = await Maizzle.removeUnusedCSS(html, {whitelist: ['.bar*']})
|
|
138
|
+
const enabled = await Maizzle.removeUnusedCSS(html, true)
|
|
139
|
+
|
|
140
|
+
t.is(withOptions, expected1)
|
|
141
|
+
t.is(enabled, expected2)
|
|
142
|
+
})
|
|
143
|
+
|
|
144
|
+
test('remove unused CSS (disabled)', async t => {
|
|
145
|
+
const html = `<!DOCTYPE html>
|
|
146
|
+
<html>
|
|
147
|
+
<head>
|
|
148
|
+
<style>
|
|
149
|
+
.foo {color: red}
|
|
150
|
+
</style>
|
|
151
|
+
</head>
|
|
152
|
+
<body>
|
|
153
|
+
<div class="foo">test div with some text</div>
|
|
154
|
+
</body>
|
|
155
|
+
</html>`
|
|
156
|
+
|
|
157
|
+
const expected = `<!DOCTYPE html>
|
|
158
|
+
<html>
|
|
159
|
+
<head>
|
|
160
|
+
<style>
|
|
161
|
+
.foo {color: red}
|
|
162
|
+
</style>
|
|
163
|
+
</head>
|
|
164
|
+
<body>
|
|
165
|
+
<div class="foo">test div with some text</div>
|
|
166
|
+
</body>
|
|
167
|
+
</html>`
|
|
168
|
+
|
|
169
|
+
const disabled = await Maizzle.removeUnusedCSS(html, {removeUnusedCSS: false})
|
|
170
|
+
const unset = await Maizzle.removeUnusedCSS(html)
|
|
171
|
+
|
|
172
|
+
t.is(disabled, expected)
|
|
173
|
+
t.is(unset, expected)
|
|
174
|
+
})
|
|
175
|
+
|
|
176
|
+
test('remove attributes', async t => {
|
|
177
|
+
const html = await Maizzle.removeAttributes(`<div style="" role="article"></div>`, [{name: 'role', value: 'article'}])
|
|
178
|
+
|
|
179
|
+
t.is(html, '<div></div>')
|
|
180
|
+
})
|
|
181
|
+
|
|
182
|
+
test('extra attributes', async t => {
|
|
183
|
+
const html = await Maizzle.applyExtraAttributes('<div />', {div: {role: 'article'}})
|
|
184
|
+
|
|
185
|
+
t.is(html, '<div role="article"></div>')
|
|
186
|
+
})
|
|
187
|
+
|
|
188
|
+
test('extra attributes (disabled)', async t => {
|
|
189
|
+
const html = await Maizzle.applyExtraAttributes('<img src="example.jpg">', {extraAttributes: false})
|
|
190
|
+
|
|
191
|
+
t.is(html, '<img src="example.jpg">')
|
|
192
|
+
})
|
|
193
|
+
|
|
194
|
+
test('base image URL', async t => {
|
|
195
|
+
const html = await Maizzle.applyBaseImageUrl(fixture('base-image-url'), 'https://example.com/')
|
|
196
|
+
|
|
197
|
+
t.is(html, expected('base-image-url'))
|
|
198
|
+
})
|
|
199
|
+
|
|
200
|
+
test('prettify', async t => {
|
|
201
|
+
// eslint-disable-next-line
|
|
202
|
+
const html = await Maizzle.prettify('<div><p>test</p></div>', {indent_inner_result: true})
|
|
203
|
+
const html2 = await Maizzle.prettify('<div><p>test</p></div>', true)
|
|
204
|
+
|
|
205
|
+
t.is(html, '<div>\n <p>test</p>\n</div>')
|
|
206
|
+
t.is(html2, '<div>\n <p>test</p>\n</div>')
|
|
207
|
+
})
|
|
208
|
+
|
|
209
|
+
test('prettify (disabled)', async t => {
|
|
210
|
+
const html = await Maizzle.prettify('<div><p>test</p></div>', {prettify: false})
|
|
211
|
+
|
|
212
|
+
t.is(html, '<div><p>test</p></div>')
|
|
213
|
+
})
|
|
214
|
+
|
|
215
|
+
test('minify', async t => {
|
|
216
|
+
const html = await Maizzle.minify('<div>\n\n<p>\n\ntest</p></div>', {lineLengthLimit: 10})
|
|
217
|
+
|
|
218
|
+
t.is(html, '<div><p>\ntest</p>\n</div>')
|
|
219
|
+
})
|
|
220
|
+
|
|
221
|
+
test('minify (disabled)', async t => {
|
|
222
|
+
const html = await Maizzle.minify('<div>\n\n<p>\n\ntest</p></div>', {minify: false})
|
|
223
|
+
|
|
224
|
+
t.is(html, '<div>\n\n<p>\n\ntest</p></div>')
|
|
225
|
+
})
|
|
226
|
+
|
|
227
|
+
test('removes plaintext tag', t => {
|
|
228
|
+
let html = removePlaintextTags('<plaintext>Removed</plaintext><div>Preserved</div>')
|
|
229
|
+
html = html.replace(/[^\S\r\n]+$/gm, '').trim()
|
|
230
|
+
|
|
231
|
+
t.is(html, '<div>Preserved</div>')
|
|
232
|
+
})
|
|
233
|
+
|
|
234
|
+
test('replace strings', async t => {
|
|
235
|
+
const html = await Maizzle.replaceStrings('initial text', {initial: 'updated'})
|
|
236
|
+
|
|
237
|
+
t.is(html, 'updated text')
|
|
238
|
+
})
|
|
239
|
+
|
|
240
|
+
test('safe class names', async t => {
|
|
241
|
+
const html = await Maizzle.safeClassNames('<div class="sm:text-left w-1.5">foo</div>', {'.': '_dot_'})
|
|
242
|
+
|
|
243
|
+
t.is(html, '<div class="sm-text-left w-1_dot_5">foo</div>')
|
|
244
|
+
})
|
|
245
|
+
|
|
246
|
+
test('safe class names (disabled)', async t => {
|
|
247
|
+
const html = await Maizzle.safeClassNames('<div class="sm:text-left">foo</div>', {safeClassNames: false})
|
|
248
|
+
|
|
249
|
+
t.is(html, '<div class="sm:text-left">foo</div>')
|
|
250
|
+
})
|
|
251
|
+
|
|
252
|
+
test('six digit hex', async t => {
|
|
253
|
+
const html = await Maizzle.ensureSixHEX('<td style="color: #ffc" bgcolor="#000"></td>')
|
|
254
|
+
|
|
255
|
+
t.is(html, '<td style="color: #ffffcc" bgcolor="#000000"></td>');
|
|
256
|
+
})
|
|
257
|
+
|
|
258
|
+
test('six digit hex (disabled)', async t => {
|
|
259
|
+
const html = await Maizzle.ensureSixHEX('<td style="color: #ffc" bgcolor="#000"></td>', {sixHex: false})
|
|
260
|
+
|
|
261
|
+
t.is(html, '<td style="color: #ffc" bgcolor="#000"></td>');
|
|
262
|
+
})
|
|
263
|
+
|
|
264
|
+
test('transform contents', async t => {
|
|
265
|
+
const html = await Maizzle.transformContents('<div uppercase>test</div>', {uppercase: string => string.toUpperCase()})
|
|
266
|
+
|
|
267
|
+
t.is(html, '<div>TEST</div>')
|
|
268
|
+
})
|
|
269
|
+
|
|
270
|
+
test('url parameters', async t => {
|
|
271
|
+
const html = await Maizzle.addURLParams('<a href="https://example.com">test</a>', {bar: 'baz', qix: 'qux'})
|
|
272
|
+
|
|
273
|
+
t.is(html, '<a href="https://example.com?bar=baz&qix=qux">test</a>')
|
|
274
|
+
})
|
|
275
|
+
|
|
276
|
+
test('attribute to style', async t => {
|
|
277
|
+
const html = `<table width="100%" height="600" align="left" bgcolor="#FFFFFF" background="https://example.com/image.jpg">
|
|
278
|
+
<tr>
|
|
279
|
+
<td align="center" valign="top"></td>
|
|
280
|
+
</tr>
|
|
281
|
+
</table>`
|
|
282
|
+
|
|
283
|
+
const expected = `<table width="100%" height="600" align="left" bgcolor="#FFFFFF" background="https://example.com/image.jpg" style="width: 100%; height: 600px; float: left; background-color: #FFFFFF; background-image: url('https://example.com/image.jpg')">
|
|
284
|
+
<tr style="">
|
|
285
|
+
<td align="center" valign="top" style="text-align: center; vertical-align: top"></td>
|
|
286
|
+
</tr>
|
|
287
|
+
</table>`
|
|
288
|
+
|
|
289
|
+
const html2 = `<table align="center">
|
|
290
|
+
<tr>
|
|
291
|
+
<td></td>
|
|
292
|
+
</tr>
|
|
293
|
+
</table>`
|
|
294
|
+
|
|
295
|
+
const expected2 = `<table align="center" style="margin-left: auto; margin-right: auto">
|
|
296
|
+
<tr style="">
|
|
297
|
+
<td style=""></td>
|
|
298
|
+
</tr>
|
|
299
|
+
</table>`
|
|
300
|
+
|
|
301
|
+
const withArray = await Maizzle.attributeToStyle(html, ['width', 'height', 'bgcolor', 'background', 'align', 'valign'])
|
|
302
|
+
const withOptionBoolean = await Maizzle.attributeToStyle(html2, {inlineCSS: {attributeToStyle: true}})
|
|
303
|
+
const withOptionArray = await Maizzle.attributeToStyle(html2, {inlineCSS: {attributeToStyle: ['align']}})
|
|
304
|
+
|
|
305
|
+
t.is(withArray, expected)
|
|
306
|
+
t.is(withOptionBoolean, expected2)
|
|
307
|
+
t.is(withOptionArray, expected2)
|
|
308
|
+
})
|
|
309
|
+
|
|
310
|
+
test('prevent widows', async t => {
|
|
311
|
+
const html = await Maizzle.preventWidows('lorem ipsum dolor')
|
|
312
|
+
|
|
313
|
+
t.is(html, 'lorem ipsum dolor')
|
|
314
|
+
})
|
|
315
|
+
|
|
316
|
+
test('markdown (disabled)', async t => {
|
|
317
|
+
const html = await Maizzle.markdown('> a quote', {markdown: false})
|
|
318
|
+
|
|
319
|
+
t.is(html, '> a quote')
|
|
320
|
+
})
|