Rename Scoped V-Bind Styles

Author: TheJaredWilcurt

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-snapshot-serializer",
   "type": "module",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "Vitest snapshot serializer for Vue 3 components",
   "main": "index.js",
   "scripts": {
@@ -14,26 +14,26 @@
     "debug": "vitest --inspect-brk --no-file-parallelism -t \"Renders\" \"testingLibrary\""
   },
   "dependencies": {
-    "cheerio": "^1.0.0",
+    "cheerio": "^1.1.0",
     "htmlparser2": "^10.0.0",
-    "js-beautify": "^1.15.3"
+    "js-beautify": "^1.15.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.28.0",
-    "@stylistic/eslint-plugin": "^4.4.0",
+    "@stylistic/eslint-plugin": "^4.4.1",
     "@testing-library/user-event": "^14.6.1",
     "@testing-library/vue": "^8.1.0",
     "@vitejs/plugin-vue": "^5.2.4",
-    "@vitest/coverage-v8": "^3.1.4",
+    "@vitest/coverage-v8": "^3.2.3",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.28.0",
     "eslint-config-tjw-base": "^4.2.0",
     "eslint-config-tjw-jest": "^3.0.0",
     "eslint-config-tjw-jsdoc": "^2.0.1",
-    "eslint-plugin-jest": "^28.12.0",
-    "eslint-plugin-jsdoc": "^50.7.1",
-    "happy-dom": "^17.5.6",
-    "vitest": "^3.1.4"
+    "eslint-plugin-jest": "^28.13.3",
+    "eslint-plugin-jsdoc": "^50.8.0",
+    "happy-dom": "^18.0.1",
+    "vitest": "^3.2.3"
   },
   "repository": {
     "type": "git",
@@ -58,7 +58,7 @@
   },
   "homepage": "https://github.com/tjw-lint/vue3-snapshot-serializer#readme",
   "volta": {
-    "node": "24.1.0",
-    "npm": "11.4.1"
+    "node": "24.2.0",
+    "npm": "11.4.2"
   }
 }

package.json

@@ -309,6 +309,52 @@ const removeScopedStylesDataVIDAttributes = function ($) {
   }
 };
 
