[wp-trac] [WordPress Trac] #64389: Breaking change in 6.9 -> WP Core CSS now forces all links to underline.

[WordPress Trac]

#64389: Breaking change in 6.9 -> WP Core CSS now forces all links to underline.
--------------------------+------------------------------
 Reporter:  mmorris8      |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Themes        |     Version:  6.9
 Severity:  major         |  Resolution:
 Keywords:                |     Focuses:  css
--------------------------+------------------------------
Description changed by sabernhardt:

Old description:

> The offending line:
>
> ```
> a:where(:not(.wp-element-button)) {
>     text-decoration: underline;
> }
> ```
>
> My theme is uses a straightforward button class, but does so on a CSS
> layer. Five years after CSS @layer was widely avaialable and WordPress
> still doesn't respect it. That wouldn't be a problem except y'all are
> inserting global rules like this that break people's themes and create
> work for them.
>
> Simply remove this. Or fix the larger problem of WorldPress putting all
> it's global inline styles on the root layer. It's a 1 line code change in
> wp-includes/global-styles-and-settings.php
>
> Specifically change line 238 from
>

> {{{#!php
> <?php
> $stylesheet = $styles_variables . $styles_rest;
>
> }}}
>
> to
>
> {{{#!php
> <?php
> $stylesheet = "@layer wp { $styles_variables $styles_rest }";
> }}}
>
> This will allow themes that want to organize their CSS using @layer to
> declare wp as one of their layers - further they can declare the priority
> of the wordpress sheets in relation to their own.  If the theme does not
> do this the wp layer will be put on the end of the chain of layers
> causing it to preempt the other layered styles (which it already does
> because it is currently "unlayered")
>
> I realize this isn't a long term fix. It isn't intended to be. I've read
> the discussions on CSS Layer adoption and they get bogged down in with
> complex implemenation details I frankly don't see the point of. For now,
> if it comes out of wordpress put it on the wp layer. The CSS Layers spec
> allows for sub layers, so working out what those are and allowing blocks
> to declare layers and priorities can be sussed out at a later time.
>
> Or, third option, give us a hook here so we can modify the CSS about to
> be cached so we can wrap it as desired.

New description:

 The offending line:

 {{{
 a:where(:not(.wp-element-button)) {
     text-decoration: underline;
 }
 }}}

 My theme is uses a straightforward button class, but does so on a CSS
 layer. Five years after CSS `@layer` was widely available and WordPress
 still doesn't respect it. That wouldn't be a problem except y'all are
 inserting global rules like this that break people's themes and create
 work for them.

 Simply remove this. Or fix the larger problem of WordPress putting all
 it's global inline styles on the root layer. It's a 1-line code change in
 `wp-includes/global-styles-and-settings.php`

 Specifically change [https://github.com/WordPress/wordpress-
 develop/blob/6.9/src/wp-includes/global-styles-and-settings.php#L238 line
 238] from


 {{{#!php
 <?php
 $stylesheet = $styles_variables . $styles_rest;

 }}}

 to

 {{{#!php
 <?php
 $stylesheet = "@layer wp { $styles_variables $styles_rest }";
 }}}

 This will allow themes that want to organize their CSS using `@layer` to
 declare wp as one of their layers - further they can declare the priority
 of the wordpress sheets in relation to their own.  If the theme does not
 do this the `wp` layer will be put on the end of the chain of layers
 causing it to preempt the other layered styles (which it already does
 because it is currently "unlayered")

 I realize this isn't a long term fix. It isn't intended to be. I've read
 the discussions on CSS Layer adoption and they get bogged down in with
 complex implementation details I frankly don't see the point of. For now,
 if it comes out of WordPress put it on the `wp` layer. The CSS Layers spec
 allows for sub layers, so working out what those are and allowing blocks
 to declare layers and priorities can be sussed out at a later time.

 Or, third option, give us a hook here so we can modify the CSS about to be
 cached so we can wrap it as desired.

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64389#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform