@maizzle/framework 3.7.2 → 4.0.0-alpha.1

package/src/generators/tailwindcss.js

@@ -9,7 +9,7 @@ const mergeLonghand = require('postcss-merge-longhand')
 const {get, isObject, isEmpty, merge} = require('lodash')
 
 module.exports = {
-  compile: async (css = '', html = '', tailwindConfig = {}, maizzleConfig = {}) => {
+  compile: async (css = '', html = '', tailwindConfig = {}, maizzleConfig = {}, spinner = null) => {
     tailwindConfig = (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) ? tailwindConfig : get(maizzleConfig, 'build.tailwind.config', 'tailwind.config.js')
 
     // Compute the Tailwind config to use
@@ -33,15 +33,14 @@ module.exports = {
     // Merge user's Tailwind config on top of a 'base' config
     const config = merge({
       important: true,
-      purge: {
-        enabled: maizzleConfig.env !== 'local',
-        content: [
-          'src/**/*.*',
-          {raw: html}
-        ],
-        options: get(maizzleConfig, 'purgeCSS', {})
+      content: {
+        files: [
+          './src/**/*.*',
+          {raw: html, extension: 'html'}
+        ]
       },
       corePlugins: {
+        preflight: false,
         animation: false,
         backgroundOpacity: false,
         borderOpacity: false,
@@ -57,22 +56,46 @@ module.exports = {
       plugins: []
     }, userConfig())
 
+    // Add back the `{raw: html}` option if user provided own config
+    if (Array.isArray(config.content)) {
+      config.content = {
+        files: [
+          ...config.content,
+          './src/**/*.*',
+          {raw: html, extension: 'html'}
+        ]
+      }
+    }
+
+    // Include all `build.templates.source` paths when scanning for selectors to preserve
+    const buildTemplates = get(maizzleConfig, 'build.templates')
+
+    if (buildTemplates) {
+      const templateObjects = Array.isArray(buildTemplates) ? buildTemplates : [buildTemplates]
+      const templateSources = templateObjects.map(template => {
+        const source = get(template, 'source')
+
+        return `${source}/**/*.*`
+      })
+
+      config.content.files.push(...templateSources)
+    }
+
     // Merge user's Tailwind plugins with our default ones
-    config.plugins.push(require('tailwindcss-box-shadow'))
+    config.plugins = [
+      ...config.plugins,
+      require('tailwindcss-box-shadow')
+    ]
 
     const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
+    const userFileExists = await fs.pathExists(userFilePath)
 
-    css = await fs.pathExists(userFilePath).then(async exists => {
-      if (exists) {
-        const userFileCSS = await fs.readFile(path.resolve(userFilePath), 'utf8')
-        return userFileCSS
-      }
-
-      return css
-    })
+    if (userFileExists) {
+      css = await fs.readFile(path.resolve(userFilePath), 'utf8')
+    }
 
     return postcss([
-      postcssImport({path: userFilePath ? path.dirname(userFilePath) : []}),
+      postcssImport({path: path.dirname(userFilePath)}),
       postcssNested(),
       tailwindcss(config),
       maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
@@ -80,5 +103,13 @@ module.exports = {
     ])
       .process(css, {from: undefined})
       .then(result => result.css)
+      .catch(error => {
+        console.error(error)
+        if (spinner) {
+          spinner.stop()
+        }
+
+        throw new Error(`Tailwind CSS compilation failed`)
+      })
   }
 }

package/src/index.js

@@ -2,13 +2,20 @@ const ora = require('ora')
 const path = require('path')
 const fs = require('fs-extra')
 const {get, merge} = require('lodash')
-const bs = require('browser-sync').create()
 const Config = require('./generators/config')
 const Output = require('./generators/output')
 const transformers = require('./transformers')
 const {clearConsole} = require('./utils/helpers')
 const Plaintext = require('./generators/plaintext')
-const Tailwind = require('./generators/tailwindcss')
+
+const getBrowserSync = () => {
+  if (!global.cachedBrowserSync) {
+    const bs = require('browser-sync')
+    global.cachedBrowserSync = bs.create()
+  }
+
+  return global.cachedBrowserSync
+}
 
 const self = module.exports = { // eslint-disable-line
   ...transformers,
@@ -23,7 +30,10 @@ const self = module.exports = { // eslint-disable-line
         const elapsedSeconds = (Date.now() - start) / 1000
 
         if (get(config, 'build.command') === 'serve') {
-          clearConsole()
+          if (get(config, 'build.console.clear')) {
+            clearConsole()
+          }
+
           spinner.succeed(`Re-built ${parsed.length} templates in ${elapsedSeconds}s`)
         } else {
           spinner.succeed(`Built ${parsed.length} templates in ${elapsedSeconds}s`)
@@ -59,16 +69,14 @@ const self = module.exports = { // eslint-disable-line
           [...new Set(get(config, 'build.browsersync.watch', []))]
         ]
 
-        // Pre-compile Tailwind so that updates to tailwind.config.js are reflected
-        const cssString = fs.existsSync(get(config, 'build.tailwind.css')) ? fs.readFileSync(get(config, 'build.tailwind.css'), 'utf8') : '@tailwind components; @tailwind utilities;'
-        const css = await Tailwind.compile(cssString, '', {}, config)
-
         const spinner = ora()
 
         // Watch for Template file changes
-        bs.watch(templatePaths)
+        getBrowserSync().watch(templatePaths)
           .on('change', async file => {
-            clearConsole()
+            if (get(config, 'build.console.clear')) {
+              clearConsole()
+            }
 
             const start = new Date()
 
@@ -86,54 +94,34 @@ const self = module.exports = { // eslint-disable-line
               await config.events.beforeCreate(config)
             }
 
-            /**
-             * Tailwind CSS compiler
-             *
-             * Use the Just-In-Time engine if the user enabled it
-             * Fall back to the classic Always-On-Time engine
-             */
-            let mode = 'aot'
-
-            try {
-              const tailwindConfig = require(path.resolve(process.cwd(), get(config, 'build.currentTemplates.tailwind.config', 'tailwind.config.js')))
-              mode = get(tailwindConfig, 'mode')
-            } catch {}
-
             const renderOptions = {
               maizzle: config,
               ...config.events
             }
 
-            // AOT: fall back to pre-compiled CSS
-            if (mode !== 'jit') {
-              renderOptions.tailwind = {
-                compiled: css
-              }
-            }
-
             self
               .render(await fs.readFile(file, 'utf8'), renderOptions)
               .then(({html, config}) => fs.outputFile(config.permalink || finalDestination, html))
               .then(() => {
-                bs.reload()
+                getBrowserSync().reload()
                 spinner.succeed(`Compiled in ${(Date.now() - start) / 1000}s [${file}]`)
               })
               .catch(() => spinner.warn(`Received empty HTML, please save your file again [${file}]`))
           })
 
         // Watch for changes in all other files
-        bs.watch(globalPaths, {ignored: templatePaths})
-          .on('change', () => self.build(env, config).then(() => bs.reload()))
-          .on('unlink', () => self.build(env, config).then(() => bs.reload()))
+        getBrowserSync().watch(globalPaths, {ignored: templatePaths})
+          .on('change', () => self.build(env, config).then(() => getBrowserSync().reload()))
+          .on('unlink', () => self.build(env, config).then(() => getBrowserSync().reload()))
 
         // Watch for changes in config files
-        bs.watch('config*.js')
+        getBrowserSync().watch('config*.js')
           .on('change', async file => {
             const parsedEnv = path.parse(file).name.split('.')[1] || 'local'
 
             Config
               .getMerged(parsedEnv)
-              .then(config => self.build(parsedEnv, config).then(() => bs.reload()))
+              .then(config => self.build(parsedEnv, config).then(() => getBrowserSync().reload()))
           })
 
         // Browsersync options
@@ -154,7 +142,7 @@ const self = module.exports = { // eslint-disable-line
         }
 
         // Initialize Browsersync
-        bs.init(bsOptions, () => {})
+        getBrowserSync().init(bsOptions, () => {})
       })
       .catch(error => {
         throw error

package/src/transformers/baseUrl.js

@@ -0,0 +1,45 @@
+const posthtml = require('posthtml')
+const isUrl = require('is-url-superb')
+const baseUrl = require('posthtml-base-url')
+const {get, isObject, isEmpty} = require('lodash')
+
+// VML backgrounds need regex because they're inside HTML comments :(
+const rewriteVMLs = (html, url) => {
+  const vImageMatch = html.match(/(<v:image.+)(src=['"]([^'"]+)['"])/)
+  const vFillMatch = html.match(/(<v:fill.+)(src=['"]([^'"]+)['"])/)
+
+  if (!isUrl(vImageMatch[3])) {
+    html = html.replace(vImageMatch[0], `${vImageMatch[1]}src="${url}${vImageMatch[3]}"`)
+  }
+
+  if (!isUrl(vFillMatch[3])) {
+    html = html.replace(vFillMatch[0], `${vFillMatch[1]}src="${url}${vFillMatch[3]}"`)
+  }
+
+  return html
+}
+
+module.exports = async (html, config = {}, direct = false) => {
+  const url = direct ? config : get(config, 'baseURL')
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+
+  // `baseUrl` as a string
+  if (typeof url === 'string' && url.length > 0) {
+    html = rewriteVMLs(html, url)
+
+    return posthtml([
+      baseUrl({url, allTags: true, styleTag: true, inlineCss: true})
+    ])
+      .process(html, posthtmlOptions)
+      .then(result => result.html)
+  }
+
+  // `baseUrl: {}`
+  if (isObject(url) && !isEmpty(url)) {
+    html = rewriteVMLs(html, url.url)
+
+    return posthtml([baseUrl(url)]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  return html
+}

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/{six-hex.js → sixHex.js}

@@ -1,10 +1,10 @@
-const {get} = require('lodash')
-const {conv} = require('color-shorthand-hex-to-six-digit')
-
-module.exports = async (html, config = {}) => {
-  if (get(config, 'sixHex') === false) {
-    return html
-  }
-
-  return conv(html)
-}
+const {get} = require('lodash')
+const {conv} = require('color-shorthand-hex-to-six-digit')
+
+module.exports = async (html, config = {}) => {
+  if (get(config, 'sixHex') === false) {
+    return html
+  }
+
+  return conv(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>
-
-<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

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