Fix for WordPress "small" utility conflict (#2183)

Co-authored-by: Scott Vandehey <[email protected]>

Author: tylersticka

.changeset/dirty-deers-turn.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Prevent WordPress from overriding the "small" font size utility styles.

src/mixins/_font-size.scss

@@ -17,6 +17,14 @@
 /// To prevent small text from impairing readability (most importantly) and our
 /// Core Web Vitals (secondarily), we only apply the small font size if it isn't
 /// smaller than 16 pixels.
-@mixin small {
-  font-size: max(16px, size.$font-small);
+///
+/// @param {Boolean} $important - Whether or not to output the rule with an
+/// `!important` flag. Added to satisfy WordPress 5.9+.
+/// @link https://make.wordpress.org/core/2022/01/08/updates-for-settings-styles-and-theme-json/
+@mixin small($important: false) {
+  @if $important {
+    font-size: max(16px, size.$font-small) !important;
+  } @else {
+    font-size: max(16px, size.$font-small);
+  }
 }

src/vendor/wordpress/styles/_utilities.scss

@@ -82,8 +82,15 @@ $color-map: meta.module-variables('color-base');
   @include font-size.big;
 }
 
+/// We need to use `!important` because otherwise WordPress will override this
+/// size as of version 5.9. We could get around this by setting the font size
+/// via `theme.json`, but that would make this an outlier among our other sizes,
+/// so for now we'll just use `!important`.
+///
+/// @link https://make.wordpress.org/core/2022/01/08/updates-for-settings-styles-and-theme-json/
+
 .has-small-font-size {
-  @include font-size.small;
+  @include font-size.small($important: true);
 }
 
 @for $level from -2 through 3 {