@stencil/vitest 1.11.1 → 1.11.3

package/dist/plugin.d.ts

@@ -30,8 +30,10 @@ import type { Plugin } from 'vitest/config';
  *   },
  * });
  * ```
- *
+ * @param opts Optional configuration for the plugin
  * @returns a Vite plugin configuration object
  */
-export declare function stencilVitestPlugin(): Plugin;
+export declare function stencilVitestPlugin(opts?: {
+    css?: boolean;
+}): Plugin;
 //# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAuD5C"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,GAAE;IAAE,GAAG,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,MAAM,CAkFxE"}

package/dist/plugin.js

@@ -1,3 +1,6 @@
+import { transpile } from '@stencil/core/compiler';
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
 /**
  * A Vite/Vitest plugin that transforms Stencil component source files (.tsx) on-the-fly,
  * enabling module mocking and direct source imports during tests.
@@ -29,10 +32,10 @@
  *   },
  * });
  * ```
- *
+ * @param opts Optional configuration for the plugin
  * @returns a Vite plugin configuration object
  */
-export function stencilVitestPlugin() {
+export function stencilVitestPlugin(opts = {}) {
     return {
         name: 'stencil-vitest-transform',
         enforce: 'pre',
@@ -52,31 +55,56 @@ export function stencilVitestPlugin() {
             if (!hasStencilDecorator) {
                 return null;
             }
-            const { transpileSync } = await import('@stencil/core/compiler');
-            const result = transpileSync(code, {
-                file: id,
-                // 'customelement' appends a customElements.define() call so the component
-                // self-registers the moment this module is imported — no loader needed.
-                componentExport: 'customelement',
-                componentMetadata: 'compilerstatic',
-                currentDirectory: process.cwd(),
-                module: 'esm',
-                proxy: null,
-                sourceMap: false,
-                style: 'static',
-                styleImportData: 'queryparams',
-                target: 'es2022',
-                // Don't rewrite import paths — let Vite handle resolution via aliases
-                transformAliasedImportPaths: false,
-            });
-            const errors = result.diagnostics?.filter((d) => d.level === 'error') ?? [];
-            if (errors.length > 0) {
-                const messages = errors.map((d) => d.messageText).join('\n');
-                throw new Error(`[stencil-vitest-plugin] Transform error in ${id}:\n${messages}`);
+            try {
+                const result = await transpile(code, {
+                    file: id,
+                    // 'customelement' appends a customElements.define() call so the component
+                    // self-registers the moment this module is imported — no loader needed.
+                    componentExport: 'customelement',
+                    componentMetadata: 'compilerstatic',
+                    currentDirectory: process.cwd(),
+                    module: 'esm',
+                    proxy: null,
+                    sourceMap: false,
+                    style: opts.css ? 'inline' : null,
+                    styleImportData: opts.css ? 'queryparams' : null,
+                    target: 'es2022',
+                    // Don't rewrite import paths — let Vite handle resolution via aliases
+                    transformAliasedImportPaths: false,
+                });
+                const errors = result.diagnostics?.filter((d) => d.level === 'error') ?? [];
+                if (errors.length > 0) {
+                    const messages = errors.map((d) => d.messageText).join('\n');
+                    throw new Error(`[stencil-vitest-plugin] Transform error in ${id}:\n${messages}`);
+                }
+                let transformedCode = result.code;
+                // If CSS is enabled, inline the CSS imports as functions, - Stencil v4 always expects css to be a function, Vite
+                // tries to handle the import as a string and errors.
+                // In v5, Stencil supports both string and function styles, but the plugin opts for function style for consistency across versions.
+                if (opts.css) {
+                    // Match: import SomeVar from "./path.css?tag=...&encapsulation=...";
+                    const cssImportRegex = /import\s+(\w+)\s+from\s+['"]([^'"]+\.css\?tag[^'"]+)['"]\s*;?/g;
+                    let match;
+                    while ((match = cssImportRegex.exec(result.code)) !== null) {
+                        const [fullMatch, varName, importPath] = match;
+                        const [relPath] = importPath.split('?');
+                        const absolutePath = resolve(dirname(id), relPath);
+                        if (existsSync(absolutePath)) {
+                            const css = readFileSync(absolutePath, 'utf-8');
+                            // Replace the import with an inline function
+                            const inlineFunc = `const ${varName} = () => ${JSON.stringify(css)};`;
+                            transformedCode = transformedCode.replace(fullMatch, inlineFunc);
+                        }
+                    }
+                }
+                return {
+                    code: transformedCode,
+                };
+            }
+            catch (err) {
+                console.error(`[stencil-vitest-plugin] Failed to transform ${id}:`, err);
+                throw err;
             }
-            return {
-                code: result.code,
-            };
         },
     };
 }

package/dist/testing/html-serializer.d.ts

@@ -20,16 +20,6 @@ export declare function serializeHtml(input: HTMLElement | ShadowRoot | Document
  * Custom HTML prettifier
  */
 export declare function prettifyHtml(html: string): string;
-/**
- * Sort attributes alphabetically within every opening HTML tag in a string.
- * Used to normalise expected HTML strings before comparison so that attribute
- * order written by hand in tests does not have to match the order produced by
- * the runtime (which can differ between dev and prod Stencil builds).
- *
- * Handles double-quoted attribute values and bare boolean attributes.
- * Does NOT touch closing tags, self-closing tags, or text content.
- */
-export declare function sortAttributesInHtml(html: string): string;
 /**
  * Normalize HTML for comparison by removing extra whitespace
  */

package/dist/testing/html-serializer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html-serializer.d.ts","sourceRoot":"","sources":["../../src/testing/html-serializer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAkCH,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qCAAqC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,WAAW,GAAG,UAAU,GAAG,gBAAgB,GAAG,MAAM,EAC3D,OAAO,GAAE,gBAAqB,GAC7B,MAAM,CAWR;AA6ID;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAuDjD;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAuBzD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAElD"}
+{"version":3,"file":"html-serializer.d.ts","sourceRoot":"","sources":["../../src/testing/html-serializer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAkCH,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qCAAqC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,WAAW,GAAG,UAAU,GAAG,gBAAgB,GAAG,MAAM,EAC3D,OAAO,GAAE,gBAAqB,GAC7B,MAAM,CAWR;AAyID;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAuDjD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAElD"}

package/dist/testing/html-serializer.js

@@ -69,14 +69,10 @@ function serializeElementWithShadow(element, excludeStyles, serializeShadowRoot
     const tagName = elem.localName || elem.tagName.toLowerCase();
     // Build opening tag with attributes
     let html = `<${tagName}`;
-    // Add attributes sorted alphabetically for deterministic output across dev/prod builds
+    // Add attributes
     if (elem.attributes) {
-        const attrs = Array.from(elem.attributes).sort((a, b) => {
-            const nameA = a.prefix && a.localName ? `${a.prefix}:${a.localName}` : a.name;
-            const nameB = b.prefix && b.localName ? `${b.prefix}:${b.localName}` : b.name;
-            return nameA < nameB ? -1 : nameA > nameB ? 1 : 0;
-        });
-        for (const attr of attrs) {
+        for (let i = 0; i < elem.attributes.length; i++) {
+            const attr = elem.attributes[i];
             // Handle namespaced attributes (e.g., xlink:href)
             // Use prefix + localName if available, otherwise fall back to name
             let attrName = attr.name;
@@ -220,35 +216,6 @@ export function prettifyHtml(html) {
     }
     return lines.join('\n');
 }
-/**
- * Sort attributes alphabetically within every opening HTML tag in a string.
- * Used to normalise expected HTML strings before comparison so that attribute
- * order written by hand in tests does not have to match the order produced by
- * the runtime (which can differ between dev and prod Stencil builds).
- *
- * Handles double-quoted attribute values and bare boolean attributes.
- * Does NOT touch closing tags, self-closing tags, or text content.
- */
-export function sortAttributesInHtml(html) {
-    // Match opening tags: capture tag name and the rest of the attribute string
-    return html.replace(/<([a-zA-Z][a-zA-Z0-9:._-]*)((?:\s[^>]*)?)>/g, (_match, tagName, attrStr) => {
-        if (!attrStr.trim()) {
-            return `<${tagName}>`;
-        }
-        // Parse individual attributes (boolean attrs and attr="value" attrs)
-        const attrPattern = /\s+([^\s=>"/]+)(?:="([^"]*?)")?/g;
-        const attrs = [];
-        let m;
-        while ((m = attrPattern.exec(attrStr)) !== null) {
-            attrs.push({ name: m[1], value: m[2] !== undefined ? m[2] : null });
-        }
-        attrs.sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
-        const sortedAttrStr = attrs
-            .map(({ name, value }) => (value === null ? ` ${name}` : ` ${name}="${value}"`))
-            .join('');
-        return `<${tagName}${sortedAttrStr}>`;
-    });
-}
 /**
  * Normalize HTML for comparison by removing extra whitespace
  */

package/dist/testing/matchers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"matchers.d.ts","sourceRoot":"","sources":["../../src/testing/matchers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH;;GAEG;AACH,UAAU,cAAc,CAAC,CAAC,GAAG,OAAO;IAClC,mDAAmD;IACnD,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,CAAC;IAClC,qDAAqD;IACrD,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,gFAAgF;IAChF,cAAc,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;IACxC,2EAA2E;IAC3E,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC;IACtD,mEAAmE;IACnE,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC;IACtD,sEAAsE;IACtE,iBAAiB,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;IAC5D,0EAA0E;IAC1E,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC;IACjD,yFAAyF;IACzF,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC;IACnC,4EAA4E;IAC5E,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC;IACxC,sGAAsG;IACtG,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IACrC,gHAAgH;IAChH,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IAC1C,mDAAmD;IACnD,gBAAgB,IAAI,CAAC,CAAC;IACtB,sFAAsF;IACtF,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IACrC,+FAA+F;IAC/F,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IAC1C,yDAAyD;IACzD,mBAAmB,IAAI,CAAC,CAAC;IACzB,6EAA6E;IAC7E,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC;IAC3C,uEAAuE;IACvE,yBAAyB,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IAC1C,wEAAwE;IACxE,8BAA8B,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IAC/C,uEAAuE;IACvE,6BAA6B,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IAC9C,kFAAkF;IAClF,4BAA4B,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;CAC7D;AAGD,OAAO,QAAQ,QAAQ,CAAC;IACtB,UAAU,SAAS,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;KAAG;IACzD,UAAU,QAAQ,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;KAAG;IAC/D,UAAU,4BAA6B,SAAQ,cAAc;KAAG;CACjE;AAmoBD,OAAO,EAAE,CAAC"}
+{"version":3,"file":"matchers.d.ts","sourceRoot":"","sources":["../../src/testing/matchers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH;;GAEG;AACH,UAAU,cAAc,CAAC,CAAC,GAAG,OAAO;IAClC,mDAAmD;IACnD,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,CAAC;IAClC,qDAAqD;IACrD,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,gFAAgF;IAChF,cAAc,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;IACxC,2EAA2E;IAC3E,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC;IACtD,mEAAmE;IACnE,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC;IACtD,sEAAsE;IACtE,iBAAiB,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;IAC5D,0EAA0E;IAC1E,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC;IACjD,yFAAyF;IACzF,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC;IACnC,4EAA4E;IAC5E,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC;IACxC,sGAAsG;IACtG,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IACrC,gHAAgH;IAChH,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IAC1C,mDAAmD;IACnD,gBAAgB,IAAI,CAAC,CAAC;IACtB,sFAAsF;IACtF,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IACrC,+FAA+F;IAC/F,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IAC1C,yDAAyD;IACzD,mBAAmB,IAAI,CAAC,CAAC;IACzB,6EAA6E;IAC7E,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC;IAC3C,uEAAuE;IACvE,yBAAyB,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IAC1C,wEAAwE;IACxE,8BAA8B,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IAC/C,uEAAuE;IACvE,6BAA6B,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IAC9C,kFAAkF;IAClF,4BAA4B,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;CAC7D;AAGD,OAAO,QAAQ,QAAQ,CAAC;IACtB,UAAU,SAAS,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;KAAG;IACzD,UAAU,QAAQ,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;KAAG;IAC/D,UAAU,4BAA6B,SAAQ,cAAc;KAAG;CACjE;AAioBD,OAAO,EAAE,CAAC"}

package/dist/testing/matchers.js

@@ -4,7 +4,7 @@
  * These extend Vitest's expect with Stencil-specific assertions
  */
 import { expect } from 'vitest';
-import { serializeHtml, normalizeHtml, prettifyHtml, sortAttributesInHtml } from './html-serializer.js';
+import { serializeHtml, normalizeHtml, prettifyHtml } from './html-serializer.js';
 /**
  * Check if element has a class
  */
@@ -313,9 +313,8 @@ function toEqualHtml(received, expected) {
         expectedHtml = serializeHtml(expectedFragment, { serializeShadowRoot: true, pretty: false });
     }
     else {
-        // For element comparisons, sort attributes so hand-written expected HTML is
-        // order-independent (dev vs prod builds can reflect props in different orders)
-        expectedHtml = sortAttributesInHtml(expected.trim());
+        // For element comparisons, just normalize to preserve <mock:shadow-root> tags
+        expectedHtml = expected.trim();
     }
     expectedHtml = normalizeHtml(expectedHtml);
     receivedHtml = normalizeHtml(receivedHtml);
@@ -366,9 +365,8 @@ function toEqualLightHtml(received, expected) {
         expectedHtml = serializeHtml(expectedFragment, { serializeShadowRoot: false, pretty: false });
     }
     else {
-        // For element comparisons, sort attributes so hand-written expected HTML is
-        // order-independent (dev vs prod builds can reflect props in different orders)
-        expectedHtml = sortAttributesInHtml(expected.trim());
+        // For element comparisons, just normalize to preserve <mock:shadow-root> tags
+        expectedHtml = expected.trim();
     }
     expectedHtml = normalizeHtml(expectedHtml);
     receivedHtml = normalizeHtml(receivedHtml);

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/stenciljs/vitest"
   },
-  "version": "1.11.1",
+  "version": "1.11.3",
   "description": "First-class testing utilities for Stencil design systems with Vitest",
   "license": "MIT",
   "type": "module",
@@ -104,7 +104,7 @@
   "dependencies": {
     "jiti": "^2.6.1",
     "local-pkg": "^1.1.2",
-    "vitest-environment-stencil": "1.11.1"
+    "vitest-environment-stencil": "1.11.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",