@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
@@ -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
+ ]
@@ -1 +1 @@
1
- Foo is {{ page.foo }}
1
+ Foo is {{ page.foo }}
@@ -1 +1 @@
1
- <block name="template"></block>
1
+ <block name="template"></block>
@@ -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
+
@@ -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>
@@ -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
+ }
@@ -1 +1 @@
1
- <div class="hidden"></div>
1
+ <div class="hidden"></div>
@@ -1,3 +1,3 @@
1
- .example {
2
- @apply hidden;
3
- }
1
+ .example {
2
+ @apply hidden;
3
+ }
@@ -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>
@@ -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
+ })
@@ -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
+ })
@@ -2,30 +2,36 @@ const test = require('ava')
2
2
  const Maizzle = require('../src')
3
3
 
4
4
  const path = require('path')
5
- const {readFileSync} = require('fs')
5
+ const fs = require('fs')
6
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')
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)
9
13
 
10
14
  const renderString = (string, options = {}) => Maizzle.render(string, options).then(({html}) => html)
11
15
 
12
16
  test('layouts', async t => {
13
- const source = fixture('posthtml/layout')
17
+ const source = await fixture('posthtml/layout')
14
18
 
15
19
  const html = await renderString(source, {maizzle: {env: 'maizzle-ci'}})
16
20
 
17
- t.is(html.trim(), expected('posthtml/layout').trim())
21
+ t.is(html.trim(), await expected('posthtml/layout'))
18
22
  })
19
23
 
20
24
  test('inheritance when extending a template', async t => {
21
- let html = await renderString(fixture('posthtml/extend-template'))
25
+ const source = await fixture('posthtml/extend-template')
26
+ let html = await renderString(source)
27
+
22
28
  html = html.replace(/[^\S\r\n]+$/gm, '').trim()
23
29
 
24
- t.is(html, expected('posthtml/extend-template').trim())
30
+ t.is(html, await expected('posthtml/extend-template'))
25
31
  })
26
32
 
