Merge pull request #342 from JLHwung/add-postcss-font-family-system-ui

Add postcss-font-family-system-ui

docs/content/features.md

@@ -483,6 +483,20 @@ div {
 |
 [Plugin documentation](https://github.com/dmarchena/postcss-color-hsl)
 
+## `system-ui` font-family
+
+Allows you to use `system-ui` generic font-family. The current transformation provides a practical font-family list as fallback.
+
+```css
+body {
+  font-family: system-ui;
+}
+```
+
+[Specification](https://drafts.csswg.org/css-fonts-4/#valdef-font-family-system-ui)
+|
+[Plugin documentation](https://github.com/JLHwung/postcss-font-family-system-ui)
+
 ## @todo
 
 Any omissions of the CSS specifications (even in draft) that are subject to be

docs/content/index.md

@@ -151,6 +151,12 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
           (functional-notation)
         </small>
       </li>
+      <li class="r-Grid-cell r-minS--1of2">
+        <a href="/features/#system-ui-font-family"><code>system-ui</code> font-family</a>
+        <small class="cssnext-FeaturesList-small">
+          (font-family fallback)
+        </small>
+      </li>
     </ul>
     <small
       class="cssnext-FeaturesList-small"

docs/content/playground.html

@@ -85,6 +85,11 @@
 /* attribute case insensitive */
 [frame=hsides i] {
 border-style: solid none;
+}
+
+/* system-ui font-family */
+body {
+font-family: system-ui;
 }
 
     </textarea>

package.json

@@ -41,6 +41,7 @@
     "postcss-custom-media": "^5.0.0",
     "postcss-custom-properties": "^5.0.0",
     "postcss-custom-selectors": "^3.0.0",
+    "postcss-font-family-system-ui": "^1.0.1",
     "postcss-font-variant": "^2.0.0",
     "postcss-initial": "^1.3.1",
     "postcss-media-minmax": "^2.1.0",

src/__tests__/fixtures/features/font-family-system-ui.css

@@ -0,0 +1,27 @@
+selector {
+  font-family: system-ui, sans-serif;
+}
+
+selector {
+  font-family: system-ui, Helvetica Neue, sans-serif;
+}
+
+selector {
+  font-family: sans-serif;
+}
+
+selector {
+  font: italic bold 12px/30px system-ui, sans-serif;
+}
+
+selector {
+  font: italic bold 12px/30px system-ui, Helvetica Neue, sans-serif;
+}
+
+selector {
+  font: italic 12px sans-serif;
+}
+
+selector {
+  font-weight: 700;
+}

src/__tests__/fixtures/features/font-family-system-ui.expected.css

@@ -0,0 +1,27 @@
+selector {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+selector {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica Neue, sans-serif;
+}
+
+selector {
+  font-family: sans-serif;
+}
+
+selector {
+  font: italic bold 12px/30px system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+selector {
+  font: italic bold 12px/30px system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica Neue, sans-serif;
+}
+
+selector {
+  font: italic 12px sans-serif;
+}
+
+selector {
+  font-weight: 700;
+}

src/features.js

@@ -51,6 +51,9 @@ export default {
   // https://npmjs.com/package/postcss-color-function
   colorFunction: (options) => require("postcss-color-function")(options),
 
+  // https://npmjs.com/package/postcss-font-family-system-ui
+  fontFamilySystemUi: (options) => require("postcss-font-family-system-ui")(options),
+
   // https://npmjs.com/package/postcss-font-variant
   fontVariant: (options) => require("postcss-font-variant")(options),