@maizzle/framework 3.7.2 → 4.0.0-alpha.1

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 (37) hide show
  1. package/.github/workflows/nodejs.yml +28 -29
  2. package/package.json +87 -84
  3. package/src/generators/output/to-disk.js +139 -111
  4. package/src/generators/output/to-string.js +5 -2
  5. package/src/generators/posthtml.js +61 -60
  6. package/src/generators/tailwindcss.js +49 -18
  7. package/src/index.js +24 -36
  8. package/src/transformers/{attribute-to-style.js → attributeToStyle.js} +0 -0
  9. package/src/transformers/baseUrl.js +45 -0
  10. package/src/transformers/{extra-attributes.js → extraAttributes.js} +0 -0
  11. package/src/transformers/index.js +57 -57
  12. package/src/transformers/{inline.js → inlineCss.js} +0 -0
  13. package/src/transformers/{posthtml-mso.js → posthtmlMso.js} +0 -0
  14. package/src/transformers/{prevent-widows.js → preventWidows.js} +0 -0
  15. package/src/transformers/{remove-attributes.js → removeAttributes.js} +1 -1
  16. package/src/transformers/{remove-inline-bgcolor.js → removeInlineBackgroundColor.js} +0 -0
  17. package/src/transformers/{remove-inline-sizes.js → removeInlineSizes.js} +0 -0
  18. package/src/transformers/{remove-unused-css.js → removeUnusedCss.js} +0 -0
  19. package/src/transformers/{replace-strings.js → replaceStrings.js} +0 -0
  20. package/src/transformers/{safe-class-names.js → safeClassNames.js} +8 -2
  21. package/src/transformers/{six-hex.js → sixHex.js} +10 -10
  22. package/src/transformers/transform.js +4 -6
  23. package/src/transformers/{url-params.js → urlParameters.js} +0 -0
  24. package/src/utils/helpers.js +2 -8
  25. package/test/expected/transformers/base-image-url.html +83 -7
  26. package/test/expected/transformers/transform-postcss.html +19 -0
  27. package/test/expected/useConfig.html +9 -0
  28. package/test/fixtures/transformers/base-image-url.html +85 -7
  29. package/test/fixtures/useConfig.html +9 -0
  30. package/test/stubs/tailwind/preserve.html +1 -0
  31. package/test/test-misc.js +8 -8
  32. package/test/test-tailwind.js +100 -73
  33. package/test/test-todisk.js +70 -28
  34. package/test/test-tostring.js +8 -0
  35. package/test/test-transformers.js +343 -320
  36. package/xo.config.js +22 -19
  37. package/src/transformers/base-image-url.js +0 -9
package/test/test-transformers.js CHANGED
@@ -1,320 +1,343 @@
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&nbsp;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 URL (string)', 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('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, expected('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('<td style="color: #ffc" bgcolor="#000"></td>')
265
+
266
+ t.is(html, '<td style="color: #ffffcc" bgcolor="#000000"></td>');
267
+ })
268
+
269
+ test('six digit hex (disabled)', async t => {
270
+ const html = await Maizzle.ensureSixHEX('<td style="color: #ffc" bgcolor="#000"></td>', {sixHex: false})
271
+
272
+ t.is(html, '<td style="color: #ffc" bgcolor="#000"></td>');
273
+ })
274
+
275
+ test('transform contents (javascript)', async t => {
276
+ const html = await Maizzle.transformContents('<div uppercase>test</div>', {uppercase: string => string.toUpperCase()})
277
+
278
+ t.is(html, '<div>TEST</div>')
279
+ })
280
+
281
+ test('transform contents (postcss)', async t => {
282
+ const html = await Maizzle.transformContents(
283
+ `<style postcss>
284
+ div {
285
+ @apply hidden container;
286
+ }
287
+ </style>`
288
+ )
289
+
290
+ t.is(html, expected('transform-postcss').trim())
291
+ })
292
+
293
+ test('url parameters', async t => {
294
+ const html = await Maizzle.addURLParams('<a href="https://example.com">test</a>', {bar: 'baz', qix: 'qux'})
295
+
296
+ t.is(html, '<a href="https://example.com?bar=baz&qix=qux">test</a>')
297
+ })
298
+
299
+ test('attribute to style', async t => {
300
+ const html = `<table width="100%" height="600" align="left" bgcolor="#FFFFFF" background="https://example.com/image.jpg">
301
+ <tr>
302
+ <td align="center" valign="top"></td>
303
+ </tr>
304
+ </table>`
305
+
306
+ 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')">
307
+ <tr style="">
308
+ <td align="center" valign="top" style="text-align: center; vertical-align: top"></td>
309
+ </tr>
310
+ </table>`
311
+
312
+ const html2 = `<table align="center">
313
+ <tr>
314
+ <td></td>
315
+ </tr>
316
+ </table>`
317
+
318
+ const expected2 = `<table align="center" style="margin-left: auto; margin-right: auto">
319
+ <tr style="">
320
+ <td style=""></td>
321
+ </tr>
322
+ </table>`
323
+
324
+ const withArray = await Maizzle.attributeToStyle(html, ['width', 'height', 'bgcolor', 'background', 'align', 'valign'])
325
+ const withOptionBoolean = await Maizzle.attributeToStyle(html2, {inlineCSS: {attributeToStyle: true}})
326
+ const withOptionArray = await Maizzle.attributeToStyle(html2, {inlineCSS: {attributeToStyle: ['align']}})
327
+
328
+ t.is(withArray, expected)
329
+ t.is(withOptionBoolean, expected2)
330
+ t.is(withOptionArray, expected2)
331
+ })
332
+
333
+ test('prevent widows', async t => {
334
+ const html = await Maizzle.preventWidows('lorem ipsum dolor')
335
+
336
+ t.is(html, 'lorem ipsum&nbsp;dolor')
337
+ })
338
+
339
+ test('markdown (disabled)', async t => {
340
+ const html = await Maizzle.markdown('> a quote', {markdown: false})
341
+
342
+ t.is(html, '> a quote')
343
+ })