@maizzle/framework 4.0.0-alpha.8 → 4.0.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 (84) 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 -0
  8. package/package.json +91 -87
  9. package/src/commands/serve.js +15 -5
  10. package/src/generators/config.js +32 -32
  11. package/src/generators/output/index.js +4 -4
  12. package/src/generators/output/to-disk.js +208 -208
  13. package/src/generators/output/to-string.js +67 -71
  14. package/src/generators/postcss.js +29 -29
  15. package/src/generators/posthtml.js +66 -66
  16. package/src/generators/tailwindcss.js +116 -116
  17. package/src/index.js +17 -17
  18. package/src/transformers/attributeToStyle.js +90 -90
  19. package/src/transformers/baseUrl.js +69 -45
  20. package/src/transformers/extraAttributes.js +26 -26
  21. package/src/transformers/filters/defaultFilters.js +126 -0
  22. package/src/transformers/{transform.js → filters/index.js} +55 -51
  23. package/src/transformers/index.js +63 -60
  24. package/src/transformers/inlineCss.js +37 -50
  25. package/src/transformers/markdown.js +19 -19
  26. package/src/transformers/minify.js +21 -21
  27. package/src/transformers/plaintext.js +23 -23
  28. package/src/transformers/posthtmlMso.js +10 -10
  29. package/src/transformers/prettify.js +27 -20
  30. package/src/transformers/preventWidows.js +13 -13
  31. package/src/transformers/removeAttributes.js +17 -17
  32. package/src/transformers/removeInlineBackgroundColor.js +52 -52
  33. package/src/transformers/removeInlineSizes.js +41 -41
  34. package/src/transformers/removeInlinedSelectors.js +70 -71
  35. package/src/transformers/removeUnusedCss.js +40 -35
  36. package/src/transformers/replaceStrings.js +14 -14
  37. package/src/transformers/safeClassNames.js +24 -24
  38. package/src/transformers/shorthandInlineCSS.js +19 -0
  39. package/src/transformers/sixHex.js +33 -33
  40. package/src/transformers/urlParameters.js +17 -17
  41. package/src/utils/helpers.js +17 -17
  42. package/test/expected/posthtml/component.html +13 -13
  43. package/test/expected/posthtml/extend-template.html +2 -2
  44. package/test/expected/posthtml/fetch.html +5 -5
  45. package/test/expected/posthtml/layout.html +3 -3
  46. package/test/expected/transformers/atimport-in-style.html +2 -1
  47. package/test/expected/transformers/{base-image-url.html → base-url.html} +18 -2
  48. package/test/expected/transformers/filters.html +81 -0
  49. package/test/expected/transformers/preserve-transform-css.html +12 -3
  50. package/test/expected/useConfig.html +9 -9
  51. package/test/fixtures/basic.html +6 -6
  52. package/test/fixtures/posthtml/component.html +19 -19
  53. package/test/fixtures/posthtml/extend-template.html +7 -7
  54. package/test/fixtures/posthtml/fetch.html +9 -9
  55. package/test/fixtures/posthtml/layout.html +11 -11
  56. package/test/fixtures/transformers/{base-image-url.html → base-url.html} +18 -2
  57. package/test/fixtures/transformers/filters.html +87 -0
  58. package/test/fixtures/useConfig.html +9 -9
  59. package/test/stubs/assets/foo.bar +1 -1
  60. package/test/stubs/breaking/bad.html +5 -5
  61. package/test/stubs/components/component.html +5 -5
  62. package/test/stubs/config/config.js +10 -10
  63. package/test/stubs/config/config.maizzle-ci.js +10 -10
  64. package/test/stubs/data.json +14 -14
  65. package/test/stubs/events/before-create.html +1 -1
  66. package/test/stubs/layouts/basic.html +1 -1
  67. package/test/stubs/layouts/full.html +12 -12
  68. package/test/stubs/layouts/template.html +5 -5
  69. package/test/stubs/main.css +5 -5
  70. package/test/stubs/tailwind/content-source.html +1 -1
  71. package/test/stubs/tailwind/tailwind.css +3 -3
  72. package/test/stubs/template.html +10 -10
  73. package/test/stubs/templates/1.html +1 -1
  74. package/test/stubs/templates/2.test +1 -0
  75. package/test/test-config.js +19 -19
  76. package/test/test-postcss.js +8 -8
  77. package/test/test-posthtml.js +72 -66
  78. package/test/test-tailwindcss.js +117 -117
  79. package/test/test-todisk.js +42 -28
  80. package/test/test-tostring.js +148 -142
  81. package/test/test-transformers.js +78 -46
  82. package/xo.config.js +22 -22
  83. package/test/stubs/templates/2.html +0 -1
  84. package/test/stubs/templates/3.mzl +0 -1
