@maizzle/framework 4.0.0-alpha.9 → 4.0.2

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