@maizzle/framework 4.0.0-alpha.2 → 4.0.0-alpha.5

package/src/index.js

@@ -1,151 +1,13 @@
-const ora = require('ora')
-const path = require('path')
-const fs = require('fs-extra')
-const {get, merge} = require('lodash')
-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 getBrowserSync = () => {
-  if (!global.cachedBrowserSync) {
-    const bs = require('browser-sync')
-    global.cachedBrowserSync = bs.create()
-  }
-
-  return global.cachedBrowserSync
-}
-
-const self = module.exports = { // eslint-disable-line
-  ...transformers,
-  render: async (html, options) => Output.toString(html, options),
-  plaintext: async (html, config = {}) => Plaintext.generate(html, false, config),
-  build: async (env = 'local', config = {}) => {
-    const start = new Date()
-    const spinner = ora('Building emails...').start()
-
-    return Output.toDisk(env, spinner, config)
-      .then(({files, parsed}) => {
-        const elapsedSeconds = (Date.now() - start) / 1000
-
-        if (get(config, 'build.command') === 'serve') {
-          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`)
-        }
-
-        return {files}
-      })
-      .catch(error => {
-        throw error
-      })
-  },
-  serve: async (env = 'local', config = {}) => {
-    config = merge(
-      config,
-      await Config.getMerged(env),
-      {
-        build: {
-          command: 'serve'
-        }
-      }
-    )
-
-    await self
-      .build(env, config)
-      .then(async () => {
-        let templates = get(config, 'build.templates')
-        templates = Array.isArray(templates) ? templates : [templates]
-
-        const templatePaths = [...new Set(templates.map(config => `${get(config, 'source', 'src')}/**`))]
-        const globalPaths = [
-          'src/**',
-          get(config, 'build.tailwind.config', 'tailwind.config.js'),
-          [...new Set(get(config, 'build.browsersync.watch', []))]
-        ]
-
-        const spinner = ora()
-
-        // Watch for Template file changes
-        getBrowserSync().watch(templatePaths)
-          .on('change', async file => {
-            if (get(config, 'build.console.clear')) {
-              clearConsole()
-            }
-
-            const start = new Date()
-
-            spinner.start('Building email...')
-
-            file = file.replace(/\\/g, '/')
-
-            const destination = get(config, 'build.currentTemplates.destination.path', 'build_local')
-            const extension = get(config, 'build.currentTemplates.destination.extension', 'html')
-            const fileSource = get(config, 'build.currentTemplates.source')
-            const parts = path.parse(path.join(destination, file.replace(fileSource, '')))
-            const finalDestination = path.join(parts.dir, `${parts.name}.${extension}`)
-
-            if (config.events && typeof config.events.beforeCreate === 'function') {
-              await config.events.beforeCreate(config)
-            }
-
-            const renderOptions = {
-              maizzle: config,
-              ...config.events
-            }
-
-            self
-              .render(await fs.readFile(file, 'utf8'), renderOptions)
-              .then(({html, config}) => fs.outputFile(config.permalink || finalDestination, html))
-              .then(() => {
-                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
-        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
-        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(() => getBrowserSync().reload()))
-          })
-
-        // Browsersync options
-        const baseDir = templates.map(t => t.destination.path)
-
-        const bsOptions = {
-          notify: false,
-          open: false,
-          port: 3000,
-          server: {
-            baseDir,
-            directory: true
-          },
-          tunnel: false,
-          ui: {port: 3001},
-          logFileChanges: false,
-          ...get(config, 'build.browsersync', {})
-        }
-
-        // Initialize Browsersync
-        getBrowserSync().init(bsOptions, () => {})
-      })
-      .catch(error => {
-        throw error
-      })
-  }
-}
+const serve = require('./commands/serve')
+const toFile = require('./commands/build')
+const transformers = require('./transformers')
+const toString = require('./functions/render')
+const toPlaintext = require('./functions/plaintext')
+
+module.exports = {
+  serve,
+  build: toFile,
+  ...transformers,
+  render: toString,
+  plaintext: toPlaintext
+}

package/src/transformers/transform.js

@@ -15,8 +15,8 @@ module.exports = async (html, config = {}, direct = false) => {
 
   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}`)
+  replacements.tailwindcss = css => compileCss(css)
+  replacements.postcss = css => compileCss(css)
 
   return posthtml([posthtmlContent(replacements)]).process(html, posthtmlOptions).then(result => result.html)
 }

package/test/fixtures/basic.html

@@ -1,9 +1,9 @@
-<!doctype html>
-<html>
-  <head>
-    <title>test></title>
-  </head>
-  <body>
-    <div>test</div>
-  </body>
-</html>
+<!doctype html>
+<html>
+  <head>
+    <title>test></title>
+  </head>
+  <body>
+    <div>test</div>
+  </body>
+</html>

package/test/test-tailwind.js

@@ -64,7 +64,7 @@ test('works with custom `files` sources', async t => {
   t.true(css.includes('.hidden'))
 })
 
-test('uses maizzle template paths when purging', async t => {
+test('uses maizzle template path as content source', async t => {
   const css = await Tailwind.compile(
     '@tailwind utilities;',
     '<div></div>',
@@ -81,6 +81,23 @@ test('uses maizzle template paths when purging', async t => {
   t.true(css.includes('.hidden'))
 })
 
+test('uses maizzle template path as content source (single file)', async t => {
+  const css = await Tailwind.compile(
+    '@tailwind utilities;',
+    '<div></div>',
+    {},
+    {
+      build: {
+        templates: {
+          source: './test/stubs/tailwind/preserve.html'
+        }
+      }
+    }
+  )
+
+  t.true(css.includes('.hidden'))
+})
+
 test('uses custom postcss plugins from the maizzle config', async t => {
   const maizzleConfig = {
     env: 'production',
@@ -96,5 +113,5 @@ test('uses custom postcss plugins from the maizzle config', async t => {
   const css = await Tailwind.compile('.test {transform: scale(0.5)}', '<div class="test">Test</a>', {}, maizzleConfig)
 
   t.not(css, undefined)
-  t.is(css.trim(), '.test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
+  t.is(css.trim(), '.inline {display: inline !important} .table {display: table !important} .contents {display: contents !important} .transform {-webkit-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;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} .test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
 })