package/test/fixtures/transformers/{base-image-url.html → base-url.html} RENAMED
@@ -58,13 +58,21 @@
58
58
 
59
59
  <div>
60
60
  <!--[if mso]>
61
- <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="image.jpg" style="600px;height:400px;" />
62
- <v:rect fill="false" stroke="false" style="position:absolute;600px;height:400px;">
61
+ <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="image.jpg" style="width:600px;height:400px;" />
62
+ <v:rect fill="false" stroke="false" style="position:absolute;width:600px;height:400px;">
63
63
  <v:textbox inset="0,0,0,0"><div><![endif]-->
64
64
  <div>test</div>
65
65
  <!--[if mso]></div></v:textbox></v:rect><![endif]-->
66
66
  </div>
67
67
 
68
+ <!--[if mso]>
69
+ <v:image src="image-2.jpg" xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px;height:400px;" />
70
+ <![endif]-->
71
+
72
+ <!--[if mso]>
73
+ <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image-3.jpg" style="width:600px;height:400px;" />
74
+ <![endif]-->
75
+
68
76
  <table>
69
77
  <tr>
70
78
  <td background="image.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
@@ -81,5 +89,13 @@
81
89
  </td>
82
90
  </tr>
83
91
  </table>
92
+
93
+ <!--[if mso]>
94
+ <v:fill type="tile" src="image.png" color="#7bceeb" />
95
+ <![endif]-->
96
+
97
+ <!--[if mso]>
98
+ <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
99
+ <![endif]-->
84
100
  </body>
85
101
  </html>
