0094a3571c
- Add postcss-prefix-selector to prefix all CSS selectors with .formipay-design-system - This gives Tailwind utilities higher specificity than WP admin styles - Prevents WP input/select/button styles from overriding shadcn components - All 129 selectors now scoped correctly
27 lines
957 B
JavaScript
27 lines
957 B
JavaScript
const prefixSelector = require('postcss-prefix-selector');
|
|
|
|
module.exports = {
|
|
plugins: {
|
|
'@tailwindcss/postcss': {},
|
|
autoprefixer: {},
|
|
'postcss-prefix-selector': {
|
|
prefix: '.formipay-design-system',
|
|
transform(prefix, selector) {
|
|
// Don't prefix root-level selectors like :root, @keyframes
|
|
if (selector.startsWith(':root') || selector.startsWith('@keyframes') || selector.startsWith('@font-face')) {
|
|
return selector;
|
|
}
|
|
// Don't prefix html/body selectors
|
|
if (selector.startsWith('html') || selector.startsWith('body')) {
|
|
return selector;
|
|
}
|
|
// Don't double-prefix
|
|
if (selector.startsWith(prefix)) {
|
|
return selector;
|
|
}
|
|
return `${prefix} ${selector}`;
|
|
},
|
|
},
|
|
},
|
|
};
|