Repository: maizzle/framework (js)

Issue:
Six-digit HEX transformer applies to text content
- Maizzle Version: 3.7.3
- Node.js Version: 15.14.0

The [Six-digit HEX](https://maizzle.com/docs/code-cleanup/#six-digit-hex) transformer erroneously applies to text content inside HTML. For example, inside a template, the following content:

```
<h1>Welcome to issue #123 or our newsletter!</h1>
```

…is turned into:

```
<h1>Welcome to issue #112233 or our newsletter!</h1>
```

Setting `sixHex:false` in the config solves this (but turns this off which might be unfortunate for those who need it). 

Pull request description:
refactor: sixhex transformer
This PR fixes an issue with the sixHex transformer that was causing HEX codes from text content to be expanded from 3 to 6 digits.

Fixes #668 


Patch:
diff --git a/src/transformers/sixHex.js b/src/transformers/sixHex.js
index e954dff..74d638d 100644
--- a/src/transformers/sixHex.js
+++ b/src/transformers/sixHex.js
@@ -1,4 +1,6 @@
 const {get} = require('lodash')
+const posthtml = require('posthtml')
+const parseAttrs = require('posthtml-attrs-parser')
 const {conv} = require('color-shorthand-hex-to-six-digit')
 
 module.exports = async (html, config = {}) => {
@@ -6,5 +8,26 @@ module.exports = async (html, config = {}) => {
     return html
   }
 
-  return conv(html)
+  const posthtmlOptions = get(config, 'build.posthtml.options', {})
+  return posthtml([sixHex()]).process(html, posthtmlOptions).then(result => result.html)
+}
+
+const sixHex = () => tree => {
+  const process = node => {
+    const attrs = parseAttrs(node.attrs)
+
+    const targets = ['bgcolor', 'color']
+
+    targets.forEach(attribute => {
+      if (attrs[attribute]) {
+        attrs[attribute] = conv(attrs[attribute])
+      }
+    })
+
+    node.attrs = attrs.compose()
+
+    return node
+  }
+
+  return tree.walk(process)
 }


Test patch:
diff --git a/test/test-transformers.js b/test/test-transformers.js
index b64606e..bad2a9e 100644
--- a/test/test-transformers.js
+++ b/test/test-transformers.js
@@ -261,15 +261,25 @@ test('safe class names (disabled)', async t => {
 })
 
 test('six digit hex', async t => {
-  const html = await Maizzle.ensureSixHEX('<td style="color: #ffc" bgcolor="#000"></td>')
-
-  t.is(html, '<td style="color: #ffffcc" bgcolor="#000000"></td>');
+  const html = await Maizzle.ensureSixHEX(
+    `
+<div bgcolor="#000" style="color: #fff; background-color: #000">This should not change: #ffc</div>
+<font color="#fff">Text</font>
+    `)
+
+  t.is(
+    html.trim(),
+    `
+<div bgcolor="#000000" style="color: #fff; background-color: #000">This should not change: #ffc</div>
+<font color="#ffffff">Text</font>
+    `.trim()
+  )
 })
 
 test('six digit hex (disabled)', async t => {
   const html = await Maizzle.ensureSixHEX('<td style="color: #ffc" bgcolor="#000"></td>', {sixHex: false})
 
-  t.is(html, '<td style="color: #ffc" bgcolor="#000"></td>');
+  t.is(html, '<td style="color: #ffc" bgcolor="#000"></td>')
 })
 
 test('transform contents (javascript)', async t => {