@maizzle/framework 3.7.2 → 4.0.0-alpha.1

package/.github/workflows/nodejs.yml

@@ -1,29 +1,28 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: Node.js CI
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [12, 14, 16]
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ matrix.node-version }}
-      - run: npm install
-      - run: npm test
-        env:
-          CI: true
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12, 14, 16]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm test
+        env:
+          CI: true

package/package.json

@@ -1,84 +1,87 @@
-{
-  "name": "@maizzle/framework",
-  "version": "3.7.2",
-  "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
-  "license": "MIT",
-  "main": "src/index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/maizzle/framework.git"
-  },
-  "bugs": "https://github.com/maizzle/framework/issues",
-  "homepage": "https://maizzle.com",
-  "author": "Cosmin Popovici (https://github.com/cossssmin)",
-  "keywords": [
-    "maizzle",
-    "tailwindcss",
-    "responsive-email",
-    "email-framework",
-    "email-template",
-    "email-marketing",
-    "email-campaigns",
-    "email-newsletter",
-    "email-boilerplate",
-    "html-emails"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "test": "xo && nyc ava -s",
-    "style": "xo",
-    "release": "np"
-  },
-  "dependencies": {
-    "browser-sync": "^2.26.13",
-    "color-shorthand-hex-to-six-digit": "^3.0.2",
-    "email-comb": "^5.0.0",
-    "front-matter": "^4.0.0",
-    "fs-extra": "^10.0.0",
-    "glob-promise": "^4.1.0",
-    "html-crush": "^4.0.0",
-    "juice": "^8.0.0",
-    "lodash": "^4.17.20",
-    "ora": "^5.1.0",
-    "postcss": "^8.2.14",
-    "postcss-import": "^14.0.0",
-    "postcss-merge-longhand": "^5.0.1",
-    "posthtml": "^0.16.4",
-    "posthtml-attrs-parser": "^0.1.1",
-    "posthtml-content": "^0.0.3",
-    "posthtml-expressions": "^1.8.1",
-    "posthtml-extend": "^0.6.0",
-    "posthtml-extra-attributes": "^1.0.0",
-    "posthtml-fetch": "^2.0.0",
-    "posthtml-markdownit": "^1.2.2",
-    "posthtml-modules": "^0.7.4",
-    "posthtml-mso": "^1.0.2",
-    "posthtml-postcss-merge-longhand": "^1.0.2",
-    "posthtml-remove-attributes": "^1.0.0",
-    "posthtml-safe-class-names": "^1.0.4",
-    "posthtml-url-parameters": "^1.0.4",
-    "pretty": "^2.0.0",
-    "prevent-widows": "^1.0.2",
-    "query-string": "^7.0.0",
-    "string-strip-html": "^8.2.0",
-    "tailwindcss": "^2.2.2",
-    "tailwindcss-box-shadow": "^1.0.0"
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.0.2",
-    "ava": "^3.13.0",
-    "np": "*",
-    "nyc": "^15.1.0",
-    "xo": "0.39.1"
-  },
-  "engines": {
-    "node": ">=12.13.0"
-  },
-  "ava": {
-    "files": [
-      "test/**/test*.js"
-    ]
-  }
-}
+{
+  "name": "@maizzle/framework",
+  "version": "4.0.0-alpha.1",
+  "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
+  "license": "MIT",
+  "main": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/maizzle/framework.git"
+  },
+  "bugs": "https://github.com/maizzle/framework/issues",
+  "homepage": "https://maizzle.com",
+  "author": "Cosmin Popovici (https://github.com/cossssmin)",
+  "keywords": [
+    "maizzle",
+    "tailwindcss",
+    "responsive-email",
+    "email-framework",
+    "email-template",
+    "email-marketing",
+    "email-campaigns",
+    "email-newsletter",
+    "email-boilerplate",
+    "html-emails"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "c8 ava -s",
+    "pretest": "xo",
+    "style": "xo",
+    "release": "np"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.4.0",
+    "browser-sync": "^2.26.13",
+    "color-shorthand-hex-to-six-digit": "^3.0.2",
+    "email-comb": "^5.0.0",
+    "front-matter": "^4.0.0",
+    "fs-extra": "^10.0.0",
+    "glob-promise": "^4.1.0",
+    "html-crush": "^4.0.0",
+    "is-url-superb": "^5.0.0",
+    "juice": "^8.0.0",
+    "lodash": "^4.17.20",
+    "ora": "^5.1.0",
+    "postcss": "^8.4.4",
+    "postcss-import": "^14.0.0",
+    "postcss-merge-longhand": "^5.0.1",
+    "posthtml": "^0.16.4",
+    "posthtml-attrs-parser": "^0.1.1",
+    "posthtml-base-url": "^1.0.1",
+    "posthtml-content": "^0.0.3",
+    "posthtml-expressions": "^1.8.1",
+    "posthtml-extend": "^0.6.0",
+    "posthtml-extra-attributes": "^1.0.0",
+    "posthtml-fetch": "^2.0.0",
+    "posthtml-markdownit": "^1.2.2",
+    "posthtml-modules": "^0.8.0",
+    "posthtml-mso": "^1.0.2",
+    "posthtml-postcss-merge-longhand": "^1.0.2",
+    "posthtml-remove-attributes": "^1.0.0",
+    "posthtml-safe-class-names": "^1.0.4",
+    "posthtml-url-parameters": "^1.0.4",
+    "pretty": "^2.0.0",
+    "prevent-widows": "^1.0.2",
+    "query-string": "^7.1.0",
+    "string-strip-html": "^8.2.0",
+    "tailwindcss": "^3.0.0",
+    "tailwindcss-box-shadow": "^1.0.0"
+  },
+  "devDependencies": {
+    "ava": "^4.0.1",
+    "c8": "^7.11.0",
+    "np": "*",
+    "xo": "0.39.1"
+  },
+  "engines": {
+    "node": ">=12.13.0"
+  },
+  "ava": {
+    "files": [
+      "test/**/test*.js"
+    ]
+  }
+}

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

