# Bud build development & asset() function

**URL:** https://discourse.roots.io/t/bud-build-development-asset-function/24553
**Category:** bud
**Tags:** bud, acorn
**Created:** 2023-01-12T12:32:09Z
**Posts:** 7

## Post 1 by @hallowichig0 — 2023-01-12T12:32:10Z

Hi, I would like to ask if there is yarn build development in bud v5.8? It seems yarn build development is not working in v5.8?

Or is there a way on how to get the css files using asset() function? I tried to use asset() function to enqueue the css in add\_editor\_style. It seems works when using yarn build but when I used yarn dev, the asset() function cannot find the editor.css because the editor.css was merged to editor.js.

```
/*
 * Add editor styles
 */
add_action( 'init', function(){
    add_editor_style( asset('editor.js')->uri() );
});
```

---

## Post 2 by @strarsis — 2023-01-12T12:55:14Z

Note that for Gutenberg the editor styles needs to be added by relative path, see this example

> <https://github.com/strarsis/sage10-fse/blob/2b96d1a6cb4e6a0498aea0bfa5f2323e75114f99/app/setup.php#L37-L40>

(related trac issue [#55728 (baseURL missing for remotely fetched editor styles) – WordPress Trac](https://core.trac.wordpress.org/ticket/55728#ticket))

---

## Post 3 by @nlemoine — 2023-01-19T08:05:05Z

Not necessarily, you can also provide a URL (if reachable): [WordPress/block-editor.php at 1a21c14d857a0d85d44794d871add3dbdab88d5b · WordPress/WordPress · GitHub](https://github.com/WordPress/WordPress/blob/1a21c14d857a0d85d44794d871add3dbdab88d5b/wp-includes/block-editor.php#L665-L695)

---

## Post 4 by @strarsis — 2023-01-19T16:08:23Z

@nlemoine: The issue is not that the styles are not loaded, but rather that the URLs aren’t rewritten during CSS post-processing in Gutenberg, resulting in broken references.

---

## Post 5 by @talss89 — 2023-01-31T17:39:20Z

Hi all,

I’ve been thinking about this workflow, and have come up with a possible solution based on an idea @strarsis mentioned at [Extract editor styles · Issue #2853 · roots/sage · GitHub](https://github.com/roots/sage/issues/2853#issue-1061487416)

The approach is extracting styles wrapped in `@editor {}` to a separate CSS asset, then enqueuing via `add_editor_style` as normal. Gutenberg expects the CSS to be on disk or at URL, and can’t unpack JS runtimes, so a CSS asset makes sense here.

Now, I’ve never written a Webpack plugin, so this is a very dirty clone and hack of `SassNinja/media-query-plugin`, but perhaps it can be improved with community input.

> **[GitHub - talss89/wp-editor-query-plugin: Webpack plugin for wp @editor...](https://github.com/talss89/wp-editor-query-plugin)**
>
> Webpack plugin for wp @editor extraction. Contribute to talss89/wp-editor-query-plugin development by creating an account on GitHub.

Not on NPM, so `yarn add https://github.com/talss89/wp-editor-query-plugin --dev` if you want to try it out.

This currently works for me w/ Sage 10 and Bud 6.7.2, in both dev and production modes. Just wrap CSS rules in `@editor` or `@editor-only`. A `css/default.editor.css` file should be emitted as an asset.

Currently only wrapping selectors is supported, wrapping rules will result in broken CSS, but will add that functionality soon.

If people think this is a decent approach, I’ll put some time into developing the plugin, proper readme, NPM publish, etc.

---

## Post 6 by @strarsis — 2023-01-31T17:40:28Z

@talss89: Awesome! I will try this out in my next Sage theme project!

---

## Post 7 by @talss89 — 2023-02-01T11:15:14Z

Thanks! Please let me know how it works for you.

I’ve made some adjustments to the syntax to make it more ‘vanilla’. You can now use a media query with a fake feature, and it plays well with IDE syntax highlighting, linters etc.

`@media all, (wp-editor) {}`

or, for editor styles only (don’t emit styles in main bundle)

`@media (wp-editor) {}`

Full ‘adoption’ of entrypoints is now supported too. Have written a readme with more info.

Criticism / feedback is appreciated, ultimately I’d like to package this as a Bud extension.