Description
Description
transformStyles()
styles utility works incorrectly for some special selectors. I assume this is because of an issue in postcss-prefixwrap
which is used by transformStyles()
. I did try to reproduce this issue in postcss-prefixwrap
but their test setup is giving me some headaches.
Step-by-step reproduction instructions
Easiest way to reproduce it is to add the following CSS snippet in the block editor while the iframe isn't present, so that the prefixing with .editor-styles-wrapper
takes place.
:is(.is-layout-flow, .is-layout-constrained) > *:where(:not(h1, h2, h3, h4, h5, h6)) {
margin-block-start: 0;
}
:is(.is-layout-flow, .is-layout-constrained) :where(h1, h2, h3, h4, h5, h6) {
margin-block-end: 0
}
The resulting CSS is this (WRONG):
.test :is(.is-layout-flow, .test .is-layout-constrained) > *:where(:not(h1, .test h2, .test h3, .test h4, .test h5, .test h6)) {
margin-block-start: 0;
margin-block-end: var(--theme-content-spacing);
}
.test :is(.is-layout-flow, .test .is-layout-constrained) :where(h1, .test h2, .test h3, .test h4, .test h5, .test h6) {
margin-block-end: calc(var(--has-theme-content-spacing, 1) * (0.3em + 10px));
}
As you can see, the .test
prefix is added after every comma, which is obviously incorrect. The correct output would be this (CORRECT):
.test :is(.is-layout-flow, .is-layout-constrained) > *:where(:not(h1, h2, h3, h4, h5, h6)) {
margin-block-start: 0;
margin-block-end: var(--theme-content-spacing);
}
.test :is(.is-layout-flow, .is-layout-constrained) :where(h1, h2, h3, h4, h5, h6) {
margin-block-end: calc(var(--has-theme-content-spacing, 1) * (0.3em + 10px));
}
I know this potentially involves work on the parser but I'm happy to do it if you give me some pointers on where to start looking. If the way is debugging postcss-prefixwrap
, I will do that.
Screenshots, screen recording, code snippet
Easiest way to reproduce this problem is to add the following test case in the packages/block-editor/src/utils/test/transform-styles.js
test file:
it( 'should prefix complex selector correctly', () => {
const input = `:is(.is-layout-flow, .is-layout-constrained) > *:where(:not(h1, h2, h3, h4, h5, h6)) {
margin-block-start: 0;
margin-block-end: var(--theme-content-spacing);
}
:is(.is-layout-flow, .is-layout-constrained) :where(h1, h2, h3, h4, h5, h6) {
margin-block-end: calc(var(--has-theme-content-spacing, 1) * (0.3em + 10px));
}`;
const output = transformStyles(
[
{
css: input,
},
],
'.test'
);
console.log( 'here', { output } );
expect( output ).toBeTruthy();
} );
You will see that the output is as above.
Environment info
- Latest gutenberg repo,
trunk
branch
Please confirm that you have searched existing issues in the repo.
- Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
- Yes