+/**
+ * This renames `style="--abcd1234-color: #F00;"` to
+ * `style="--scoped-color: #F00;"`. This come from using
+ * `background: v-bind(color);` in your scoped styles.
+ *
+ * @param {object} $  The markup as a cheerio object
+ */
+const renameScopedVBindCustomProperties = function ($) {
+  if (globalThis.vueSnapshots?.renameScopedVBindCSS) {
+    debugLogger({ function: 'cheerioManipulation.js:renameScopedVBindCustomProperties' });
+    // String starts, there are exactly 8 characters using lowercase
+    // hexidecimal, no other characters allowed, then the string ends.
+    const scopeIdTester = /^[0-9a-f]{8}$/;
+    $('[style]').each(function (index, element) {
+      let inlineStyles = element.attribs.style;
+      inlineStyles = inlineStyles
+        .split(';')
+        .map((inlineStyle) => {
+          // Is a custom property definition
+          if (inlineStyle.trim().startsWith('--')) {
+            // '--abcd1234-background-color'
+            let property = inlineStyle.split(':')[0].trim();
+            // '#F00'
+            const value = inlineStyle.split(':')[1].trim();
+            // ['abcd1234', 'background', 'color']
+            let propertyChunks = property.split('-').filter(Boolean);
+            const isVbindScopedCustomProperty = (
+              propertyChunks.length > 1 &&
+              scopeIdTester.test(propertyChunks[0])
+            );
+            if (isVbindScopedCustomProperty) {
+              // 'abcd1234' => 'scoped'
+              propertyChunks[0] = 'scoped';
+              // '--scoped-background-color: #F00'
+              return '--' + propertyChunks.join('-') + ': ' + value;
+            }
+            return inlineStyle;
+          }
+          return inlineStyle;
+        })
+        .join(';');
+      element.attribs.style = inlineStyles;
+    });
+  }
+};
+
 /**
  * This removes the data-server-rendered="true" from your snapshots.
  *
@@ -529,6 +575,7 @@ export const cheerioManipulation = function (vueWrapper) {
   removeScopedStylesDataVIDAttributes($);
   clearAttributes($);
   clearInlineFunctions($);
+  renameScopedVBindCustomProperties($);
   sortAttributes($);
   sortClasses($);
 

src/cheerioManipulation.js

@@ -27,6 +27,7 @@ export const booleanDefaults = {
   removeIdTest: false,
   removeClassTest: false,
   removeComments: false,
+  renameScopedVBindCSS: false,
   clearInlineFunctions: false
 };
 export const formattingBooleanDefaults = {

src/loadOptions.js

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <span
+      class="example"
+      style="--padding-size: 10px; padding: var(--padding-size);"
+    >
+      Text
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScopedVBindStyles',
+  data: function () {
+    return {
+      color: '#FF0000',
+      pageWidth: '800px'
+    };
+  }
+};
+</script>
+
+<style scoped>
+.example {
+  background: v-bind(color);
+  width: v-bind(pageWidth);
+  padding: 10px;
+}
+</style>

tests/mockComponents/ScopedVBindStyles.vue

@@ -10,6 +10,7 @@ import CheckboxesAndRadios from '@@/mockComponents/CheckboxesAndRadios.vue';
 import EmbeddedStyles from '@@/mockComponents/EmbeddedStyles.vue';
 import InlineFunctions from '@@/mockComponents/InlineFunctions.vue';
 import SeveralInputs from '@@/mockComponents/SeveralInputs.vue';
+import ScopedVBindStyles from '@@/mockComponents/ScopedVBindStyles.vue';
 import SortAttributes from '@@/mockComponents/SortAttributes.vue';
 import SortClasses from '@@/mockComponents/SortClasses.vue';
 import StringifyAttributes from '@@/mockComponents/StringifyAttributes.vue';
@@ -289,6 +290,50 @@ describe('Cheerio Manipulation', () => {
     });
   });
 
+  describe('ScopedVBindStyles.vue', () => {
+    test('Scoped ID replaced in dynamic custom properties', async () => {
+      const wrapper = await mount(ScopedVBindStyles);
+
+      expect(wrapper)
+        .toMatchInlineSnapshot(`
+          <div style="
+            --9593b251-color: #FF0000;
+            --9593b251-pageWidth: 800px;
+          ">
+            <span
+              class="example"
+              style="
+                --padding-size: 10px;
+                padding: var(--padding-size);
+              "
+            >
+              Text
+            </span>
+          </div>
+        `);
+
+      globalThis.vueSnapshots.renameScopedVBindCSS = true;
+
+      expect(wrapper)
+        .toMatchInlineSnapshot(`
+          <div style="
+            --scoped-color: #FF0000;
+            --scoped-pageWidth: 800px;
+          ">
+            <span
+              class="example"
+              style="
+                --padding-size: 10px;
+                padding: var(--padding-size);
+              "
+            >
+              Text
+            </span>
+          </div>
+        `);
+    });
+  });
+
   describe('Add input values', () => {
     test('Adds values from VTU Wrapper into DOM', async () => {
       const wrapper = await mount(SeveralInputs);

tests/unit/src/cheerioManipulation.test.js

@@ -100,6 +100,7 @@ describe('Load options', () => {
             removeDataVId: false,
             removeIdTest: true,
             removeServerRendered: false,
+            renameScopedVBindCSS: true,
             sortAttributes: false,
             sortClasses: false,
             stringifyAttributes: false,
@@ -144,6 +145,7 @@ describe('Load options', () => {
             removeDataVId: false,
             removeIdTest: true,
             removeServerRendered: false,
+            renameScopedVBindCSS: true,
             sortAttributes: false,
             sortClasses: false,
             stringifyAttributes: false,

tests/unit/src/loadOptions.test.js

@@ -89,6 +89,7 @@
  * @property {boolean}           [removeIdTest=false]                  Removes `id="test-whatever"` or `id="testWhatever"` from snapshots. **Warning:** You should never use ID's for test tokens, as they can also be used by JS and CSS, making them more brittle and their intent less clear. Use `data-test-id` instead.
  * @property {boolean}           [removeClassTest=false]               Removes all CSS classes that start with "test", like `class="test-whatever"`. **Warning:** Don't use this approach. Use `data-test` instead. It is better suited for this because it doesn't conflate CSS and test tokens.
  * @property {boolean}           [removeComments=false]                Removes all HTML comments from your snapshots. This is false by default, as sometimes these comments can infer important information about how your DOM was rendered. However, this is mostly just personal preference.
+ * @property {boolean}           [renameScopedVBindCSS=false]          This renames `style="--abcd1234-color: #F00;"` to `style="--scoped-color: #F00;"`. This come from using `background: v-bind(color);` in your scoped styles.
  * @property {boolean}           [clearInlineFunctions=false]          Replaces `<div title="function () { return true; }"></div>` or `<div title="(x) => !x"></div>` with this placeholder `<div title="[function]"></div>`.
  * @property {STUBS}             [stubs={}]                            Allows targeting specific DOM nodes in the snapshot to optionally replace their tag name or remove attributes and innerHTML.
  * @property {POSTPROCESSOR}     [postProcessor]                       This is a custom function you can pass in. It will be handed a string of formatted markup and must return a string (not a promise). It runs right after the formatter.

types.js

@@ -15,7 +15,9 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '@@': fileURLToPath(new URL('./tests', import.meta.url))
+      '@@': fileURLToPath(new URL('./tests', import.meta.url)),
+      vue: 'vue/dist/vue.esm-bundler.js',
+      '@vue/runtime-dom': '@vue/runtime-dom/dist/runtime-dom.esm-bundler.js'
     }
   },
   test: {