Following up on CSS not compiling when building development, I’d like to know how I can compile CSS files to real CSS files (not JS) just like Bud would do on a production. Basically, run Bud in “watch” but removing the “hot”/compiling CSS to JS feature.
I’m a bit familiar with Webpack but Bud adds some much abstraction layers I must admit I have much trouble to know what’s happening under the hood (is there some kind of way to dump the generated webpack config?) and can’t find what I should disable to achieve this.
So you want to add the frontend styles as editor styles (for Gutenberg)?
Editor styles are indeed automatically post-processed by Gutenberg,
this is not the case when injecting the styles directly by bud (not sure about whether bud does this by default for HMR styles). For development it can make sense to add post-processing to the injected styles to add the necessary editor-styles-wrapper (the currently used style isolation mechanism).
Also this blog post about HMR and the block editor may be relevant:
to explore the generated config you can do something like @talss89 helpfully posted. you might also want to try bud repl command (i use it a lot when i’m working on bud).
yarn bud repl
in the interface you’re presented with drill down the props you want to explore (bud.build.rules or bud.build.config, in this case) and hit enter. from here you can use the arrow keys to page up and down through the object, continue your initial query (type some more and hit enter again), etc: