I'm working on a Sage build. I started configuring my bud.config.js
and want the @styles/editor
to be wrapped with import prefixWrap from 'postcss-prefixwrap'
. Somehow I can't figure out how to make it work. Never had problems with implementing postcss-prefixwrap in webpack or laramix.
I have tried app.postcss.setPlugins
for bud.config.js
without success:
// --- bud.config.js ---
/**
* Build configuration
*
* @typedef {import('@roots/bud').Bud} Bud
* @param {Bud} app
*/
import prefixWrap from 'postcss-prefixwrap'
export default async (app) => {
// PostCSS plugins
app.postcss.setPlugins([
[
'postcss-prefixwrap', prefixWrap('.editor-styles-wrapper', {
whitelist: ['@styles/editor']
})
]
])
// Main bud.js config
app
.entry({
app: ['@scripts/app', '@styles/app'],
editor: ['@scripts/editor', '@styles/editor'],
admin: ['@scripts/admin', '@styles/admin'],
})
.assets(['images'])
.watch(['resources/views', 'app'])
.proxy('https://example.lndo.site')
.serve('http://localhost:3000')
.setPublicPath('./public')
.wpjson.settings({
color: {
custom: false,
customDuotone: false,
customGradient: false,
defaultDuotone: false,
defaultGradients: false,
defaultPalette: false,
duotone: [],
},
custom: {
spacing: {},
typography: {
'font-size': {},
'line-height': {},
},
},
spacing: {
padding: true,
units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
},
typography: {
customFontSize: false,
},
})
.useTailwindColors()
.useTailwindFontFamily()
.useTailwindFontSize()
.enable();
};
I have the following packages installed in package.json
:
- "@roots/bud": "6.11.0"
- "@roots/bud-postcss": "6.11.0"
- "@roots/bud-sass": "6.11.0"
- "@roots/bud-tailwindcss": "6.11.0"
- "@roots/sage": "6.11.0"
- "postcss-prefixwrap": "1.39.0"
Hope someone has a solution for this implementation because the documentation of bud-postcss seems to be limited in explaining a case like this..