Pseudo-element selectors in `styles.**.css` property no longer work in 6.6 compared to 6.5

[wongjn]

Description

With the CSS specificity change in WordPress 6.6, most rules are now wrapped in :root :where(). However, pseudo-elements like ::before and ::after cannot be wrapped in :where().

This means theme.json like this:

{
  "$schema": "https://schemas.wp.org/wp/6.6/theme.json",
  "version": 3,
  "styles": {
    "elements": {
      "h1": {
        "css": "&::before { content: 'Foo' }"
      }
    }
  }
}

Produces:

:root :where(h1::before) {
  content: 'Foo';
}

Which is invalid CSS and causes the CSS rule to no longer apply.

Step-by-step reproduction instructions

1. Install fresh WordPress.
2. Add an entry for core/heading in styles.blocks in twentytwentyfour/theme.json:

    },
   +"core/heading": {
   +  "css": "&::before { content: 'Foo' }"
   +},
    "core/image": {

3. See the invalid inline CSS gets added to the webpage:

   :root :where(.wp-block-heading::before ){content: 'Foo'}

   Compare this to the equivalent in 6.5.5:

   .wp-block-heading::before {content: 'Foo'}

   Which is valid CSS.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.6.1
• Twenty Twenty-Four 1.2

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

[harlet]

Yeah. I have the same issue, breaking styles in the editor and front-end.

[aaronrobertshaw]

Thanks for writing up this detailed issue @wongjn it has really helped with the debugging 👍

I can replicate the problem.

The sample theme.json snippet also highlights the possibility that empty CSS rules can be generated using theme.json custom css.

I believe the bugs can be isolated to the process_blocks_custom_css function. I'll work on getting a fix up shortly.

[aaronrobertshaw]

A fix is up in #63980 and backport is available over in WordPress/wordpress-develop#7097.

[dballari]

I have the same issue.

If I add this to my theme.json

"core/post-template": {
              "css": " & .sticky .wp-block-post-title a::after { content: \"*\"}"  
 },

This generates this code

:root :where(.wp-block-post-template .sticky .wp-block-post-title a::after) {
    content: "*"
}

Which does not work, But it would if the pseudo class ::after was left outside the :where selector like this

:root :where(.wp-block-post-template .sticky .wp-block-post-title a)::after {content: "*"}

Apart from this, for each css property added we get an empty css like this one in the example that I provide:

:root :where(.wp-block-post-template) {}

it would be great if these empty css properties where not added

[aaronrobertshaw]

Thanks for the extra confirmation @dballari 👍

As noted above, there is already a proposed fix that addresses both of these issues. See #63980 for more details.

If you feel comfortable doing so, it would be great if you could test that PR and confirm the fix works for you 🤞

[dballari]

sorry @aaronrobertshaw I have not been able to test your PR, my build process fails I think because of this package @wordpress/babel-preset-default:build if I'm able to solve it, I will test

[societal-intervention9]

Thanks for writing up this detailed issue @wongjn it has really helped with the debugging 👍

I can replicate the problem.

The sample theme.json snippet also highlights the possibility that empty CSS rules can be generated using theme.json custom css.

I believe the bugs can be isolated to the process_blocks_custom_css function. I'll work on getting a fix up shortly.

https://resolve90.github.io/3JbGLC6P9Jk/