microsoft · layershifter · Mar 13, 2026 · Mar 13, 2026 · Mar 13, 2026 · Mar 13, 2026
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(devtools): switch from webpack/jest to vite/vitest",
+  "packageName": "@griffel/devtools",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
@@ -54,7 +54,6 @@
     "@nx/vite": "22.5.4",
     "@nx/vitest": "22.5.4",
     "@nx/web": "22.5.4",
-    "@nx/webpack": "22.5.4",
     "@nx/workspace": "22.5.4",
     "@rspack/cli": "1.6.8",
     "@rspack/core": "1.6.8",

@@ -22,5 +22,6 @@
   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
@@ -6,48 +6,11 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@nx/webpack:webpack",
+      "executor": "@nx/vite:build",
       "outputs": ["{options.outputPath}"],
-      "defaultConfiguration": "production",
       "options": {
-        "compiler": "babel",
         "outputPath": "dist/packages/devtools",
-        "index": "packages/devtools/src/index.html",
-        "main": "packages/devtools/src/index.tsx",
-        "tsConfig": "packages/devtools/tsconfig.lib.json",
-        "skipTypeField": true,
-        "packageJson": "packages/devtools/package.json",
-        "assets": [
-          {
-            "glob": "packages/devtools/public",
-            "input": ".",
-            "output": "."
-          },
-          {
-            "glob": "packages/devtools/package.json",
-            "input": ".",
-            "output": "."
-          },
-          {
-            "glob": "LICENSE.md",
-            "input": ".",
-            "output": "."
-          }
-        ],
-        "webpackConfig": "packages/devtools/webpack.config.js"
-      },
-      "configurations": {
-        "production": {
-          "buildLibsFromSource": false,
-          "optimization": true,
-          "outputHashing": "all",
-          "sourceMap": false,
-          "namedChunks": false,
-          "extractLicenses": true,
-          "runtimeChunk": false,
-          "vendorChunk": false
-        },
-        "development": {}
+        "skipTypeCheck": true
       }
     },
     "pack-extension": {
@@ -71,10 +34,10 @@
       "outputs": ["{options.outputFile}"]
     },
     "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/packages/devtools"],
+      "executor": "@nx/vitest:test",
+      "outputs": ["{options.reportsDirectory}"],
       "options": {
-        "jestConfig": "packages/devtools/jest.config.ts"
+        "reportsDirectory": "../../coverage/packages/devtools"
       }
     },
     "type-check": {
@@ -96,7 +59,7 @@
         "parallel": false,
         "commands": [
           {
-            "command": " nx build @griffel/devtools --skip-nx-cache --configuration=development --watch"
+            "command": "nx build @griffel/devtools --skip-nx-cache --watch"
           }
         ]
       }

@@ -1,9 +1,10 @@
+import { vi } from 'vitest';
 import type { RawSourceMap } from 'source-map-js';
 import { getFilePath, getOriginalPosition, resources } from './sourceMapConsumer';
 
 describe('getOriginalPosition', () => {
   it('returns input location when sourceMapJSon is invalid', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => ({}));
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => ({}));
 
     const sourceMapJSON = {} as RawSourceMap;
     const sourceLoc = { source: '/src', line: 1, column: 10 };
@@ -31,7 +32,7 @@ describe('getOriginalPosition', () => {
       column: 0,
       line: 3,
       name: null,
-      // resources is mocked in jest.setup.js
+      // resources is mocked in vitest.setup.ts
       source: (await resources)[0].url,
     });
   });

@@ -17,7 +17,8 @@
     "**/*.stories.js",
     "**/*.stories.jsx",
     "**/*.stories.tsx",
-    "jest.config.ts"
+    "vite.config.ts",
+    "vitest.setup.ts"
   ],
   "include": ["**/*.ts", "**/*.tsx"]
 }
@@ -2,19 +2,20 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["chrome", "jest", "node", "environment"]
+    "typeRoots": ["../../node_modules", "../../node_modules/@types", "../../typings"],
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "chrome", "node", "vitest", "environment"]
   },
   "include": [
-    "**/*.test.ts",
-    "**/*.spec.ts",
-    "**/*.test.tsx",
-    "**/*.spec.tsx",
-    "**/*.test.js",
-    "**/*.spec.js",
-    "**/*.test.jsx",
-    "**/*.spec.jsx",
-    "**/*.d.ts",
-    "jest.config.ts"
+    "vite.config.ts",
+    "vitest.setup.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
   ]
 }
@@ -11,6 +11,6 @@
     "../../node_modules/@nx/react/typings/cssmodule.d.ts",
     "../../node_modules/@nx/react/typings/image.d.ts"
   ],
-  "exclude": ["src/**/*.spec.ts", "src/**/*.spec.js", "src/**/*.spec.tsx", "src/**/*.spec.jsx", "jest.config.ts"],
+  "exclude": ["src/**/*.spec.ts", "src/**/*.spec.js", "src/**/*.spec.tsx", "src/**/*.spec.jsx", "vite.config.ts"],
   "include": ["src/**/*", ".storybook/*.js"]
 }
@@ -0,0 +1,27 @@
+/// <reference types='vitest' />
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { defineConfig } from 'vite';
+import { resolve } from 'node:path';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/devtools',
+  plugins: [nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  build: {
+    outDir: resolve(__dirname, '../../dist/packages/devtools'),
+    emptyOutDir: true,
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    setupFiles: ['./vitest.setup.ts'],
+    coverage: {
+      reportsDirectory: '../../coverage/packages/devtools',
+      provider: 'v8' as const,
+    },
+  },
+}));
@@ -0,0 +1,29 @@
+import { vi } from 'vitest';
+
+const chrome = {
+  devtools: {
+    inspectedWindow: {
+      getResources: vi.fn((cb: (resources: unknown[]) => void) => {
+        cb([
+          {
+            url: 'webpack://testscope/root/packages/test1/src/App.styles.js?42f2',
+            type: 'sm-script',
+            getContent: () => '',
+            setContent: () => ({}),
+          },
+        ]);
+      }),
+      onResourceAdded: {
+        addListener: vi.fn(),
+      },
+    },
+    panels: {
+      themeName: 'dark',
+      elements: {
+        createSidebarPane: vi.fn(),
+      },
+    },
+  },
+};
+
+Object.assign(globalThis, { chrome });
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,5 +22,6 @@ @@
       </head>
       <body>
         <div id="root"></div>
+        <script type="module" src="/src/index.tsx"></script>
       </body>
     </html>