@maizzle/framework 3.7.2 → 4.0.0-alpha.10

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

@@ -29,48 +29,87 @@ module.exports = async (env, spinner, config) => {
 
   const css = (typeof get(config, 'tailwind.compiled') === 'string')
     ? config.tailwind.compiled
-    : await Tailwind.compile('@tailwind components; @tailwind utilities;', '', {}, config)
+    : await Tailwind.compile('', '', {}, config, spinner)
 
+  // Parse each template config object
   await asyncForEach(templatesConfig, async templateConfig => {
     const outputDir = get(templateConfig, 'destination.path', `build_${env}`)
 
     await fs.remove(outputDir)
 
-    await fs
-      .copy(templateConfig.source, outputDir)
-      .then(async () => {
-        const extensions = Array.isArray(templateConfig.filetypes)
-          ? templateConfig.filetypes.join('|')
-          : templateConfig.filetypes || get(templateConfig, 'filetypes', 'html')
-
-        const templates = await glob(`${outputDir}/**/*.+(${extensions})`)
-
-        if (templates.length === 0) {
-          spinner.warn(`Error: no files with the .${extensions} extension found in ${templateConfig.source}`)
-          return
-        }
-
-        // Store template config currently being processed
-        config.build.currentTemplates = templateConfig
-
-        if (config.events && typeof config.events.beforeCreate === 'function') {
-          await config.events.beforeCreate(config)
-        }
-
-        await asyncForEach(templates, async file => {
-          const html = await fs.readFile(file, 'utf8')
-
-          await render(html, {
-            maizzle: {
-              ...config,
-              env
-            },
-            tailwind: {
-              compiled: css
-            },
-            ...config.events
-          })
-            .then(async ({html, config}) => {
+    /**
+     * Get all files in the template config's source directory
+     * Supports `source` defined as:
+     * - string
+     * - array of strings
+     * - function that returns either of the above
+     *
+     *  */
+    const templateSource = []
+    const templateTypeErrorMessage = 'Invalid template source: expected string or array of strings, got '
+
+    if (typeof templateConfig.source === 'function') {
+      const sources = templateConfig.source(config)
+
+      if (Array.isArray(sources)) {
+        templateSource.push(...sources)
+      } else if (typeof sources === 'string') {
+        templateSource.push(sources)
+      } else {
+        throw new TypeError(templateTypeErrorMessage + typeof sources)
+      }
+    } else {
+      if (Array.isArray(templateConfig.source)) {
+        templateSource.push(...templateConfig.source)
+      } else if (typeof templateConfig.source === 'string') {
+        templateSource.push(templateConfig.source)
+      } else {
+        throw new TypeError(templateTypeErrorMessage + typeof templateConfig.source)
+      }
+    }
+
+    // Parse each template source
+    await asyncForEach(templateSource, async source => {
+      /**
+       * Copy single-file sources correctly
+       * If `src` is a file, `dest` cannot be a directory
+       * https://github.com/jprichardson/node-fs-extra/issues/323
+       */
+      const out = fs.lstatSync(source).isFile() ? `${outputDir}/${path.basename(source)}` : outputDir
+
+      await fs
+        .copy(source, out)
+        .then(async () => {
+          const extensions = Array.isArray(templateConfig.filetypes)
+            ? templateConfig.filetypes.join('|')
+            : templateConfig.filetypes || get(templateConfig, 'filetypes', 'html')
+
+          const templates = await glob(`${outputDir}/**/*.+(${extensions})`)
+
+          if (templates.length === 0) {
+            spinner.warn(`Error: no files with the .${extensions} extension found in ${templateConfig.source}`)
+            return
+          }
+
+          if (config.events && typeof config.events.beforeCreate === 'function') {
+            await config.events.beforeCreate(config)
+          }
+
+          await asyncForEach(templates, async file => {
+            const html = await fs.readFile(file, 'utf8')
+
+            try {
+              const compiled = await render(html, {
+                maizzle: {
+                  ...config,
+                  env
+                },
+                tailwind: {
+                  compiled: css
+                },
+                ...config.events
+              })
+
               const destination = config.permalink || file
 
               /**
@@ -80,17 +119,20 @@ module.exports = async (env, spinner, config) => {
                * tags from the markup before outputting the file.
                */
 
-              // Make this a breaking change in 4.0, get only from `templateConfig`
-              const plaintextConfig = get(templateConfig, 'plaintext', get(config, 'plaintext'))
-              const plaintextDestination = get(plaintextConfig, 'destination', config.permalink || file)
+              const plaintextConfig = get(templateConfig, 'plaintext')
+              const plaintextPath = get(plaintextConfig, 'destination.path', config.permalink || file)
 
-              if ((typeof plaintextConfig === 'boolean' && plaintextConfig) || !isEmpty(plaintextConfig)) {
+              if (Boolean(plaintextConfig) || !isEmpty(plaintextConfig)) {
                 await Plaintext
-                  .generate(html, plaintextDestination, merge(config, {filepath: file}))
+                  .generate(
+                    compiled.html,
+                    plaintextPath,
+                    merge(plaintextConfig, {filepath: file})
+                  )
                   .then(({plaintext, destination}) => fs.outputFile(destination, plaintext))
               }
 
-              html = removePlaintextTags(html, config)
+              compiled.html = removePlaintextTags(compiled.html, config)
 
               /**
                * Output file
@@ -99,25 +141,23 @@ module.exports = async (env, spinner, config) => {
               const extension = get(templateConfig, 'destination.extension', 'html')
               const finalDestination = `${parts.dir}/${parts.name}.${extension}`
 
-              await fs.outputFile(finalDestination, html)
-                .then(async () => {
-                  /**
-                   * Remove original file if its path is different
-                   * from the final destination path.
-                   *
-                   * This ensures non-HTML files do not pollute
-                   * the build destination folder.
-                   */
-                  if (finalDestination !== file) {
-                    await fs.remove(file)
-                  }
-
-                  // Keep track of handled files
-                  files.push(file)
-                  parsed.push(file)
-                })
-            })
-            .catch(error => {
+              await fs.outputFile(finalDestination, compiled.html)
+
+              /**
+               * Remove original file if its path is different
+               * from the final destination path.
+               *
+               * This ensures non-HTML files do not pollute
+               * the build destination folder.
+               */
+              if (finalDestination !== file) {
+                await fs.remove(file)
+              }
+
+              // Keep track of handled files
+              files.push(file)
+              parsed.push(file)
+            } catch (error) {
               switch (config.build.fail) {
                 case 'silent':
                   spinner.warn(`Failed to compile template: ${path.basename(file)}`)
@@ -130,29 +170,30 @@ module.exports = async (env, spinner, config) => {
                   spinner.fail(`Failed to compile template: ${path.basename(file)}`)
                   throw error
               }
-            })
-        })
+            }
+          })
 
-        const assets = {source: '', destination: 'assets', ...get(templateConfig, 'assets')}
+          const assets = {source: '', destination: 'assets', ...get(templateConfig, 'assets')}
 
-        if (Array.isArray(assets.source)) {
-          await asyncForEach(assets.source, async source => {
-            if (fs.existsSync(source)) {
-              await fs.copy(source, path.join(templateConfig.destination.path, assets.destination)).catch(error => spinner.warn(error.message))
+          if (Array.isArray(assets.source)) {
+            await asyncForEach(assets.source, async source => {
+              if (fs.existsSync(source)) {
+                await fs.copy(source, path.join(templateConfig.destination.path, assets.destination)).catch(error => spinner.warn(error.message))
+              }
+            })
+          } else {
+            if (fs.existsSync(assets.source)) {
+              await fs.copy(assets.source, path.join(templateConfig.destination.path, assets.destination)).catch(error => spinner.warn(error.message))
             }
-          })
-        } else {
-          if (fs.existsSync(assets.source)) {
-            await fs.copy(assets.source, path.join(templateConfig.destination.path, assets.destination)).catch(error => spinner.warn(error.message))
           }
-        }
 
-        await glob(path.join(templateConfig.destination.path, '/**/*.*'))
-          .then(contents => {
-            files = [...new Set([...files, ...contents])]
-          })
-      })
-      .catch(error => spinner.warn(error.message))
+          await glob(path.join(templateConfig.destination.path, '/**/*.*'))
+            .then(contents => {
+              files = [...new Set([...files, ...contents])]
+            })
+        })
+        .catch(error => spinner.warn(error.message))
+    })
   })
 
   if (config.events && typeof config.events.afterBuild === 'function') {

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

@@ -3,7 +3,8 @@ const {get, merge} = require('lodash')
 const posthtml = require('../posthtml')
 const Tailwind = require('../tailwindcss')
 const Transformers = require('../../transformers')
-const posthtmlMSO = require('../../transformers/posthtml-mso')
+const posthtmlMSO = require('../../transformers/posthtmlMso')
+const Config = require('../config')
 
 module.exports = async (html, options) => {
   process.env.NODE_ENV = get(options, 'maizzle.env', 'local')
@@ -16,16 +17,14 @@ module.exports = async (html, options) => {
     throw new RangeError('received empty string')
   }
 
-  let config = get(options, 'maizzle', {})
+  const fileConfig = await Config.getMerged(process.env.NODE_ENV)
 
-  const tailwindConfig = get(options, 'tailwind.config', {})
-  const cssString = get(options, 'tailwind.css', '@tailwind components; @tailwind utilities;')
+  let config = merge(fileConfig, get(options, 'maizzle', {}))
 
-  let {frontmatter} = fm(html)
+  const tailwindConfig = get(options, 'tailwind.config', {})
+  const cssString = get(options, 'tailwind.css', '')
 
-  if (frontmatter) {
-    frontmatter = await posthtml(frontmatter, config)
-  }
+  const {frontmatter} = fm(html)
 
   html = `---\n${frontmatter}\n---\n\n${fm(html).body}`
 

package/src/generators/plaintext.js

@@ -1,52 +1,49 @@
-const path = require('path')
-const {get} = require('lodash')
-const {stripHtml} = require('string-strip-html')
-
-module.exports.generate = async (html, destination, config) => {
-  const options = get(config, 'build.currentTemplates.plaintext', get(config, 'plaintext', {}))
-  const configDestinationPath = get(options, 'destination.path')
-  const extension = get(options, 'destination.extension', 'txt')
-  const plaintext = stripHtml(html, {
-    dumpLinkHrefsNearby: {
-      enabled: true
-    },
-    ...options
-  }).result
-
-  // If we set plaintext.destination.path in config/fm
-  if (configDestinationPath) {
-    // Naive path checking, this does not support dot folders
-    const isFilePath = Boolean(path.parse(configDestinationPath).ext)
-
-    /**
-     * Using a file path will generate a single plaintext file,
-     * no matter how many templates there are.
-     *
-     * It will be based on the last-processed template.
-     */
-    if (isFilePath) {
-      destination = configDestinationPath
-
-      return {plaintext, destination}
-    }
-
-    /**
-     * Using a directory-like path for plaintext.destination.path
-     */
-    destination = path.join(configDestinationPath, path.basename(config.filepath, path.extname(config.filepath)) + '.' + extension)
-
-    return {plaintext, destination}
-  }
-
-  /**
-   * Use template's `permalink` Front Matter key,
-   * fall back to the original `destination`.
-   */
-  destination = get(config, 'permalink', destination)
-
-  if (typeof destination === 'string') {
-    destination = path.join(path.dirname(destination), path.basename(destination, path.extname(destination)) + '.' + extension)
-  }
-
-  return {plaintext, destination}
-}
+const path = require('path')
+const {get} = require('lodash')
+const {stripHtml} = require('string-strip-html')
+
+module.exports.generate = async (html, destination, config) => {
+  const configDestinationPath = get(config, 'destination.path')
+  const extension = get(config, 'destination.extension', 'txt')
+
+  const plaintext = stripHtml(html, {
+    dumpLinkHrefsNearby: {
+      enabled: true
+    },
+    ...get(config, 'options', {})
+  }).result
+
+  // If we set plaintext.destination.path in config/fm
+  if (configDestinationPath) {
+    /**
+     * Using a file path will generate a single plaintext file,
+     * no matter how many templates there are.
+     *
+     * It will be based on the last-processed template.
+     */
+    if (path.extname(configDestinationPath)) {
+      destination = configDestinationPath
+
+      return {plaintext, destination}
+    }
+
+    /**
+     * Using a directory-like path for plaintext.destination.path
+     */
+    destination = path.join(configDestinationPath, path.basename(config.filepath, path.extname(config.filepath)) + '.' + extension)
+
+    return {plaintext, destination}
+  }
+
+  /**
+   * Use template's `permalink` Front Matter key,
+   * fall back to the original `destination`.
+   */
+  destination = get(config, 'permalink', destination)
+
+  if (typeof destination === 'string') {
+    destination = path.join(path.dirname(destination), path.basename(destination, path.extname(destination)) + '.' + extension)
+  }
+
+  return {plaintext, destination}
+}

package/src/generators/postcss.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const {get} = require('lodash')
+const postcss = require('postcss')
+const postcssImport = require('postcss-import')
+const postcssNested = require('tailwindcss/nesting')
+const mergeLonghand = require('postcss-merge-longhand')
+
+module.exports = {
+  process: async (css = '', maizzleConfig = {}, spinner = null) => {
+    const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
+
+    return postcss([
+      postcssImport({path: path.dirname(userFilePath)}),
+      postcssNested(),
+      maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
+      ...get(maizzleConfig, 'build.postcss.plugins', [])
+    ])
+      .process(css, {from: undefined})
+      .then(result => result.css)
+      .catch(error => {
+        console.error(error)
+        if (spinner) {
+          spinner.stop()
+        }
+
+        throw new Error(`PostCSS processing failed`)
+      })
+  }
+}

package/src/generators/posthtml.js

@@ -1,60 +1,66 @@
-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 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}
+  )
+
+  const fetchPlugin = fetch(
+    merge(
+      {
+        expressions: merge({...expressionsOptions, locals})
+      },
+      get(config, 'build.posthtml.fetch', {})
+    )
+  )
+
+  return posthtml([
+    fetchPlugin,
+    expressions({...expressionsOptions, locals}),
+    layouts(
+      merge(
+        {
+          strict: false,
+          expressions: merge({...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)
+}