@maizzle/framework 3.6.2 → 3.7.3

package/src/generators/tailwindcss.js

@@ -1,84 +1,84 @@
-const path = require('path')
-const fs = require('fs-extra')
-const postcss = require('postcss')
-const tailwindcss = require('tailwindcss')
-const postcssImport = require('postcss-import')
-const postcssNested = require('tailwindcss/nesting')
-const {requireUncached} = require('../utils/helpers')
-const mergeLonghand = require('postcss-merge-longhand')
-const {get, isObject, isEmpty, merge} = require('lodash')
-
-module.exports = {
-  compile: async (css = '', html = '', tailwindConfig = {}, maizzleConfig = {}) => {
-    tailwindConfig = (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) ? tailwindConfig : get(maizzleConfig, 'build.tailwind.config', 'tailwind.config.js')
-
-    // Compute the Tailwind config to use
-    const userConfig = () => {
-      // If a custom config object was passed, use that
-      if (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) {
-        return tailwindConfig
-      }
-
-      /**
-       * Try loading a fresh tailwind.config.js, with fallback to an empty object.
-       * This will use the default Tailwind config (with rem units etc)
-       */
-      try {
-        return requireUncached(path.resolve(process.cwd(), tailwindConfig))
-      } catch {
-        return {}
-      }
-    }
-
-    // Merge user's Tailwind config on top of a 'base' config
-    const config = merge({
-      important: true,
-      purge: {
-        enabled: maizzleConfig.env !== 'local',
-        content: [
-          'src/**/*.*',
-          {raw: html}
-        ],
-        options: get(maizzleConfig, 'purgeCSS', {})
-      },
-      corePlugins: {
-        animation: false,
-        backgroundOpacity: false,
-        borderOpacity: false,
-        boxShadow: false,
-        divideOpacity: false,
-        placeholderOpacity: false,
-        ringColor: false,
-        ringWidth: false,
-        ringOpacity: false,
-        ringOffsetColor: false,
-        textOpacity: false
-      },
-      plugins: []
-    }, userConfig())
-
-    // Merge user's Tailwind plugins with our default ones
-    config.plugins.push(require('tailwindcss-box-shadow'))
-
-    const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
-
-    css = await fs.pathExists(userFilePath).then(async exists => {
-      if (exists) {
-        const userFileCSS = await fs.readFile(path.resolve(userFilePath), 'utf8')
-        return userFileCSS
-      }
-
-      return css
-    })
-
-    return postcss([
-      postcssImport({path: userFilePath ? path.dirname(userFilePath) : []}),
-      postcssNested(),
-      tailwindcss(config),
-      maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
-      ...get(maizzleConfig, 'build.postcss.plugins', [])
-    ])
-      .process(css, {from: undefined})
-      .then(result => result.css)
-  }
-}
+const path = require('path')
+const fs = require('fs-extra')
+const postcss = require('postcss')
+const tailwindcss = require('tailwindcss')
+const postcssImport = require('postcss-import')
+const postcssNested = require('tailwindcss/nesting')
+const {requireUncached} = require('../utils/helpers')
+const mergeLonghand = require('postcss-merge-longhand')
+const {get, isObject, isEmpty, merge} = require('lodash')
+
+module.exports = {
+  compile: async (css = '', html = '', tailwindConfig = {}, maizzleConfig = {}) => {
+    tailwindConfig = (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) ? tailwindConfig : get(maizzleConfig, 'build.tailwind.config', 'tailwind.config.js')
+
+    // Compute the Tailwind config to use
+    const userConfig = () => {
+      // If a custom config object was passed, use that
+      if (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) {
+        return tailwindConfig
+      }
+
+      /**
+       * Try loading a fresh tailwind.config.js, with fallback to an empty object.
+       * This will use the default Tailwind config (with rem units etc)
+       */
+      try {
+        return requireUncached(path.resolve(process.cwd(), tailwindConfig))
+      } catch {
+        return {}
+      }
+    }
+
+    // Merge user's Tailwind config on top of a 'base' config
+    const config = merge({
+      important: true,
+      purge: {
+        enabled: maizzleConfig.env !== 'local',
+        content: [
+          'src/**/*.*',
+          {raw: html}
+        ],
+        options: get(maizzleConfig, 'purgeCSS', {})
+      },
+      corePlugins: {
+        animation: false,
+        backgroundOpacity: false,
+        borderOpacity: false,
+        boxShadow: false,
+        divideOpacity: false,
+        placeholderOpacity: false,
+        ringColor: false,
+        ringWidth: false,
+        ringOpacity: false,
+        ringOffsetColor: false,
+        textOpacity: false
+      },
+      plugins: []
+    }, userConfig())
+
+    // Merge user's Tailwind plugins with our default ones
+    config.plugins.push(require('tailwindcss-box-shadow'))
+
+    const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
+
+    css = await fs.pathExists(userFilePath).then(async exists => {
+      if (exists) {
+        const userFileCSS = await fs.readFile(path.resolve(userFilePath), 'utf8')
+        return userFileCSS + css
+      }
+
+      return css
+    })
+
+    return postcss([
+      postcssImport({path: userFilePath ? path.dirname(userFilePath) : []}),
+      postcssNested(),
+      tailwindcss(config),
+      maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
+      ...get(maizzleConfig, 'build.postcss.plugins', [])
+    ])
+      .process(css, {from: undefined})
+      .then(result => result.css)
+  }
+}

