[wp-trac] [WordPress Trac] #52564: Twenty Twenty has unit-less CSS variable unfit for calc()

[WordPress Trac]

#52564: Twenty Twenty has unit-less CSS variable unfit for calc()
---------------------------+-----------------------------
 Reporter:  nico23         |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:
 Severity:  normal         |   Keywords:
  Focuses:  css            |
---------------------------+-----------------------------
 I was building something with calc on top of --global--admin-bar--height
 and found out through painful trail and error that why my code would not
 work.

 {{{
 --my-var: 10px;

 calc(var(--my-var) + var(--global--admin-bar--height, 0px));
 }}}

 The issue with this is that calc NEEDS a unit. Otherwise, it fails! And
 because the value on root the default value will never be used. For my
 case I think it's actually better to have no value on root at all (for
 default) but the root value should be `0px` because its pretty much made
 for calc.

 {{{
 :root {
         /* Admin-bar height */
         --global--admin-bar--height: 0; // should be 0px
 }

 .admin-bar {
         --global--admin-bar--height: 32px;
 }
 @media only screen and (max-width: 782px) {

         .admin-bar {
                 --global--admin-bar--height: 46px;
         }
 }
 }}}


 The theme actually uses it with calc.

 {{{
         .admin-bar .primary-navigation > .primary-menu-container {
                 height: calc(100vh - var(--global--admin-bar--height));
         }
 }}}

 I have not tested this code, but I am pretty sure this will NOT work. When
 the admin bar is not active because calc will fail with unit-less value
 `0`.

 I think WordPress core should maybe just include this CSS on all pages so
 both themes and plugins can utilize it and not have to repeat the code.
 There is already global admin bar CSS included so why not with this.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/52564>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform