Nesting an import inside of a class

bud
,
1

I’m trying to nest all of my CSS imports into the editor-styles-wrapper class in editor.css so that I have all of our custom styles displaying in the block editor, without interfering with the rest of the admin area.

I was following along with @Log1x recommendation back in Oct 22 in a Github Issue: Question: how to pass through assets from bud to block preview · Issue #137 · Log1x/acf-composer · GitHub

Not sure if reviving that would just be the best course, but I feel like this may be a general bud question/issue anyways.

For example if I try to set this inside of the editor.css to include our typography or button styles in the editor

.editor-styles-wrapper {
    @import 'components/typography';
    @import 'components/buttons';
}

it outputs as that verbatim and isn’t actually importing anything. It seems you can’t nest whole imports inside of class wrappers in app.css anymore either, although I have seen others saying they have done it before.

Is there perhaps a setting that needs tweaked, or should I open a GitHub issue about this?

2

For now I’m just wrapping the contents of each of these files with this class, but its resulting in a lot of unnecessary duplication.

Does bud in Sage 10 still use PostCSS by default?

I can nest classes just fine, and I can import just fine, it just seems that importing inside of a class is what is not working as expected.

3

Yes, Sage 10 with bud.js uses PostCSS. You need to use a PostCSS plugin to do what you’re describing — that’s not something that’s just supported out of the box by using PostCSS. Are you expecting that to work without a plugin?

Example: GitHub - RadValentin/postcss-prefix-selector: Prefix all CSS rules with a selector

You can also use add_editor_style instead:

3 Likes
4

Ah, I had done it like that before on another platforms that came bundled with PostCSS and nesting an import in a class worked. That other one must have been pre-bundled with a plugin that made it work!

I was just going off Log1x suggestion of doing it that way but it seems he was using bud-sass which is likely the difference.

For the sake of anyone else who tries searching for the same terms I was searching for - where it didn’t pull up those 2 results - another thing I did try was changing this in the setup.php.

add_action('enqueue_block_editor_assets', function () {
    bundle('editor')->enqueue();
    bundle('app')->enqueue();
}, 100);

This does not necessarily work, because even though it says “enqueue_block_editor_assets” it does it for the whole editor and not just the editor content entry box on the left, so typography was messing with things outside of the box still.

Thank you Ben, your first link contained the right combination of what I was looking for. Instead of just dropping a link I’ll post the snippet here for extra search-ability:

add_action('after_setup_theme', function () {
    add_theme_support('editor-styles');
    add_editor_style(asset('app.css'));
});

Thanks again!

2 Likes
5

Thanks for posting a thorough walkthrough of your solution! This is great.