Applying PostCSS Plugin to only editor CSS

bud
5

Thanks!

First off, I think this post by @strarsis might be of interest to you:

https://discourse.roots.io/t/absolute-domain-relative-path-for-asset-urls-in-css/

I’m not 100% but it seems like it is probably related. You might not need to use multiple compilers!

That said, here’s how you would do it as it was asked:

There are some important fixes included in 5.8.3. You should upgrade @roots/bud, @roots/sage and @roots/bud-tailwindcss to that version.

To reiterate the problem as I understand it. We have a config and we want to apply a postcss plugin exclusively to the editor entrypoint:

module.exports = async bud => 
  bud.entry({
    app: ['@scripts/app', '@styles/app'],
    editor: ['@scripts/editor', '@styles/editor'],
  })

In bud.js we do that with bud.make. This function basically creates a new instance of bud and allows you to configure it separately. So, we’ll split our entrypoints into two compilations:

module.exports = async bud =>
  bud.make("frontend", async (frontend) =>
      frontend
        .setPath("@dist", "public/app")
        .entry("app", ["@scripts/app", "@styles/app"])
  )

  .make("editor", async (editor) =>
      editor
        .setPath("@dist", "public/editor")
        .entry("app", ["@scripts/editor", "@styles/editor"])
  )

The function we’re passing to bud.make can be thought of as its own bud config file, if that’s helpful.

It is important that we give each compiler it’s own distribution directory (@dist) because otherwise they will overwrite one another.

Now, the only thing left to do is apply the postcss configuration to "editor":

module.exports = async bud =>
  bud.make("frontend", async (frontend) =>
      frontend
        .setPath("@dist", "public/app")
        .entry("app", ["@scripts/app", "@styles/app"])
  )

  .make("editor", async (editor) =>
      editor
        .setPath("@dist", "public/editor")
        .entry("app", ["@scripts/editor", "@styles/editor"])

        /** postcss config applies only to editor */
        .postcss.setPlugin("postcss-editor-styles", [
          require.resolve("postcss-editor-styles"),
          {scopeTo: "#editor .editor-styles-wrapper"},
        ])
  )

See the docs on @roots/bud-postcss for more information on customizing postcss.

This was my final config when I was testing:

module.exports = async bud => {
  bud
    /**
     * Frontend css/js
     *
     * @param {bud} app
     */
    .make("frontend", async frontend =>
      frontend
        .setPath("@dist", "public/app")
        .entry("app", ["@scripts/app", "@styles/app"])
    )

    /**
     * Editor css/js
     *
     * @param {bud} editor
     */
    .make("editor", async editor =>
      editor
        .setPath("@dist", "public/editor")
        .entry("editor", ["@styles/app"])
        .postcss.setPlugin("postcss-editor-styles", [
          require.resolve("postcss-editor-styles"),
          {
            scopeTo: "#editor .editor-styles-wrapper",
          },
        ])
    )

    .proxy("http://example.test")
    .serve("http://localhost:3000")
    .watch("resources/views/**/*", "app/**/*");
};

Some final notes:

  1. When you use multiple compilers anything like .entry and .setPath in the outer scope (not in a bud.make call) will be ignored. The only thing you want to do in the outer scope is configure the dev server (bud.proxy, bud.serve, bud.watch, etc.)

  2. You can run a specific compiler with the --target flag. So, if you’re only working on frontend styles you don’t need to compile the editor assets: bud build --target frontend

  3. You will generate two manifests using this approach and will need to set that up using Acorn in setup.php.

4 Likes