@@ -29,130 +29,158 @@ 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('@tailwind components; @tailwind utilities;', '', {}, 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}) => {
-              const destination = config.permalink || file
-
-              /**
-               * Generate plaintext
-               *
-               * We do this first so that we can remove the <plaintext>
-               * 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)
-
-              if ((typeof plaintextConfig === 'boolean' && plaintextConfig) || !isEmpty(plaintextConfig)) {
-                await Plaintext
-                  .generate(html, plaintextDestination, merge(config, {filepath: file}))
-                  .then(({plaintext, destination}) => fs.outputFile(destination, plaintext))
-              }
+    /**
+     * 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 = []
+
+    if (typeof templateConfig.source === 'function') {
+      const sources = templateConfig.source()
+      if (Array.isArray(sources)) {
+        templateSource.push(...sources)
+      } else {
+        templateSource.push(sources)
+      }
+    } else {
+      if (Array.isArray(templateConfig.source)) {
+        templateSource.push(...templateConfig.source)
+      } else {
+        templateSource.push(templateConfig.source)
+      }
+    }
+
+    // Parse each template source
+    await asyncForEach(templateSource, async source => {
+      await fs
+        .copy(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
+          }
 
-              html = removePlaintextTags(html, config)
-
-              /**
-               * Output file
-               */
-              const parts = path.parse(destination)
-              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 => {
-              switch (config.build.fail) {
-                case 'silent':
-                  spinner.warn(`Failed to compile template: ${path.basename(file)}`)
-                  break
-                case 'verbose':
-                  spinner.warn(`Failed to compile template: ${path.basename(file)}`)
-                  console.error(error)
-                  break
-                default:
-                  spinner.fail(`Failed to compile template: ${path.basename(file)}`)
-                  throw error
-              }
+          // 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}) => {
+                const destination = config.permalink || file
+
+                /**
+                 * Generate plaintext
+                 *
+                 * We do this first so that we can remove the <plaintext>
+                 * tags from the markup before outputting the file.
+                 */
+
+                const plaintextConfig = get(templateConfig, 'plaintext')
+                const plaintextDestination = get(plaintextConfig, 'destination', config.permalink || file)
+
+                if ((typeof plaintextConfig === 'boolean' && plaintextConfig) || !isEmpty(plaintextConfig)) {
+                  await Plaintext
+                    .generate(html, plaintextDestination, merge(config, {filepath: file}))
+                    .then(({plaintext, destination}) => fs.outputFile(destination, plaintext))
+                }
+
+                html = removePlaintextTags(html, config)
+
+                /**
+                 * Output file
+                 */
+                const parts = path.parse(destination)
+                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 => {
+                switch (config.build.fail) {
+                  case 'silent':
+                    spinner.warn(`Failed to compile template: ${path.basename(file)}`)
+                    break
+                  case 'verbose':
+                    spinner.warn(`Failed to compile template: ${path.basename(file)}`)
+                    console.error(error)
+                    break
+                  default:
+                    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,7 +17,9 @@ 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)
+
+  let config = merge(fileConfig, get(options, 'maizzle', {}))
 
   const tailwindConfig = get(options, 'tailwind.config', {})
   const cssString = get(options, 'tailwind.css', '@tailwind components; @tailwind utilities;')

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