package/src/transformers/base-image-url.js

@@ -2,8 +2,7 @@ module.exports = async (html, config = {}, direct = false) => {
   const url = direct ? config : config.baseImageURL
 
   if (url) {
-    return html.replace(/(background="|src=")(?!\s+|url\('?'?\)|"|https?:\/\/)\/?/gi, '$1' + url)
-      .replace(/(background(-image)?:\s?url\('?)(?![')]|https?:\/\/)\/?/gi, '$1' + url)
+    return html.replace(/([^"'=\s(]+\.(?:jpe?g|a?png|avif|gif|svg|webp|jfif|pjpeg|pjp))/gi, url + '$1')
   }
 
   return html

package/src/transformers/six-hex.js

@@ -1,10 +1,10 @@
-const {get} = require('lodash')
-const {conv} = require('color-shorthand-hex-to-six-digit')
-
-module.exports = async (html, config = {}) => {
-  if (get(config, 'sixHex') === false) {
-    return html
-  }
-
-  return conv(html)
-}
+const {get} = require('lodash')
+const {conv} = require('color-shorthand-hex-to-six-digit')
+
+module.exports = async (html, config = {}) => {
+  if (get(config, 'sixHex') === false) {
+    return html
+  }
+
+  return conv(html)
+}

package/test/expected/transformers/base-image-url.html

@@ -0,0 +1,7 @@
+<div style="background-image: url('https://example.com/foo/bar.jpg')">
+  <img src="https://example.com/logo.png" srcset="https://example.com/assets/logo.png 1x, https://example.com/assets/logo@2x.png 2x">
+</div>
+
+<div style="background: url(https://example.com/foo/bar.jpg)">
+  <img background="https://example.com/example.jpg" srcset="https://example.com/example.jpg 1x, https://example.com/example@2x.jpg 2x">
+</div>

package/test/fixtures/basic.html

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

package/test/fixtures/transformers/base-image-url.html

@@ -0,0 +1,7 @@
+<div style="background-image: url('foo/bar.jpg')">
+  <img src="logo.png" srcset="assets/logo.png 1x, assets/logo@2x.png 2x">
+</div>
+
+<div style="background: url(foo/bar.jpg)">
+  <img background="example.jpg" srcset="example.jpg 1x, example@2x.jpg 2x">
+</div>

package/test/test-misc.js

@@ -1,8 +1,8 @@
-const test = require('ava')
-const path = require('path')
-const {requireUncached} = require('../src/utils/helpers')
-
-test('requires an uncached module', t => {
-  const helpers = requireUncached(path.resolve(process.cwd(), 'src/utils/helpers'))
-  t.is(typeof helpers.requireUncached, 'function')
-})
+const test = require('ava')
+const path = require('path')
+const {requireUncached} = require('../src/utils/helpers')
+
+test('requires an uncached module', t => {
+  const helpers = requireUncached(path.resolve(process.cwd(), 'src/utils/helpers'))
+  t.is(typeof helpers.requireUncached, 'function')
+})

package/test/test-tailwind.js

@@ -1,73 +1,73 @@
-const test = require('ava')
-const Tailwind = require('../src/generators/tailwindcss')
-
-test('uses Tailwind defaults if no config specified', async t => {
-  const css = await Tailwind.compile('@tailwind utilities', '<p class="xl:z-0"></p>', {}, {env: 'production'})
-
-  t.not(css, undefined)
-  t.true(css.includes('.xl\\:z-0'))
-})
-
-test('uses CSS file provided in environment config', async t => {
-  const config = {
-    env: 'production',
-    build: {
-      tailwind: {
-        css: './test/stubs/main.css'
-      }
-    }
-  }
-
-  const css = await Tailwind.compile('', '<div class="text-center foo">test</div>', {}, config)
-
-  t.not(css, undefined)
-  t.true(css.includes('.text-center'))
-  t.true(css.includes('.foo'))
-})
-
-test('uses purgeCSS options provided in the maizzle config', async t => {
-  const arrayConfig = {
-    purgeCSS: {
-      safelist: ['z-10'],
-      blocklist: ['text-center']
-    }
-  }
-
-  const objectConfig = {
-    purgeCSS: {
-      safelist: {
-        standard: ['z-10']
-      },
-      blocklist: ['text-center']
-    }
-  }
-
-  const css1 = await Tailwind.compile('@tailwind utilities', '<div class="z-0 text-center"></div>', {}, arrayConfig)
-  const css2 = await Tailwind.compile('@tailwind utilities', '<div class="z-0 text-center"></div>', {}, objectConfig)
-
-  t.true(css1.includes('.z-0'))
-  t.true(css1.includes('.z-10'))
-  t.false(css1.includes('.text-center'))
-
-  t.true(css2.includes('.z-0'))
-  t.true(css2.includes('.z-10'))
-  t.false(css2.includes('.text-center'))
-})
-
-test('uses postcss plugins from the maizzle config when compiling from string', async t => {
-  const maizzleConfig = {
-    env: 'production',
-    build: {
-      postcss: {
-        plugins: [
-          require('autoprefixer')({overrideBrowserslist: ['> 0.1%']})
-        ]
-      }
-    }
-  }
-
-  const css = await Tailwind.compile('.test {transform: scale(0.5)}', '<div class="test">Test</a>', {}, maizzleConfig)
-
-  t.not(css, undefined)
-  t.is(css.trim(), '/* purgecss start ignore */\n\n.test {\n  -webkit-transform: scale(0.5);\n          transform: scale(0.5)\n}\n\n/* purgecss end ignore */')
-})
+const test = require('ava')
+const Tailwind = require('../src/generators/tailwindcss')
+
+test('uses Tailwind defaults if no config specified', async t => {
+  const css = await Tailwind.compile('@tailwind utilities', '<p class="xl:z-0"></p>', {}, {env: 'production'})
+
+  t.not(css, undefined)
+  t.true(css.includes('.xl\\:z-0'))
+})
+
+test('uses CSS file provided in environment config', async t => {
+  const config = {
+    env: 'production',
+    build: {
+      tailwind: {
+        css: './test/stubs/main.css'
+      }
+    }
+  }
+
+  const css = await Tailwind.compile('', '<div class="text-center foo">test</div>', {}, config)
+
+  t.not(css, undefined)
+  t.true(css.includes('.text-center'))
+  t.true(css.includes('.foo'))
+})
+
+test('uses purgeCSS options provided in the maizzle config', async t => {
+  const arrayConfig = {
+    purgeCSS: {
+      safelist: ['z-10'],
+      blocklist: ['text-center']
+    }
+  }
+
+  const objectConfig = {
+    purgeCSS: {
+      safelist: {
+        standard: ['z-10']
+      },
+      blocklist: ['text-center']
+    }
+  }
+
+  const css1 = await Tailwind.compile('@tailwind utilities', '<div class="z-0 text-center"></div>', {}, arrayConfig)
+  const css2 = await Tailwind.compile('@tailwind utilities', '<div class="z-0 text-center"></div>', {}, objectConfig)
+
+  t.true(css1.includes('.z-0'))
+  t.true(css1.includes('.z-10'))
+  t.false(css1.includes('.text-center'))
+
+  t.true(css2.includes('.z-0'))
+  t.true(css2.includes('.z-10'))
+  t.false(css2.includes('.text-center'))
+})
+
+test('uses postcss plugins from the maizzle config when compiling from string', async t => {
+  const maizzleConfig = {
+    env: 'production',
+    build: {
+      postcss: {
+        plugins: [
+          require('autoprefixer')({overrideBrowserslist: ['> 0.1%']})
+        ]
+      }
+    }
+  }
+
+  const css = await Tailwind.compile('.test {transform: scale(0.5)}', '<div class="test">Test</a>', {}, maizzleConfig)
+
+  t.not(css, undefined)
+  t.is(css.trim(), '/* purgecss start ignore */\n\n.test {\n  -webkit-transform: scale(0.5);\n      -ms-transform: scale(0.5);\n          transform: scale(0.5)\n}\n\n/* purgecss end ignore */')
+})

package/test/test-todisk.js

@@ -414,5 +414,5 @@ test('local server does not compile unwanted file types', async t => {
 test('throws if it cannot spin up local development server', async t => {
   await t.throwsAsync(async () => {
     await Maizzle.serve('local', {})
-  }, {instanceOf: TypeError, message: `Cannot read property 'source' of undefined`})
+  }, {instanceOf: TypeError})
 })

package/test/test-tostring.js

@@ -10,10 +10,11 @@ const expected = file => readFileSync(path.join(__dirname, 'expected', `${file}.
 const renderString = (string, options = {}) => Maizzle.render(string, options).then(({html}) => html)
 
 test('compiles HTML string if no options are passed', async t => {
-  let html = await renderString('<div>test</div>')
-  html = html.replace(/[^\S\r\n]+$/gm, '').trim()
+  const source = fixture('basic')
+
+  const html = await renderString(source)
 
-  t.is(html, '<div>test</div>')
+  t.is(html, source)
 })
 
 test('inheritance', async t => {