@csstools/postcss-system-ui-font-family

PostCSS 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;
}