[wp-trac] [WordPress Trac] #46976: Twenty Nineteen: remove postcss-focus-within

[WordPress Trac]

#46976: Twenty Nineteen: remove postcss-focus-within
---------------------------------------+------------------------------
 Reporter:  afercia                    |       Owner:  (none)
     Type:  defect (bug)               |      Status:  new
 Priority:  normal                     |   Milestone:  Awaiting Review
Component:  Bundled Theme              |     Version:  5.0
 Severity:  normal                     |  Resolution:
 Keywords:  needs-testing needs-patch  |     Focuses:
---------------------------------------+------------------------------

Comment (by poena):

 I have tried to solve this but ran into something unexpected.

 When I remove {{{postcss-focus-within}}} from the dependencies in
 package.json (including letting it create a new lock file) as well as
 remove it from the postcss.config.js config file, there are unexpected CSS
 changes when I built the CSS.

 **Expected result:**
 The CSS blocks that uses {{{[focus-within]}}} are removed from style.css,
 example:
 {{{
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas
 )[focus-within] > .sub-menu {
 }}}


 **Actual result:**
 The CSS blocks that uses {{{[focus-within]}}} are removed from style.css,
 example:
 {{{
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas
 )[focus-within] > .sub-menu {
 }}}

 Other CSS changes related to browsers specific styles are also applied:
 This CSS is deleted:
 {{{
 ::-moz-selection {
   background-color: #bfdcea;
 }
 }}}

 This webkit CSS is added:


 {{{
 .post-navigation .nav-links a .meta-nav {
   color: #767676;
   user-select: none;
   -webkit-user-select: none; // THIS is added
           user-select: none; // THIS is added
 }

 }}}

 I think this is because in the postcss.config.js, focus-within was used
 with {{{disablePolyfillReadyClass}}}

 From the post-csss-focus-within package documentation:

 > disablePolyfillReadyClass
 > The disablePolyfillReadyClass option determines if selectors are
 prefixed with an indicator class. > This class is only set on your
 document if the polyfill loads and is needed.

 > By default this option is false. Set this to true to prevent the class
 from being added.

 https://www.npmjs.com/package/postcss-focus-within

 So maybe these additional CSS changes are a non issue?

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