reduce cost of style calc+layout in --dialog-scrollgutter (#3144)

Co-authored-by: Aaron Ballard <ansballard@github.com>
Co-authored-by: AdamShwert <adamshwert@github.com>
Co-authored-by: Arelia Jones <2359538+arelia@users.noreply.github.com>
Co-authored-by: Ariel Valentin <arielvalentin@users.noreply.github.com>
Co-authored-by: Chris Gavin <chris@chrisgavin.me>
Co-authored-by: Cody Bodfield <cbodfield@github.com>
Co-authored-by: Daniel Colson <composerinteralia@github.com>
Co-authored-by: Daniel Garman <garman@github.com>
Co-authored-by: Dusty Greif <dgreif@users.noreply.github.com>
Co-authored-by: Erinna Chen <erinnachen@users.noreply.github.com>
Co-authored-by: George Brocklehurst <george@georgebrock.com>
Co-authored-by: Jibran Garcia <jibrang@github.com>
Co-authored-by: Jonathan Fuchs <21195+jfuchs@users.noreply.github.com>
Co-authored-by: Kate Higa <16447748+khiga8@users.noreply.github.com>
Co-authored-by: Manuel Puyol <manuelpuyol@github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>
Co-authored-by: Matthew Reyes <another-mattr@github.com>
Co-authored-by: Melissa Pastore <64283754+MelissaPastore@users.noreply.github.com>
Co-authored-by: Ned Schwartz <theinterned@github.com>
Co-authored-by: Phill MV <phillmv@github.com>
Co-authored-by: Raffaele Di Fazio <raffo@github.com>
Co-authored-by: Sarah Vessels <82317+cheshire137@users.noreply.github.com>
Co-authored-by: Simon Taranto <srt32@users.noreply.github.com>

Author: 24 people

.changeset/wicked-bananas-tie.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Remove dialog-scrollgutter setting from hot-path, for improved performance

app/components/primer/alpha/dialog.pcss

@@ -8,8 +8,22 @@
 
 /* Overlay */
 
+/* The --dialog-scrollgutter property is used only on the body element to
+ * simulate scrollbar-gutter:stable. This property is not and should not
+ * be used elsewhere in the DOM. There is a performance penalty to
+ * setting inherited properties which can cause a large style recalc to
+ * occur, so it benefits us to prevent inheritance for this property.
+ * See https://web.dev/blog/at-property-performance
+ */
+@property --dialog-scrollgutter {
+  initial-value: 0;
+  inherits: false;
+  syntax: "<length>";
+}
+
 /* TODO: One day this can be :has(:modal), when it is better supported */
 body.has-modal {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   padding-right: var(--dialog-scrollgutter) !important;
   overflow: hidden !important;
 }
@@ -350,6 +364,7 @@ dialog.Overlay:not([open]) {
   &:hover,
   &:focus {
     background-color: var(--button-default-bgColor-hover);
+    /* stylelint-disable-next-line primer/colors */
     border: var(--borderWidth-thin) solid var(--control-bgColor-hover);
   }