@maizzle/framework 3.7.1 → 4.0.0-alpha.2

package/src/generators/output/to-string.js

@@ -1,64 +1,71 @@
-const fm = require('front-matter')
-const {get, merge} = require('lodash')
-const posthtml = require('../posthtml')
-const Tailwind = require('../tailwindcss')
-const Transformers = require('../../transformers')
-const posthtmlMSO = require('../../transformers/posthtml-mso')
-
-module.exports = async (html, options) => {
-  process.env.NODE_ENV = get(options, 'maizzle.env', 'local')
-
-  if (typeof html !== 'string') {
-    throw new TypeError(`first argument must be an HTML string, received ${html}`)
-  }
-
-  if (html.length === 0) {
-    throw new RangeError('received empty string')
-  }
-
-  let config = get(options, 'maizzle', {})
-
-  const tailwindConfig = get(options, 'tailwind.config', {})
-  const cssString = get(options, 'tailwind.css', '@tailwind components; @tailwind utilities;')
-
-  const frontmatter = await posthtml(fm(html).frontmatter, config)
-
-  html = `---\n${frontmatter}\n---\n\n${fm(html).body}`
-
-  config = merge({applyTransformers: true}, config, fm(html).attributes)
-
-  if (typeof get(options, 'tailwind.compiled') === 'string') {
-    config.css = options.tailwind.compiled
-  } else {
-    config.css = await Tailwind.compile(cssString, html, tailwindConfig, config)
-  }
-
-  if (options && typeof options.beforeRender === 'function') {
-    html = await options.beforeRender(html, config)
-  }
-
-  html = await posthtml(html, config)
-
-  while (Object.keys(fm(html).attributes).length > 0) {
-    html = fm(html).body
-  }
-
-  if (options && typeof options.afterRender === 'function') {
-    html = await options.afterRender(html, config)
-  }
-
-  if (config.applyTransformers) {
-    html = await Transformers.process(html, config)
-  }
-
-  if (options && typeof options.afterTransformers === 'function') {
-    html = await options.afterTransformers(html, config)
-  }
-
-  html = await posthtmlMSO(html, config)
-
-  return {
-    html,
-    config
-  }
-}
+const fm = require('front-matter')
+const {get, merge} = require('lodash')
+const posthtml = require('../posthtml')
+const Tailwind = require('../tailwindcss')
+const Transformers = require('../../transformers')
+const posthtmlMSO = require('../../transformers/posthtmlMso')
+const Config = require('../config')
+
+module.exports = async (html, options) => {
+  process.env.NODE_ENV = get(options, 'maizzle.env', 'local')
+
+  if (typeof html !== 'string') {
+    throw new TypeError(`first argument must be an HTML string, received ${html}`)
+  }
+
+  if (html.length === 0) {
+    throw new RangeError('received empty string')
+  }
+
+  const fileConfig = await Config.getMerged(process.env.NODE_ENV)
+
+  let config = merge(fileConfig, get(options, 'maizzle', {}))
+
+  const tailwindConfig = get(options, 'tailwind.config', {})
+  const cssString = get(options, 'tailwind.css', '@tailwind components; @tailwind utilities;')
+
+  let {frontmatter} = fm(html)
+
+  if (frontmatter) {
+    frontmatter = await posthtml(frontmatter, config)
+  }
+
+  html = `---\n${frontmatter}\n---\n\n${fm(html).body}`
+
+  config = merge({applyTransformers: true}, config, fm(html).attributes)
+
+  if (typeof get(options, 'tailwind.compiled') === 'string') {
+    config.css = options.tailwind.compiled
+  } else {
+    config.css = await Tailwind.compile(cssString, html, tailwindConfig, config)
+  }
+
+  if (options && typeof options.beforeRender === 'function') {
+    html = await options.beforeRender(html, config)
+  }
+
+  html = await posthtml(html, config)
+
+  while (Object.keys(fm(html).attributes).length > 0) {
+    html = fm(html).body
+  }
+
+  if (options && typeof options.afterRender === 'function') {
+    html = await options.afterRender(html, config)
+  }
+
+  if (config.applyTransformers) {
+    html = await Transformers.process(html, config)
+  }
+
+  if (options && typeof options.afterTransformers === 'function') {
+    html = await options.afterTransformers(html, config)
+  }
+
+  html = await posthtmlMSO(html, config)
+
+  return {
+    html,
+    config
+  }
+}

package/src/generators/posthtml.js

