Bump major package and tailwind v4 bump fixes

vishnuv688 · vishnuv688 · commit 8de22935a57c · 2025-12-30T16:57:05.000+05:30
diff --git a/example/wdio.conf.ts b/example/wdio.conf.ts
@@ -63,8 +63,14 @@ export const config: Options.Testrunner = {
   capabilities: [
     {
       browserName: 'chrome',
+      browserVersion: '143.0.7499.169', // specify chromium browser version for testing
       'goog:chromeOptions': {
-        args: ['--headless', '--disable-gpu', '--window-size=1280,800']
+        args: [
+          '--headless',
+          '--disable-gpu',
+          '--remote-allow-origins=*',
+          '--window-size=1280,800'
+        ]
       }
       // }, {
       //     browserName: 'firefox',
diff --git a/package.json b/package.json
@@ -9,6 +9,11 @@
     "test": "pnpm --parallel test",
     "watch": "pnpm build --watch"
   },
+  "pnpm": {
+    "overrides": {
+      "vite": "^7.3.0"
+    }
+  },
   "devDependencies": {
     "@types/node": "^25.0.3",
     "@typescript-eslint/eslint-plugin": "^8.40.0",
@@ -30,7 +35,7 @@
     "tsx": "^4.20.4",
     "typescript": "^5.9.2",
     "unplugin-icons": "^22.2.0",
-    "vite": "^7.1.3",
+    "vite": "^7.3.0",
     "vitest": "^4.0.16",
     "webdriverio": "^9.19.1"
   },
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -27,10 +27,11 @@
   "author": "Christian Bromann <mail@bromann.dev>",
   "license": "MIT",
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.12",
+    "@tailwindcss/postcss": "^4.1.18",
     "@wdio/reporter": "9.18.0",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.6",
+    "postcss-import": "^16.1.1",
     "rollup": "^4.47.0",
     "stylelint": "^16.24.0",
     "stylelint-config-recommended": "^17.0.0",
diff --git a/packages/app/postcss.config.cjs b/packages/app/postcss.config.cjs
@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    'postcss-import': {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {}
   }
 }
diff --git a/packages/app/src/app.ts b/packages/app/src/app.ts
@@ -1,3 +1,4 @@
+import './tailwind.css'
 import { css, html, nothing } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
 import { TraceType, type TraceLog } from '@wdio/devtools-service/types'
diff --git a/packages/app/src/components/browser/snapshot.ts b/packages/app/src/components/browser/snapshot.ts
@@ -58,9 +58,10 @@ export class DevtoolsBrowser extends Element {
         width: 100%;
         height: 100%;
         display: flex;
-        padding: 2rem;
+        padding: 2rem !important;
         align-items: center;
         justify-content: center;
+        box-sizing: border-box !important;
       }
 
       section {
@@ -70,6 +71,9 @@ export class DevtoolsBrowser extends Element {
         display: flex;
         flex-direction: column;
         overflow: hidden;
+        background: var(--vscode-sideBar-background);
+        padding: 0.5rem;
+        gap: 0;
       }
 
       .frame-dot {
@@ -79,6 +83,35 @@ export class DevtoolsBrowser extends Element {
         margin: 1em 0.25em;
         flex-shrink: 0;
       }
+
+      .frame-dot:nth-child(1) {
+        background-color: var(
+          --vscode-notificationsErrorIcon-foreground,
+          #e51400
+        );
+      }
+
+      .frame-dot:nth-child(2) {
+        background-color: var(
+          --vscode-notificationsWarningIcon-foreground,
+          #bf8803
+        );
+      }
+
+      .frame-dot:nth-child(3) {
+        background-color: var(
+          --vscode-ports-iconRunningProcessForeground,
+          #369432
+        );
+      }
+
+      iframe {
+        background-color: white;
+        flex: 1;
+        border: none;
+        border-radius: 0 0 0.5rem 0.5rem;
+        min-height: 0;
+      }
     `
   ]
 
@@ -367,21 +400,25 @@ export class DevtoolsBrowser extends Element {
 
     return html`
       <section
-        class="w-full h-full bg-sideBarBackground rounded-t-md shadow-md"
+        class="w-full h-full bg-sideBarBackground rounded-lg border-2 border-panelBorder shadow-xl"
       >
-        <header class="flex block mx-2">
+        <header
+          class="flex items-center mx-2 bg-sideBarBackground rounded-t-lg"
+        >
           <div class="frame-dot bg-notificationsErrorIconForeground"></div>
           <div class="frame-dot bg-notificationsWarningIconForeground"></div>
           <div class="frame-dot bg-portsIconRunningProcessForeground"></div>
           <div
-            class="flex mx-4 my-2 pr-2 bg-inputBackground text-inputForeground border border-transparent rounded leading-7 w-full"
+            class="flex items-center mx-4 my-2 pr-2 bg-input-background text-inputForeground border border-editorSuggestWidgetBorder rounded leading-7 flex-1 min-w-0 overflow-hidden"
           >
-            <icon-mdi-world class="w-[20px] h-[20px] m-1 mr-2"></icon-mdi-world>
-            ${this.#activeUrl}
+            <icon-mdi-world
+              class="w-[20px] h-[20px] m-1 mr-2 flex-shrink-0"
+            ></icon-mdi-world>
+            <span class="truncate">${this.#activeUrl}</span>
           </div>
         </header>
         ${this.mutations && this.mutations.length
-          ? html`<iframe class="origin-top-left h-full w-full"></iframe>`
+          ? html`<iframe class="origin-top-left"></iframe>`
           : html`<wdio-devtools-placeholder
               style="height: 100%"
             ></wdio-devtools-placeholder>`}
diff --git a/packages/app/src/components/sidebar/filter.ts b/packages/app/src/components/sidebar/filter.ts
@@ -24,7 +24,7 @@ export class DevtoolsSidebarFilter extends Element {
         display: flex;
         align-items: top;
         font-size: 0.8em;
-        padding-right: 1em;
+        padding-right: 1em !important;
       }
 
       label {
diff --git a/packages/app/src/components/workbench.ts b/packages/app/src/components/workbench.ts
@@ -50,7 +50,7 @@ export class DevtoolsWorkbench extends Element {
     minPosition: MIN_WORKBENCH_HEIGHT,
     maxPosition: window.innerHeight * 0.7,
     initialPosition: window.innerHeight * 0.7, // initial height of browser window is 70% of window
-    getContainerEl: () => this.getShadowRootAsync() as any as Element,
+    getContainerEl: () => this as unknown as Element,
     direction: Direction.vertical
   })
 
@@ -199,9 +199,11 @@ export class DevtoolsWorkbench extends Element {
         <nav class="ml-auto" slot="actions">
           <button
             @click="${() => this.#toggle('toolbar')}"
-            class="flex h-10 w-10 items-center justify-center pointer ml-auto hover:bg-toolbarHoverBackground"
+            class="flex h-10 w-10 items-center justify-center pointer ml-auto hover:bg-toolbarHoverBackground group"
           >
-            <icon-mdi-arrow-collapse-down></icon-mdi-arrow-collapse-down>
+            <icon-mdi-arrow-collapse-down
+              class="group-hover:text-chartsBlue"
+            ></icon-mdi-arrow-collapse-down>
           </button>
         </nav>
       </wdio-devtools-tabs>
@@ -210,9 +212,11 @@ export class DevtoolsWorkbench extends Element {
             <button
               @click="${() => this.#toggle('toolbar')}"
               class="fixed z-[9999] right-2 bottom-2 bg-sideBarBackground flex h-10 w-10 items-center justify-center cursor-pointer rounded-md shadow
-                   hover:bg-toolbarHoverBackground border border-panelBorder"
+                   hover:bg-toolbarHoverBackground border border-panelBorder group"
             >
-              <icon-mdi-arrow-collapse-up></icon-mdi-arrow-collapse-up>
+              <icon-mdi-arrow-collapse-up
+                class="group-hover:text-chartsBlue"
+              ></icon-mdi-arrow-collapse-up>
             </button>
           `
         : nothing}
diff --git a/packages/app/src/core/core.css b/packages/app/src/core/core.css
@@ -1,12 +1,5 @@
-@import url('./colors.css');
+@import url('./shadow-styles.css');
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/**
- * general styles applied to all elements
- */
 @layer base {
   :host {
     line-height: 1.5;
@@ -20,6 +13,15 @@
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+:host {
+  --spacing: 0.25rem;
+}
+
+@layer base {
+  :host {
     -webkit-text-size-adjust: 100%;
   }
 
diff --git a/packages/app/src/core/element.ts b/packages/app/src/core/element.ts
@@ -1,9 +1,10 @@
 import { LitElement, unsafeCSS } from 'lit'
 
 import coreStyles from './core.css?inline'
+import tailwindStyles from '../tailwind.css?inline'
 
 export class Element extends LitElement {
-  static styles = [unsafeCSS(coreStyles)]
+  static styles = [unsafeCSS(tailwindStyles), unsafeCSS(coreStyles)]
 
   /**
    * get shadow root of element as promise which gets resolved once the element
diff --git a/packages/app/src/core/shadow-styles.css b/packages/app/src/core/shadow-styles.css
@@ -0,0 +1,32 @@
+/* Shadow DOM Styles - includes everything needed */
+@import url('./colors.css');
+
+/* Tailwind directives - these will be processed when imported with ?inline */
+@import "tailwindcss";
+
+@source "../src/**/*.{html,js,ts,jsx,tsx}";
+@source "../index.html";
+
+@theme {
+  --color-panelBorder: var(--vscode-panel-border);
+  --color-editorSuggestWidgetBorder: var(--vscode-editorSuggestWidget-border);
+}
+
+/**
+ * general styles applied to all elements
+ */
+@layer base {
+  :host {
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: var(--vscode-foreground);
+    font-family: var(--vscode-font-family);
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
diff --git a/packages/app/src/tailwind.css b/packages/app/src/tailwind.css
@@ -0,0 +1,18 @@
+@import "tailwindcss";
+
+/* Tailwind v4 CSS-first configuration */
+/* @source directive scans files for utility classes */
+@source "../src/**/*.{html,js,ts,jsx,tsx}";
+@source "../index.html";
+
+/* @theme directive defines custom design tokens */
+@theme {
+  --color-panelBorder: var(--vscode-panel-border);
+  --color-editorSuggestWidgetBorder: var(--vscode-editorSuggestWidget-border);
+  --color-toolbarHoverBackground: var(--vscode-toolbar-hoverBackground);
+  --color-chartsGreen: var(--vscode-charts-green);
+  --color-chartsRed: var(--vscode-charts-red);
+  --color-chartsYellow: var(--vscode-charts-yellow);
+  --color-chartsBlue: var(--vscode-charts-blue);
+  --color-input-background: var(--vscode-input-background);
+}
diff --git a/packages/app/tailwind.config.js b/packages/app/tailwind.config.js
@@ -1,35 +1,12 @@
-import fs from 'node:fs'
-
-/**
- * parse `./src/core/colors.css` and apply them to the theme
- */
-const cssContent = fs.readFileSync('./src/core/colors.css', 'utf-8')
-const cssVars = cssContent
-  .match(/--vscode-[^:]+/g)
-  .map((c) => [
-    c,
-    c.slice('--vscode-'.length).replace(/-(\w)/g, (_, m) => m.toUpperCase())
-  ])
-  .reduce((acc, [key, value]) => {
-    acc[value] = `var(${key})`
-    return acc
-  }, {})
-
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: ['class', ':host-context(.dark)'],
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-      white: '#ffffff',
-      black: '#000000',
-
-      wdio: '#ea5907',
-      ...cssVars
+    extend: {
+      colors: {
+        panelBorder: 'var(--vscode-panel-border)',
+        editorSuggestWidgetBorder: 'var(--vscode-editorSuggestWidget-border)'
+      }
     }
-  },
-  plugins: []
+  }
 }
diff --git a/packages/app/vite.config.ts b/packages/app/vite.config.ts
@@ -18,6 +18,9 @@ export default defineConfig({
       )
     }
   },
+  css: {
+    postcss: './postcss.config.cjs'
+  },
   plugins: [
     Icons({
       compiler: 'web-components',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`module.exports = {`
`2`	`2`	`plugins: {`
`3`		`- tailwindcss: {},`
	`3`	`+ 'postcss-import': {},`
	`4`	`+ '@tailwindcss/postcss': {},`
`4`	`5`	`autoprefixer: {}`
`5`	`6`	`}`
`6`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import './tailwind.css'`
`1`	`2`	`import { css, html, nothing } from 'lit'`
`2`	`3`	`import { customElement, query } from 'lit/decorators.js'`
`3`	`4`	`import { TraceType, type TraceLog } from '@wdio/devtools-service/types'`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ export class DevtoolsSidebarFilter extends Element {`
`24`	`24`	`display: flex;`
`25`	`25`	`align-items: top;`
`26`	`26`	`font-size: 0.8em;`
`27`		`- padding-right: 1em;`
	`27`	`+ padding-right: 1em !important;`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`label {`