From 99b497b69838e5d6a986135ada9908d97343a5c2 Mon Sep 17 00:00:00 2001
From: Anca Verniceanu <anca.verniceanu@liip.ch>
Date: Wed, 17 Sep 2025 13:01:54 +0200
Subject: [PATCH 1/4] Scope Tailwind vars to .

---
 package-lock.json                            | 12 ++++-
 package.json                                 |  1 +
 playground/app/app.vue                       |  6 ++-
 playground/app/components/VuepalProvider.vue |  3 ++
 postcss.config.cjs                           | 54 +++++++++++++-------
 tailwind.config.js                           |  7 ++-
 tsconfig.json                                |  1 -
 7 files changed, 61 insertions(+), 23 deletions(-)
 create mode 100644 playground/app/components/VuepalProvider.vue

diff --git a/package-lock.json b/package-lock.json
index 1443458..a5f59dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "vuepal",
-      "version": "3.0.2",
+      "version": "3.0.5",
       "license": "MIT",
       "dependencies": {
         "change-case": "^5.4.4",
@@ -34,6 +34,7 @@
         "postcss-import": "^16.0.1",
         "postcss-mixins": "^9.0.4",
         "postcss-nested-import": "^1.3.0",
+        "postcss-prefix-selector": "^2.1.1",
         "postcss-replace": "^2.0.1",
         "postcss-url": "^10.1.3",
         "tailwindcss": "^3.4.1",
@@ -16128,6 +16129,15 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/postcss-prefix-selector": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-prefix-selector/-/postcss-prefix-selector-2.1.1.tgz",
+      "integrity": "sha512-ZBgf427Et6+XnrnJ9VXtJEKCjJwTvn2wn/qMg+wvvlRhIeFIAxdbrlZZ0CSsWYMJfcyPLBh8ogj5O1kb/Mcx3g==",
+      "dev": true,
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-reduce-initial": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-7.0.2.tgz",
diff --git a/package.json b/package.json
index ad777ff..4540a8e 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "postcss-import": "^16.0.1",
     "postcss-mixins": "^9.0.4",
     "postcss-nested-import": "^1.3.0",
+    "postcss-prefix-selector": "^2.1.1",
     "postcss-replace": "^2.0.1",
     "postcss-url": "^10.1.3",
     "tailwindcss": "^3.4.1",
diff --git a/playground/app/app.vue b/playground/app/app.vue
index 514841e..135a95b 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -1,8 +1,10 @@
 <template>
   <div>
     <div class="playground-admin">
-      <VuepalAdminToolbar />
-      <VuepalLocalTasks />
+      <VuepalProvider>
+        <VuepalAdminToolbar />
+        <VuepalLocalTasks />
+      </VuepalProvider>
     </div>
     <div v-if="originErrorMessage" class="origin-error-message">
       {{ originErrorMessage }}
diff --git a/playground/app/components/VuepalProvider.vue b/playground/app/components/VuepalProvider.vue
new file mode 100644
index 0000000..617e644
--- /dev/null
+++ b/playground/app/components/VuepalProvider.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="vuepal-root"><slot /></div>
+</template>
diff --git a/postcss.config.cjs b/postcss.config.cjs
index a5b31fe..2f2911a 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,21 +1,39 @@
 /* eslint-disable */
-module.exports = {
-  plugins: {
-    'postcss-import': {},
-    'postcss-mixins': {},
-    'postcss-nested-import': {},
-    'tailwindcss/nesting': {},
-    'postcss-url': {},
-    tailwindcss: {},
-    cssnano: {
-      preset: 'default',
-    },
-    'postcss-replace': {
-      pattern: /(--tw|\*, ::before, ::after)/g,
-      data: {
-        '--tw': '--vuepal-tw',
-        '*, ::before, ::after': ':root',
-      },
+function scopePreflight(container = '.vuepal-root') {
+  const creator = () => ({
+    postcssPlugin: 'scope-preflight',
+    Once(root) {
+      root.walkRules((rule) => {
+        if (!rule.selector) return
+        const s = rule.selector.replace(/\s+/g, ' ').trim()
+        const isRootOrHost =
+          /^:root(?:\s*,\s*:host)?$|^:host(?:\s*,\s*:root)?$/.test(s)
+        const isUniversal =
+          /^\*,\s*::?before,\s*::?after(?:,\s*::backdrop)?$/.test(s)
+        const isBackdrop = /^::backdrop$/.test(s)
+
+        if (isRootOrHost) {
+          rule.selector = container
+        } else if (isUniversal) {
+          rule.selector = `${container} *, ${container} ::before, ${container} ::after`
+        } else if (isBackdrop) {
+          rule.selector = `${container} ::backdrop`
+        }
+      })
     },
-  },
+  })
+  creator.postcss = true
+  return creator
+}
+
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-mixins'),
+    require('postcss-nested-import'),
+    require('tailwindcss/nesting'),
+    require('postcss-url'),
+    require('tailwindcss'),
+    scopePreflight('.vuepal-root'),
+  ],
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 7dc3cd0..c79e173 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,12 @@ module.exports = {
     preflight: false,
     container: false,
   },
-  content: [], // This is important, else unwanted styles will leak.
+  important: '.vuepal-root',
+  content: [
+    './src/**/*.{vue,js,ts}',
+    './playground/**/*.{vue,js,ts}',
+    './app/**/*.{vue,js,ts}',
+  ],
   theme: {
     extend: {
       transitionTimingFunction: {
diff --git a/tsconfig.json b/tsconfig.json
index 398c058..852ddeb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,3 @@
 {
-  "extends": "./.nuxt/tsconfig.json",
   "exclude": ["dist", "node_modules", "playground"]
 }

From d82006d83df1e2319367c2745c436b57e5fa2c2c Mon Sep 17 00:00:00 2001
From: Anca Verniceanu <anca.verniceanu@liip.ch>
Date: Wed, 8 Oct 2025 09:50:19 +0200
Subject: [PATCH 2/4] Add the vuepal-root class directly to the components.

---
 playground/app/app.vue                              | 6 ++----
 playground/app/components/VuepalProvider.vue        | 3 ---
 src/runtime/components/VuepalAdminToolbar/index.vue | 2 +-
 src/runtime/components/VuepalLocalTasks/index.vue   | 2 +-
 4 files changed, 4 insertions(+), 9 deletions(-)
 delete mode 100644 playground/app/components/VuepalProvider.vue

diff --git a/playground/app/app.vue b/playground/app/app.vue
index 135a95b..514841e 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -1,10 +1,8 @@
 <template>
   <div>
     <div class="playground-admin">
-      <VuepalProvider>
-        <VuepalAdminToolbar />
-        <VuepalLocalTasks />
-      </VuepalProvider>
+      <VuepalAdminToolbar />
+      <VuepalLocalTasks />
     </div>
     <div v-if="originErrorMessage" class="origin-error-message">
       {{ originErrorMessage }}
diff --git a/playground/app/components/VuepalProvider.vue b/playground/app/components/VuepalProvider.vue
deleted file mode 100644
index 617e644..0000000
--- a/playground/app/components/VuepalProvider.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div class="vuepal-root"><slot /></div>
-</template>
diff --git a/src/runtime/components/VuepalAdminToolbar/index.vue b/src/runtime/components/VuepalAdminToolbar/index.vue
index 260362f..c3df670 100644
--- a/src/runtime/components/VuepalAdminToolbar/index.vue
+++ b/src/runtime/components/VuepalAdminToolbar/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="vuepal-admin-toolbar"
+    class="vuepal-admin-toolbar vuepal-root"
     :style="style"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
diff --git a/src/runtime/components/VuepalLocalTasks/index.vue b/src/runtime/components/VuepalLocalTasks/index.vue
index ff1806e..412a06f 100644
--- a/src/runtime/components/VuepalLocalTasks/index.vue
+++ b/src/runtime/components/VuepalLocalTasks/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vuepal-local-tasks">
+  <div class="vuepal-local-tasks vuepal-root">
     <ul>
       <li
         v-for="task in tasks"

From 1fcda937706be5029464ffc5abf4b1fff077a047 Mon Sep 17 00:00:00 2001
From: Anca Verniceanu <anca.verniceanu@liip.ch>
Date: Wed, 8 Oct 2025 09:53:24 +0200
Subject: [PATCH 3/4] Revert Tailwind config change.

---
 tailwind.config.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index c79e173..9e3c176 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,11 +6,7 @@ module.exports = {
     container: false,
   },
   important: '.vuepal-root',
-  content: [
-    './src/**/*.{vue,js,ts}',
-    './playground/**/*.{vue,js,ts}',
-    './app/**/*.{vue,js,ts}',
-  ],
+  content: [],
   theme: {
     extend: {
       transitionTimingFunction: {

From 6858922faada5533d1e942354dcde47ff9e341b8 Mon Sep 17 00:00:00 2001
From: Anca Verniceanu <anca.verniceanu@liip.ch>
Date: Wed, 8 Oct 2025 09:59:26 +0200
Subject: [PATCH 4/4] Add back postcss config settings.

---
 postcss.config.cjs | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/postcss.config.cjs b/postcss.config.cjs
index 2f2911a..74538e2 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,4 +1,3 @@
-/* eslint-disable */
 function scopePreflight(container = '.vuepal-root') {
   const creator = () => ({
     postcssPlugin: 'scope-preflight',
@@ -34,6 +33,16 @@ module.exports = {
     require('tailwindcss/nesting'),
     require('postcss-url'),
     require('tailwindcss'),
+    require('cssnano')({
+      preset: 'default',
+    }),
+    require('postcss-replace')({
+      pattern: /(--tw|\*, ::before, ::after)/g,
+      data: {
+        '--tw': '--vuepal-tw',
+        '*, ::before, ::after': ':root',
+      },
+    }),
     scopePreflight('.vuepal-root'),
   ],
 }