Inline styles per line

Author: TheJaredWilcurt

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-snapshot-serializer",
   "type": "module",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "Vitest snapshot serializer for Vue 3 components",
   "main": "index.js",
   "scripts": {

package.json

@@ -19,6 +19,7 @@ import {
 import {
   debugLogger,
   escapeHtml,
+  parseInlineStyles,
   parseMarkup,
   unescapeHtml
 } from '../helpers.js';
@@ -209,6 +210,27 @@ export const diffableFormatter = function (markup) {
               }
             }
           }
+
+          if (attribute.name === 'style') {
+            const styles = parseInlineStyles(attributeValue);
+            const stylesOnNewLine = styles.length > options.inlineStylesPerLine;
+            if (stylesOnNewLine) {
+              const multiLineStyles = styles
+                .map((inlineStyle) => {
+                  if (isNewLine) {
+                    return '\n' + '  '.repeat(indent + 2) + inlineStyle;
+                  }
+                  return '\n' + '  '.repeat(indent + 1) + inlineStyle;
+                })
+                .join('');
+              if (isNewLine) {
+                attributeValue = multiLineStyles + '\n' + '  '.repeat(indent + 1);
+              } else {
+                attributeValue = multiLineStyles + '\n' + '  '.repeat(indent);
+              }
+            }
+          }
+
           fullAttribute = attribute.name + '="' + attributeValue + '"';
         } else {
           fullAttribute = attribute.name;

src/formatters/diffable.js

@@ -249,6 +249,66 @@ export const parseMarkup = function (markup) {
   return ast;
 };
 
+/**
+ * Takes in the value from an HTML style attribute.
+ * Splits on the semi-colon, handling edge cases.
+ *
+ * @example
+ * const input = ' color:#F00;   padding: 2px ';
+ * const output = parseInlineStyles(input);
+ * expect(output)
+ *   .toEqual(['color:#F00;', 'padding: 2px;']);
+ *
+ * @param  {string}   styles  Any string of inline styles
+ * @return {string[]}         Array of separated inline styles
+ */
+export const parseInlineStyles = function (styles) {
+  debugLogger({ function: 'helpers.js:parseInlineStyles' });
+  if (!styles) {
+    return [];
+  }
+
+  const pairs = [];
+  let current = '';
+  let insideSingleQuote = false;
+  let insideDoubleQuote = false;
+  let parenthesisCount = 0;
+
+  for (let i = 0; i < styles.length; i++) {
+    const character = styles[i];
+    const previousCharacter = styles[i - 1];
+    const isEscaped = previousCharacter === '\\';
+
+    if (character === '\'' && !insideDoubleQuote && !isEscaped) {
+      insideSingleQuote = !insideSingleQuote;
+    } else if (character === '"' && !insideSingleQuote && !isEscaped) {
+      insideDoubleQuote = !insideDoubleQuote;
+    } else if (character === '(' && !insideSingleQuote && !insideDoubleQuote) {
+      parenthesisCount = parenthesisCount + 1;
+    } else if (character === ')' && !insideSingleQuote && !insideDoubleQuote && parenthesisCount) {
+      parenthesisCount = parenthesisCount - 1;
+    }
+
+    if (character === ';' && !insideSingleQuote && !insideDoubleQuote && !parenthesisCount) {
+      pairs.push(current);
+      current = '';
+    } else {
+      current = current + character;
+    }
+  }
+
+  // Add the last pair
+  pairs.push(current);
+
+  return pairs
+    .map((pair) => {
+      return pair.trim() + ';';
+    })
+    .filter((pair) => {
+      return pair && pair !== ';';
+    });
+};
+
 /**
  * Creates a cheerio ($) object from the html for DOM manipulation.
  *

src/helpers.js

@@ -301,35 +301,34 @@ export const loadOptions = function () {
       globalThis.vueSnapshots.formatting.tagsWithWhitespacePreserved = TAGS_WITH_WHITESPACE_PRESERVED_DEFAULTS;
     }
 
-    // Formatting - Attributes Per Line
-    if (
-      typeof(globalThis.vueSnapshots.formatting.attributesPerLine) !== 'number' || 
-      globalThis.vueSnapshots.formatting.attributesPerLine < 0 ||
-      globalThis.vueSnapshots.formatting.attributesPerLine % 1 !== 0
-    ) {
-      if (globalThis.vueSnapshots.formatting.attributesPerLine !== undefined) {
-        logger([
-          'global.vueSnapshots.formatting.attributesPerLine',
-          'must be a whole number.'
-        ].join(' '));
+    /**
+     * The validation for attributesPerLine, classesPerLine, and inlineStylesPerLine
+     * are all identical, so this DRYs them up.
+     *
+     * @param {string} setting  The setting name, without "PerLine"
+     */
+    function perLine (setting) {
+      if (
+        typeof(globalThis.vueSnapshots.formatting[setting + 'PerLine']) !== 'number' ||
+        globalThis.vueSnapshots.formatting[setting + 'PerLine'] < 0 ||
+        globalThis.vueSnapshots.formatting[setting + 'PerLine'] % 1 !== 0
+      ) {
+        if (globalThis.vueSnapshots.formatting[setting + 'PerLine'] !== undefined) {
+          logger([
+            'global.vueSnapshots.formatting.' + setting + 'PerLine',
+            'must be a whole number.'
+          ].join(' '));
+        }
+        globalThis.vueSnapshots.formatting[setting + 'PerLine'] = 1;
       }
-      globalThis.vueSnapshots.formatting.attributesPerLine = 1;
     }
 
+    // Formatting - Attributes Per Line
+    perLine('attributes');
     // Formatting - Classes Per Line
-    if (
-      typeof(globalThis.vueSnapshots.formatting.classesPerLine) !== 'number' ||
-      globalThis.vueSnapshots.formatting.classesPerLine < 0 ||
-      globalThis.vueSnapshots.formatting.classesPerLine % 1 !== 0
-    ) {
-      if (globalThis.vueSnapshots.formatting.classesPerLine !== undefined) {
-        logger([
-          'global.vueSnapshots.formatting.classesPerLine',
-          'must be a whole number.'
-        ].join(' '));
-      }
-      globalThis.vueSnapshots.formatting.classesPerLine = 1;
-    }
+    perLine('classes');
+    // Formatting - Inline Styles Per Line
+    perLine('inlineStyles');
 
     // Formatting - Void Elements
     if (!ALLOWED_VOID_ELEMENTS.includes(globalThis.vueSnapshots.formatting.voidElements)) {
@@ -398,6 +397,7 @@ export const loadOptions = function () {
     ...Object.keys(formattingBooleanDefaults),
     'attributesPerLine',
     'classesPerLine',
+    'inlineStylesPerLine',
     'tagsWithWhitespacePreserved',
     'voidElements',
     'whiteSpacePreservedOption'

src/loadOptions.js

@@ -418,7 +418,10 @@ describe('Cheerio Manipulation', () => {
         .toMatchInlineSnapshot(`
           <h1
             class="active"
-            style="background: #F00; width: 0px;"
+            style="
+              background: #F00;
+              width: 0px;
+            "
             title="{ a: 2 }"
           >
             Text
@@ -436,7 +439,10 @@ describe('Cheerio Manipulation', () => {
         .toMatchInlineSnapshot(`
           <h1
             class="active"
-            style="background: #F00; width: 0px;"
+            style="
+              background: #F00;
+              width: 0px;
+            "
             title="[object Object]"
           >
             Text