Integrate font & display plugins

cli/csstools-cli/CHANGELOG.md

@@ -3,12 +3,16 @@
 ### Unreleased (minor)
 
 - Emit warnings from plugins
-- Added `@csstools/postcss-is-pseudo-class`
+- Added `@csstools/postcss-font-format-keywords`
 - Added `@csstools/postcss-hwb-function`
+- Added `@csstools/postcss-is-pseudo-class`
+- Added `@csstools/postcss-normalize-display-values`
 
 ```sh
-npx -y @csstools/cli postcss-is-pseudo-class
+npx -y @csstools/cli postcss-font-format-keywords
 npx -y @csstools/cli postcss-hwb-function
+npx -y @csstools/cli postcss-is-pseudo-class
+npx -y @csstools/cli postcss-normalize-display-values
 ```
 
 ### 1.0.0 (January 2, 2022)

cli/csstools-cli/package.json

@@ -29,8 +29,10 @@
     "csstools-cli": "csstools-cli"
   },
   "dependencies": {
+    "@csstools/postcss-font-format-keywords": "^1.0.0",
     "@csstools/postcss-hwb-function": "^1.0.0",
     "@csstools/postcss-is-pseudo-class": "^1.0.0",
+    "@csstools/postcss-normalize-display-values": "^1.0.0",
     "css-blank-pseudo": "^3.0.0",
     "css-has-pseudo": "^3.0.0",
     "css-prefers-color-scheme": "^6.0.0",

cli/csstools-cli/src/cli.ts

@@ -10,13 +10,15 @@ import postcssDoublePositionGradients from './plugins/postcss-double-position-gr
 import postcssEnvFunction from './plugins/postcss-env-function';
 import postcssFocusVisible from './plugins/postcss-focus-visible';
 import postcssFocusWithin from './plugins/postcss-focus-within';
+import postcssFontFormatKeywords from './plugins/postcss-font-format-keywords';
 import postcssGapProperties from './plugins/postcss-gap-properties';
 import postcssHWBFunction from './plugins/postcss-hwb-function';
 import postcssImageSetFunction from './plugins/postcss-image-set-function';
 import postcssIsPseudoClass from './plugins/postcss-is-pseudo-class';
 import postcssLabFunction from './plugins/postcss-lab-function';
 import postcssLogical from './plugins/postcss-logical';
 import postcssNesting from './plugins/postcss-nesting';
+import postcssNormalizeDisplayValues from './plugins/postcss-normalize-display-values';
 import postcssOverflowShorthand from './plugins/postcss-overflow-shorthand';
 import postcssPlace from './plugins/postcss-place';
 import postcssPresetEnv from './plugins/postcss-preset-env';
@@ -61,6 +63,9 @@ function main() {
 		case 'postcss-focus-within':
 			postcssFocusWithin();
 			return;
+		case 'postcss-font-format-keywords':
+			postcssFontFormatKeywords();
+			return;
 		case 'postcss-gap-properties':
 			postcssGapProperties();
 			return;
@@ -82,6 +87,9 @@ function main() {
 		case 'postcss-nesting':
 			postcssNesting();
 			return;
+		case 'postcss-normalize-display-values':
+			postcssNormalizeDisplayValues();
+			return;
 		case 'postcss-overflow-shorthand':
 			postcssOverflowShorthand();
 			return;
@@ -118,13 +126,15 @@ function main() {
 				'  postcss-env-function',
 				'  postcss-focus-visible',
 				'  postcss-focus-within',
+				'  postcss-font-format-keywords',
 				'  postcss-gap-properties',
 				'  postcss-hwb-function',
 				'  postcss-image-set-function',
 				'  postcss-is-pseudo-class',
 				'  postcss-lab-function',
 				'  postcss-logical',
 				'  postcss-nesting',
+				'  postcss-normalize-display-values',
 				'  postcss-overflow-shorthand',
 				'  postcss-place',
 				'  postcss-pseudo-class-any-link',

cli/csstools-cli/src/plugins/postcss-font-format-keywords.ts

@@ -0,0 +1,18 @@
+import plugin from '@csstools/postcss-font-format-keywords';
+import { cli, helpTextLogger } from '@csstools/base-cli';
+
+export default function postcssFontFormatKeywords() {
+	cli(
+		plugin,
+		['preserve'],
+		helpTextLogger(
+			'@csstools/cli postcss-font-format-keywords',
+			'PostCSS Font Format Keyword',
+			'Lets you use unquoted format on @font-face CSS definitions.',
+			{
+				preserve: true,
+			},
+		),
+		false,
+	);
+}

cli/csstools-cli/src/plugins/postcss-normalize-display-values.ts

@@ -0,0 +1,18 @@
+import plugin from '@csstools/postcss-normalize-display-values';
+import { cli, helpTextLogger } from '@csstools/base-cli';
+
+export default function postcssNormalizeDisplayValues() {
+	cli(
+		plugin,
+		['preserve'],
+		helpTextLogger(
+			'@csstools/cli postcss-normalize-display-values',
+			'PostCSS Normalize Display Values',
+			'Lets you use two values display syntax for inner and outer display types.',
+			{
+				preserve: true,
+			},
+		),
+		false,
+	);
+}

plugin-packs/postcss-preset-env/CHANGELOG.md

@@ -6,6 +6,8 @@
 - Added `@csstools/postcss-hwb-function` <br/> [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function#readme) for usage details.
 - Added `postcss-opacity-percentage` <br/> [Check the plugin README](https://github.com/mrcgrtz/postcss-opacity-percentage#readme) for usage details.
 - Added `postcss-clamp` <br/> [Check the plugin README](https://github.com/polemius/postcss-clamp#readme) for usage details.
+- Added `@csstools/postcss-normalize-display-values` <br/> [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-normalize-display-values#readme) for usage details.
+- Added `@csstools/postcss-font-format-keywords` <br/> [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-font-format-keywords#readme) for usage details.
 - Added `debug` [option](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env#debug) that enables extra debugging information while processing the CSS.
 - Fix sourcemaps for `image-set()` function.
 - Removed `caniuse-lite` dependency. This results not only in lower package size but also in better feature detection lead by changes on CSSDB.

plugin-packs/postcss-preset-env/package.json

@@ -28,8 +28,10 @@
     "node": "^12 || ^14 || >=16"
   },
   "dependencies": {
+    "@csstools/postcss-font-format-keywords": "^1.0.0",
     "@csstools/postcss-hwb-function": "^1.0.0",
     "@csstools/postcss-is-pseudo-class": "^1.0.1",
+    "@csstools/postcss-normalize-display-values": "^1.0.0",
     "autoprefixer": "^10.4.2",
     "browserslist": "^4.19.1",
     "css-blank-pseudo": "^3.0.2",

plugin-packs/postcss-preset-env/src/lib/plugins-by-id.js

@@ -32,6 +32,8 @@ import postcssIsPseudoClass from '@csstools/postcss-is-pseudo-class';
 import postcssHWBFunction from '@csstools/postcss-hwb-function';
 import postcssOpacityPercentage from 'postcss-opacity-percentage';
 import postcssClamp from 'postcss-clamp';
+import postcssFontFormatKeywords from '@csstools/postcss-font-format-keywords';
+import postcssNormalizeDisplayValues from '@csstools/postcss-normalize-display-values';
 
 export const packageNamesToIds = {
 	'css-blank-pseudo': 'blank-pseudo-class',
@@ -50,6 +52,7 @@ export const packageNamesToIds = {
 	'postcss-env-function': 'environment-variables',
 	'postcss-focus-visible': 'focus-visible-pseudo-class',
 	'postcss-focus-within': 'focus-within-pseudo-class',
+	'postcss-font-format-keywords': 'font-format-keywords',
 	'postcss-font-variant': 'font-variant-property',
 	'postcss-gap-properties': 'gap-properties',
 	'postcss-hwb-function': 'hwb-function',
@@ -60,6 +63,7 @@ export const packageNamesToIds = {
 	'postcss-logical': 'logical-properties-and-values',
 	'postcss-media-minmax': 'media-query-ranges',
 	'postcss-nesting': 'nesting-rules',
+	'postcss-normalize-display-values': 'display-two-values',
 	'postcss-opacity-percentage': 'opacity-percentage',
 	'postcss-overflow-shorthand': 'overflow-property',
 	'postcss-page-break': 'break-properties',
@@ -92,10 +96,12 @@ export const pluginsById = {
 	'custom-properties': postcssCustomProperties,
 	'custom-selectors': postcssCustomSelectors,
 	'dir-pseudo-class': postcssDirPseudoClass,
+	'display-two-values': postcssNormalizeDisplayValues,
 	'double-position-gradients': postcssDoublePositionGradients,
 	'environment-variables': postcssEnvFunction,
 	'focus-visible-pseudo-class': postcssFocusVisible,
 	'focus-within-pseudo-class': postcssFocusWithin,
+	'font-format-keywords': postcssFontFormatKeywords,
 	'font-variant-property': postcssFontVariant,
 	'gap-properties': postcssGapProperties,
 	'hwb-function': postcssHWBFunction,

plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css

@@ -297,3 +297,83 @@
 .clamp-different-units {
 	width: clamp(10%, 2px, 4rem);
 }
+
+@font-face {
+	font-family: 'A';
+	font-style: normal;
+	font-weight: 300;
+	font-display: swap;
+	src: url(a) format(woff2);
+}
+
+.block-flow {
+	display: block flow;
+}
+
+.block-flow-root {
+	display: block flow-root;
+}
+
+.inline-flow {
+	display: inline flow;
+}
+
+.inline-flow-root {
+	display: inline flow-root;
+}
+
+.run-in-flow {
+	display: run-in flow;
+}
+
+.list-item-block-flow {
+	display: list-item block flow;
+}
+
+.inline-flow-list-item {
+	display: inline flow list-item;
+}
+
+.block-flex {
+	display: block flex;
+}
+
+.inline-flex {
+	display: inline flex;
+}
+
+.block-grid {
+	display: block grid;
+}
+
+.inline-grid {
+	display: inline grid;
+}
+
+.inline-ruby {
+	display: inline ruby;
+}
+
+.block-table {
+	display: block table;
+}
+
+.inline-table {
+	display: inline table;
+}
+
+.table-cell-flow {
+	display: table-cell flow;
+}
+
+.table-caption-flow {
+	display: table-caption flow;
+}
+
+.ruby-base-flow {
+	display: ruby-base flow;
+}
+
+.ruby-text-flow {
+	display: ruby-text flow;
+}

plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css

@@ -297,3 +297,83 @@
 .clamp-different-units {
 	width: clamp(10%, 2px, 4rem);
 }
+
+@font-face {
+	font-family: 'A';
+	font-style: normal;
+	font-weight: 300;
+	font-display: swap;
+	src: url(a) format(woff2);
+}
+
+.block-flow {
+	display: block flow;
+}
+
+.block-flow-root {
+	display: block flow-root;
+}
+
+.inline-flow {
+	display: inline flow;
+}
+
+.inline-flow-root {
+	display: inline flow-root;
+}
+
+.run-in-flow {
+	display: run-in flow;
+}
+
+.list-item-block-flow {
+	display: list-item block flow;
+}
+
+.inline-flow-list-item {
+	display: inline flow list-item;
+}
+
+.block-flex {
+	display: block flex;
+}
+
+.inline-flex {
+	display: inline flex;
+}
+
+.block-grid {
+	display: block grid;
+}
+
+.inline-grid {
+	display: inline grid;
+}
+
+.inline-ruby {
+	display: inline ruby;
+}
+
+.block-table {
+	display: block table;
+}
+
+.inline-table {
+	display: inline table;
+}
+
+.table-cell-flow {
+	display: table-cell flow;
+}
+
+.table-caption-flow {
+	display: table-caption flow;
+}
+
+.ruby-base-flow {
+	display: ruby-base flow;
+}
+
+.ruby-text-flow {
+	display: ruby-text flow;
+}