@maizzle/framework 4.0.0-alpha.8 → 4.0.0-alpha.9

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 (33) hide show
  1. package/bin/maizzle +3 -0
  2. package/package.json +8 -4
  3. package/src/commands/serve.js +15 -5
  4. package/src/generators/output/to-string.js +71 -71
  5. package/src/generators/tailwindcss.js +116 -116
  6. package/src/transformers/baseUrl.js +33 -9
  7. package/src/transformers/filters/defaultFilters.js +126 -0
  8. package/src/transformers/{transform.js → filters/index.js} +11 -7
  9. package/src/transformers/index.js +4 -4
  10. package/src/transformers/prettify.js +29 -20
  11. package/src/transformers/removeInlinedSelectors.js +70 -71
  12. package/src/transformers/removeUnusedCss.js +40 -35
  13. package/test/expected/posthtml/component.html +13 -13
  14. package/test/expected/transformers/atimport-in-style.html +13 -11
  15. package/test/expected/transformers/{base-image-url.html → base-url.html} +99 -83
  16. package/test/expected/transformers/filters.html +81 -0
  17. package/test/expected/transformers/preserve-transform-css.html +45 -24
  18. package/test/expected/useConfig.html +9 -9
  19. package/test/fixtures/basic.html +6 -6
  20. package/test/fixtures/posthtml/component.html +19 -19
  21. package/test/fixtures/transformers/{base-image-url.html → base-url.html} +101 -85
  22. package/test/fixtures/transformers/filters.html +87 -0
  23. package/test/fixtures/useConfig.html +9 -9
  24. package/test/stubs/components/component.html +5 -5
  25. package/test/stubs/templates/1.html +1 -1
  26. package/test/stubs/templates/2.test +1 -0
  27. package/test/test-posthtml.js +66 -66
  28. package/test/test-tailwindcss.js +1 -1
  29. package/test/test-todisk.js +43 -29
  30. package/test/test-tostring.js +148 -142
  31. package/test/test-transformers.js +490 -479
  32. package/test/stubs/templates/2.html +0 -1
  33. package/test/stubs/templates/3.mzl +0 -1