@@ -1,60 +1,61 @@
-const fm = require('front-matter')
-const posthtml = require('posthtml')
-const {get, merge} = require('lodash')
-const fetch = require('posthtml-fetch')
-const layouts = require('posthtml-extend')
-const modules = require('posthtml-modules')
-const expressions = require('posthtml-expressions')
-
-module.exports = async (html, config) => {
-  const layoutsOptions = get(config, 'build.layouts', {})
-
-  const fetchOptions = get(config, 'build.posthtml.fetch', {})
-  const fetchPlugin = fetch({...fetchOptions})
-
-  const modulesOptions = get(config, 'build.components', {})
-  // Fake `from` option so we can reference modules relatively
-  const modulesRoot = modulesOptions.root || './'
-  const modulesFrom = modulesOptions.from || `${modulesRoot}/fake`
-
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-  const posthtmlPlugins = get(config, 'build.posthtml.plugins', [])
-
-  const expressionsOptions = merge({strictMode: false}, get(config, 'build.posthtml.expressions', {}))
-
-  const locals = merge(
-    get(expressionsOptions, 'locals', {}),
-    get(config, 'locals', {}),
-    {page: config}
-  )
-
-  return posthtml([
-    fetchPlugin,
-    layouts(
-      merge(
-        {
-          strict: false,
-          plugins: [
-            expressions({...expressionsOptions, locals})
-          ]
-        },
-        layoutsOptions
-      )
-    ),
-    modules({
-      parser: posthtmlOptions,
-      from: modulesFrom,
-      root: modulesRoot,
-      tag: 'component',
-      attribute: 'src',
-      plugins: [
-        fetchPlugin
-      ],
-      locals,
-      ...modulesOptions
-    }),
-    ...posthtmlPlugins
-  ])
-    .process(html, {...posthtmlOptions})
-    .then(result => fm(result.html).body)
-}
+const fm = require('front-matter')
+const posthtml = require('posthtml')
+const {get, merge} = require('lodash')
+const fetch = require('posthtml-fetch')
+const layouts = require('posthtml-extend')
+const modules = require('posthtml-modules')
+const expressions = require('posthtml-expressions')
+
+module.exports = async (html, config) => {
+  const layoutsOptions = get(config, 'build.layouts', {})
+
+  const fetchOptions = get(config, 'build.posthtml.fetch', {})
+  const fetchPlugin = fetch({...fetchOptions})
+
+  const modulesOptions = get(config, 'build.components', {})
+  // Fake `from` option so we can reference modules relatively
+  const modulesRoot = modulesOptions.root || './'
+  const modulesFrom = modulesOptions.from || `${modulesRoot}/fake`
+
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const posthtmlPlugins = get(config, 'build.posthtml.plugins', [])
+
+  const expressionsOptions = merge({strictMode: false}, get(config, 'build.posthtml.expressions', {}))
+
+  const locals = merge(
+    get(expressionsOptions, 'locals', {}),
+    get(config, 'locals', {}),
+    {page: config}
+  )
+
+  return posthtml([
+    fetchPlugin,
+    layouts(
+      merge(
+        {
+          strict: false,
+          plugins: [
+            expressions({...expressionsOptions, locals})
+          ]
+        },
+        layoutsOptions
+      )
+    ),
+    modules({
+      parser: posthtmlOptions,
+      attributeAsLocals: true,
+      from: modulesFrom,
+      root: modulesRoot,
+      tag: 'component',
+      attribute: 'src',
+      plugins: [
+        fetchPlugin
+      ],
+      locals,
+      ...modulesOptions
+    }),
+    ...posthtmlPlugins
+  ])
+    .process(html, {...posthtmlOptions})
+    .then(result => fm(result.html).body)
+}

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,46 +33,61 @@ 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', {})
-      },
-      corePlugins: {
-        animation: false,
-        backgroundOpacity: false,
-        borderOpacity: false,
-        boxShadow: false,
-        divideOpacity: false,
-        placeholderOpacity: false,
-        ringColor: false,
-        ringWidth: false,
-        ringOpacity: false,
-        ringOffsetColor: false,
-        textOpacity: false
-      },
-      plugins: []
+      content: {
+        files: [
+          './src/**/*.*',
+          {raw: html, extension: 'html'}
+        ]
+      }
     }, userConfig())
 
-    // Merge user's Tailwind plugins with our default ones
-    config.plugins.push(require('tailwindcss-box-shadow'))
+    // 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'}
+        ]
+      }
+    }
 
-    const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
+    // Include all `build.templates.source` paths when scanning for selectors to preserve
+    const buildTemplates = get(maizzleConfig, 'build.templates')
 
-    css = await fs.pathExists(userFilePath).then(async exists => {
-      if (exists) {
-        const userFileCSS = await fs.readFile(path.resolve(userFilePath), 'utf8')
-        return userFileCSS
-      }
+    if (buildTemplates) {
+      const templateObjects = Array.isArray(buildTemplates) ? buildTemplates : [buildTemplates]
+      const templateSources = templateObjects.map(template => {
+        const source = get(template, 'source')
+
+        if (typeof source === 'function') {
+          const sources = source(maizzleConfig)
+
+          if (Array.isArray(sources)) {
+            sources.map(s => config.content.files.push(s))
+          } else if (typeof sources === 'string') {
+            config.content.files.push(sources)
+          }
+
+          // Must return a valid `content` entry
+          return {raw: '', extension: 'html'}
+        }
 
-      return css
-    })
+        return `${source}/**/*.*`
+      })
+
+      config.content.files.push(...templateSources)
+    }
+
+    const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
+    const userFileExists = await fs.pathExists(userFilePath)
+
+    if (userFileExists) {
+      css = await fs.readFile(path.resolve(userFilePath), 'utf8') + css
+    }
 
     return postcss([
-      postcssImport({path: userFilePath ? path.dirname(userFilePath) : []}),
+      postcssImport({path: path.dirname(userFilePath)}),
       postcssNested(),
       tailwindcss(config),
       maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
@@ -80,5 +95,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 (vImageMatch && !isUrl(vImageMatch[3])) {
+    html = html.replace(vImageMatch[0], `${vImageMatch[1]}src="${url}${vImageMatch[3]}"`)
+  }
+
+  if (vFillMatch && !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,20 +1,20 @@
-const inline = require('./inline')
+const inline = require('./inlineCss')
 const minify = require('./minify')
 const markdown = require('./markdown')
 const prettify = require('./prettify')
-const ensureSixHEX = require('./six-hex')
-const addURLParams = require('./url-params')
+const ensureSixHEX = require('./sixHex')
+const applyBaseImageUrl = require('./baseUrl')
+const addURLParams = require('./urlParameters')
 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')
+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)

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)
+}