Fixing the utilities build not matching properly for font_size (primer#2491)

Author: jonrohan

.changeset/tall-bugs-laugh.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Fixing the utilities build not matching properly for `font_size`

lib/primer/classify/utilities.rb

@@ -18,6 +18,7 @@ class Utilities
 
       # Replacements for some classnames that end up being a different argument key
       REPLACEMENT_KEYS = {
+        "^f" => "font_size",
         "^anim" => "animation",
         "^v-align" => "vertical_align",
         "^d" => "display",
@@ -28,7 +29,6 @@ class Utilities
         "^color-bg" => "bg",
         "^color-border" => "border_color",
         "^color-fg" => "color",
-        "^f" => "font_size",
         "^rounded" => "border_radius"
       }.freeze
 

lib/primer/classify/utilities.yml

@@ -1,24 +1,13 @@
 ---
-:font_size:
-  '00':
-  - f00
-  1:
-  - f1
-  2:
-  - f2
-  3:
-  - f3
-  4:
-  - f4
-  5:
-  - f5
-  6:
-  - f6
-  :small:
-  - text-small
-  :normal:
-  - text-normal
 :animation:
+  :fade_in:
+  - anim-fade-in
+  :fade_out:
+  - anim-fade-out
+  :fade_up:
+  - anim-fade-up
+  :fade_down:
+  - anim-fade-down
   :grow_x:
   - anim-grow-x
   :shrink_x:
@@ -221,12 +210,21 @@
   - float-lg-none
   - float-xl-none
 :w:
+  :fit:
+  - width-fit
+  :full:
+  - width-full
   :auto:
   - width-auto
   - width-sm-auto
   - width-md-auto
   - width-lg-auto
   - width-xl-auto
+:h:
+  :fit:
+  - height-fit
+  :full:
+  - height-full
 :m:
   0:
   - m-0
@@ -1363,6 +1361,12 @@
   - d-md-block
   - d-lg-block
   - d-xl-block
+  :flex:
+  - d-flex
+  - d-sm-flex
+  - d-md-flex
+  - d-lg-flex
+  - d-xl-flex
   :inline:
   - d-inline
   - d-sm-inline
@@ -1399,12 +1403,6 @@
   - d-md-table-cell
   - d-lg-table-cell
   - d-xl-table-cell
-  :flex:
-  - 
-  - d-sm-flex
-  - d-md-flex
-  - d-lg-flex
-  - d-xl-flex
 :visibility:
   :hidden:
   - v-hidden
@@ -1507,6 +1505,25 @@
   - col-md-12
   - col-lg-12
   - col-xl-12
+:font_size:
+  '00':
+  - f00
+  1:
+  - f1
+  2:
+  - f2
+  3:
+  - f3
+  4:
+  - f4
+  5:
+  - f5
+  6:
+  - f6
+  :small:
+  - text-small
+  :normal:
+  - text-normal
 :top:
   0:
   - top-0