27
33
  test('components', async t => {
28
- const source = fixture('posthtml/component')
34
+ const source = await fixture('posthtml/component')
29
35
  const options = {
30
36
  maizzle: {
31
37
  env: 'maizzle-ci',
@@ -41,11 +47,11 @@ test('components', async t => {
41
47
 
42
48
  const html = await renderString(source, options)
43
49
 
44
- t.is(html.trim(), expected('posthtml/component').trim())
50
+ t.is(html.trim(), await expected('posthtml/component'))
45
51
  })
46
52
 
47
53
  test('fetch component', async t => {
48
- const source = fixture('posthtml/fetch')
54
+ const source = await fixture('posthtml/fetch')
49
55
  const options = {
50
56
  maizzle: {
51
57
  env: 'maizzle-ci',
@@ -62,5 +68,5 @@ test('fetch component', async t => {
62
68
  let html = await renderString(source, options)
63
69
  html = html.replace(/[^\S\r\n]+$/gm, '')
64
70
 
65
- t.is(html.trim(), expected('posthtml/fetch').trim())
71
+ t.is(html.trim(), await expected('posthtml/fetch'))
66
72
  })
@@ -1,117 +1,117 @@
1
- const test = require('ava')
2
- const ora = require('ora')
3
- const Tailwind = require('../src/generators/tailwindcss')
4
-
5
- test('throws on compile error', async t => {
6
- await t.throwsAsync(async () => {
7
- const spinner = ora('Compiling Tailwind CSS...').start()
8
- await Tailwind.compile('.test {@apply inexistent;}', '<div class="test">Test</a>', {}, {}, spinner)
9
- }, {instanceOf: Error, message: 'Tailwind CSS compilation failed'})
10
- })
11
-
12
- test('uses defaults if no config specified', async t => {
13
- const css = await Tailwind.compile(
14
- '@tailwind utilities;',
15
- '<p class="xl:z-0"></p>',
16
- {},
17
- {env: 'production'}
18
- )
19
-
20
- t.not(css, undefined)
21
- t.true(css.includes('.xl\\:z-0'))
22
- })
23
-
24
- test('uses css file provided in environment config', async t => {
25
- const config = {
26
- env: 'production',
27
- build: {
28
- tailwind: {
29
- css: './test/stubs/main.css'
30
- }
31
- }
32
- }
33
-
34
- const css = await Tailwind.compile('', '<div class="text-center foo">test</div>', {}, config)
35
-
36
- t.not(css, undefined)
37
- t.true(css.includes('.text-center'))
38
- t.true(css.includes('.foo'))
39
- })
40
-
41
- test('works with custom `content` sources', async t => {
42
- const css = await Tailwind.compile(
43
- '@tailwind utilities;',
44
- '<div class="hidden"></div>',
45
- {
46
- content: ['./test/stubs/tailwind/*.*']
47
- }
48
- )
49
-
50
- t.true(css.includes('.hidden'))
51
- })
52
-
53
- test('works with custom `files` sources', async t => {
54
- const css = await Tailwind.compile(
55
- '@tailwind utilities;',
56
- '<div></div>',
57
- {
58
- content: {
59
- files: ['./test/stubs/tailwind/*.*']
60
- }
61
- }
62
- )
63
-
64
- t.true(css.includes('.hidden'))
65
- })
66
-
67
- test('uses maizzle template path as content source', async t => {
68
- const css = await Tailwind.compile(
69
- '@tailwind utilities;',
70
- '<div></div>',
71
- {},
72
- {
73
- build: {
74
- templates: {
75
- source: './test/stubs/tailwind'
76
- }
77
- }
78
- }
79
- )
80
-
81
- t.true(css.includes('.hidden'))
82
- })
83
-
84
- test('uses maizzle template path as content source (single file)', async t => {
85
- const css = await Tailwind.compile(
86
- '@tailwind utilities;',
87
- '<div></div>',
88
- {},
89
- {
90
- build: {
91
- templates: {
92
- source: './test/stubs/tailwind/content-source.html'
93
- }
94
- }
95
- }
96
- )
97
-
98
- t.true(css.includes('.hidden'))
99
- })
100
-
101
- test('uses custom postcss plugins from the maizzle config', async t => {
102
- const maizzleConfig = {
103
- env: 'production',
104
- build: {
105
- postcss: {
106
- plugins: [
107
- require('autoprefixer')({overrideBrowserslist: ['> 0.1%']})
108
- ]
109
- }
110
- }
111
- }
112
-
113
- const css = await Tailwind.compile('.test {transform: scale(0.5)}', '<div class="test">Test</a>', {}, maizzleConfig)
114
-
115
- t.not(css, undefined)
116
- t.is(css.trim(), '.inline {display: inline !important} .table {display: table !important} .contents {display: contents !important} .truncate {overflow: hidden !important;text-overflow: ellipsis !important;white-space: nowrap !important} .uppercase {text-transform: uppercase !important} .lowercase {text-transform: lowercase !important} .capitalize {text-transform: capitalize !important} .test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
117
- })
1
+ const test = require('ava')
2
+ const ora = require('ora')
3
+ const Tailwind = require('../src/generators/tailwindcss')
4
+
5
+ test('throws on compile error', async t => {
6
+ await t.throwsAsync(async () => {
7
+ const spinner = ora('Compiling Tailwind CSS...').start()
8
+ await Tailwind.compile('.test {@apply inexistent;}', '<div class="test">Test</a>', {}, {}, spinner)
9
+ }, {instanceOf: Error, message: 'Tailwind CSS compilation failed'})
10
+ })
11
+
12
+ test('uses defaults if no config specified', async t => {
13
+ const css = await Tailwind.compile(
14
+ '@tailwind utilities;',
15
+ '<p class="xl:z-0"></p>',
16
+ {},
17
+ {env: 'production'}
18
+ )
19
+
20
+ t.not(css, undefined)
21
+ t.true(css.includes('.xl\\:z-0'))
22
+ })
23
+
24
+ test('uses css file provided in environment config', async t => {
25
+ const config = {
26
+ env: 'production',
27
+ build: {
28
+ tailwind: {
29
+ css: './test/stubs/main.css'
30
+ }
31
+ }
32
+ }
33
+
34
+ const css = await Tailwind.compile('', '<div class="text-center foo">test</div>', {}, config)
35
+
36
+ t.not(css, undefined)
37
+ t.true(css.includes('.text-center'))
38
+ t.true(css.includes('.foo'))
39
+ })
40
+
41
+ test('works with custom `content` sources', async t => {
42
+ const css = await Tailwind.compile(
43
+ '@tailwind utilities;',
44
+ '<div class="hidden"></div>',
45
+ {
46
+ content: ['./test/stubs/tailwind/*.*']
47
+ }
48
+ )
49
+
50
+ t.true(css.includes('.hidden'))
51
+ })
52
+
53
+ test('works with custom `files` sources', async t => {
54
+ const css = await Tailwind.compile(
55
+ '@tailwind utilities;',
56
+ '<div></div>',
57
+ {
58
+ content: {
59
+ files: ['./test/stubs/tailwind/*.*']
60
+ }
61
+ }
62
+ )
63
+
64
+ t.true(css.includes('.hidden'))
65
+ })
66
+
67
+ test('uses maizzle template path as content source', async t => {
68
+ const css = await Tailwind.compile(
69
+ '@tailwind utilities;',
70
+ '<div></div>',
71
+ {},
72
+ {
73
+ build: {
74
+ templates: {
75
+ source: './test/stubs/tailwind'
76
+ }
77
+ }
78
+ }
79
+ )
80
+
81
+ t.true(css.includes('.hidden'))
82
+ })
83
+
84
+ test('uses maizzle template path as content source (single file)', async t => {
85
+ const css = await Tailwind.compile(
86
+ '@tailwind utilities;',
87
+ '<div></div>',
88
+ {},
89
+ {
90
+ build: {
91
+ templates: {
92
+ source: './test/stubs/tailwind/content-source.html'
93
+ }
94
+ }
95
+ }
96
+ )
97
+
98
+ t.true(css.includes('.hidden'))
99
+ })
100
+
101
+ test('uses custom postcss plugins from the maizzle config', async t => {
102
+ const maizzleConfig = {
103
+ env: 'production',
104
+ build: {
105
+ postcss: {
106
+ plugins: [
107
+ require('autoprefixer')({overrideBrowserslist: ['> 0.1%']})
108
+ ]
109
+ }
110
+ }
111
+ }
112
+
113
+ const css = await Tailwind.compile('.test {transform: scale(0.5)}', '<div class="test">Test</a>', {}, maizzleConfig)
114
+
115
+ t.not(css, undefined)
116
+ t.is(css.trim(), '.inline {display: inline !important} .table {display: table !important} .contents {display: contents !important} .truncate {overflow: hidden !important;text-overflow: ellipsis !important;white-space: nowrap !important} .uppercase {text-transform: uppercase !important} .lowercase {text-transform: lowercase !important} .capitalize {text-transform: capitalize !important} .test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
117
+ })
@@ -170,7 +170,7 @@ test('outputs plaintext files', async t => {
170
170
 
171
171
  t.is(plaintext[0], `${t.context.folder}/plaintext.txt`)
172
172
  t.is(plaintextContent, 'Show in HTML\nShow in plaintext')
173
- t.is(htmlContent, '<div>Show in HTML</div>\n')
173
+ t.is(htmlContent, '<div>Show in HTML</div>\n\n')
174
174
  })
175
175
 
176
176
  test('outputs plaintext files (custom path)', async t => {