@maizzle/framework 3.7.3 → 4.0.0-alpha.3

package/src/transformers/index.js

@@ -1,57 +1,57 @@
-const inline = require('./inline')
-const minify = require('./minify')
-const markdown = require('./markdown')
-const prettify = require('./prettify')
-const ensureSixHEX = require('./six-hex')
-const addURLParams = require('./url-params')
-const transformContents = require('./transform')
-const preventWidows = require('./prevent-widows')
-const replaceStrings = require('./replace-strings')
-const safeClassNames = require('./safe-class-names')
-const applyBaseImageUrl = require('./base-image-url')
-const removeUnusedCSS = require('./remove-unused-css')
-const removeAttributes = require('./remove-attributes')
-const attributeToStyle = require('./attribute-to-style')
-const removeInlineSizes = require('./remove-inline-sizes')
-const applyExtraAttributes = require('./extra-attributes')
-const removeInlineBgColor = require('./remove-inline-bgcolor')
-
-exports.process = async (html, config) => {
-  html = await safeClassNames(html, config)
-  html = await transformContents(html, config)
-  html = await markdown(html, config)
-  html = await preventWidows(html, config)
-  html = await attributeToStyle(html, config)
-  html = await inline(html, config)
-  html = await removeUnusedCSS(html, config)
-  html = await removeInlineSizes(html, config)
-  html = await removeInlineBgColor(html, config)
-  html = await removeAttributes(html, config)
-  html = await applyExtraAttributes(html, config)
-  html = await applyBaseImageUrl(html, config)
-  html = await addURLParams(html, config)
-  html = await ensureSixHEX(html, config)
-  html = await prettify(html, config)
-  html = await minify(html, config)
-  html = await replaceStrings(html, config)
-
-  return html
-}
-
-exports.inlineCSS = (html, config) => inline(html, config, true)
-exports.minify = (html, config) => minify(html, config, true)
-exports.markdown = (html, config) => markdown(html, config, true)
-exports.prettify = (html, config) => prettify(html, config, true)
-exports.ensureSixHEX = (html, config) => ensureSixHEX(html, config)
-exports.addURLParams = (html, config) => addURLParams(html, config, true)
-exports.transformContents = (html, config) => transformContents(html, config, true)
-exports.preventWidows = (html, config) => preventWidows(html, config, true)
-exports.replaceStrings = (html, config) => replaceStrings(html, config, true)
-exports.safeClassNames = (html, config) => safeClassNames(html, config, true)
-exports.applyBaseImageUrl = (html, config) => applyBaseImageUrl(html, config, true)
-exports.removeUnusedCSS = (html, config) => removeUnusedCSS(html, config, true)
-exports.removeAttributes = (html, config) => removeAttributes(html, config, true)
-exports.removeInlineSizes = (html, config) => removeInlineSizes(html, config, true)
-exports.applyExtraAttributes = (html, config) => applyExtraAttributes(html, config, true)
-exports.removeInlineBgColor = (html, config) => removeInlineBgColor(html, config, true)
-exports.attributeToStyle = (html, config) => attributeToStyle(html, config, true)
+const inline = require('./inlineCss')
+const minify = require('./minify')
+const markdown = require('./markdown')
+const prettify = require('./prettify')
+const ensureSixHEX = require('./sixHex')
+const applyBaseImageUrl = require('./baseUrl')
+const addURLParams = require('./urlParameters')
+const transformContents = require('./transform')
+const preventWidows = require('./preventWidows')
+const replaceStrings = require('./replaceStrings')
+const safeClassNames = require('./safeClassNames')
+const removeUnusedCSS = require('./removeUnusedCss')
+const removeAttributes = require('./removeAttributes')
+const attributeToStyle = require('./attributeToStyle')
+const removeInlineSizes = require('./removeInlineSizes')
+const applyExtraAttributes = require('./extraAttributes')
+const removeInlineBgColor = require('./removeInlineBackgroundColor')
+
+exports.process = async (html, config) => {
+  html = await safeClassNames(html, config)
+  html = await transformContents(html, config)
+  html = await markdown(html, config)
+  html = await preventWidows(html, config)
+  html = await attributeToStyle(html, config)
+  html = await inline(html, config)
+  html = await removeUnusedCSS(html, config)
+  html = await removeInlineSizes(html, config)
+  html = await removeInlineBgColor(html, config)
+  html = await removeAttributes(html, config)
+  html = await applyExtraAttributes(html, config)
+  html = await applyBaseImageUrl(html, config)
+  html = await addURLParams(html, config)
+  html = await ensureSixHEX(html, config)
+  html = await prettify(html, config)
+  html = await minify(html, config)
+  html = await replaceStrings(html, config)
+
+  return html
+}
+
+exports.inlineCSS = (html, config) => inline(html, config, true)
+exports.minify = (html, config) => minify(html, config, true)
+exports.markdown = (html, config) => markdown(html, config, true)
+exports.prettify = (html, config) => prettify(html, config, true)
+exports.ensureSixHEX = (html, config) => ensureSixHEX(html, config)
+exports.addURLParams = (html, config) => addURLParams(html, config, true)
+exports.transformContents = (html, config) => transformContents(html, config, true)
+exports.preventWidows = (html, config) => preventWidows(html, config, true)
+exports.replaceStrings = (html, config) => replaceStrings(html, config, true)
+exports.safeClassNames = (html, config) => safeClassNames(html, config, true)
+exports.applyBaseImageUrl = (html, config) => applyBaseImageUrl(html, config, true)
+exports.removeUnusedCSS = (html, config) => removeUnusedCSS(html, config, true)
+exports.removeAttributes = (html, config) => removeAttributes(html, config, true)
+exports.removeInlineSizes = (html, config) => removeInlineSizes(html, config, true)
+exports.applyExtraAttributes = (html, config) => applyExtraAttributes(html, config, true)
+exports.removeInlineBgColor = (html, config) => removeInlineBgColor(html, config, true)
+exports.attributeToStyle = (html, config) => attributeToStyle(html, config, true)