package/test/fixtures/transformers/filters.html ADDED
@@ -0,0 +1,87 @@
1
+ <!-- Append -->
2
+ <div append="ing append">test</div>
3
+ <!-- Prepend -->
4
+ <div prepend="test">ing prepend</div>
5
+
6
+ <!-- Uppercase -->
7
+ <div uppercase>test</div>
8
+ <!-- Lowercase -->
9
+ <div lowercase>TEST</div>
10
+ <!-- Capitalize -->
11
+ <div capitalize>test</div>
12
+
13
+ <!-- Ceil -->
14
+ <div ceil>1.2</div>
15
+ <!-- Floor -->
16
+ <div floor>1.2</div>
17
+ <!-- Round -->
18
+ <div round>1234.567</div>
19
+
20
+ <!-- Escape -->
21
+ <div escape>"&'<></div>
22
+ <!-- Escape Once -->
23
+ <div escape-once>1 &lt; 2 &amp; 3</div>
24
+
25
+ <!-- lstrip -->
26
+ <div lstrip> test </div>
27
+ <!-- rstrip -->
28
+ <div rstrip> test </div>
29
+ <!-- trim -->
30
+ <div trim> test </div>
31
+
32
+ <!-- Minus -->
33
+ <div minus="2">3.02</div>
34
+ <!-- Plus -->
35
+ <div plus="2">3.02</div>
36
+ <!-- Times -->
37
+ <div times="2">6.04</div>
38
+ <!-- Divide -->
39
+ <div divide-by="2">12.08</div>
40
+ <!-- Modulo -->
41
+ <div modulo="2">3</div>
42
+
43
+ <!-- Newline to br -->
44
+ <div newline-to-br>
45
+ test
46
+ test
47
+ </div>
48
+ <!-- Strip newlines -->
49
+ <div strip-newlines>
50
+ test
51
+ test
52
+ </div>
53
+
54
+ <!-- Remove -->
55
+ <div remove="rain">I strained to see the train through the rain</div>
56
+ <!-- Remove First -->
57
+ <div remove-first="rain">I strained to see the train through the rain</div>
58
+
59
+ <!-- Replace -->
60
+ <div replace="t|test">test</div>
61
+ <!-- Replace First -->
62
+ <div replace-first="t|test">test</div>
63
+
64
+ <!-- Size -->
65
+ <div size>This string is 33 characters long</div>
66
+
67
+ <!-- Slice -->
68
+ <div slice="1">test</div>
69
+ <!-- Slice with endIndex -->
70
+ <div slice="0,-1">test</div>
71
+
72
+ <!-- Truncate -->
73
+ <div truncate="17">Ground control to Major Tom.</div>
74
+ <!-- Truncate (do nothing) -->
75
+ <div truncate="17">Ground control to</div>
76
+ <!-- Truncate with custom ellipsis -->
77
+ <div truncate="17, no one">Ground control to Major Tom.</div>
78
+
79
+ <!-- Truncate words -->
80
+ <div truncate-words="2">Ground control to Major Tom.</div>
81
+ <!-- Truncate words with custom ellipsis -->
82
+ <div truncate-words="2, over and out">Ground control to Major Tom.</div>
83
+
84
+ <!-- URL decode -->
85
+ <div url-decode>%27Stop%21%27+said+Fred</div>
86
+ <!-- URL encode -->
87
+ <div url-encode>user@example.com</div>
package/test/fixtures/useConfig.html CHANGED
@@ -1,9 +1,9 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <title>test></title>
5
- </head>
6
- <body>
7
- <div>{{ page.build.templates.destination.path }}</div>
8
- </body>
9
- </html>
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <title>test></title>
5
+ </head>
6
+ <body>
7
+ <div>{{ page.build.templates.destination.path }}</div>
8
+ </body>
9
+ </html>
package/test/stubs/assets/foo.bar CHANGED
@@ -1 +1 @@
1
- Some asset file...
1
+ Some asset file...
package/test/stubs/breaking/bad.html CHANGED
@@ -1,5 +1,5 @@
1
- ---
2
- title: [THIS] should break
3
- ---
4
-
5
- <div>{{ page.title }}</div>
1
+ ---
2
+ title: [THIS] should break
3
+ ---
4
+
5
+ <div>{{ page.title }}</div>
package/test/stubs/components/component.html CHANGED
@@ -1,5 +1,5 @@
1
- Variable from attribute: [[ text ]]
2
-
3
- Variable from locals attribute: [[ foo ]]
4
-
5
- <content></content>
1
+ Variable from attribute: [[ text ]]
2
+
3
+ Variable from locals attribute: [[ foo ]]
4
+
5
+ <content></content>
package/test/stubs/config/config.js CHANGED
@@ -1,10 +1,10 @@
1
- module.exports = {
2
- build: {
3
- templates: {
4
- source: '../templates',
5
- destination: {
6
- path: 'build_local'
7
- }
8
- }
9
- }
10
- }
1
+ module.exports = {
2
+ build: {
3
+ templates: {
4
+ source: '../templates',
5
+ destination: {
6
+ path: 'build_local'
7
+ }
8
+ }
9
+ }
10
+ }
package/test/stubs/config/config.maizzle-ci.js CHANGED
@@ -1,10 +1,10 @@
1
- module.exports = {
2
- build: {
3
- templates: {
4
- source: '../templates',
5
- destination: {
6
- path: 'build_production'
7
- }
8
- }
9
- }
10
- }
1
+ module.exports = {
2
+ build: {
3
+ templates: {
4
+ source: '../templates',
5
+ destination: {
6
+ path: 'build_production'
7
+ }
8
+ }
9
+ }
10
+ }
package/test/stubs/data.json CHANGED
@@ -1,14 +1,14 @@
1
- [
2
- {
3
- "id": 1,
4
- "name": "Leanne Graham"
5
- },
6
- {
7
- "id": 2,
8
- "name": "Ervin Howell"
9
- },
10
- {
11
- "id": 3,
12
- "name": "Clementine Bauch"
13
- }
14
- ]
1
+ [
2
+ {
3
+ "id": 1,
4
+ "name": "Leanne Graham"
5
+ },
6
+ {
7
+ "id": 2,
8
+ "name": "Ervin Howell"
9
+ },
10
+ {
11
+ "id": 3,
12
+ "name": "Clementine Bauch"
13
+ }
14
+ ]
package/test/stubs/events/before-create.html CHANGED
@@ -1 +1 @@
1
- Foo is {{ page.foo }}
1
+ Foo is {{ page.foo }}
package/test/stubs/layouts/basic.html CHANGED
@@ -1 +1 @@
1
- <block name="template"></block>
1
+ <block name="template"></block>
package/test/stubs/layouts/full.html CHANGED
@@ -1,12 +1,12 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <if condition="page.css">
5
- <style>{{{ page.css }}}</style>
6
- </if>
7
- </head>
8
- <body>
9
- <block name="template"></block>
10
- </body>
11
- </html>
12
-
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <if condition="page.css">
5
+ <style>{{{ page.css }}}</style>
6
+ </if>
7
+ </head>
8
+ <body>
9
+ <block name="template"></block>
10
+ </body>
11
+ </html>
12
+
package/test/stubs/layouts/template.html CHANGED
@@ -1,5 +1,5 @@
1
- ---
2
- template: base
3
- ---
4
-
5
- <block name="template"></block>
1
+ ---
2
+ template: base
3
+ ---
4
+
5
+ <block name="template"></block>
package/test/stubs/main.css CHANGED
@@ -1,5 +1,5 @@
1
- @import "tailwindcss/utilities";
2
-
3
- .foo {
4
- color: red;
5
- }
1
+ @import "tailwindcss/utilities";
2
+
3
+ .foo {
4
+ color: red;
5
+ }
package/test/stubs/tailwind/content-source.html CHANGED
@@ -1 +1 @@
1
- <div class="hidden"></div>
1
+ <div class="hidden"></div>
package/test/stubs/tailwind/tailwind.css CHANGED
@@ -1,3 +1,3 @@
1
- .example {
2
- @apply hidden;
3
- }
1
+ .example {
2
+ @apply hidden;
3
+ }
package/test/stubs/template.html CHANGED
@@ -1,10 +1,10 @@
1
- ---
2
- template: first
3
- ---
4
-
5
- <extends src="test/stubs/layouts/template.html">
6
- <block name="template">
7
- Parent
8
- <block name="button">Child in first.html</block>
9
- </block>
10
- </extends>
1
+ ---
2
+ template: first
3
+ ---
4
+
5
+ <extends src="test/stubs/layouts/template.html">
6
+ <block name="template">
7
+ Parent
8
+ <block name="button">Child in first.html</block>
9
+ </block>
10
+ </extends>
package/test/stubs/templates/1.html CHANGED
@@ -1 +1 @@
1
- <a href="https://example.com">Test</a>
1
+ html
package/test/stubs/templates/2.test ADDED
@@ -0,0 +1 @@
1
+ test
package/test/test-config.js CHANGED
@@ -1,19 +1,19 @@
1
- const test = require('ava')
2
- const Config = require('../src/generators/config')
3
-
4
- test('returns the merged config', async t => {
5
- const config = await Config.getMerged('maizzle-ci')
6
- t.is(config.env, 'maizzle-ci')
7
- })
8
-
9
- test('throws if env name is not a string', async t => {
10
- await t.throwsAsync(async () => {
11
- await Config.getMerged(false)
12
- }, {instanceOf: TypeError, message: `env name must be a string, received boolean(false)`})
13
- })
14
-
15
- test('throws if a config could not be loaded for the specified environment', async t => {
16
- await t.throwsAsync(async () => {
17
- await Config.getMerged('fake')
18
- }, {instanceOf: Error, message: `could not load config.fake.js`})
19
- })
1
+ const test = require('ava')
2
+ const Config = require('../src/generators/config')
3
+
4
+ test('returns the merged config', async t => {
5
+ const config = await Config.getMerged('maizzle-ci')
6
+ t.is(config.env, 'maizzle-ci')
7
+ })
8
+
9
+ test('throws if env name is not a string', async t => {
10
+ await t.throwsAsync(async () => {
11
+ await Config.getMerged(false)
12
+ }, {instanceOf: TypeError, message: `env name must be a string, received boolean(false)`})
13
+ })
14
+
15
+ test('throws if a config could not be loaded for the specified environment', async t => {
16
+ await t.throwsAsync(async () => {
17
+ await Config.getMerged('fake')
18
+ }, {instanceOf: Error, message: `could not load config.fake.js`})
19
+ })
package/test/test-postcss.js CHANGED
@@ -1,8 +1,8 @@
1
- const test = require('ava')
2
- const PostCSS = require('../src/generators/postcss')
3
-
4
- test('throws on processing error', async t => {
5
- await t.throwsAsync(async () => {
6
- await PostCSS.process(null, {})
7
- }, {instanceOf: Error, message: 'PostCSS processing failed'})
8
- })
1
+ const test = require('ava')
2
+ const PostCSS = require('../src/generators/postcss')
3
+
4
+ test('throws on processing error', async t => {
5
+ await t.throwsAsync(async () => {
6
+ await PostCSS.process(null, {})
7
+ }, {instanceOf: Error, message: 'PostCSS processing failed'})
8
+ })
package/test/test-posthtml.js CHANGED
@@ -1,66 +1,72 @@
1
- const test = require('ava')
2
- const Maizzle = require('../src')
3
-
4
- const path = require('path')
5
- const {readFileSync} = require('fs')
6
-
7
- const fixture = file => readFileSync(path.join(__dirname, 'fixtures', `${file}.html`), 'utf8')
8
- const expected = file => readFileSync(path.join(__dirname, 'expected', `${file}.html`), 'utf8')
9
-
10
- const renderString = (string, options = {}) => Maizzle.render(string, options).then(({html}) => html)
11
-
12
- test('layouts', async t => {
13
- const source = fixture('posthtml/layout')
14
-
15
- const html = await renderString(source, {maizzle: {env: 'maizzle-ci'}})
16
-
17
- t.is(html.trim(), expected('posthtml/layout').trim())
18
- })
19
-
20
- test('inheritance when extending a template', async t => {
21
- let html = await renderString(fixture('posthtml/extend-template'))
22
- html = html.replace(/[^\S\r\n]+$/gm, '').trim()
23
-
24
- t.is(html, expected('posthtml/extend-template').trim())
25
- })
26
-
27
- test('components', async t => {
28
- const source = fixture('posthtml/component')
29
- const options = {
30
- maizzle: {
31
- env: 'maizzle-ci',
32
- build: {
33
- components: {
34
- expressions: {
35
- delimiters: ['[[', ']]']
36
- }
37
- }
38
- }
39
- }
40
- }
41
-
42
- const html = await renderString(source, options)
43
-
44
- t.is(html.trim(), expected('posthtml/component').trim())
45
- })
46
-
47
- test('fetch component', async t => {
48
- const source = fixture('posthtml/fetch')
49
- const options = {
50
- maizzle: {
51
- env: 'maizzle-ci',
52
- build: {
53
- posthtml: {
54
- expressions: {
55
- delimiters: ['[[', ']]']
56
- }
57
- }
58
- }
59
- }
60
- }
61
-
62
- let html = await renderString(source, options)
63
- html = html.replace(/[^\S\r\n]+$/gm, '')
64
-
65
- t.is(html.trim(), expected('posthtml/fetch').trim())
66
- })
1
+ const test = require('ava')
2
+ const Maizzle = require('../src')
3
+
4
+ const path = require('path')
5
+ const fs = require('fs')
6
+
7
+ const readFile = (dir, filename) => fs.promises
8
+ .readFile(path.join(__dirname, dir, `${filename}.html`), 'utf8')
9
+ .then(html => html.trim())
10
+
11
+ const fixture = file => readFile('fixtures', file)
12
+ const expected = file => readFile('expected', file)
13
+
14
+ const renderString = (string, options = {}) => Maizzle.render(string, options).then(({html}) => html)
15
+
16
+ test('layouts', async t => {
17
+ const source = await fixture('posthtml/layout')
18
+
19
+ const html = await renderString(source, {maizzle: {env: 'maizzle-ci'}})
20
+
21
+ t.is(html.trim(), await expected('posthtml/layout'))
22
+ })
23
+
24
+ test('inheritance when extending a template', async t => {
25
+ const source = await fixture('posthtml/extend-template')
26
+ let html = await renderString(source)
27
+
28
+ html = html.replace(/[^\S\r\n]+$/gm, '').trim()
29
+
30
+ t.is(html, await expected('posthtml/extend-template'))
31
+ })
32
+
33
+ test('components', async t => {
34
+ const source = await fixture('posthtml/component')
35
+ const options = {
36
+ maizzle: {
37
+ env: 'maizzle-ci',
38
+ build: {
39
+ components: {
40
+ expressions: {
41
+ delimiters: ['[[', ']]']
42
+ }
43
+ }
44
+ }
45
+ }
46
+ }
47
+
48
+ const html = await renderString(source, options)
49
+
50
+ t.is(html.trim(), await expected('posthtml/component'))
51
+ })
52
+
53
+ test('fetch component', async t => {
54
+ const source = await fixture('posthtml/fetch')
55
+ const options = {
56
+ maizzle: {
57
+ env: 'maizzle-ci',
58
+ build: {
59
+ posthtml: {
60
+ expressions: {
61
+ delimiters: ['[[', ']]']
62
+ }
63
+ }
64
+ }
65
+ }
66
+ }
67
+
68
+ let html = await renderString(source, options)
69
+ html = html.replace(/[^\S\r\n]+$/gm, '')
70
+
71
+ t.is(html.trim(), await expected('posthtml/fetch'))
72
+ })