@maizzle/framework 4.0.0-alpha.1 → 4.0.0-alpha.10
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.
- package/.github/workflows/nodejs.yml +1 -1
- package/bin/maizzle +3 -0
- package/package.json +16 -12
- package/src/commands/build.js +32 -0
- package/src/commands/serve.js +156 -0
- package/src/functions/plaintext.js +5 -0
- package/src/functions/render.js +5 -0
- package/src/generators/output/to-disk.js +90 -77
- package/src/generators/output/to-string.js +2 -6
- package/src/generators/plaintext.js +49 -52
- package/src/generators/postcss.js +29 -0
- package/src/generators/posthtml.js +11 -6
- package/src/generators/tailwindcss.js +116 -115
- package/src/index.js +14 -148
- package/src/transformers/baseUrl.js +33 -9
- package/src/transformers/filters/defaultFilters.js +126 -0
- package/src/transformers/filters/index.js +55 -0
- package/src/transformers/index.js +13 -7
- package/src/transformers/inlineCss.js +1 -14
- package/src/transformers/minify.js +1 -1
- package/src/transformers/prettify.js +16 -9
- package/src/transformers/removeInlineBackgroundColor.js +1 -1
- package/src/transformers/removeInlinedSelectors.js +70 -0
- package/src/transformers/removeUnusedCss.js +40 -20
- package/src/transformers/shorthandInlineCSS.js +19 -0
- package/src/transformers/sixHex.js +24 -1
- package/test/expected/posthtml/component.html +13 -0
- package/test/expected/{inheritance.html → posthtml/extend-template.html} +2 -2
- package/test/expected/posthtml/fetch.html +5 -0
- package/test/expected/posthtml/layout.html +3 -0
- package/test/expected/transformers/atimport-in-style.html +15 -0
- package/test/expected/transformers/{base-image-url.html → base-url.html} +18 -2
- package/test/expected/transformers/filters.html +81 -0
- package/test/expected/transformers/preserve-transform-css.html +36 -0
- package/test/expected/useConfig.html +9 -9
- package/test/fixtures/basic.html +9 -9
- package/test/fixtures/posthtml/component.html +19 -0
- package/test/fixtures/{inheritance.html → posthtml/extend-template.html} +7 -7
- package/test/fixtures/posthtml/fetch.html +9 -0
- package/test/fixtures/posthtml/layout.html +11 -0
- package/test/fixtures/transformers/atimport-in-style.html +11 -0
- package/test/fixtures/transformers/{base-image-url.html → base-url.html} +18 -2
- package/test/fixtures/transformers/filters.html +87 -0
- package/test/fixtures/transformers/preserve-transform-css.html +25 -0
- package/test/fixtures/useConfig.html +9 -9
- package/test/stubs/components/component.html +5 -0
- package/test/stubs/data.json +14 -0
- package/test/stubs/layouts/basic.html +1 -0
- package/test/stubs/{layout.html → layouts/full.html} +0 -0
- package/test/stubs/{layout-basic.html → layouts/template.html} +5 -5
- package/test/stubs/post.css +6 -0
- package/test/stubs/tailwind/{preserve.html → content-source.html} +0 -0
- package/test/stubs/tailwind/tailwind.css +3 -0
- package/test/stubs/template.html +10 -10
- package/test/stubs/templates/1.html +1 -1
- package/test/stubs/templates/2.test +1 -0
- package/test/test-config.js +19 -19
- package/test/test-postcss.js +8 -0
- package/test/test-posthtml.js +72 -0
- package/test/{test-tailwind.js → test-tailwindcss.js} +117 -100
- package/test/test-todisk.js +79 -28
- package/test/test-tostring.js +148 -132
- package/test/test-transformers.js +216 -49
- package/src/transformers/transform.js +0 -22
- package/test/expected/transformers/transform-postcss.html +0 -19
- package/test/stubs/templates/2.html +0 -1
- package/test/stubs/templates/3.mzl +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
---
|
|
2
|
-
template: second
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
<extends src="test/stubs/template.html">
|
|
6
|
-
<block name="button">Child in second.html</block>
|
|
7
|
-
</extends>
|
|
1
|
+
---
|
|
2
|
+
template: second
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<extends src="test/stubs/template.html">
|
|
6
|
+
<block name="button">Child in second.html</block>
|
|
7
|
+
</extends>
|
|
@@ -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>
|
|
@@ -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 < 2 & 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>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<style tailwindcss preserve>
|
|
5
|
+
div {
|
|
6
|
+
@apply uppercase;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
[data-ogsc] .inexistent {
|
|
10
|
+
color: #ef4444;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
div > u + .body .gmail-android-block {
|
|
14
|
+
display: block !important;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
u + #body a {
|
|
18
|
+
color: inherit;
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
21
|
+
</head>
|
|
22
|
+
<body>
|
|
23
|
+
<div>test</div>
|
|
24
|
+
</body>
|
|
25
|
+
</html>
|
|
@@ -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>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<block name="template"></block>
|
|
File without changes
|
|
@@ -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>
|
|
File without changes
|
package/test/stubs/template.html
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
---
|
|
2
|
-
template: first
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
<extends src="test/stubs/
|
|
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 +1 @@
|
|
|
1
|
-
|
|
1
|
+
html
|
|
@@ -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
|
+
})
|
|
@@ -0,0 +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
|
+
})
|
|
@@ -0,0 +1,72 @@
|
|
|
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
|
+
})
|
|
@@ -1,100 +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
|
|
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
|
|
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
|
|
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
|
|
85
|
-
const
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
t.
|
|
99
|
-
|
|
100
|
-
|
|
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
|
+
})
|