PostCSS usage is broken in editor if Yoast is used.

[tcmulder]

When Yoast is active, the editor canvas iframe falls back to the old div.editor-styles-wrapper version that attempts to scope all CSS. When using PostCSS, currently nested CSS gets output as nested CSS, since it has support in all modern major browsers; but, in the old div.editor-styles-wrapper version of the editor, this causes parent CSS to have .editor-styles-wrapper nested between them and their children.

Issue opened here for that issue.

Solutions:

1. I'm going to try just using scss for now, as it seems to perform all the nesting translations back to an older version of CSS.
2. Maybe I could get PostCSS to disable nesting. Wasn't finding very clear documentation on how to opt out of common CSS functionality.
3. I can enqueue the CSS in the enqueue_block_editor_assets hook, but things break outside the editor: nothing is scoped in the old div.editor-styles-wrapper version of the editor.

[tcmulder]

Here's the ticket in Yoast: Yoast/wordpress-seo#20535

[tcmulder]

Maybe take a look at build tool for: https://github.com/WebDevStudios/wds-bt

[tcmulder]

As an example for testing, add the following to the playground:

<!-- wp:group {"className":"group-1","layout":{"type":"constrained"}} -->
<div class="wp-block-group group-1"><!-- wp:group {"className":"group-2","layout":{"type":"constrained"}} -->
<div class="wp-block-group group-2"><!-- wp:group {"className":"group-3","layout":{"type":"constrained"}} -->
<div class="wp-block-group group-3"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">...</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Then in an editor-facing stylesheet (like wp-editor.css), this will work:

.group-1 {
	outline: 1px solid red;
}
.group-1 .group-2 {
	outline: 1px solid blue;
}
.group-1 .group-2 .group-3 {
	outline: 1px solid green;
}
``

but this does not:

.group-1 {
outline: 1px solid red;
.group-2 {
outline: 1px solid blue;
.group-3 {
outline: 1px solid green;
}
}
}

that's because it becomes:

.editor-styles-wrapper .group-1 {
outline:1px solid red;
.editor-styles-wrapper .group-2 {
outline:1px solid blue;
.editor-styles-wrapper .group-3 {
outline:1px solid green
}
}
}

Since nesting is supported in browsers now, it works fine if you disable Yoast (or anything else that'd force a reversion—I read somewhere the presence of any outcated block.json version could do it).