Skip to content

postcss-system-ui-font-family

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

postcss-system-ui-font-family

README.md

PostCSS System UI Font Family PostCSS Logo

npm version Build Status Discord

Baseline Status CSS Standard Status

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 */);

PostCSS System UI Font Family runs in all Node environments, with special instructions for:

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