csstoolsPostCSS System UI Font Family 
npm install @csstools/postcss-system-ui-font-family --save-dev
PostCSS System UI Font Family lets you use the system-ui keyword following the CSS Fonts 4 Specification.
.foo {
font: italic bold 12px/30px system-ui;
font-family: system-ui;
--font-family: system-ui;
}
/* becomes */
.foo {
font: italic bold 12px/30px system-ui;
font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
--font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}
Usage
Add PostCSS System UI Font Family to your project:
npm install postcss @csstools/postcss-system-ui-font-family --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssSystemUIFontFamily = require('@csstools/postcss-system-ui-font-family');
postcss([
postcssSystemUIFontFamily(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
Options
preserve
The preserve option determines whether the original notation
is preserved. By default, it is preserved.
postcssSystemUIFontFamily({ preserve: false })
.foo {
font: italic bold 12px/30px system-ui;
font-family: system-ui;
--font-family: system-ui;
}
/* becomes */
.foo {
font: italic bold 12px/30px system-ui;
font-family: -apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
--font-family: -apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}