@stencil/vitest 1.11.2 → 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/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/stenciljs/vitest"
   },
-  "version": "1.11.2",
+  "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.2"
+    "vitest-environment-stencil": "1.11.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",