0

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..

0 Answers0