From f50edba057067f721c6c3a64b1a81a525f85ef5c Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Tue, 25 Jan 2022 20:35:27 +0100 Subject: [PATCH 1/2] Adding two new plugins --- cli/csstools-cli/CHANGELOG.md | 8 +- cli/csstools-cli/package.json | 2 + .../plugins/postcss-font-format-keywords.ts | 18 +++ .../postcss-normalize-display-values.ts | 18 +++ package-lock.json | 8 ++ plugin-packs/postcss-preset-env/CHANGELOG.md | 2 + plugin-packs/postcss-preset-env/package.json | 2 + .../src/lib/plugins-by-id.js | 6 + .../test/basic.autoprefixer.expect.css | 80 +++++++++++++ .../test/basic.autoprefixer.false.expect.css | 80 +++++++++++++ .../test/basic.ch38.expect.css | 80 +++++++++++++ .../test/basic.ch88-ff78-saf10.expect.css | 98 ++++++++++++++++ .../test/basic.ch88-ff78.expect.css | 98 ++++++++++++++++ .../basic.ch88-ff78.no-is-pseudo.expect.css | 98 ++++++++++++++++ .../postcss-preset-env/test/basic.css | 80 +++++++++++++ .../postcss-preset-env/test/basic.expect.css | 80 +++++++++++++ .../test/basic.ff49.expect.css | 80 +++++++++++++ .../test/basic.ff66.expect.css | 80 +++++++++++++ .../test/basic.ie10.expect.css | 80 +++++++++++++ .../test/basic.nesting.false.expect.css | 98 ++++++++++++++++ .../test/basic.nesting.true.expect.css | 80 +++++++++++++ .../test/basic.preserve.true.expect.css | 107 ++++++++++++++++++ .../test/basic.safari15.expect.css | 80 +++++++++++++ .../test/basic.stage0-ff49.expect.css | 98 ++++++++++++++++ .../test/basic.stage0-ff66.expect.css | 98 ++++++++++++++++ .../test/basic.stage0.expect.css | 98 ++++++++++++++++ rollup/configs/externals.js | 2 + 27 files changed, 1657 insertions(+), 2 deletions(-) create mode 100644 cli/csstools-cli/src/plugins/postcss-font-format-keywords.ts create mode 100644 cli/csstools-cli/src/plugins/postcss-normalize-display-values.ts diff --git a/cli/csstools-cli/CHANGELOG.md b/cli/csstools-cli/CHANGELOG.md index 0338d4b38..24f748039 100644 --- a/cli/csstools-cli/CHANGELOG.md +++ b/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) diff --git a/cli/csstools-cli/package.json b/cli/csstools-cli/package.json index 5382ffb56..9750652e3 100644 --- a/cli/csstools-cli/package.json +++ b/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", diff --git a/cli/csstools-cli/src/plugins/postcss-font-format-keywords.ts b/cli/csstools-cli/src/plugins/postcss-font-format-keywords.ts new file mode 100644 index 000000000..5dd8e9acb --- /dev/null +++ b/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, + ); +} diff --git a/cli/csstools-cli/src/plugins/postcss-normalize-display-values.ts b/cli/csstools-cli/src/plugins/postcss-normalize-display-values.ts new file mode 100644 index 000000000..0a3ca1fd0 --- /dev/null +++ b/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, + ); +} diff --git a/package-lock.json b/package-lock.json index dd41641be..76149c872 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,8 +38,10 @@ "version": "1.0.0", "license": "CC0-1.0", "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", @@ -6362,8 +6364,10 @@ "version": "7.2.3", "license": "CC0-1.0", "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", @@ -7952,8 +7956,10 @@ "@csstools/csstools-cli": { "version": "file:cli/csstools-cli", "requires": { + "@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", @@ -10597,8 +10603,10 @@ "postcss-preset-env": { "version": "file:plugin-packs/postcss-preset-env", "requires": { + "@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", diff --git a/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md index 105636ab5..f3d2b5e5d 100644 --- a/plugin-packs/postcss-preset-env/CHANGELOG.md +++ b/plugin-packs/postcss-preset-env/CHANGELOG.md @@ -6,6 +6,8 @@ - Added `@csstools/postcss-hwb-function`
[Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function#readme) for usage details. - Added `postcss-opacity-percentage`
[Check the plugin README](https://github.com/mrcgrtz/postcss-opacity-percentage#readme) for usage details. - Added `postcss-clamp`
[Check the plugin README](https://github.com/polemius/postcss-clamp#readme) for usage details. +- Added `@csstools/postcss-normalize-display-values`
[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`
[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. diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json index 1be4c4ca1..ebb6c2509 100644 --- a/plugin-packs/postcss-preset-env/package.json +++ b/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", diff --git a/plugin-packs/postcss-preset-env/src/lib/plugins-by-id.js b/plugin-packs/postcss-preset-env/src/lib/plugins-by-id.js index daa2ba863..204d695aa 100644 --- a/plugin-packs/postcss-preset-env/src/lib/plugins-by-id.js +++ b/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, diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css index 5bc3f35d9..e57c0a860 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/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; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css index 5bc3f35d9..e57c0a860 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css +++ b/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; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css index e0311d118..0a2919090 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -217,3 +217,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; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css index a79ba8413..108f47c1b 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css @@ -230,3 +230,101 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te .clamp-different-units { width: max(10%, min(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; + display: block flow; +} + +.block-flow-root { + display: flow-root; + display: block flow-root; +} + +.inline-flow { + display: inline; + display: inline flow; +} + +.inline-flow-root { + display: inline-block; + display: inline flow-root; +} + +.run-in-flow { + display: run-in; + display: run-in flow; +} + +.list-item-block-flow { + display: list-item; + display: list-item block flow; +} + +.inline-flow-list-item { + display: inline list-item; + display: inline flow list-item; +} + +.block-flex { + display: flex; + display: block flex; +} + +.inline-flex { + display: inline-flex; + display: inline flex; +} + +.block-grid { + display: grid; + display: block grid; +} + +.inline-grid { + display: inline-grid; + display: inline grid; +} + +.inline-ruby { + display: ruby; + display: inline ruby; +} + +.block-table { + display: table; + display: block table; +} + +.inline-table { + display: inline-table; + display: inline table; +} + +.table-cell-flow { + display: table-cell; + display: table-cell flow; +} + +.table-caption-flow { + display: table-caption; + display: table-caption flow; +} + +.ruby-base-flow { + display: ruby-base; + display: ruby-base flow; +} + +.ruby-text-flow { + display: ruby-text; + display: ruby-text flow; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css index 60ad86fa6..78e10642e 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css @@ -204,3 +204,101 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te .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; + display: block flow; +} + +.block-flow-root { + display: flow-root; + display: block flow-root; +} + +.inline-flow { + display: inline; + display: inline flow; +} + +.inline-flow-root { + display: inline-block; + display: inline flow-root; +} + +.run-in-flow { + display: run-in; + display: run-in flow; +} + +.list-item-block-flow { + display: list-item; + display: list-item block flow; +} + +.inline-flow-list-item { + display: inline list-item; + display: inline flow list-item; +} + +.block-flex { + display: flex; + display: block flex; +} + +.inline-flex { + display: inline-flex; + display: inline flex; +} + +.block-grid { + display: grid; + display: block grid; +} + +.inline-grid { + display: inline-grid; + display: inline grid; +} + +.inline-ruby { + display: ruby; + display: inline ruby; +} + +.block-table { + display: table; + display: block table; +} + +.inline-table { + display: inline-table; + display: inline table; +} + +.table-cell-flow { + display: table-cell; + display: table-cell flow; +} + +.table-caption-flow { + display: table-caption; + display: table-caption flow; +} + +.ruby-base-flow { + display: ruby-base; + display: ruby-base flow; +} + +.ruby-text-flow { + display: ruby-text; + display: ruby-text flow; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css index c26a3d99d..344ad01aa 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css @@ -204,3 +204,101 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te .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; + display: block flow; +} + +.block-flow-root { + display: flow-root; + display: block flow-root; +} + +.inline-flow { + display: inline; + display: inline flow; +} + +.inline-flow-root { + display: inline-block; + display: inline flow-root; +} + +.run-in-flow { + display: run-in; + display: run-in flow; +} + +.list-item-block-flow { + display: list-item; + display: list-item block flow; +} + +.inline-flow-list-item { + display: inline list-item; + display: inline flow list-item; +} + +.block-flex { + display: flex; + display: block flex; +} + +.inline-flex { + display: inline-flex; + display: inline flex; +} + +.block-grid { + display: grid; + display: block grid; +} + +.inline-grid { + display: inline-grid; + display: inline grid; +} + +.inline-ruby { + display: ruby; + display: inline ruby; +} + +.block-table { + display: table; + display: block table; +} + +.inline-table { + display: inline-table; + display: inline table; +} + +.table-cell-flow { + display: table-cell; + display: table-cell flow; +} + +.table-caption-flow { + display: table-caption; + display: table-caption flow; +} + +.ruby-base-flow { + display: ruby-base; + display: ruby-base flow; +} + +.ruby-text-flow { + display: ruby-text; + display: ruby-text flow; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.css b/plugin-packs/postcss-preset-env/test/basic.css index 23666b511..e1b979590 100644 --- a/plugin-packs/postcss-preset-env/test/basic.css +++ b/plugin-packs/postcss-preset-env/test/basic.css @@ -172,3 +172,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; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index 9b43239c7..97353bb57 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -321,3 +321,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; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css index c4ddb0188..fd8f158ec 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -213,3 +213,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; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css index 73f63026b..b837f89e6 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -201,3 +201,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; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css index 5f08bbd6f..949b5919f 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -334,3 +334,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; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css index 42d0e662c..7c4830bcd 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css @@ -333,3 +333,101 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te .clamp-different-units { width: max(10%, min(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; + display: block flow; +} + +.block-flow-root { + display: flow-root; + display: block flow-root; +} + +.inline-flow { + display: inline; + display: inline flow; +} + +.inline-flow-root { + display: inline-block; + display: inline flow-root; +} + +.run-in-flow { + display: run-in; + display: run-in flow; +} + +.list-item-block-flow { + display: list-item; + display: list-item block flow; +} + +.inline-flow-list-item { + display: inline list-item; + display: inline flow list-item; +} + +.block-flex { + display: flex; + display: block flex; +} + +.inline-flex { + display: inline-flex; + display: inline flex; +} + +.block-grid { + display: grid; + display: block grid; +} + +.inline-grid { + display: inline-grid; + display: inline grid; +} + +.inline-ruby { + display: ruby; + display: inline ruby; +} + +.block-table { + display: table; + display: block table; +} + +.inline-table { + display: inline-table; + display: inline table; +} + +.table-cell-flow { + display: table-cell; + display: table-cell flow; +} + +.table-caption-flow { + display: table-caption; + display: table-caption flow; +} + +.ruby-base-flow { + display: ruby-base; + display: ruby-base flow; +} + +.ruby-text-flow { + display: ruby-text; + display: ruby-text flow; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css index 81623503f..e0e952224 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css @@ -188,3 +188,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; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css index a008490b5..a49a2ce82 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css @@ -605,3 +605,110 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te width: max(10%, min(2px, 4rem)); width: clamp(10%, 2px, 4rem); } + +@font-face { + font-family: 'A'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(a) format("woff2"); + src: url(a) format(woff2); +} + +.block-flow { + display: block; + display: block flow; +} + +.block-flow-root { + display: flow-root; + display: block flow-root; +} + +.inline-flow { + display: inline; + display: inline flow; +} + +.inline-flow-root { + display: inline-block; + display: inline flow-root; +} + +.run-in-flow { + display: run-in; + display: run-in flow; +} + +.list-item-block-flow { + display: list-item; + display: list-item block flow; +} + +.inline-flow-list-item { + display: inline list-item; + display: inline flow list-item; +} + +.block-flex { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + display: block flex; +} + +.inline-flex { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -moz-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + display: inline flex; +} + +.block-grid { + display: grid; + display: block grid; +} + +.inline-grid { + display: inline-grid; + display: inline grid; +} + +.inline-ruby { + display: ruby; + display: inline ruby; +} + +.block-table { + display: table; + display: block table; +} + +.inline-table { + display: inline-table; + display: inline table; +} + +.table-cell-flow { + display: table-cell; + display: table-cell flow; +} + +.table-caption-flow { + display: table-caption; + display: table-caption flow; +} + +.ruby-base-flow { + display: ruby-base; + display: ruby-base flow; +} + +.ruby-text-flow { + display: ruby-text; + display: ruby-text flow; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css index d74f6c898..4accebcf7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -188,3 +188,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; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css index 388f6ba7f..5f442e2e7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css @@ -232,3 +232,101 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te .clamp-different-units { width: max(10%, min(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; + display: block flow; +} + +.block-flow-root { + display: flow-root; + display: block flow-root; +} + +.inline-flow { + display: inline; + display: inline flow; +} + +.inline-flow-root { + display: inline-block; + display: inline flow-root; +} + +.run-in-flow { + display: run-in; + display: run-in flow; +} + +.list-item-block-flow { + display: list-item; + display: list-item block flow; +} + +.inline-flow-list-item { + display: inline list-item; + display: inline flow list-item; +} + +.block-flex { + display: flex; + display: block flex; +} + +.inline-flex { + display: inline-flex; + display: inline flex; +} + +.block-grid { + display: grid; + display: block grid; +} + +.inline-grid { + display: inline-grid; + display: inline grid; +} + +.inline-ruby { + display: ruby; + display: inline ruby; +} + +.block-table { + display: table; + display: block table; +} + +.inline-table { + display: inline-table; + display: inline table; +} + +.table-cell-flow { + display: table-cell; + display: table-cell flow; +} + +.table-caption-flow { + display: table-caption; + display: table-caption flow; +} + +.ruby-base-flow { + display: ruby-base; + display: ruby-base flow; +} + +.ruby-text-flow { + display: ruby-text; + display: ruby-text flow; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css index 4085ba340..83423a6b4 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css @@ -220,3 +220,101 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te .clamp-different-units { width: max(10%, min(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; + display: block flow; +} + +.block-flow-root { + display: flow-root; + display: block flow-root; +} + +.inline-flow { + display: inline; + display: inline flow; +} + +.inline-flow-root { + display: inline-block; + display: inline flow-root; +} + +.run-in-flow { + display: run-in; + display: run-in flow; +} + +.list-item-block-flow { + display: list-item; + display: list-item block flow; +} + +.inline-flow-list-item { + display: inline list-item; + display: inline flow list-item; +} + +.block-flex { + display: flex; + display: block flex; +} + +.inline-flex { + display: inline-flex; + display: inline flex; +} + +.block-grid { + display: grid; + display: block grid; +} + +.inline-grid { + display: inline-grid; + display: inline grid; +} + +.inline-ruby { + display: ruby; + display: inline ruby; +} + +.block-table { + display: table; + display: block table; +} + +.inline-table { + display: inline-table; + display: inline table; +} + +.table-cell-flow { + display: table-cell; + display: table-cell flow; +} + +.table-caption-flow { + display: table-caption; + display: table-caption flow; +} + +.ruby-base-flow { + display: ruby-base; + display: ruby-base flow; +} + +.ruby-text-flow { + display: ruby-text; + display: ruby-text flow; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css index d780e6721..3bfd95f63 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -340,3 +340,101 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te .clamp-different-units { width: max(10%, min(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; + display: block flow; +} + +.block-flow-root { + display: flow-root; + display: block flow-root; +} + +.inline-flow { + display: inline; + display: inline flow; +} + +.inline-flow-root { + display: inline-block; + display: inline flow-root; +} + +.run-in-flow { + display: run-in; + display: run-in flow; +} + +.list-item-block-flow { + display: list-item; + display: list-item block flow; +} + +.inline-flow-list-item { + display: inline list-item; + display: inline flow list-item; +} + +.block-flex { + display: flex; + display: block flex; +} + +.inline-flex { + display: inline-flex; + display: inline flex; +} + +.block-grid { + display: grid; + display: block grid; +} + +.inline-grid { + display: inline-grid; + display: inline grid; +} + +.inline-ruby { + display: ruby; + display: inline ruby; +} + +.block-table { + display: table; + display: block table; +} + +.inline-table { + display: inline-table; + display: inline table; +} + +.table-cell-flow { + display: table-cell; + display: table-cell flow; +} + +.table-caption-flow { + display: table-caption; + display: table-caption flow; +} + +.ruby-base-flow { + display: ruby-base; + display: ruby-base flow; +} + +.ruby-text-flow { + display: ruby-text; + display: ruby-text flow; +} diff --git a/rollup/configs/externals.js b/rollup/configs/externals.js index 01267ee13..5e1d812aa 100644 --- a/rollup/configs/externals.js +++ b/rollup/configs/externals.js @@ -3,8 +3,10 @@ export const externalsForCLI = [ 'path', 'url', + '@csstools/postcss-font-format-keywords', '@csstools/postcss-hwb-function', '@csstools/postcss-is-pseudo-class', + '@csstools/postcss-normalize-display-values', 'autoprefixer', 'browserslist', 'caniuse-lite', From 7cf843fa3db6979736da769f703633b4f5e69b1e Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Wed, 26 Jan 2022 17:38:07 +0100 Subject: [PATCH 2/2] Adding missing plugins to the CLI --- cli/csstools-cli/src/cli.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/cli/csstools-cli/src/cli.ts b/cli/csstools-cli/src/cli.ts index 667eff652..f022cb508 100644 --- a/cli/csstools-cli/src/cli.ts +++ b/cli/csstools-cli/src/cli.ts @@ -10,6 +10,7 @@ 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'; @@ -17,6 +18,7 @@ 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,6 +126,7 @@ 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', @@ -125,6 +134,7 @@ function main() { ' postcss-lab-function', ' postcss-logical', ' postcss-nesting', + ' postcss-normalize-display-values', ' postcss-overflow-shorthand', ' postcss-place', ' postcss-pseudo-class-any-link',