package/src/transformers/{remove-attributes.js → removeAttributes.js}

@@ -8,7 +8,7 @@ module.exports = async (html, config = {}, direct = false) => {
 
   attributes.push({name: 'style'}, {name: 'class'})
 
-  // Allow ommiting `value` key when removing empty attributes
+  // Allow omitting `value` key when removing empty attributes
   attributes.forEach(attr => {
     attr.value = attr.value || ''
   })

package/src/transformers/{safe-class-names.js → safeClassNames.js}

@@ -3,11 +3,17 @@ const posthtml = require('posthtml')
 const safeClassNames = require('posthtml-safe-class-names')
 
 module.exports = async (html, config = {}, direct = false) => {
-  if (get(config, 'safeClassNames') === false) {
+  const option = get(config, 'safeClassNames')
+
+  if (option === false) {
     return html
   }
 
-  if (config.env === 'local') {
+  /*
+   * Setting it to `true` in the config will run `safeClassNames`
+   * no matter the environment.
+   */
+  if (config.env === 'local' && !option) {
     return html
   }
 

package/src/transformers/transform.js

@@ -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/utils/helpers.js

@@ -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

@@ -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>
+<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');
+      }
 
-<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>
+      .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

@@ -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

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

package/test/fixtures/basic.html

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

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

@@ -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>
+<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');
+      }
 
-<div style="background: url(foo/bar.jpg)">
-  <img background="example.jpg" srcset="example.jpg 1x, example@2x.jpg 2x">
-</div>
+      .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

@@ -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

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

package/test/test-tailwind.js

@@ -1,8 +1,21 @@
 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'})
+  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'))
@@ -25,36 +38,67 @@ test('uses CSS file provided in environment config', async t => {
   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']
+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'))
+})
 
-  const objectConfig = {
-    purgeCSS: {
-      safelist: {
-        standard: ['z-10']
-      },
-      blocklist: ['text-center']
+test('works with custom `files` sources', async t => {
+  const css = await Tailwind.compile(
+    '@tailwind utilities;',
+    '<div></div>',
+    {
+      content: {
+        files: ['./test/stubs/tailwind/*.*']
+      }
     }
-  }
+  )
 
-  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(css.includes('.hidden'))
+})
 
-  t.true(css1.includes('.z-0'))
-  t.true(css1.includes('.z-10'))
-  t.false(css1.includes('.text-center'))
+test('uses maizzle template path as content source', async t => {
+  const css = await Tailwind.compile(
+    '@tailwind utilities;',
+    '<div></div>',
+    {},
+    {
+      build: {
+        templates: {
+          source: './test/stubs/tailwind'
+        }
+      }
+    }
+  )
+
+  t.true(css.includes('.hidden'))
+})
+
+test('uses maizzle template path as content source (single file)', async t => {
+  const css = await Tailwind.compile(
+    '@tailwind utilities;',
+    '<div></div>',
+    {},
+    {
+      build: {
+        templates: {
+          source: './test/stubs/tailwind/preserve.html'
+        }
+      }
+    }
+  )
 
-  t.true(css2.includes('.z-0'))
-  t.true(css2.includes('.z-10'))
-  t.false(css2.includes('.text-center'))
+  t.true(css.includes('.hidden'))
 })
 
-test('uses postcss plugins from the maizzle config when compiling from string', async t => {
+test('uses custom postcss plugins from the maizzle config', async t => {
   const maizzleConfig = {
     env: 'production',
     build: {
@@ -69,5 +113,5 @@ test('uses postcss plugins from the maizzle config when compiling from string',
   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 */')
+  t.is(css.trim(), '.test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
 })