@maizzle/framework 4.0.0 → 4.0.1

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

@@ -1,67 +1,67 @@
-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', '')
-
-  const {frontmatter} = fm(html)
-
-  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', '')
+
+  const {frontmatter} = fm(html)
+
+  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/postcss.js

@@ -1,29 +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`)
-      })
-  }
-}
+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,66 +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 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)
-}
+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)
+}

package/src/index.js

@@ -1,17 +1,17 @@
-const serve = require('./commands/serve')
-const toFile = require('./commands/build')
-const transformers = require('./transformers')
-const toString = require('./functions/render')
-const PostCSS = require('./generators/postcss')
-const toPlaintext = require('./functions/plaintext')
-const TailwindCSS = require('./generators/tailwindcss')
-
-module.exports = {
-  serve,
-  build: toFile,
-  ...transformers,
-  render: toString,
-  postcss: PostCSS,
-  plaintext: toPlaintext,
-  tailwindcss: TailwindCSS
-}
+const serve = require('./commands/serve')
+const toFile = require('./commands/build')
+const transformers = require('./transformers')
+const toString = require('./functions/render')
+const PostCSS = require('./generators/postcss')
+const toPlaintext = require('./functions/plaintext')
+const TailwindCSS = require('./generators/tailwindcss')
+
+module.exports = {
+  serve,
+  build: toFile,
+  ...transformers,
+  render: toString,
+  postcss: PostCSS,
+  plaintext: toPlaintext,
+  tailwindcss: TailwindCSS
+}

package/src/transformers/attributeToStyle.js

@@ -1,90 +1,90 @@
-const posthtml = require('posthtml')
-const parseAttrs = require('posthtml-attrs-parser')
-const {get, forEach, intersection, keys, isEmpty} = require('lodash')
-
-module.exports = async (html, config = {}, direct = false) => {
-  const posthtmlOptions = get(config, 'build.posthtml.options', {})
-  const attributes = get(config, 'inlineCSS.attributeToStyle', false)
-
-  if (typeof attributes === 'boolean' && attributes) {
-    return posthtml([attributesToStyle()]).process(html, posthtmlOptions).then(result => result.html)
-  }
-
-  if (Array.isArray(attributes) && !isEmpty(attributes)) {
-    return posthtml([attributesToStyle({attributes})]).process(html, posthtmlOptions).then(result => result.html)
-  }
-
-  if (direct) {
-    return posthtml([
-      attributesToStyle({
-        attributes: Array.isArray(config) ? config : []
-      })
-    ]).process(html).then(result => result.html)
-  }
-
-  return html
-}
-
-const attributesToStyle = (options = {}) => tree => {
-  options.attributes = options.attributes || ['width', 'height', 'bgcolor', 'background', 'align', 'valign']
-
-  const process = node => {
-    const nodeAttributes = parseAttrs(node.attrs)
-    const matches = intersection(keys(nodeAttributes), options.attributes)
-    const nodeStyle = get(node.attrs, 'style')
-    const csstoInline = []
-
-    forEach(matches, attribute => {
-      let value = get(node.attrs, attribute)
-
-      switch (attribute) {
-        case 'bgcolor':
-          csstoInline.push(`background-color: ${value}`)
-          break
-
-        case 'background':
-          csstoInline.push(`background-image: url('${value}')`)
-          break
-
-        case 'width':
-          value = Number.parseInt(value, 10) + (value.match(/px|%/) || 'px')
-          csstoInline.push(`width: ${value}`)
-          break
-
-        case 'height':
-          value = Number.parseInt(value, 10) + (value.match(/px|%/) || 'px')
-          csstoInline.push(`height: ${value}`)
-          break
-
-        case 'align':
-          if (node.tag !== 'table') {
-            return csstoInline.push(`text-align: ${value}`)
-          }
-
-          if (['left', 'right'].includes(value)) {
-            csstoInline.push(`float: ${value}`)
-          }
-
-          if (value === 'center') {
-            csstoInline.push('margin-left: auto', 'margin-right: auto')
-          }
-
-          break
-
-        case 'valign':
-          csstoInline.push(`vertical-align: ${value}`)
-          break
-
-        // No default
-      }
-    })
-
-    nodeAttributes.style = nodeStyle ? `${nodeStyle} ${csstoInline.join('; ')}` : `${csstoInline.join('; ')}`
-
-    node.attrs = nodeAttributes.compose()
-
-    return node
-  }
-
-  return tree.walk(process)
-}
+const posthtml = require('posthtml')
+const parseAttrs = require('posthtml-attrs-parser')
+const {get, forEach, intersection, keys, isEmpty} = require('lodash')
+
+module.exports = async (html, config = {}, direct = false) => {
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  const attributes = get(config, 'inlineCSS.attributeToStyle', false)
+
+  if (typeof attributes === 'boolean' && attributes) {
+    return posthtml([attributesToStyle()]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  if (Array.isArray(attributes) && !isEmpty(attributes)) {
+    return posthtml([attributesToStyle({attributes})]).process(html, posthtmlOptions).then(result => result.html)
+  }
+
+  if (direct) {
+    return posthtml([
+      attributesToStyle({
+        attributes: Array.isArray(config) ? config : []
+      })
+    ]).process(html).then(result => result.html)
+  }
+
+  return html
+}
+
+const attributesToStyle = (options = {}) => tree => {
+  options.attributes = options.attributes || ['width', 'height', 'bgcolor', 'background', 'align', 'valign']
+
+  const process = node => {
+    const nodeAttributes = parseAttrs(node.attrs)
+    const matches = intersection(keys(nodeAttributes), options.attributes)
+    const nodeStyle = get(node.attrs, 'style')
+    const csstoInline = []
+
+    forEach(matches, attribute => {
+      let value = get(node.attrs, attribute)
+
+      switch (attribute) {
+        case 'bgcolor':
+          csstoInline.push(`background-color: ${value}`)
+          break
+
+        case 'background':
+          csstoInline.push(`background-image: url('${value}')`)
+          break
+
+        case 'width':
+          value = Number.parseInt(value, 10) + (value.match(/px|%/) || 'px')
+          csstoInline.push(`width: ${value}`)
+          break
+
+        case 'height':
+          value = Number.parseInt(value, 10) + (value.match(/px|%/) || 'px')
+          csstoInline.push(`height: ${value}`)
+          break
+
+        case 'align':
+          if (node.tag !== 'table') {
+            return csstoInline.push(`text-align: ${value}`)
+          }
+
+          if (['left', 'right'].includes(value)) {
+            csstoInline.push(`float: ${value}`)
+          }
+
+          if (value === 'center') {
+            csstoInline.push('margin-left: auto', 'margin-right: auto')
+          }
+
+          break
+
+        case 'valign':
+          csstoInline.push(`vertical-align: ${value}`)
+          break
+
+        // No default
+      }
+    })
+
+    nodeAttributes.style = nodeStyle ? `${nodeStyle} ${csstoInline.join('; ')}` : `${csstoInline.join('; ')}`
+
+    node.attrs = nodeAttributes.compose()
+
+    return node
+  }
+
+  return tree.walk(process)
+}