Add support for system-ui fallbacks (parcel-bundler#182)

Author: onigoetz

README.md

@@ -45,6 +45,7 @@ A CSS parser, transformer, and minifier written in Rust.
   - Two-value `overflow` shorthand
   - Media query range syntax (e.g. `@media (width <= 100px)` or `@media (100px < width < 500px)`)
   - Multi-value `display` property (e.g. `inline flex`)
+  - `system-ui` font family fallbacks
 - **CSS modules** – `@parcel/css` supports compiling a subset of [CSS modules](https://github.com/css-modules/css-modules) features.
   - Locally scoped class and id selectors
   - Locally scoped custom identifiers, e.g. `@keyframes` names, grid lines/areas, `@counter-style` names, etc.

scripts/build-prefixes.js

@@ -168,7 +168,8 @@ let cssFeatures = [
   'css-rrggbbaa',
   'css-nesting',
   'css-not-sel-list',
-  'css-has'
+  'css-has',
+  'font-family-system-ui'
 ];
 
 let compat = new Map();
@@ -315,11 +316,12 @@ use serde::{Deserialize, Serialize};
 /// use parcel_css::targets::Browsers;
 ///
 /// let targets = Browsers {
-///   safari: (13 << 16) | (2 << 8),
+///   safari: Some((13 << 16) | (2 << 8)),
 ///   ..Browsers::default()
 /// };
 /// \`\`\`
 #[derive(Serialize, Debug, Deserialize, Clone, Copy, Default)]
+#[allow(missing_docs)]
 pub struct Browsers {
   pub ${allBrowsers.join(': Option<u32>,\n  pub ')}: Option<u32>
 }

src/compat.rs

@@ -36,6 +36,7 @@ pub enum Feature {
   CustomMediaQueries,
   Dialog,
   DoublePositionGradients,
+  FontFamilySystemUi,
   FormValidation,
   Fullscreen,
   LabColors,
@@ -1272,6 +1273,51 @@ impl Feature {
           return false;
         }
       }
+      Feature::FontFamilySystemUi => {
+        if let Some(version) = browsers.edge {
+          if version < 5177344 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.firefox {
+          if version < 6029312 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.chrome {
+          if version < 3670016 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.safari {
+          if version < 720896 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.opera {
+          if version < 2818048 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.ios_saf {
+          if version < 720896 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.android {
+          if version < 6553600 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.samsung {
+          if version < 393728 {
+            return false;
+          }
+        }
+        if browsers.ie.is_some() {
+          return false;
+        }
+      }
       Feature::DoublePositionGradients => {
         if let Some(version) = browsers.chrome {
           if version < 4653056 {

src/lib.rs

@@ -4688,6 +4688,42 @@ mod tests {
       "@font-face { font-family: 'revert-layer'; }",
       "@font-face{font-family:\"revert-layer\"}",
     );
+
+    prefix_test(
+      r#"
+      .foo {
+        font-family: Helvetica, system-ui, sans-serif;
+      }
+    "#,
+      indoc! {r#"
+      .foo {
+        font-family: Helvetica, system-ui, AppleSystem, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+      }
+    "#
+      },
+      Browsers {
+        safari: Some(8 << 16),
+        ..Browsers::default()
+      },
+    );
+
+    prefix_test(
+      r#"
+      .foo {
+        font: 100%/1.5 Helvetica, system-ui, sans-serif;
+      }
+    "#,
+      indoc! {r#"
+      .foo {
+        font: 100% / 1.5 Helvetica, system-ui, AppleSystem, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+      }
+    "#
+      },
+      Browsers {
+        safari: Some(8 << 16),
+        ..Browsers::default()
+      },
+    );
   }
 
   #[test]

src/properties/font.rs

@@ -1,6 +1,7 @@
 //! CSS properties related to fonts.
 
 use super::{Property, PropertyId};
+use crate::compat::Feature;
 use crate::context::PropertyHandlerContext;
 use crate::declaration::{DeclarationBlock, DeclarationList};
 use crate::error::{ParserError, PrinterError};
@@ -833,14 +834,17 @@ impl<'i> PropertyHandler<'i> for FontHandler<'i> {
     true
   }
 
-  fn finalize(&mut self, decls: &mut DeclarationList<'i>, _: &mut PropertyHandlerContext<'i, '_>) {
+  fn finalize(&mut self, decls: &mut DeclarationList<'i>, context: &mut PropertyHandlerContext<'i, '_>) {
     if !self.has_any {
       return;
     }
 
     self.has_any = false;
 
-    let family = std::mem::take(&mut self.family);
+    let family = compatible_font_family(
+      std::mem::take(&mut self.family),
+      context.is_supported(Feature::FontFamilySystemUi),
+    );
     let size = std::mem::take(&mut self.size);
     let style = std::mem::take(&mut self.style);
     let weight = std::mem::take(&mut self.weight);
@@ -908,6 +912,45 @@ impl<'i> PropertyHandler<'i> for FontHandler<'i> {
   }
 }
 
+const SYSTEM_UI: FontFamily = FontFamily::Generic(GenericFontFamily::SystemUI);
+
+const DEFAULT_SYSTEM_FONTS: &[&str] = &[
+  // #1: Supported as the -apple-system value (only on Mac)
+  "AppleSystem",
+  // #2: Supported as the 'BlinkMacSystemFont' value (only on Mac)
+  "BlinkMacSystemFont",
+  "Segoe UI",  // Windows >= Vista
+  "Roboto",    // Android >= 4
+  "Noto Sans", // Plasma >= 5.5
+  "Ubuntu",    // Ubuntu >= 10.10
+  "Cantarell", // GNOME >= 3
+  "Helvetica Neue",
+];
+
+/// [`system-ui`](https://www.w3.org/TR/css-fonts-4/#system-ui-def) is a special generic font family
+/// It is platform dependent but if not supported by the target will simply be ignored
+/// This list is an attempt at providing that support
+#[inline]
+fn compatible_font_family(mut family: Option<Vec<FontFamily>>, is_supported: bool) -> Option<Vec<FontFamily>> {
+
+  if is_supported {
+    return family;
+  }
+
+  if let Some(families) = &mut family {
+    if let Some(position) = families.iter().position(|v| *v == SYSTEM_UI) {
+      families.splice(
+        (position + 1)..(position + 1),
+        DEFAULT_SYSTEM_FONTS
+          .iter()
+          .map(|name| FontFamily::FamilyName(CowArcStr::from(*name))),
+      );
+    }
+  }
+
+  return family;
+}
+
 #[inline]
 fn is_font_property(property_id: &PropertyId) -> bool {
   match property_id {