Isolate/break out styles for editor in sage 10

[strarsis]

Often I have to add very block-specific styles only for the editor.
Currently, I have to add these styles to a separate editor.scss file.
Ideally, I can just use some CSS clause to isolate these styles in place:

.wp-block-group {
  &.is-style-special {
    border: 2px solid red;

    @editor {
      margin-top: 0; // or some other adjustment
    }
  }
}

The styles in @editor {[...]} would be outputted in the separate editor.css that is only enqueued for the Gutenberg editor (not as theme style, so no automatic selector wrapping).

Related discussion:

How to create and use a separate CSS file for Gutenberg editor in Sage 9

Hey, First pass at this so open to review, but this might be of interest to anyone edging closer to using Gutenberg in Production. With TinyMCE you could push your entire CSS file to the editor to adopt your theme’s styles but that won’t work in Gutenberg. Instead you’ll need to create and import another seperate CSS file with just the styles specific to the editor. (Also there may be a better way to do this that doesn’t involve keeping two seperate top-level SCSS files going? You tell me.) …

https://discourse.roots.io/t/separate-styles-for-frontend-editor/17858

[strarsis]

Follow up:

Bud build development & asset() function

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 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 c…