@maizzle/framework 4.4.0 → 4.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "main": "src/index.js",
@@ -36,7 +36,7 @@
     "release": "np"
   },
   "files": [
-    "src/*",
+    "src/**/*",
     "bin/*"
   ],
   "dependencies": {

package/src/generators/posthtml/defaultComponentsConfig.js

@@ -0,0 +1,9 @@
+module.exports = {
+  root: './',
+  folders: ['src/components', 'src/layouts', 'src/templates'],
+  fileExtension: 'html',
+  tag: 'component',
+  attribute: 'src',
+  yield: 'content',
+  propsAttribute: 'locals'
+}

package/src/generators/posthtml/index.js

@@ -5,6 +5,7 @@ const fetch = require('posthtml-fetch')
 const layouts = require('posthtml-extend')
 const components = require('posthtml-component')
 const defaultConfig = require('./defaultConfig')
+const defaultComponentsConfig = require('./defaultComponentsConfig')
 
 module.exports = async (html, config) => {
   const layoutsOptions = get(config, 'build.layouts', {})
@@ -35,6 +36,20 @@ module.exports = async (html, config) => {
     )
   )
 
+  const defaultComponentsOptions = merge(
+    defaultComponentsConfig,
+    {
+      folders: [
+        ...defaultComponentsConfig.folders,
+        ...get(componentsOptions, 'folders', [])
+      ]
+    },
+    {
+      root: componentsOptions.root || './',
+      expressions: {...expressionsOptions, locals}
+    }
+  )
+
   return posthtml([
     fetchPlugin,
     layouts(
@@ -48,15 +63,7 @@ module.exports = async (html, config) => {
     ),
     components(
       merge(
-        {
-          root: componentsOptions.root || './',
-          folders: ['src/components', 'src/layouts', 'src/templates'],
-          tag: 'component',
-          attribute: 'src',
-          yield: 'content',
-          propsAttribute: 'locals',
-          expressions: {...expressionsOptions, locals}
-        },
+        defaultComponentsOptions,
         componentsOptions
       )
     ),

package/src/generators/tailwindcss.js

@@ -7,6 +7,7 @@ const postcssNested = require('tailwindcss/nesting')
 const {requireUncached} = require('../utils/helpers')
 const mergeLonghand = require('postcss-merge-longhand')
 const {get, isObject, isEmpty, merge} = require('lodash')
+const defaultComponentsConfig = require('./posthtml/defaultComponentsConfig')
 
 const addImportantPlugin = () => {
   return {
@@ -48,22 +49,24 @@ module.exports = {
 
     // Merge user's Tailwind config on top of a 'base' config
     const layoutsRoot = get(config, 'build.layouts.root')
-    const componentsRoot = get(config, 'build.components.root')
+    const componentsRoot = get(config, 'build.components.root', defaultComponentsConfig.root)
 
     const layoutsPath = typeof layoutsRoot === 'string' && layoutsRoot ?
-      `${layoutsRoot}/**/*.html`.replace(/\/\//g, '/') :
-      './src/layouts/**/*.html'
+      `${layoutsRoot}/**/*.*`.replace(/\/\//g, '/') :
+      'src/layouts/**/*.*'
 
-    const componentsPath = typeof componentsRoot === 'string' && componentsRoot ?
-      `${componentsRoot}/**/*.html`.replace(/\/\//g, '/') :
-      './src/components/**/*.html'
+    const componentsPath = defaultComponentsConfig.folders.map(folder => {
+      return path
+        .join(componentsRoot, folder, `**/*.${defaultComponentsConfig.fileExtension}`)
+        .replace(/\\/g, '/')
+        .replace(/\/\//g, '/')
+    })
 
     const tailwindConfig = merge({
       content: {
         files: [
-          layoutsPath,
-          componentsPath,
-          {raw: html, extension: 'html'}
+          ...componentsPath,
+          layoutsPath
         ]
       }
     }, userConfig(config))
@@ -72,48 +75,53 @@ module.exports = {
     if (Array.isArray(tailwindConfig.content)) {
       tailwindConfig.content = {
         files: [
+          ...componentsPath,
           layoutsPath,
-          componentsPath,
-          ...tailwindConfig.content,
-          {raw: html, extension: 'html'}
+          ...tailwindConfig.content
         ]
       }
     }
 
+    // Add raw HTML if using API
+    if (html) {
+      tailwindConfig.content.files.push({raw: html, extension: 'html'})
+    }
+
     // Include all `build.templates.source` paths when scanning for selectors to preserve
     const buildTemplates = get(config, 'build.templates')
 
     if (buildTemplates) {
       const templateObjects = Array.isArray(buildTemplates) ? buildTemplates : [buildTemplates]
-      const templateSources = templateObjects.map(template => {
+      const fileTypes = get(buildTemplates, 'filetypes', 'html')
+
+      templateObjects.forEach(template => {
         const source = get(template, 'source')
 
         if (typeof source === 'function') {
           const sources = source(config)
 
           if (Array.isArray(sources)) {
-            sources.map(s => tailwindConfig.content.files.push(s))
+            sources.map(s => tailwindConfig.content.files.push(`${s}/**/*.${fileTypes}`))
           } else if (typeof sources === 'string') {
             tailwindConfig.content.files.push(sources)
           }
-
-          // Must return a valid `content` entry
-          return {raw: '', extension: 'html'}
         }
 
         // Support single-file sources i.e. src/templates/index.html
-        if (typeof source === 'string' && Boolean(path.extname(source))) {
+        else if (typeof source === 'string' && Boolean(path.extname(source))) {
           tailwindConfig.content.files.push(source)
-
-          return {raw: '', extension: 'html'}
         }
 
-        return `${source}/**/*.*`
+        // Default behavior - directory sources as a string
+        else {
+          tailwindConfig.content.files.push(`${source}/**/*.${fileTypes}`)
+        }
       })
-
-      tailwindConfig.content.files.push(...templateSources)
     }
 
+    // Filter out any duplicate content paths
+    tailwindConfig.content.files = [...new Set(tailwindConfig.content.files)]
+
     const userFilePath = get(config, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
     const userFileExists = await fs.pathExists(userFilePath)