package/test/test-transformers.js CHANGED
@@ -1,479 +1,490 @@
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 expect = 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 URL (string)', async t => {
195
- const html = await Maizzle.applyBaseImageUrl(fixture('base-image-url'), 'https://example.com/')
196
-
197
- t.is(html, expect('base-image-url'))
198
- })
199
-
200
- test('base URL (object)', async t => {
201
- const html = await Maizzle.applyBaseImageUrl(fixture('base-image-url'), {
202
- url: 'https://example.com/',
203
- allTags: true,
204
- styleTag: true,
205
- inlineCss: true
206
- })
207
-
208
- t.is(html, expect('base-image-url'))
209
- })
210
-
211
- test('prettify', async t => {
212
- // eslint-disable-next-line
213
- const html = await Maizzle.prettify('<div><p>test</p></div>', {indent_inner_result: true})
214
- const html2 = await Maizzle.prettify('<div><p>test</p></div>', true)
215
-
216
- t.is(html, '<div>\n <p>test</p>\n</div>')
217
- t.is(html2, '<div>\n <p>test</p>\n</div>')
218
- })
219
-
220
- test('prettify (disabled)', async t => {
221
- const html = await Maizzle.prettify('<div><p>test</p></div>', {prettify: false})
222
-
223
- t.is(html, '<div><p>test</p></div>')
224
- })
225
-
226
- test('minify', async t => {
227
- const html = await Maizzle.minify('<div>\n\n<p>\n\ntest</p></div>', {lineLengthLimit: 10})
228
-
229
- t.is(html, '<div><p>\ntest</p>\n</div>')
230
- })
231
-
232
- test('minify (disabled)', async t => {
233
- const html = await Maizzle.minify('<div>\n\n<p>\n\ntest</p></div>', {minify: false})
234
-
235
- t.is(html, '<div>\n\n<p>\n\ntest</p></div>')
236
- })
237
-
238
- test('removes plaintext tag', t => {
239
- let html = removePlaintextTags('<plaintext>Removed</plaintext><div>Preserved</div>')
240
- html = html.replace(/[^\S\r\n]+$/gm, '').trim()
241
-
242
- t.is(html, '<div>Preserved</div>')
243
- })
244
-
245
- test('replace strings', async t => {
246
- const html = await Maizzle.replaceStrings('initial text', {initial: 'updated'})
247
-
248
- t.is(html, 'updated text')
249
- })
250
-
251
- test('safe class names', async t => {
252
- const html = await Maizzle.safeClassNames('<div class="sm:text-left w-1.5">foo</div>', {'.': '_dot_'})
253
-
254
- t.is(html, '<div class="sm-text-left w-1_dot_5">foo</div>')
255
- })
256
-
257
- test('safe class names (disabled)', async t => {
258
- const html = await Maizzle.safeClassNames('<div class="sm:text-left">foo</div>', {safeClassNames: false})
259
-
260
- t.is(html, '<div class="sm:text-left">foo</div>')
261
- })
262
-
263
- test('six digit hex', async t => {
264
- const html = await Maizzle.ensureSixHEX(
265
- `
266
- <div bgcolor="#000" style="color: #fff; background-color: #000">This should not change: #ffc</div>
267
- <font color="#fff">Text</font>
268
- `)
269
-
270
- t.is(
271
- html.trim(),
272
- `
273
- <div bgcolor="#000000" style="color: #fff; background-color: #000">This should not change: #ffc</div>
274
- <font color="#ffffff">Text</font>
275
- `.trim()
276
- )
277
- })
278
-
279
- test('six digit hex (disabled)', async t => {
280
- const html = await Maizzle.ensureSixHEX('<td style="color: #ffc" bgcolor="#000"></td>', {sixHex: false})
281
-
282
- t.is(html, '<td style="color: #ffc" bgcolor="#000"></td>')
283
- })
284
-
285
- test('transform contents (javascript)', async t => {
286
- const html = await Maizzle.transformContents('<div uppercase>test</div>', {uppercase: string => string.toUpperCase()})
287
-
288
- t.is(html, '<div>TEST</div>')
289
- })
290
-
291
- test('transform contents (tailwindcss)', async t => {
292
- const html = await Maizzle.transformContents(
293
- `<style tailwindcss>
294
- div {
295
- @apply hidden;
296
- }
297
- </style>`
298
- )
299
-
300
- const expected = `<style>.inline { display: inline !important
301
- } .table { display: table !important
302
- } .contents { display: contents !important
303
- } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
304
- } div { display: none
305
- }</style>`
306
-
307
- t.is(html, expected)
308
- })
309
-
310
- test('transform contents (postcss)', async t => {
311
- const html = await Maizzle.transformContents(
312
- `<style postcss>@import 'test/stubs/post.css';</style>`
313
- )
314
-
315
- const expected = `<style>div {
316
- margin: 1px 2px 3px 4px;
317
- }</style>`
318
-
319
- t.is(html, expected)
320
- })
321
-
322
- test('url parameters', async t => {
323
- const html = await Maizzle.addURLParams('<a href="https://example.com">test</a>', {bar: 'baz', qix: 'qux'})
324
-
325
- t.is(html, '<a href="https://example.com?bar=baz&qix=qux">test</a>')
326
- })
327
-
328
- test('attribute to style', async t => {
329
- const html = `<table width="100%" height="600" align="left" bgcolor="#FFFFFF" background="https://example.com/image.jpg">
330
- <tr>
331
- <td align="center" valign="top"></td>
332
- </tr>
333
- </table>`
334
-
335
- 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')">
336
- <tr style="">
337
- <td align="center" valign="top" style="text-align: center; vertical-align: top"></td>
338
- </tr>
339
- </table>`
340
-
341
- const html2 = `<table align="center">
342
- <tr>
343
- <td></td>
344
- </tr>
345
- </table>`
346
-
347
- const expected2 = `<table align="center" style="margin-left: auto; margin-right: auto">
348
- <tr style="">
349
- <td style=""></td>
350
- </tr>
351
- </table>`
352
-
353
- const withArray = await Maizzle.attributeToStyle(html, ['width', 'height', 'bgcolor', 'background', 'align', 'valign'])
354
- const withOptionBoolean = await Maizzle.attributeToStyle(html2, {inlineCSS: {attributeToStyle: true}})
355
- const withOptionArray = await Maizzle.attributeToStyle(html2, {inlineCSS: {attributeToStyle: ['align']}})
356
-
357
- t.is(withArray, expected)
358
- t.is(withOptionBoolean, expected2)
359
- t.is(withOptionArray, expected2)
360
- })
361
-
362
- test('prevent widows', async t => {
363
- const html = await Maizzle.preventWidows('lorem ipsum dolor')
364
-
365
- t.is(html, 'lorem ipsum&nbsp;dolor')
366
- })
367
-
368
- test('markdown (disabled)', async t => {
369
- const html = await Maizzle.markdown('> a quote', {markdown: false})
370
-
371
- t.is(html, '> a quote')
372
- })
373
-
374
- test('remove inlined selectors', async t => {
375
- const html = `<!DOCTYPE html>
376
- <html>
377
- <head>
378
- <style>
379
- img {
380
- border: 0;
381
- vertical-align: middle
382
- }
383
-
384
- .hover-text-blue:hover {
385
- color: #00a8ff;
386
- }
387
-
388
- .m-0 {margin: 0}
389
-
390
- .mb-4 {margin-bottom: 16px}
391
-
392
- .mt-0 {margin-top: 0}
393
-
394
- .remove {color: red}
395
-
396
- [data-ogsc] .hidden {display: none}
397
-
398
- #keepId {float:none}
399
-
400
- @media (max-width: 600px) {
401
- .ignore {color: blue}
402
- }
403
- </style>
404
- <style>
405
- .keep {margin: 0}
406
- </style>
407
- </head>
408
- <body>
409
- <div id="keepId" class="remove keep ignore" style="color: red; display: inline">
410
- <h1 class="m-0 mb-4 mt-0 hover-text-blue" style="margin: 0 0 16px;">Title</h1>
411
- <img src="https://example.com/image.jpg" style="border: 0; vertical-align: middle">
412
- <div id="keepId" class="remove keep ignore" style="color: red; display: inline">text</div>
413
- </div>
414
- </body>
415
- </html>`
416
-
417
- const expected = `<!DOCTYPE html>
418
- <html>
419
- <head>
420
- <style>
421
- .hover-text-blue:hover {
422
- color: #00a8ff;
423
- }
424
-
425
- [data-ogsc] .hidden {display: none}
426
-
427
- #keepId {float:none}
428
-
429
- @media (max-width: 600px) {
430
- .ignore {color: blue}
431
- }
432
- </style>
433
- <style>
434
- .keep {margin: 0}
435
- </style>
436
- </head>
437
- <body>
438
- <div id="keepId" class="keep ignore" style="color: red; display: inline">
439
- <h1 class="hover-text-blue" style="margin: 0 0 16px">Title</h1>
440
- <img src="https://example.com/image.jpg" style="border: 0; vertical-align: middle">
441
- <div id="keepId" class="keep ignore" style="color: red; display: inline">text</div>
442
- </div>
443
- </body>
444
- </html>`
445
-
446
- const result = await Maizzle.removeInlinedClasses(html)
447
-
448
- t.is(result, expected)
449
- })
450
-
451
- test('remove inlined selectors (disabled)', async t => {
452
- const html = `<!DOCTYPE html>
453
- <html>
454
- <head>
455
- <style>
456
- .remove {color: red}
457
- </style>
458
- </head>
459
- <body>
460
- <div class="remove" style="color: red"></div>
461
- </body>
462
- </html>`
463
-
464
- const expected = `<!DOCTYPE html>
465
- <html>
466
- <head>
467
- <style>
468
- .remove {color: red}
469
- </style>
470
- </head>
471
- <body>
472
- <div class="remove" style="color: red"></div>
473
- </body>
474
- </html>`
475
-
476
- const result = await Maizzle.removeInlinedClasses(html, {removeInlinedClasses: false})
477
-
478
- t.is(result, expected)
479
- })
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 fs = require('fs')
7
+
8
+ const readFile = (dir, filename) => fs.promises
9
+ .readFile(path.join(__dirname, dir, `${filename}.html`), 'utf8')
10
+ .then(html => html.trim())
11
+
12
+ const fixture = file => readFile('fixtures/transformers', file)
13
+ const expected = file => readFile('expected/transformers', file)
14
+
15
+ test('remove inline sizes', async t => {
16
+ const options = {
17
+ width: ['TD'],
18
+ height: ['TD']
19
+ }
20
+
21
+ const html = await Maizzle.removeInlineSizes('<td style="width:100%;height:10px;">test</td>', options)
22
+
23
+ t.is(html, '<td style="">test</td>')
24
+ })
25
+
26
+ test('remove inline background-color', async t => {
27
+ const html = await Maizzle.removeInlineBgColor(`<td style="background-color: red" bgcolor="red">test</td>`)
28
+ const html2 = await Maizzle.removeInlineBgColor(
29
+ `<td style="background-color: red" bgcolor="red">test</td>`,
30
+ {
31
+ inlineCSS: {
32
+ preferBgColorAttribute: true
33
+ }
34
+ }
35
+ )
36
+
37
+ t.is(html, '<td style="" bgcolor="red">test</td>')
38
+ t.is(html2, '<td style="" bgcolor="red">test</td>')
39
+ })
40
+
41
+ test('remove inline background-color (with tags)', async t => {
42
+ const html = await Maizzle.removeInlineBgColor(
43
+ `<table style="background-color: red"><tr><td style="background-color: red">test</td></tr></table>`,
44
+ ['table']
45
+ )
46
+
47
+ t.is(html, '<table style="" bgcolor="red"><tr><td style="background-color: red">test</td></tr></table>')
48
+ })
49
+
50
+ test('inline CSS', async t => {
51
+ const html = `<div class="foo bar px-2 py-2">test</div>`
52
+ const css = `
53
+ .foo {color: red}
54
+ .bar {cursor: pointer}
55
+ .px-2 {
56
+ padding-left: 2px;
57
+ padding-right: 2px;
58
+ }
59
+ .py-2 {
60
+ padding-top: 2px;
61
+ padding-bottom: 2px;
62
+ }
63
+ `
64
+
65
+ const result = await Maizzle.inlineCSS(html, {
66
+ customCSS: css,
67
+ removeStyleTags: false,
68
+ styleToAttribute: {
69
+ 'text-align': 'align'
70
+ },
71
+ applyWidthAttributes: ['TABLE'],
72
+ applyHeightAttributes: ['TD'],
73
+ mergeLonghand: ['div'],
74
+ excludedProperties: ['cursor'],
75
+ codeBlocks: {
76
+ RB: {
77
+ start: '<%',
78
+ end: '%>'
79
+ }
80
+ }
81
+ })
82
+
83
+ const result2 = await Maizzle.inlineCSS(html, {
84
+ customCSS: css,
85
+ mergeLonghand: true
86
+ })
87
+
88
+ t.is(result, '<div class="foo bar px-2 py-2" style="color: red; padding: 2px;">test</div>')
89
+ t.is(result2, '<div class="foo bar px-2 py-2" style="color: red; cursor: pointer; padding: 2px;">test</div>')
90
+ })
91
+
92
+ test('inline CSS (disabled)', async t => {
93
+ const html = `<div class="foo">test</div>`
94
+ const css = `.foo {color: red}`
95
+
96
+ const result = await Maizzle.inlineCSS(html, {inlineCSS: false, customCSS: css})
97
+
98
+ t.is(result, '<div class="foo">test</div>')
99
+ })
100
+
101
+ test('remove unused CSS', async t => {
102
+ const html = `<!DOCTYPE html>
103
+ <html>
104
+ <head>
105
+ <style>
106
+ .foo {color: red}
107
+ .bar-baz {color: blue}
108
+ .baz {color: white}
109
+ </style>
110
+ </head>
111
+ <body>
112
+ <div class="foo">test div with some text</div>
113
+ </body>
114
+ </html>`
115
+
116
+ const result1 = `<!DOCTYPE html>
117
+ <html>
118
+ <head>
119
+ <style>
120
+ .foo {color: red}
121
+ .bar-baz {color: blue}
122
+ </style>
123
+ </head>
124
+ <body>
125
+ <div class="foo">test div with some text</div>
126
+ </body>
127
+ </html>`
128
+
129
+ const result2 = `<!DOCTYPE html>
130
+ <html>
131
+ <head>
132
+ <style>
133
+ .foo {color: red}
134
+ </style>
135
+ </head>
136
+ <body>
137
+ <div class="foo">test div with some text</div>
138
+ </body>
139
+ </html>`
140
+
141
+ const withOptions = await Maizzle.removeUnusedCSS(html, {whitelist: ['.bar*']})
142
+ const enabled = await Maizzle.removeUnusedCSS(html, true)
143
+
144
+ t.is(withOptions, result1)
145
+ t.is(enabled, result2)
146
+ })
147
+
148
+ test('remove unused CSS (disabled)', async t => {
149
+ const html = `<!DOCTYPE html>
150
+ <html>
151
+ <head>
152
+ <style>
153
+ .foo {color: red}
154
+ </style>
155
+ </head>
156
+ <body>
157
+ <div class="foo">test div with some text</div>
158
+ </body>
159
+ </html>`
160
+
161
+ const result = `<!DOCTYPE html>
162
+ <html>
163
+ <head>
164
+ <style>
165
+ .foo {color: red}
166
+ </style>
167
+ </head>
168
+ <body>
169
+ <div class="foo">test div with some text</div>
170
+ </body>
171
+ </html>`
172
+
173
+ const disabled = await Maizzle.removeUnusedCSS(html, {removeUnusedCSS: false})
174
+ const unset = await Maizzle.removeUnusedCSS(html)
175
+
176
+ t.is(disabled, result)
177
+ t.is(unset, result)
178
+ })
179
+
180
+ test('remove attributes', async t => {
181
+ const html = await Maizzle.removeAttributes(`<div style="" role="article"></div>`, [{name: 'role', value: 'article'}])
182
+
183
+ t.is(html, '<div></div>')
184
+ })
185
+
186
+ test('extra attributes', async t => {
187
+ const html = await Maizzle.applyExtraAttributes('<div />', {div: {role: 'article'}})
188
+
189
+ t.is(html, '<div role="article"></div>')
190
+ })
191
+
192
+ test('extra attributes (disabled)', async t => {
193
+ const html = await Maizzle.applyExtraAttributes('<img src="example.jpg">', {extraAttributes: false})
194
+
195
+ t.is(html, '<img src="example.jpg">')
196
+ })
197
+
198
+ test('base URL (string)', async t => {
199
+ const source = await fixture('base-url')
200
+ const html = await Maizzle.applyBaseImageUrl(source, 'https://example.com/')
201
+
202
+ t.is(html, await expected('base-url'))
203
+ })
204
+
205
+ test('base URL (object)', async t => {
206
+ const source = await fixture('base-url')
207
+ const html = await Maizzle.applyBaseImageUrl(source, {
208
+ url: 'https://example.com/',
209
+ allTags: true,
210
+ styleTag: true,
211
+ inlineCss: true
212
+ })
213
+
214
+ t.is(html, await expected('base-url'))
215
+ })
216
+
217
+ test('prettify', async t => {
218
+ // eslint-disable-next-line
219
+ const html = await Maizzle.prettify('<div><p>test</p></div>', {indent_inner_result: true})
220
+ const html2 = await Maizzle.prettify('<div><p>test</p></div>', true)
221
+
222
+ t.is(html, '<div>\n <p>test</p>\n</div>')
223
+ t.is(html2, '<div>\n <p>test</p>\n</div>')
224
+ })
225
+
226
+ test('prettify (disabled)', async t => {
227
+ const html = await Maizzle.prettify('<div><p>test</p></div>', {prettify: false})
228
+
229
+ t.is(html, '<div><p>test</p></div>')
230
+ })
231
+
232
+ test('minify', async t => {
233
+ const html = await Maizzle.minify('<div>\n\n<p>\n\ntest</p></div>', {lineLengthLimit: 10})
234
+
235
+ t.is(html, '<div><p>\ntest</p>\n</div>')
236
+ })
237
+
238
+ test('minify (disabled)', async t => {
239
+ const html = await Maizzle.minify('<div>\n\n<p>\n\ntest</p></div>', {minify: false})
240
+
241
+ t.is(html, '<div>\n\n<p>\n\ntest</p></div>')
242
+ })
243
+
244
+ test('removes plaintext tag', t => {
245
+ let html = removePlaintextTags('<plaintext>Removed</plaintext><div>Preserved</div>')
246
+ html = html.replace(/[^\S\r\n]+$/gm, '').trim()
247
+
248
+ t.is(html, '<div>Preserved</div>')
249
+ })
250
+
251
+ test('replace strings', async t => {
252
+ const html = await Maizzle.replaceStrings('initial text', {initial: 'updated'})
253
+
254
+ t.is(html, 'updated text')
255
+ })
256
+
257
+ test('safe class names', async t => {
258
+ const html = await Maizzle.safeClassNames('<div class="sm:text-left w-1.5">foo</div>', {'.': '_dot_'})
259
+
260
+ t.is(html, '<div class="sm-text-left w-1_dot_5">foo</div>')
261
+ })
262
+
263
+ test('safe class names (disabled)', async t => {
264
+ const html = await Maizzle.safeClassNames('<div class="sm:text-left">foo</div>', {safeClassNames: false})
265
+
266
+ t.is(html, '<div class="sm:text-left">foo</div>')
267
+ })
268
+
269
+ test('six digit hex', async t => {
270
+ const html = await Maizzle.ensureSixHEX(
271
+ `
272
+ <div bgcolor="#000" style="color: #fff; background-color: #000">This should not change: #ffc</div>
273
+ <font color="#fff">Text</font>
274
+ `)
275
+
276
+ t.is(
277
+ html.trim(),
278
+ `
279
+ <div bgcolor="#000000" style="color: #fff; background-color: #000">This should not change: #ffc</div>
280
+ <font color="#ffffff">Text</font>
281
+ `.trim()
282
+ )
283
+ })
284
+
285
+ test('six digit hex (disabled)', async t => {
286
+ const html = await Maizzle.ensureSixHEX('<td style="color: #ffc" bgcolor="#000"></td>', {sixHex: false})
287
+
288
+ t.is(html, '<td style="color: #ffc" bgcolor="#000"></td>')
289
+ })
290
+
291
+ test('filters (default)', async t => {
292
+ const source = await fixture('filters')
293
+ const html = await Maizzle.withFilters(source)
294
+
295
+ t.is(html, await expected('filters'))
296
+ })
297
+
298
+ test('filters (tailwindcss)', async t => {
299
+ const html = await Maizzle.withFilters(
300
+ `<style tailwindcss>
301
+ div {
302
+ @apply hidden;
303
+ }
304
+ </style>`
305
+ )
306
+
307
+ const expected = `<style>.inline { display: inline !important
308
+ } .table { display: table !important
309
+ } .contents { display: contents !important
310
+ } .truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important
311
+ } .uppercase { text-transform: uppercase !important
312
+ } .lowercase { text-transform: lowercase !important
313
+ } .capitalize { text-transform: capitalize !important
314
+ } div { display: none
315
+ }
316
+ </style>`
317
+
318
+ t.is(html, expected)
319
+ })
320
+
321
+ test('filters (postcss)', async t => {
322
+ const html = await Maizzle.withFilters(
323
+ `<style postcss>@import 'test/stubs/post.css';</style>`
324
+ )
325
+
326
+ const expected = `<style>div {
327
+ margin: 1px 2px 3px 4px;
328
+ }</style>`
329
+
330
+ t.is(html, expected)
331
+ })
332
+
333
+ test('url parameters', async t => {
334
+ const html = await Maizzle.addURLParams('<a href="https://example.com">test</a>', {bar: 'baz', qix: 'qux'})
335
+
336
+ t.is(html, '<a href="https://example.com?bar=baz&qix=qux">test</a>')
337
+ })
338
+
339
+ test('attribute to style', async t => {
340
+ const html = `<table width="100%" height="600" align="left" bgcolor="#FFFFFF" background="https://example.com/image.jpg">
341
+ <tr>
342
+ <td align="center" valign="top"></td>
343
+ </tr>
344
+ </table>`
345
+
346
+ 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')">
347
+ <tr style="">
348
+ <td align="center" valign="top" style="text-align: center; vertical-align: top"></td>
349
+ </tr>
350
+ </table>`
351
+
352
+ const html2 = `<table align="center">
353
+ <tr>
354
+ <td></td>
355
+ </tr>
356
+ </table>`
357
+
358
+ const expected2 = `<table align="center" style="margin-left: auto; margin-right: auto">
359
+ <tr style="">
360
+ <td style=""></td>
361
+ </tr>
362
+ </table>`
363
+
364
+ const withArray = await Maizzle.attributeToStyle(html, ['width', 'height', 'bgcolor', 'background', 'align', 'valign'])
365
+ const withOptionBoolean = await Maizzle.attributeToStyle(html2, {inlineCSS: {attributeToStyle: true}})
366
+ const withOptionArray = await Maizzle.attributeToStyle(html2, {inlineCSS: {attributeToStyle: ['align']}})
367
+
368
+ t.is(withArray, expected)
369
+ t.is(withOptionBoolean, expected2)
370
+ t.is(withOptionArray, expected2)
371
+ })
372
+
373
+ test('prevent widows', async t => {
374
+ const html = await Maizzle.preventWidows('lorem ipsum dolor')
375
+
376
+ t.is(html, 'lorem ipsum&nbsp;dolor')
377
+ })
378
+
379
+ test('markdown (disabled)', async t => {
380
+ const html = await Maizzle.markdown('> a quote', {markdown: false})
381
+
382
+ t.is(html, '> a quote')
383
+ })
384
+
385
+ test('remove inlined selectors', async t => {
386
+ const html = `<!DOCTYPE html>
387
+ <html>
388
+ <head>
389
+ <style>
390
+ img {
391
+ border: 0;
392
+ vertical-align: middle
393
+ }
394
+
395
+ .hover-text-blue:hover {
396
+ color: #00a8ff;
397
+ }
398
+
399
+ .m-0 {margin: 0}
400
+
401
+ .mb-4 {margin-bottom: 16px}
402
+
403
+ .mt-0 {margin-top: 0}
404
+
405
+ .remove {color: red}
406
+
407
+ [data-ogsc] .hidden {display: none}
408
+
409
+ #keepId {float:none}
410
+
411
+ @media (max-width: 600px) {
412
+ .ignore {color: blue}
413
+ }
414
+ </style>
415
+ <style>
416
+ .keep {margin: 0}
417
+ </style>
418
+ </head>
419
+ <body>
420
+ <div id="keepId" class="remove keep ignore" style="color: red; display: inline">
421
+ <h1 class="m-0 mb-4 mt-0 hover-text-blue" style="margin: 0 0 16px;">Title</h1>
422
+ <img src="https://example.com/image.jpg" style="border: 0; vertical-align: middle">
423
+ <div id="keepId" class="remove keep ignore" style="color: red; display: inline">text</div>
424
+ </div>
425
+ </body>
426
+ </html>`
427
+
428
+ const expected = `<!DOCTYPE html>
429
+ <html>
430
+ <head>
431
+ <style>
432
+ .hover-text-blue:hover {
433
+ color: #00a8ff;
434
+ }
435
+
436
+ [data-ogsc] .hidden {display: none}
437
+
438
+ #keepId {float:none}
439
+
440
+ @media (max-width: 600px) {
441
+ .ignore {color: blue}
442
+ }
443
+ </style>
444
+ <style>
445
+ .keep {margin: 0}
446
+ </style>
447
+ </head>
448
+ <body>
449
+ <div id="keepId" class="keep ignore" style="color: red; display: inline">
450
+ <h1 class="hover-text-blue" style="margin: 0 0 16px">Title</h1>
451
+ <img src="https://example.com/image.jpg" style="border: 0; vertical-align: middle">
452
+ <div id="keepId" class="keep ignore" style="color: red; display: inline">text</div>
453
+ </div>
454
+ </body>
455
+ </html>`
456
+
457
+ const result = await Maizzle.removeInlinedClasses(html)
458
+
459
+ t.is(result, expected)
460
+ })
461
+
462
+ test('remove inlined selectors (disabled)', async t => {
463
+ const html = `<!DOCTYPE html>
464
+ <html>
465
+ <head>
466
+ <style>
467
+ .remove {color: red}
468
+ </style>
469
+ </head>
470
+ <body>
471
+ <div class="remove" style="color: red"></div>
472
+ </body>
473
+ </html>`
474
+
475
+ const expected = `<!DOCTYPE html>
476
+ <html>
477
+ <head>
478
+ <style>
479
+ .remove {color: red}
480
+ </style>
481
+ </head>
482
+ <body>
483
+ <div class="remove" style="color: red"></div>
484
+ </body>
485
+ </html>`
486
+
487
+ const result = await Maizzle.removeInlinedClasses(html, {removeInlinedClasses: false})
488
+
489
+ t.is(result, expected)
490
+ })