How can I use `postcss-prefixwrap` in bud.config.js to wrap editor.scss with a certain classname like `.editor-styles-wrapper`?

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:

/**
 * Build configuration
 *
 * @see {@link https://roots.io/docs/sage/ sage documentation}
 * @see {@link https://bud.js.org/guides/configure/ bud.js configuration guide}
 *
 * @typedef {import('@roots/bud').Bud} Bud
 * @param {Bud} app
 */

import prefixWrap from 'postcss-prefixwrap'

export default async (app) => {
  /**
   * Application entrypoints
   * @see {@link https://bud.js.org/docs/bud.entry/}
   */

  // // 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'],
    })

    /**
     * Directory contents to be included in the compilation
     * @see {@link https://bud.js.org/docs/bud.assets/}
     */
    .assets(['images'])

    /**
     * Matched files trigger a page reload when modified
     * @see {@link https://bud.js.org/docs/bud.watch/}
     */
    .watch(['resources/views', 'app'])

    /**
     * Proxy origin (`WP_HOME`)
     * @see {@link https://bud.js.org/docs/bud.proxy/}
     */
    .proxy('https://webreact-sage.lndo.site')

    /**
     * Development origin
     * @see {@link https://bud.js.org/docs/bud.serve/}
     */
    .serve('http://localhost:3000')

    /**
     * URI of the `public` directory
     * @see {@link https://bud.js.org/docs/bud.setPublicPath/}
     */
    .setPublicPath('./public')

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     *
     * @see {@link https://bud.js.org/extensions/sage/theme.json/}
     * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/}
     */
    .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.

My two cents here: Prefixing the selectors manually instead of adding the frontend styles as editor styles may not be the most optimal approach:

(also see https://github.com/m-e-h/postcss-editor-styles/issues/4)

Concerning your issue, there are actually multiple PostCSS plugins for prefixing selectors:

Adding the frontend styles as editor styles is the proper approach, as this not only takes care of style isolation in a future-proof manner, it also is the same way as adding styles to the Classic/TinyMCE editor.

You may be interested in this Sage 10 FSE (Full Site Editing) theme that showcases how a Sage theme supports the Gutenberg editor, block templates, block parts, block patterns, among other Gutenberg-/block-related things:
https://github.com/strarsis/sage10-fse

1 Like

Hej Strarsis,

Its been a while since your response. Thanks for providing this information. The add_editor_style() worked for us. We assigned it to the enqueue_block_editor_assets hook. The path to the stylesheet required some debugging for configuration but we made it work as follows:

/**
 * Register the theme assets with the block editor.
 * @return void
 */
add_action('enqueue_block_editor_assets', function (): void {
    add_editor_style(asset('editor.css')->relativePath(get_theme_file_path()));
}, 100);