Merge pull request #181 from PrestaShopCorp/prefix-preflight-of-tailwind

Prefix CSS rules to avoid impacting pages in which the components are integrated
PrestaShopCorp · Sep 5, 2023 · c6e04e5 · c6e04e5
2 parents 5dd6a8b + d80e7e1
commit c6e04e5
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "jsdom": "^22.1.0",
     "lint-staged": "^13.2.3",
     "postcss": "^8.4.25",
+    "postcss-prefix-selector": "^1.16.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.63.6",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,18 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {}
+    autoprefixer: {},
+    'postcss-prefix-selector': {
+      prefix: '#psaccounts',
+      transform: function(prefix, selector, prefixedSelector) {
+        if (selector.match(/^(html|body)/)) {
+          return selector.replace(/^([^\s]*)/, `$1 ${prefix}`);
+        } else if (selector.match(/^(\#psaccounts)/)) {
+          return selector;
+        } else {
+          return prefixedSelector;
+        }
+      }
+    },
   }
 };
diff --git a/src/components/panel/AccountPanel.vue b/src/components/panel/AccountPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <puik-card
-    class="acc-p-6"
+    class="!acc-p-6"
   >
     <div class="acc-flex acc-flex-row acc-items-center">
       <PuikIcon