Compile CSS files in dev mode

bud
1

Hi,

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.

This for example useful where working on editor styles where WP expects a CSS file: WordPress/block-editor.php at 1a21c14d857a0d85d44794d871add3dbdab88d5b · WordPress/WordPress · GitHub

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.

Thanks!

2 Likes
2

Hi @nlemoine,

Did you ever find a solution to this? We’ve been having issues with blocks in the editor as well.

3

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:

4

This is an example use case. I also had problems working on a print stylesheet (with CSS loaded as JS).

I’d really like an option to disable Hot reloading or whatever causes the “dev” mode to not output CSS files.

5

You can use Webpack 5’s MiniCSSExtractPlugin to extract CSS to a CSS asset.

Alternatively, if you’re looking for a solution to extract editor styles specifically, this plugin may help (I am the author).

Yes. I’m sure there’s a ‘proper’ way to do it, but this will do the trick in your bud.config.js:

app.config((config) => {fs.writeFileSync('.webpack.bud.config', JSON.stringify(config, null, 2)); return config;});

You will need to import fs from 'fs' at the top of your config.

3 Likes
6

cool plugin!

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:

❯ yarn bud repl                                                              

bud.build.rules                                                    page 1/2
                                                                                                       
Object {
 "css": [Rule],
 "cssModule": [Rule],
 "csv": [Rule],
 "font": [Rule],
 "html": [Rule],
 "image": [Rule],
 "inlineFont": [Rule],
 "inlineImage": [Rule],
 "inlineSvg": [Rule],

[esc] quit  [tab] clear  [↓] next  [↑] prev  [return] eval

It even supports js expressions:

❯ yarn bud repl                                                                 

bud.build.config.module.rules[1].oneOf.find(rule => `.css`.match(rule.test))
                                                                                                     
Object {
 "include": [Array],
 "test": /(?!.*\.module)\.css$/,
 "use": [Array],
}

[esc] quit  [tab] clear  [↓] next  [↑] prev  [return] eval

as far as sidestepping things without extending the framework –

bud.js uses style-loader in development and minicss in production. this is a very widely used strategy.

you can force it to use minicss regardless with something like this:

bud.build.items.precss.setLoader('minicss')
2 Likes
7

Thank you both for the valuable hints! I’ll try to play with that.

8

This no longer works, how can i get around the @production decorator?

9

Answering myself:

  app.build.items.precss.setLoader('minicss');
  app.hooks.action('build.before', (bud) => {
    bud.extensions.get('@roots/bud-extensions/mini-css-extract-plugin').enable(true);
  });
5 Likes
10

@oxyc Just wanted to say thanks, I searched for how to fix this for a long time.