npm - @maizzle/framework - Versions diffs - 3.7.1 → 4.0.0-alpha.2 - Mend

@maizzle/framework 3.7.1 → 4.0.0-alpha.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 (39) hide show

package/.github/dependabot.yml +11 -11
package/.github/workflows/nodejs.yml +28 -29
package/package.json +86 -84
package/src/generators/output/to-disk.js +144 -111
package/src/generators/output/to-string.js +71 -64
package/src/generators/posthtml.js +61 -60
package/src/generators/tailwindcss.js +57 -34
package/src/index.js +24 -36
package/src/transformers/{attribute-to-style.js → attributeToStyle.js} +0 -0
package/src/transformers/baseUrl.js +45 -0
package/src/transformers/{extra-attributes.js → extraAttributes.js} +0 -0
package/src/transformers/index.js +13 -13
package/src/transformers/{inline.js → inlineCss.js} +0 -0
package/src/transformers/{posthtml-mso.js → posthtmlMso.js} +0 -0
package/src/transformers/{prevent-widows.js → preventWidows.js} +0 -0
package/src/transformers/{remove-attributes.js → removeAttributes.js} +1 -1
package/src/transformers/{remove-inline-bgcolor.js → removeInlineBackgroundColor.js} +0 -0
package/src/transformers/{remove-inline-sizes.js → removeInlineSizes.js} +0 -0
package/src/transformers/{remove-unused-css.js → removeUnusedCss.js} +0 -0
package/src/transformers/{replace-strings.js → replaceStrings.js} +0 -0
package/src/transformers/{safe-class-names.js → safeClassNames.js} +8 -2
package/src/transformers/{six-hex.js → sixHex.js} +10 -10
package/src/transformers/transform.js +4 -6
package/src/transformers/{url-params.js → urlParameters.js} +0 -0
package/src/utils/helpers.js +2 -8
package/test/expected/transformers/base-image-url.html +83 -7
package/test/expected/transformers/transform-postcss.html +19 -0
package/test/expected/useConfig.html +9 -0
package/test/fixtures/basic.html +9 -0
package/test/fixtures/transformers/base-image-url.html +85 -7
package/test/fixtures/useConfig.html +9 -0
package/test/stubs/tailwind/preserve.html +1 -0
package/test/test-misc.js +8 -8
package/test/test-tailwind.js +100 -73
package/test/test-todisk.js +106 -29
package/test/test-tostring.js +12 -3
package/test/test-transformers.js +343 -320
package/xo.config.js +22 -19
package/src/transformers/base-image-url.js +0 -9

package/src/transformers/transform.js CHANGED Viewed

@@ -13,12 +13,10 @@ module.exports = async (html, config = {}, direct = false) => {
   const maizzleConfig = omit(config, ['build.tailwind.css', 'css'])
   const tailwindConfig = get(config, 'build.tailwind.config', 'tailwind.config.js')
-  replacements.postcss = css => Tailwind.compile(
-    `@tailwind components; @tailwind utilities; ${css}`,
-    html,
-    tailwindConfig,
-    maizzleConfig
-  )
+  const compileCss = css => Tailwind.compile(css, html, tailwindConfig, maizzleConfig)
+  replacements.tailwindcss = css => compileCss(`@tailwind components; @tailwind utilities; ${css}`)
+  replacements.postcss = css => compileCss(`@tailwind components; @tailwind utilities; ${css}`)
   return posthtml([posthtmlContent(replacements)]).process(html, posthtmlOptions).then(result => result.html)
 }

package/src/transformers/{url-params.js → urlParameters.js} RENAMED Viewed

File without changes

package/src/utils/helpers.js CHANGED Viewed

@@ -1,5 +1,3 @@
-const readline = require('readline')
 module.exports = {
   asyncForEach: async (array, callback) => {
     for (let index = 0; index < array.length; index++) {
@@ -14,10 +12,6 @@ module.exports = {
       throw new Error(`could not load ${module}`)
     }
   },
-  clearConsole: () => {
-    const blank = '\n'.repeat(process.stdout.rows)
-    console.log(blank)
-    readline.cursorTo(process.stdout, 0, 0)
-    readline.clearScreenDown(process.stdout)
-  }
+  // https://github.com/lukeed/console-clear
+  clearConsole: () => process.stdout.write('\x1B[H\x1B[2J')
 }

package/test/expected/transformers/base-image-url.html CHANGED Viewed

@@ -1,7 +1,83 @@
-<div style="background-image: url('https://example.com/foo/bar.jpg')">
-  <img src="https://example.com/logo.png" srcset="https://example.com/assets/logo.png 1x, https://example.com/assets/logo@2x.png 2x">
-</div>
-<div style="background: url(https://example.com/foo/bar.jpg)">
-  <img background="https://example.com/example.jpg" srcset="https://example.com/example.jpg 1x, https://example.com/example@2x.jpg 2x">
-</div>
+<html>
+  <head>
+    <style>.test {
+        background-image: url('https://example.com/image.jpg');
+        background: url('https://example.com/image.jpg');
+        background-image: url('https://preserve.me/image.jpg');
+        background: url('https://preserve.me/image.jpg');
+      }
+      .test-2 {
+        background-image: url("https://example.com/image.jpg");
+        background: url("https://example.com/image.jpg");
+        background-image: url("https://preserve.me/image.jpg");
+        background: url("https://preserve.me/image.jpg");
+      }
+      .test-3 {
+        background-image: url(https://example.com/image.jpg);
+        background: url(https://example.com/image.jpg);
+        background-image: url(https://preserve.me/image.jpg);
+        background: url(https://preserve.me/image.jpg);
+      }</style>
+  </head>
+  <body>
+    <img src="https://example.com/test.jpg">
+    <img src="https://example.com/test.jpg">
+    <img src="https://example.com/image1.jpg" srcset="https://example.com/image1-HD.jpg 2x, https://example.com/image1-phone.jpg 100w">
+    <img src="https://example.com/image2.jpg" srcset="https://example.com/image2-HD.jpg 2x, https://example.com/image2-phone.jpg 100w">
+    <picture>
+      <source media="(max-width: 799px)" srcset="https://example.com/elva-480w-close-portrait.jpg">
+      <source media="(min-width: 800px)" srcset="https://example.com/elva-800w.jpg">
+      <img src="https://example.com/elva-800w.jpg" alt="...">
+    </picture>
+    <video width="250" poster="https://example.com/flower.jpg">
+      <source src="https://example.com/media/flower.webm" type="video/webm">
+      <source src="https://example.tv/media/flower.mp4" type="video/mp4">
+      <track default="" kind="captions" srclang="en" src="https://example.com/media/tracks/friday.vtt">
+    </video>
+    <audio src="https://example.com/media/sample.mp3">
+      Fallback content
+    </audio>
+    <embed type="video/webm" src="https://example.com/media/flower.mp4" width="250" height="200">
+    <iframe width="300" height="200" src="https://example.com/embed.html"></iframe>
+    <input type="image" src="https://example.com/image.jpg" alt="">
+    <script src="https://example.com/javascript.js"></script>
+    <div>
+      <!--[if mso]>
+      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image.jpg" style="600px;height:400px;" />
+      <v:rect fill="false" stroke="false" style="position:absolute;600px;height:400px;">
+      <v:textbox inset="0,0,0,0"><div><![endif]-->
+        <div>test</div>
+      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
+    </div>
+    <table>
+      <tr>
+        <td background="https://example.com/image.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
+          <!--[if gte mso 9]>
+          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
+            <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
+            <v:textbox inset="0,0,0,0">
+          <![endif]-->
+          <div>test</div>
+          <!--[if gte mso 9]>
+            </v:textbox>
+          </v:rect>
+          <![endif]-->
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>

package/test/expected/transformers/transform-postcss.html ADDED Viewed

@@ -0,0 +1,19 @@
+<style>.inline { display: inline !important
+} .table { display: table !important
+} .contents { display: contents !important
+} .hidden { display: none !important
+} .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
+} div { width: 100%
+} @media (min-width: 640px) { div { max-width: 640px
+    }
+} @media (min-width: 768px) { div { max-width: 768px
+    }
+} @media (min-width: 1024px) { div { max-width: 1024px
+    }
+} @media (min-width: 1280px) { div { max-width: 1280px
+    }
+} @media (min-width: 1536px) { div { max-width: 1536px
+    }
+} div { display: none
+}
+    </style>

package/test/expected/useConfig.html ADDED Viewed

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <title>test></title>
+  </head>
+  <body>
+    <div>build_production</div>
+  </body>
+</html>

package/test/fixtures/basic.html ADDED Viewed

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <title>test></title>
+  </head>
+  <body>
+    <div>test</div>
+  </body>
+</html>

package/test/fixtures/transformers/base-image-url.html CHANGED Viewed

@@ -1,7 +1,85 @@
-<div style="background-image: url('foo/bar.jpg')">
-  <img src="logo.png" srcset="assets/logo.png 1x, assets/logo@2x.png 2x">
-</div>
-<div style="background: url(foo/bar.jpg)">
-  <img background="example.jpg" srcset="example.jpg 1x, example@2x.jpg 2x">
-</div>
+<html>
+  <head>
+    <style>
+      .test {
+        background-image: url('image.jpg');
+        background: url('image.jpg');
+        background-image: url('https://preserve.me/image.jpg');
+        background: url('https://preserve.me/image.jpg');
+      }
+      .test-2 {
+        background-image: url("image.jpg");
+        background: url("image.jpg");
+        background-image: url("https://preserve.me/image.jpg");
+        background: url("https://preserve.me/image.jpg");
+      }
+      .test-3 {
+        background-image: url(image.jpg);
+        background: url(image.jpg);
+        background-image: url(https://preserve.me/image.jpg);
+        background: url(https://preserve.me/image.jpg);
+      }
+    </style>
+  </head>
+  <body>
+    <img src="test.jpg">
+    <img src="https://example.com/test.jpg">
+    <img src="image1.jpg" srcset="image1-HD.jpg 2x,image1-phone.jpg 100w">
+    <img src="https://example.com/image2.jpg" srcset="https://example.com/image2-HD.jpg 2x, https://example.com/image2-phone.jpg 100w">
+    <picture>
+      <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+      <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+      <img src="elva-800w.jpg" alt="...">
+    </picture>
+    <video width="250" poster="flower.jpg">
+      <source src="media/flower.webm" type="video/webm">
+      <source src="https://example.tv/media/flower.mp4" type="video/mp4">
+      <track default kind="captions" srclang="en" src="media/tracks/friday.vtt">
+    </video>
+    <audio src="media/sample.mp3">
+      Fallback content
+    </audio>
+    <embed type="video/webm" src="media/flower.mp4" width="250" height="200">
+    <iframe width="300" height="200" src="embed.html"></iframe>
+    <input type="image" src="image.jpg" alt="">
+    <script src="javascript.js"></script>
+    <div>
+      <!--[if mso]>
+      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="image.jpg" style="600px;height:400px;" />
+      <v:rect fill="false" stroke="false" style="position:absolute;600px;height:400px;">
+      <v:textbox inset="0,0,0,0"><div><![endif]-->
+        <div>test</div>
+      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
+    </div>
+    <table>
+      <tr>
+        <td background="image.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
+          <!--[if gte mso 9]>
+          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
+            <v:fill type="tile" src="image.png" color="#7bceeb" />
+            <v:textbox inset="0,0,0,0">
+          <![endif]-->
+          <div>test</div>
+          <!--[if gte mso 9]>
+            </v:textbox>
+          </v:rect>
+          <![endif]-->
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>

package/test/fixtures/useConfig.html ADDED Viewed

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <title>test></title>
+  </head>
+  <body>
+    <div>{{ page.build.templates.destination.path }}</div>
+  </body>
+</html>

package/test/stubs/tailwind/preserve.html ADDED Viewed

	@@ -0,0 +1 @@
1	+ <div class="hidden"></div>

package/test/test-misc.js CHANGED Viewed

@@ -1,8 +1,8 @@
-const test = require('ava')
-const path = require('path')
-const {requireUncached} = require('../src/utils/helpers')
-test('requires an uncached module', t => {
-  const helpers = requireUncached(path.resolve(process.cwd(), 'src/utils/helpers'))
-  t.is(typeof helpers.requireUncached, 'function')
-})
+const test = require('ava')
+const path = require('path')
+const {requireUncached} = require('../src/utils/helpers')
+test('requires an uncached module', t => {
+  const helpers = requireUncached(path.resolve(process.cwd(), 'src/utils/helpers'))
+  t.is(typeof helpers.requireUncached, 'function')
+})

package/test/test-tailwind.js CHANGED Viewed

@@ -1,73 +1,100 @@
-const test = require('ava')
-const Tailwind = require('../src/generators/tailwindcss')
-test('uses Tailwind defaults if no config specified', async t => {
-  const css = await Tailwind.compile('@tailwind utilities', '<p class="xl:z-0"></p>', {}, {env: 'production'})
-  t.not(css, undefined)
-  t.true(css.includes('.xl\\:z-0'))
-})
-test('uses CSS file provided in environment config', async t => {
-  const config = {
-    env: 'production',
-    build: {
-      tailwind: {
-        css: './test/stubs/main.css'
-      }
-    }
-  }
-  const css = await Tailwind.compile('', '<div class="text-center foo">test</div>', {}, config)
-  t.not(css, undefined)
-  t.true(css.includes('.text-center'))
-  t.true(css.includes('.foo'))
-})
-test('uses purgeCSS options provided in the maizzle config', async t => {
-  const arrayConfig = {
-    purgeCSS: {
-      safelist: ['z-10'],
-      blocklist: ['text-center']
-    }
-  }
-  const objectConfig = {
-    purgeCSS: {
-      safelist: {
-        standard: ['z-10']
-      },
-      blocklist: ['text-center']
-    }
-  }
-  const css1 = await Tailwind.compile('@tailwind utilities', '<div class="z-0 text-center"></div>', {}, arrayConfig)
-  const css2 = await Tailwind.compile('@tailwind utilities', '<div class="z-0 text-center"></div>', {}, objectConfig)
-  t.true(css1.includes('.z-0'))
-  t.true(css1.includes('.z-10'))
-  t.false(css1.includes('.text-center'))
-  t.true(css2.includes('.z-0'))
-  t.true(css2.includes('.z-10'))
-  t.false(css2.includes('.text-center'))
-})
-test('uses postcss plugins from the maizzle config when compiling from string', async t => {
-  const maizzleConfig = {
-    env: 'production',
-    build: {
-      postcss: {
-        plugins: [
-          require('autoprefixer')({overrideBrowserslist: ['> 0.1%']})
-        ]
-      }
-    }
-  }
-  const css = await Tailwind.compile('.test {transform: scale(0.5)}', '<div class="test">Test</a>', {}, maizzleConfig)
-  t.not(css, undefined)
-  t.is(css.trim(), '/* purgecss start ignore */\n\n.test {\n  -webkit-transform: scale(0.5);\n      -ms-transform: scale(0.5);\n          transform: scale(0.5)\n}\n\n/* purgecss end ignore */')
-})
+const test = require('ava')
+const ora = require('ora')
+const Tailwind = require('../src/generators/tailwindcss')
+test('throws on compile error', async t => {
+  await t.throwsAsync(async () => {
+    const spinner = ora('Compiling Tailwind CSS...').start()
+    await Tailwind.compile('.test {@apply inexistent;}', '<div class="test">Test</a>', {}, {}, spinner)
+  }, {instanceOf: Error, message: 'Tailwind CSS compilation failed'})
+})
+test('uses Tailwind defaults if no config specified', async t => {
+  const css = await Tailwind.compile(
+    '@tailwind utilities;',
+    '<p class="xl:z-0"></p>',
+    {},
+    {env: 'production'}
+  )
+  t.not(css, undefined)
+  t.true(css.includes('.xl\\:z-0'))
+})
+test('uses CSS file provided in environment config', async t => {
+  const config = {
+    env: 'production',
+    build: {
+      tailwind: {
+        css: './test/stubs/main.css'
+      }
+    }
+  }
+  const css = await Tailwind.compile('', '<div class="text-center foo">test</div>', {}, config)
+  t.not(css, undefined)
+  t.true(css.includes('.text-center'))
+  t.true(css.includes('.foo'))
+})
+test('works with custom `content` sources', async t => {
+  const css = await Tailwind.compile(
+    '@tailwind utilities;',
+    '<div class="hidden"></div>',
+    {
+      content: ['./test/stubs/tailwind/*.*']
+    }
+  )
+  t.true(css.includes('.hidden'))
+})
+test('works with custom `files` sources', async t => {
+  const css = await Tailwind.compile(
+    '@tailwind utilities;',
+    '<div></div>',
+    {
+      content: {
+        files: ['./test/stubs/tailwind/*.*']
+      }
+    }
+  )
+  t.true(css.includes('.hidden'))
+})
+test('uses maizzle template paths when purging', async t => {
+  const css = await Tailwind.compile(
+    '@tailwind utilities;',
+    '<div></div>',
+    {},
+    {
+      build: {
+        templates: {
+          source: './test/stubs/tailwind'
+        }
+      }
+    }
+  )
+  t.true(css.includes('.hidden'))
+})
+test('uses custom postcss plugins from the maizzle config', async t => {
+  const maizzleConfig = {
+    env: 'production',
+    build: {
+      postcss: {
+        plugins: [
+          require('autoprefixer')({overrideBrowserslist: ['> 0.1%']})
+        ]
+      }
+    }
+  }
+  const css = await Tailwind.compile('.test {transform: scale(0.5)}', '<div class="test">Test</a>', {}, maizzleConfig)
+  t.not(css, undefined)
+  t.is(css.trim(), '.test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
+})