From 864041de7561d1943f036061e236e0bc154d0d13 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Fri, 18 Nov 2022 10:40:14 +0100 Subject: [PATCH 01/23] final typescript conversions From 6a873b5b3f03102241c842921ef94ab50c3ea1ac Mon Sep 17 00:00:00 2001 From: romainmenke Date: Fri, 18 Nov 2022 11:11:46 +0100 Subject: [PATCH 02/23] postcss-dir-pseudo-class --- plugins/postcss-dir-pseudo-class/.gitignore | 9 +- plugins/postcss-dir-pseudo-class/.tape.mjs | 27 ++++ plugins/postcss-dir-pseudo-class/CHANGELOG.md | 68 +-------- plugins/postcss-dir-pseudo-class/README.md | 138 +++++++++++------- .../postcss-dir-pseudo-class/docs/README.md | 116 +++++++++++++++ plugins/postcss-dir-pseudo-class/package.json | 38 ++--- .../src/{index.js => index.ts} | 45 ++++-- .../test/examples/example.css | 7 + .../test/examples/example.dir-ltr.expect.css | 7 + .../test/examples/example.dir-rtl.expect.css | 7 + .../test/examples/example.expect.css | 7 + .../examples/example.preserve-true.expect.css | 15 ++ .../examples/example.shadow-true.expect.css | 7 + .../postcss-dir-pseudo-class/tsconfig.json | 9 ++ 14 files changed, 342 insertions(+), 158 deletions(-) create mode 100644 plugins/postcss-dir-pseudo-class/docs/README.md rename plugins/postcss-dir-pseudo-class/src/{index.js => index.ts} (83%) create mode 100644 plugins/postcss-dir-pseudo-class/test/examples/example.css create mode 100644 plugins/postcss-dir-pseudo-class/test/examples/example.dir-ltr.expect.css create mode 100644 plugins/postcss-dir-pseudo-class/test/examples/example.dir-rtl.expect.css create mode 100644 plugins/postcss-dir-pseudo-class/test/examples/example.expect.css create mode 100644 plugins/postcss-dir-pseudo-class/test/examples/example.preserve-true.expect.css create mode 100644 plugins/postcss-dir-pseudo-class/test/examples/example.shadow-true.expect.css create mode 100644 plugins/postcss-dir-pseudo-class/tsconfig.json diff --git a/plugins/postcss-dir-pseudo-class/.gitignore b/plugins/postcss-dir-pseudo-class/.gitignore index e66299113..87d32f2f5 100644 --- a/plugins/postcss-dir-pseudo-class/.gitignore +++ b/plugins/postcss-dir-pseudo-class/.gitignore @@ -1,14 +1,7 @@ node_modules -dist package-lock.json yarn.lock -*.log* *.result.css *.result.css.map *.result.html -!.editorconfig -!.gitignore -!.rollup.js -!.tape.js -!.travis.yml -!.github +dist/* diff --git a/plugins/postcss-dir-pseudo-class/.tape.mjs b/plugins/postcss-dir-pseudo-class/.tape.mjs index fd6ee574a..a8661b320 100644 --- a/plugins/postcss-dir-pseudo-class/.tape.mjs +++ b/plugins/postcss-dir-pseudo-class/.tape.mjs @@ -37,4 +37,31 @@ postcssTape(plugin)({ preserve: false } }, + 'examples/example': { + message: "supports examples", + }, + 'examples/example:preserve-true': { + message: "supports examples with { preserve: true }", + options: { + preserve: true + }, + }, + 'examples/example:shadow-true': { + message: "supports examples with { shadow: true }", + options: { + shadow: true + }, + }, + 'examples/example:dir-ltr': { + message: "supports examples with { dir: 'ltr' }", + options: { + dir: 'ltr' + }, + }, + 'examples/example:dir-rtl': { + message: "supports examples with { dir: 'rtl' }", + options: { + dir: 'rtl' + }, + }, }); diff --git a/plugins/postcss-dir-pseudo-class/CHANGELOG.md b/plugins/postcss-dir-pseudo-class/CHANGELOG.md index 295781882..65e192f42 100644 --- a/plugins/postcss-dir-pseudo-class/CHANGELOG.md +++ b/plugins/postcss-dir-pseudo-class/CHANGELOG.md @@ -1,71 +1,5 @@ # Changes to PostCSS Dir Pseudo Class -### Unreleased (major) - -- Updated: Support for Node v14+ (major). - -### 6.0.5 (July 8, 2022) - -- Fix case insensitive matching. - -### 6.0.4 (February 5, 2022) - -- Improved `es module` and `commonjs` compatibility - -### 6.0.3 (January 12, 2022) - -- Fix compatibility with PostCSS `v8.2.x` [#147](https://github.com/csstools/postcss-plugins/issues/147) - -This version is not officially supported but some tool providers pinned PostCSS to `v8.2.x`, -making it impossible for end users to have a working setup. - -### 6.0.2 (January 2, 2022) - -- Removed Sourcemaps from package tarball. -- Moved CLI to CLI Package. See [announcement](https://github.com/csstools/postcss-plugins/discussions/121). - -### 6.0.1 (December 13, 2021) - -- Updated: documentation - -### 6.0.0 (September 17, 2021) - -- Updated: Support for PostCS 8+ (major). -- Updated: Support for Node 12+ (major). - -### 5.0.0 (September 17, 2018) - -- Updated: Support for PostCSS v7+ -- Updated: Support for Node v6+ -- Updated: `postcss-selector-parser` to v5.0.0-rc.3+ (major) - -### 4.0.0 (May 8, 2018) - -- Updated: `postcss-selector-parser` to v4.0.0 (major) -- Updated: `postcss` to v6.0.22 (patch) - -### 3.0.0 (March 21, 2018) - -- Added: `preserve` option to preserve the original `:dir()` rule -- Updated: `postcss-selector-parser` to v3 (major) -- Removed: `browsers` option which is better covered by - [PostCSS Preset Env](https://github.com/jonathantneal/postcss-preset-env/) - -### 2.1.0 (September 19, 2017) - -- Fixed: Enforcement of presumed direction, e.g. `html:dir([dir="rtl"])` -- Updated: Browserslist and PostCSS -- Improved: How options are safely called, i.e. `Object(opts)` - -### 2.0.0 (July 24, 2017) - -- Changed: Method of presumed direction from `:root` to `html:not([dir])` - -### 1.1.0 (June 2, 2017) - -- Added: Support for browserslist and a 'browsers' option -- Added: Support for a presumed direction via the 'browsers' option - -### 1.0.0 (May 30, 2017) +### 1.0.0 (Unreleased) - Initial version diff --git a/plugins/postcss-dir-pseudo-class/README.md b/plugins/postcss-dir-pseudo-class/README.md index 0afc88e1a..22d9a50f5 100644 --- a/plugins/postcss-dir-pseudo-class/README.md +++ b/plugins/postcss-dir-pseudo-class/README.md @@ -1,32 +1,27 @@ # PostCSS Dir Pseudo Class [][postcss] -[![NPM Version][npm-img]][npm-url] -[![CSS Standard Status][css-img]][css-url] -[![Build Status][cli-img]][cli-url] -[][discord] +[][npm-url] [][css-url] [][cli-url] [][discord] [PostCSS Dir Pseudo Class] lets you style by directionality using the `:dir()` pseudo-class in CSS, following the [Selectors] specification. -[](https://caniuse.com/#feat=css-dir-pseudo) - ```pcss article h3:dir(rtl) { - margin-right: 10px; + margin-right: 10px; } article h3:dir(ltr) { - margin-left: 10px; + margin-left: 10px; } /* becomes */ [dir="rtl"] article h3 { - margin-right: 10px; + margin-right: 10px; } [dir="ltr"] article h3 { - margin-left: 10px; + margin-left: 10px; } ``` @@ -43,7 +38,7 @@ document.documentElement.dir=document.documentElement.dir||'ltr'; If you absolutely cannot add a `[dir]` attribute in your HTML or even force one via JavaScript, you can still work around this by presuming a direction in your -CSS using the [`dir` option](#dir-option), but understand that this will +CSS using the [`dir` option](#dir), but understand that this will sometimes increase selector weight by one element (`html`). ## Usage @@ -51,111 +46,150 @@ sometimes increase selector weight by one element (`html`). Add [PostCSS Dir Pseudo Class] to your project: ```bash -npm install postcss-dir-pseudo-class --save-dev -``` - -Use [PostCSS Dir Pseudo Class] to process your CSS: - -```js -const postcssDirPseudoClass = require('postcss-dir-pseudo-class'); - -postcssDirPseudoClass.process(YOUR_CSS /*, processOptions, pluginOptions */); +npm install postcss postcss-dir-pseudo-class --save-dev ``` -Or use it as a [PostCSS] plugin: +Use it as a [PostCSS] plugin: ```js const postcss = require('postcss'); const postcssDirPseudoClass = require('postcss-dir-pseudo-class'); postcss([ - postcssDirPseudoClass(/* pluginOptions */) + postcssDirPseudoClass(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` -[PostCSS Dir Pseudo Class] runs in all Node environments, with special instructions for: +[PostCSS Dir Pseudo Class] runs in all Node environments, with special +instructions for: | [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | | --- | --- | --- | --- | --- | --- | ## Options -### dir - -The `dir` option allows you presume a direction in your CSS. By default, this -is not specified and you are required to include a direction `[dir]` attribute -somewhere in your HTML, preferably on the `html` element. +### preserve -Here’s an example of using the `dir` option to presume a left-to-right -direction: +The `preserve` option determines whether the original notation +is preserved. By default, it is not preserved. ```js -postcssDirPseudoClass({ dir: 'ltr' }); +postcssDirPseudoClass({ preserve: true }) ``` ```pcss -.example:dir(ltr) { - margin-left: 10px; +article h3:dir(rtl) { + margin-right: 10px; } -.example:dir(rtl) { - margin-right: 10px; +article h3:dir(ltr) { + margin-left: 10px; } /* becomes */ -html:not([dir="rtl"]) .example { - margin-left: 10px; +[dir="rtl"] article h3 { + margin-right: 10px; +} + +article h3:dir(rtl) { + margin-right: 10px; } -[dir="rtl"] .example { - margin-right: 10px; +[dir="ltr"] article h3 { + margin-left: 10px; +} + +article h3:dir(ltr) { + margin-left: 10px; } ``` -### preserve +### dir -The `preserve` option determines whether the original `:dir()` rule should -remain in the CSS. By default, the original rule is not preserved. +The `dir` option allows you presume a direction in your CSS. By default, this +is not specified and you are required to include a direction `[dir]` attribute +somewhere in your HTML, preferably on the `html` element. ```js -postcssDirPseudoClass({ preserve: true }); +postcssDirPseudoClass({ dir: 'ltr' }); ``` ```pcss article h3:dir(rtl) { - margin-right: 10px; + margin-right: 10px; } article h3:dir(ltr) { - margin-left: 10px; + margin-left: 10px; } /* becomes */ [dir="rtl"] article h3 { - margin-right: 10px; + margin-right: 10px; } +html:not([dir="rtl"]) article h3 { + margin-left: 10px; +} +``` + +```js +postcssDirPseudoClass({ dir: 'rtl' }); +``` + +```pcss article h3:dir(rtl) { - margin-right: 10px; + margin-right: 10px; +} + +article h3:dir(ltr) { + margin-left: 10px; +} + +/* becomes */ + +html:not([dir="ltr"]) article h3 { + margin-right: 10px; } [dir="ltr"] article h3 { - margin-left: 10px; + margin-left: 10px; +} +``` + +### shadow + +The `shadow` option determines whether the CSS is assumed to be used in Shadow DOM with Custom Elements. + +```js +postcssDirPseudoClass({ shadow: true }) +``` + +```pcss +article h3:dir(rtl) { + margin-right: 10px; } article h3:dir(ltr) { - margin-left: 10px; + margin-left: 10px; +} + +/* becomes */ + +:host-context([dir="rtl"]) article h3 { + margin-right: 10px; +} + +:host-context([dir="ltr"]) article h3 { + margin-left: 10px; } ``` -[cli-img]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml/badge.svg [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test -[css-img]: https://cssdb.org/images/badges/dir-pseudo-class.svg [css-url]: https://cssdb.org/#dir-pseudo-class [discord]: https://discord.gg/bUadyRwkJS -[npm-img]: https://img.shields.io/npm/v/postcss-dir-pseudo-class.svg [npm-url]: https://www.npmjs.com/package/postcss-dir-pseudo-class [Gulp PostCSS]: https://github.com/postcss/gulp-postcss diff --git a/plugins/postcss-dir-pseudo-class/docs/README.md b/plugins/postcss-dir-pseudo-class/docs/README.md new file mode 100644 index 000000000..5a3015db3 --- /dev/null +++ b/plugins/postcss-dir-pseudo-class/docs/README.md @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + +

+ +[] lets you style by directionality using the `:dir()` +pseudo-class in CSS, following the [Selectors] specification. + +```pcss + + +/* becomes */ + + +``` + +### Maintaining Specificity + +Using [] will not impact selector weight, but it will +require having at least one `[dir]` attribute in your HTML. If you don’t have +_any_ `[dir]` attributes, consider using the following JavaScript: + +```js +// force at least one dir attribute (this can run at any time) +document.documentElement.dir=document.documentElement.dir||'ltr'; +``` + +If you absolutely cannot add a `[dir]` attribute in your HTML or even force one +via JavaScript, you can still work around this by presuming a direction in your +CSS using the [`dir` option](#dir), but understand that this will +sometimes increase selector weight by one element (`html`). + + + + + +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is not preserved. + +```js +({ preserve: true }) +``` + +```pcss + + +/* becomes */ + + +``` + +### dir + +The `dir` option allows you presume a direction in your CSS. By default, this +is not specified and you are required to include a direction `[dir]` attribute +somewhere in your HTML, preferably on the `html` element. + +```js +({ dir: 'ltr' }); +``` + +```pcss + + +/* becomes */ + + +``` + +```js +({ dir: 'rtl' }); +``` + +```pcss + + +/* becomes */ + + +``` + +### shadow + +The `shadow` option determines whether the CSS is assumed to be used in Shadow DOM with Custom Elements. + +```js +({ shadow: true }) +``` + +```pcss + + +/* becomes */ + + +``` + + +[Selectors]: diff --git a/plugins/postcss-dir-pseudo-class/package.json b/plugins/postcss-dir-pseudo-class/package.json index f19c33589..75e87080d 100644 --- a/plugins/postcss-dir-pseudo-class/package.json +++ b/plugins/postcss-dir-pseudo-class/package.json @@ -2,7 +2,21 @@ "name": "postcss-dir-pseudo-class", "description": "Use the :dir pseudo-class in CSS", "version": "6.0.5", - "author": "Jonathan Neal ", + "contributors": [ + { + "name": "Antonio Laguna", + "email": "antonio@laguna.es", + "url": "https://antonio.laguna.es" + }, + { + "name": "Jonathan Neal", + "email": "jonathantneal@hotmail.com" + }, + { + "name": "Romain Menke", + "email": "romainmenke@gmail.com" + } + ], "license": "CC0-1.0", "funding": { "type": "opencollective", @@ -13,6 +27,7 @@ }, "main": "dist/index.cjs", "module": "dist/index.mjs", + "types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.mjs", @@ -35,7 +50,7 @@ "scripts": { "build": "rollup -c ../../rollup/default.mjs", "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", - "docs": "node ../../.github/bin/generate-docs/install.mjs", + "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs", "lint": "npm run lint:eslint && npm run lint:package-json", "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", "lint:package-json": "node ../../.github/bin/format-package-json.mjs", @@ -52,24 +67,13 @@ }, "bugs": "https://github.com/csstools/postcss-plugins/issues", "keywords": [ - "attribute", - "css", - "directionality", - "directions", - "left", - "left-to-right", - "ltr", - "polyfill", - "postcss", - "postcss-plugin", - "right", - "right-to-left", - "rtl", - "selector" + "postcss-plugin" ], "csstools": { + "cssdbId": "dir-pseudo-class", "exportName": "postcssDirPseudoClass", - "humanReadableName": "PostCSS Dir Pseudo Class" + "humanReadableName": "PostCSS Dir Pseudo Class", + "specUrl": "https://www.w3.org/TR/selectors-4/#the-dir-pseudo" }, "volta": { "extends": "../../package.json" diff --git a/plugins/postcss-dir-pseudo-class/src/index.js b/plugins/postcss-dir-pseudo-class/src/index.ts similarity index 83% rename from plugins/postcss-dir-pseudo-class/src/index.js rename to plugins/postcss-dir-pseudo-class/src/index.ts index 514c99b2f..ee60177b7 100644 --- a/plugins/postcss-dir-pseudo-class/src/index.js +++ b/plugins/postcss-dir-pseudo-class/src/index.ts @@ -1,9 +1,23 @@ +import type { PluginCreator } from 'postcss'; import selectorParser from 'postcss-selector-parser'; -function creator(opts) { - const dir = Object(opts).dir; - const preserve = Boolean(Object(opts).preserve); - const shadow = Boolean(Object(opts).shadow); +type pluginOptions = { + dir?: 'ltr' | 'rtl' + preserve?: boolean, + shadow?: boolean, +}; + +const creator: PluginCreator = (opts?: pluginOptions) => { + const options = Object.assign( + // Default options + { + dir: null, + preserve: false, + shadow: false, + }, + // Provided options + opts, + ); return { postcssPlugin: 'postcss-dir-pseudo-class', @@ -82,12 +96,12 @@ function creator(opts) { parent.prepend( selectorParser.combinator({ value: ' ', - }), + }) as unknown as selectorParser.Selector, ); } // whether :dir matches the presumed direction - const isdir = dir === value; + const isdir = options.dir === value; // [dir] attribute const dirAttr = selectorParser.attribute({ @@ -95,13 +109,14 @@ function creator(opts) { operator: '=', quoteMark: '"', value: `"${value}"`, + raws: null, }); // :host-context([dir]) for Shadow DOM CSS const hostContextPseudo = selectorParser.pseudo({ value: ':host-context', }); - hostContextPseudo.append(dirAttr); + hostContextPseudo.append(dirAttr as unknown as selectorParser.Selector); // not[dir] attribute const notDirAttr = selectorParser.pseudo({ @@ -114,7 +129,8 @@ function creator(opts) { operator: '=', quoteMark: '"', value: `"${'ltr' === value ? 'rtl' : 'ltr'}"`, - }), + raws: null, + }) as unknown as selectorParser.Selector, ); if (isdir) { @@ -124,17 +140,17 @@ function creator(opts) { parent.insertAfter(first, notDirAttr); } else { // prepend :root - parent.prepend(notDirAttr); + parent.prepend(notDirAttr as unknown as selectorParser.Selector); } } else if (firstIsHtml) { // insert dir attribute after html tag parent.insertAfter(first, dirAttr); - } else if (shadow && !firstIsRoot) { + } else if (options.shadow && !firstIsRoot) { // prepend :host-context([dir]) - parent.prepend(hostContextPseudo); + parent.prepend(hostContextPseudo as unknown as selectorParser.Selector); } else { // otherwise, prepend the dir attribute - parent.prepend(dirAttr); + parent.prepend(dirAttr as unknown as selectorParser.Selector); } }); }); @@ -154,13 +170,14 @@ function creator(opts) { rule.cloneBefore({ selector: modifiedSelector }); - if (!preserve) { + if (!options.preserve) { rule.remove(); } }, }; -} +}; creator.postcss = true; export default creator; + diff --git a/plugins/postcss-dir-pseudo-class/test/examples/example.css b/plugins/postcss-dir-pseudo-class/test/examples/example.css new file mode 100644 index 000000000..52d82d085 --- /dev/null +++ b/plugins/postcss-dir-pseudo-class/test/examples/example.css @@ -0,0 +1,7 @@ +article h3:dir(rtl) { + margin-right: 10px; +} + +article h3:dir(ltr) { + margin-left: 10px; +} diff --git a/plugins/postcss-dir-pseudo-class/test/examples/example.dir-ltr.expect.css b/plugins/postcss-dir-pseudo-class/test/examples/example.dir-ltr.expect.css new file mode 100644 index 000000000..12773092c --- /dev/null +++ b/plugins/postcss-dir-pseudo-class/test/examples/example.dir-ltr.expect.css @@ -0,0 +1,7 @@ +[dir="rtl"] article h3 { + margin-right: 10px; +} + +html:not([dir="rtl"]) article h3 { + margin-left: 10px; +} diff --git a/plugins/postcss-dir-pseudo-class/test/examples/example.dir-rtl.expect.css b/plugins/postcss-dir-pseudo-class/test/examples/example.dir-rtl.expect.css new file mode 100644 index 000000000..d2bd909ef --- /dev/null +++ b/plugins/postcss-dir-pseudo-class/test/examples/example.dir-rtl.expect.css @@ -0,0 +1,7 @@ +html:not([dir="ltr"]) article h3 { + margin-right: 10px; +} + +[dir="ltr"] article h3 { + margin-left: 10px; +} diff --git a/plugins/postcss-dir-pseudo-class/test/examples/example.expect.css b/plugins/postcss-dir-pseudo-class/test/examples/example.expect.css new file mode 100644 index 000000000..89db5c86a --- /dev/null +++ b/plugins/postcss-dir-pseudo-class/test/examples/example.expect.css @@ -0,0 +1,7 @@ +[dir="rtl"] article h3 { + margin-right: 10px; +} + +[dir="ltr"] article h3 { + margin-left: 10px; +} diff --git a/plugins/postcss-dir-pseudo-class/test/examples/example.preserve-true.expect.css b/plugins/postcss-dir-pseudo-class/test/examples/example.preserve-true.expect.css new file mode 100644 index 000000000..8075c9007 --- /dev/null +++ b/plugins/postcss-dir-pseudo-class/test/examples/example.preserve-true.expect.css @@ -0,0 +1,15 @@ +[dir="rtl"] article h3 { + margin-right: 10px; +} + +article h3:dir(rtl) { + margin-right: 10px; +} + +[dir="ltr"] article h3 { + margin-left: 10px; +} + +article h3:dir(ltr) { + margin-left: 10px; +} diff --git a/plugins/postcss-dir-pseudo-class/test/examples/example.shadow-true.expect.css b/plugins/postcss-dir-pseudo-class/test/examples/example.shadow-true.expect.css new file mode 100644 index 000000000..bfb68b6a4 --- /dev/null +++ b/plugins/postcss-dir-pseudo-class/test/examples/example.shadow-true.expect.css @@ -0,0 +1,7 @@ +:host-context([dir="rtl"]) article h3 { + margin-right: 10px; +} + +:host-context([dir="ltr"]) article h3 { + margin-left: 10px; +} diff --git a/plugins/postcss-dir-pseudo-class/tsconfig.json b/plugins/postcss-dir-pseudo-class/tsconfig.json new file mode 100644 index 000000000..e0d06239c --- /dev/null +++ b/plugins/postcss-dir-pseudo-class/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "declarationDir": "." + }, + "include": ["./src/**/*"], + "exclude": ["dist"], +} From fe3b39de80ac21889240f3fdb3deae24deb22bbe Mon Sep 17 00:00:00 2001 From: romainmenke Date: Fri, 18 Nov 2022 12:10:18 +0100 Subject: [PATCH 03/23] export plugin types --- plugins/css-blank-pseudo/CHANGELOG.md | 1 + plugins/css-blank-pseudo/src/index.ts | 10 +++++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/plugins/css-blank-pseudo/CHANGELOG.md b/plugins/css-blank-pseudo/CHANGELOG.md index da7b9c551..381b7c7b6 100644 --- a/plugins/css-blank-pseudo/CHANGELOG.md +++ b/plugins/css-blank-pseudo/CHANGELOG.md @@ -4,6 +4,7 @@ - Updated: Support for Node v14+ (major). - Fix: Do not throw when a selector is invalid, show a warning instead. +- Updated: Export and document the plugin options types. ### 4.1.1 (August, 23, 2022) diff --git a/plugins/css-blank-pseudo/src/index.ts b/plugins/css-blank-pseudo/src/index.ts index 53f4ab8bc..34d63fda1 100644 --- a/plugins/css-blank-pseudo/src/index.ts +++ b/plugins/css-blank-pseudo/src/index.ts @@ -2,7 +2,15 @@ import type { PluginCreator } from 'postcss'; import parser from 'postcss-selector-parser'; import isValidReplacement from './is-valid-replacement.mjs'; -type pluginOptions = { preserve?: boolean, replaceWith?: string, disablePolyfillReadyClass?: boolean }; +/** css-blank-pseudo plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, + /** Replacement for ":blank". default: "[blank]"" */ + replaceWith?: string, + /** Do not inject "js-blank-pseudo" before each selector with "[blank]". default: false */ + disablePolyfillReadyClass?: boolean, +}; const POLYFILL_READY_CLASSNAME = 'js-blank-pseudo'; const PSEUDO = ':blank'; From 56218222f2a33c334275bc558340d252ec208573 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Fri, 18 Nov 2022 12:12:50 +0100 Subject: [PATCH 04/23] fix --- plugins/postcss-dir-pseudo-class/CHANGELOG.md | 69 ++++++++++++++++++- 1 file changed, 68 insertions(+), 1 deletion(-) diff --git a/plugins/postcss-dir-pseudo-class/CHANGELOG.md b/plugins/postcss-dir-pseudo-class/CHANGELOG.md index 65e192f42..dd5319588 100644 --- a/plugins/postcss-dir-pseudo-class/CHANGELOG.md +++ b/plugins/postcss-dir-pseudo-class/CHANGELOG.md @@ -1,5 +1,72 @@ # Changes to PostCSS Dir Pseudo Class -### 1.0.0 (Unreleased) +### Unreleased (major) + +- Updated: Support for Node v14+ (major). +- Added: typescript support. + +### 6.0.5 (July 8, 2022) + +- Fix case insensitive matching. + +### 6.0.4 (February 5, 2022) + +- Improved `es module` and `commonjs` compatibility + +### 6.0.3 (January 12, 2022) + +- Fix compatibility with PostCSS `v8.2.x` [#147](https://github.com/csstools/postcss-plugins/issues/147) + +This version is not officially supported but some tool providers pinned PostCSS to `v8.2.x`, +making it impossible for end users to have a working setup. + +### 6.0.2 (January 2, 2022) + +- Removed Sourcemaps from package tarball. +- Moved CLI to CLI Package. See [announcement](https://github.com/csstools/postcss-plugins/discussions/121). + +### 6.0.1 (December 13, 2021) + +- Updated: documentation + +### 6.0.0 (September 17, 2021) + +- Updated: Support for PostCS 8+ (major). +- Updated: Support for Node 12+ (major). + +### 5.0.0 (September 17, 2018) + +- Updated: Support for PostCSS v7+ +- Updated: Support for Node v6+ +- Updated: `postcss-selector-parser` to v5.0.0-rc.3+ (major) + +### 4.0.0 (May 8, 2018) + +- Updated: `postcss-selector-parser` to v4.0.0 (major) +- Updated: `postcss` to v6.0.22 (patch) + +### 3.0.0 (March 21, 2018) + +- Added: `preserve` option to preserve the original `:dir()` rule +- Updated: `postcss-selector-parser` to v3 (major) +- Removed: `browsers` option which is better covered by + [PostCSS Preset Env](https://github.com/jonathantneal/postcss-preset-env/) + +### 2.1.0 (September 19, 2017) + +- Fixed: Enforcement of presumed direction, e.g. `html:dir([dir="rtl"])` +- Updated: Browserslist and PostCSS +- Improved: How options are safely called, i.e. `Object(opts)` + +### 2.0.0 (July 24, 2017) + +- Changed: Method of presumed direction from `:root` to `html:not([dir])` + +### 1.1.0 (June 2, 2017) + +- Added: Support for browserslist and a 'browsers' option +- Added: Support for a presumed direction via the 'browsers' option + +### 1.0.0 (May 30, 2017) - Initial version From 30c9136efc150f8ecbb3afe24afb64c1f7043f1c Mon Sep 17 00:00:00 2001 From: romainmenke Date: Fri, 18 Nov 2022 12:15:00 +0100 Subject: [PATCH 05/23] fix --- plugins/postcss-dir-pseudo-class/package.json | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/plugins/postcss-dir-pseudo-class/package.json b/plugins/postcss-dir-pseudo-class/package.json index 75e87080d..ea27e1be6 100644 --- a/plugins/postcss-dir-pseudo-class/package.json +++ b/plugins/postcss-dir-pseudo-class/package.json @@ -67,7 +67,20 @@ }, "bugs": "https://github.com/csstools/postcss-plugins/issues", "keywords": [ - "postcss-plugin" + "attribute", + "css", + "directionality", + "directions", + "left", + "left-to-right", + "ltr", + "polyfill", + "postcss", + "postcss-plugin", + "right", + "right-to-left", + "rtl", + "selector" ], "csstools": { "cssdbId": "dir-pseudo-class", From a0af2b0ebaa7c4875dd959b9afc0ce29401f86c5 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Fri, 18 Nov 2022 12:15:35 +0100 Subject: [PATCH 06/23] fix --- plugins/postcss-dir-pseudo-class/src/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/postcss-dir-pseudo-class/src/index.ts b/plugins/postcss-dir-pseudo-class/src/index.ts index ee60177b7..81251ceec 100644 --- a/plugins/postcss-dir-pseudo-class/src/index.ts +++ b/plugins/postcss-dir-pseudo-class/src/index.ts @@ -180,4 +180,3 @@ const creator: PluginCreator = (opts?: pluginOptions) => { creator.postcss = true; export default creator; - From 91bb5a5e5b87d2a43188dc8e0350cd9b8e5586b8 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Fri, 18 Nov 2022 13:11:18 +0100 Subject: [PATCH 07/23] postcss-gap-properties --- plugins/css-blank-pseudo/src/index.ts | 2 +- plugins/postcss-base-plugin/src/index.ts | 9 ++- plugins/postcss-dir-pseudo-class/src/index.ts | 8 ++- plugins/postcss-gap-properties/.gitignore | 9 +-- plugins/postcss-gap-properties/.tape.mjs | 11 +++- plugins/postcss-gap-properties/CHANGELOG.md | 1 + plugins/postcss-gap-properties/README.md | 65 ++++++++++++++----- plugins/postcss-gap-properties/docs/README.md | 54 +++++++++++++++ plugins/postcss-gap-properties/package.json | 29 +++++++-- .../src/{index.js => index.ts} | 24 +++++-- .../test/examples/example.css | 10 +++ .../test/examples/example.expect.css | 13 ++++ .../example.preserve-false.expect.css | 10 +++ plugins/postcss-gap-properties/tsconfig.json | 9 +++ 14 files changed, 211 insertions(+), 43 deletions(-) create mode 100644 plugins/postcss-gap-properties/docs/README.md rename plugins/postcss-gap-properties/src/{index.js => index.ts} (71%) create mode 100644 plugins/postcss-gap-properties/test/examples/example.css create mode 100644 plugins/postcss-gap-properties/test/examples/example.expect.css create mode 100644 plugins/postcss-gap-properties/test/examples/example.preserve-false.expect.css create mode 100644 plugins/postcss-gap-properties/tsconfig.json diff --git a/plugins/css-blank-pseudo/src/index.ts b/plugins/css-blank-pseudo/src/index.ts index 34d63fda1..fbc089e24 100644 --- a/plugins/css-blank-pseudo/src/index.ts +++ b/plugins/css-blank-pseudo/src/index.ts @@ -6,7 +6,7 @@ import isValidReplacement from './is-valid-replacement.mjs'; export type pluginOptions = { /** Preserve the original notation. default: true */ preserve?: boolean, - /** Replacement for ":blank". default: "[blank]"" */ + /** Replacement for ":blank". default: "[blank]" */ replaceWith?: string, /** Do not inject "js-blank-pseudo" before each selector with "[blank]". default: false */ disablePolyfillReadyClass?: boolean, diff --git a/plugins/postcss-base-plugin/src/index.ts b/plugins/postcss-base-plugin/src/index.ts index a6920b80d..560992493 100644 --- a/plugins/postcss-base-plugin/src/index.ts +++ b/plugins/postcss-base-plugin/src/index.ts @@ -1,6 +1,12 @@ import type { PluginCreator } from 'postcss'; -type pluginOptions = { color?: string, preserve?: boolean }; +/** postcss-base-plugin plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, + /** Replacement color */ + color?: string, +}; const creator: PluginCreator = (opts?: pluginOptions) => { const options = Object.assign( @@ -49,4 +55,3 @@ const creator: PluginCreator = (opts?: pluginOptions) => { creator.postcss = true; export default creator; - diff --git a/plugins/postcss-dir-pseudo-class/src/index.ts b/plugins/postcss-dir-pseudo-class/src/index.ts index 81251ceec..1b6136815 100644 --- a/plugins/postcss-dir-pseudo-class/src/index.ts +++ b/plugins/postcss-dir-pseudo-class/src/index.ts @@ -1,9 +1,13 @@ import type { PluginCreator } from 'postcss'; import selectorParser from 'postcss-selector-parser'; -type pluginOptions = { - dir?: 'ltr' | 'rtl' +/** postcss-dir-pseudo-class plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ preserve?: boolean, + /** Assume a direction for the document. default: null */ + dir?: 'ltr' | 'rtl' + /** Assume that the CSS is intended to be used in Shadow DOM with Custom Elements. default: false */ shadow?: boolean, }; diff --git a/plugins/postcss-gap-properties/.gitignore b/plugins/postcss-gap-properties/.gitignore index e66299113..87d32f2f5 100644 --- a/plugins/postcss-gap-properties/.gitignore +++ b/plugins/postcss-gap-properties/.gitignore @@ -1,14 +1,7 @@ node_modules -dist package-lock.json yarn.lock -*.log* *.result.css *.result.css.map *.result.html -!.editorconfig -!.gitignore -!.rollup.js -!.tape.js -!.travis.yml -!.github +dist/* diff --git a/plugins/postcss-gap-properties/.tape.mjs b/plugins/postcss-gap-properties/.tape.mjs index 28279e5c5..ce3da26b8 100644 --- a/plugins/postcss-gap-properties/.tape.mjs +++ b/plugins/postcss-gap-properties/.tape.mjs @@ -16,5 +16,14 @@ postcssTape(plugin)({ }, 'ignore-multicolumn': { message: 'ignore multi column declarations' - } + }, + 'examples/example': { + message: 'minimal example', + }, + 'examples/example:preserve-false': { + message: 'minimal example', + options: { + preserve: false + } + }, }); diff --git a/plugins/postcss-gap-properties/CHANGELOG.md b/plugins/postcss-gap-properties/CHANGELOG.md index b49261ef8..447b5e0d7 100644 --- a/plugins/postcss-gap-properties/CHANGELOG.md +++ b/plugins/postcss-gap-properties/CHANGELOG.md @@ -3,6 +3,7 @@ ### Unreleased (major) - Updated: Support for Node v14+ (major). +- Added: typescript support. ### 3.0.5 (July 12, 2022) diff --git a/plugins/postcss-gap-properties/README.md b/plugins/postcss-gap-properties/README.md index 8e186b9f4..4a9228c7d 100644 --- a/plugins/postcss-gap-properties/README.md +++ b/plugins/postcss-gap-properties/README.md @@ -1,19 +1,18 @@ # PostCSS Gap Properties [][postcss] -[![NPM Version][npm-img]][npm-url] -[![CSS Standard Status][css-img]][css-url] -[![Build Status][cli-img]][cli-url] -[][discord] +[][npm-url] [][css-url] [][cli-url] [][discord] [PostCSS Gap Properties] lets you use the `gap`, `column-gap`, and `row-gap` shorthand properties in CSS, following the [CSS Grid Layout] specification. ```pcss .standard-grid { + display: grid; gap: 20px; } .spaced-grid { + display: grid; column-gap: 40px; row-gap: 20px; } @@ -21,11 +20,13 @@ shorthand properties in CSS, following the [CSS Grid Layout] specification. /* becomes */ .standard-grid { + display: grid; grid-gap: 20px; gap: 20px; } .spaced-grid { + display: grid; grid-column-gap: 40px; column-gap: 40px; grid-row-gap: 20px; @@ -41,40 +42,68 @@ Add [PostCSS Gap Properties] to your project: npm install postcss postcss-gap-properties --save-dev ``` -Use [PostCSS Gap Properties] as a [PostCSS] plugin: +Use it as a [PostCSS] plugin: ```js -import postcss from 'postcss'; -import postcssGapProperties from 'postcss-gap-properties'; +const postcss = require('postcss'); +const postcssGapProperties = require('postcss-gap-properties'); postcss([ - postcssGapProperties(/* pluginOptions */) + postcssGapProperties(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` -[PostCSS Gap Properties] runs in all Node environments, with special instructions for: +[PostCSS Gap Properties] runs in all Node environments, with special +instructions for: -| [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | -| --- | --- | --- | --- | --- | +| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | +| --- | --- | --- | --- | --- | --- | ## Options ### preserve -The `preserve` option determines whether the original `gap` declaration should -remain in the CSS. By default, the original declaration is preserved. +The `preserve` option determines whether the original notation +is preserved. By default, it is preserved. + +```js +postcssGapProperties({ preserve: false }) +``` + +```pcss +.standard-grid { + display: grid; + gap: 20px; +} + +.spaced-grid { + display: grid; + column-gap: 40px; + row-gap: 20px; +} + +/* becomes */ + +.standard-grid { + display: grid; + grid-gap: 20px; +} + +.spaced-grid { + display: grid; + grid-column-gap: 40px; + grid-row-gap: 20px; +} +``` -[css-img]: https://cssdb.org/images/badges/gap-properties.svg -[css-url]: https://cssdb.org/#gap-properties -[cli-img]: https://github.com/csstools/postcss-plugins/workflows/test/badge.svg [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test +[css-url]: https://cssdb.org/#gap-properties [discord]: https://discord.gg/bUadyRwkJS -[npm-img]: https://img.shields.io/npm/v/postcss-gap-properties.svg [npm-url]: https://www.npmjs.com/package/postcss-gap-properties -[CSS Grid Layout]: https://www.w3.org/TR/css-grid-1/#gutters [Gulp PostCSS]: https://github.com/postcss/gulp-postcss [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss [PostCSS Loader]: https://github.com/postcss/postcss-loader [PostCSS Gap Properties]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties +[CSS Grid Layout]: https://www.w3.org/TR/css-grid-1/#gutters diff --git a/plugins/postcss-gap-properties/docs/README.md b/plugins/postcss-gap-properties/docs/README.md new file mode 100644 index 000000000..910c1a49e --- /dev/null +++ b/plugins/postcss-gap-properties/docs/README.md @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + +

+ +[] lets you use the `gap`, `column-gap`, and `row-gap` +shorthand properties in CSS, following the [CSS Grid Layout] specification. + +```pcss + + +/* becomes */ + + +``` + + + + + +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is preserved. + +```js +({ preserve: false }) +``` + +```pcss + + +/* becomes */ + + +``` + + +[CSS Grid Layout]: diff --git a/plugins/postcss-gap-properties/package.json b/plugins/postcss-gap-properties/package.json index de07edb18..d1adcfaac 100644 --- a/plugins/postcss-gap-properties/package.json +++ b/plugins/postcss-gap-properties/package.json @@ -2,7 +2,21 @@ "name": "postcss-gap-properties", "description": "Use the gap, column-gap, and row-gap shorthand properties in CSS", "version": "3.0.5", - "author": "Jonathan Neal ", + "contributors": [ + { + "name": "Antonio Laguna", + "email": "antonio@laguna.es", + "url": "https://antonio.laguna.es" + }, + { + "name": "Jonathan Neal", + "email": "jonathantneal@hotmail.com" + }, + { + "name": "Romain Menke", + "email": "romainmenke@gmail.com" + } + ], "license": "CC0-1.0", "funding": { "type": "opencollective", @@ -13,6 +27,7 @@ }, "main": "dist/index.cjs", "module": "dist/index.mjs", + "types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.mjs", @@ -32,7 +47,7 @@ "scripts": { "build": "rollup -c ../../rollup/default.mjs", "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", - "docs": "node ../../.github/bin/generate-docs/install.mjs", + "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs", "lint": "npm run lint:eslint && npm run lint:package-json", "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", "lint:package-json": "node ../../.github/bin/format-package-json.mjs", @@ -41,13 +56,11 @@ "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs", "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs" }, - "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties#readme", "repository": { "type": "git", "url": "https://github.com/csstools/postcss-plugins.git", "directory": "plugins/postcss-gap-properties" }, - "bugs": "https://github.com/csstools/postcss-plugins/issues", "keywords": [ "columns", "css", @@ -61,10 +74,14 @@ "shorthands" ], "csstools": { + "cssdbId": "gap-properties", "exportName": "postcssGapProperties", - "humanReadableName": "PostCSS Gap Properties" + "humanReadableName": "PostCSS Gap Properties", + "specUrl": "https://www.w3.org/TR/css-grid-1/#gutters" }, "volta": { "extends": "../../package.json" - } + }, + "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties#readme", + "bugs": "https://github.com/csstools/postcss-plugins/issues" } diff --git a/plugins/postcss-gap-properties/src/index.js b/plugins/postcss-gap-properties/src/index.ts similarity index 71% rename from plugins/postcss-gap-properties/src/index.js rename to plugins/postcss-gap-properties/src/index.ts index 8b96a39d9..92fcc61ac 100644 --- a/plugins/postcss-gap-properties/src/index.js +++ b/plugins/postcss-gap-properties/src/index.ts @@ -1,12 +1,26 @@ -// gap shorthand property matcher +import type { PluginCreator } from 'postcss'; + +/** postcss-gap-properties plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, +}; + const gapProperties = [ 'column-gap', 'gap', 'row-gap', ]; -function creator(opts) { - const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true; +const creator: PluginCreator = (opts?: pluginOptions) => { + const options = Object.assign( + // Default options + { + preserve: true, + }, + // Provided options + opts, + ); return { postcssPlugin: 'postcss-gap-properties', @@ -45,12 +59,12 @@ function creator(opts) { }); // conditionally remove the original declaration - if (!preserve) { + if (!options.preserve) { decl.remove(); } }, }; -} +}; creator.postcss = true; diff --git a/plugins/postcss-gap-properties/test/examples/example.css b/plugins/postcss-gap-properties/test/examples/example.css new file mode 100644 index 000000000..268694bda --- /dev/null +++ b/plugins/postcss-gap-properties/test/examples/example.css @@ -0,0 +1,10 @@ +.standard-grid { + display: grid; + gap: 20px; +} + +.spaced-grid { + display: grid; + column-gap: 40px; + row-gap: 20px; +} diff --git a/plugins/postcss-gap-properties/test/examples/example.expect.css b/plugins/postcss-gap-properties/test/examples/example.expect.css new file mode 100644 index 000000000..b1ce25688 --- /dev/null +++ b/plugins/postcss-gap-properties/test/examples/example.expect.css @@ -0,0 +1,13 @@ +.standard-grid { + display: grid; + grid-gap: 20px; + gap: 20px; +} + +.spaced-grid { + display: grid; + grid-column-gap: 40px; + column-gap: 40px; + grid-row-gap: 20px; + row-gap: 20px; +} diff --git a/plugins/postcss-gap-properties/test/examples/example.preserve-false.expect.css b/plugins/postcss-gap-properties/test/examples/example.preserve-false.expect.css new file mode 100644 index 000000000..69b153dd7 --- /dev/null +++ b/plugins/postcss-gap-properties/test/examples/example.preserve-false.expect.css @@ -0,0 +1,10 @@ +.standard-grid { + display: grid; + grid-gap: 20px; +} + +.spaced-grid { + display: grid; + grid-column-gap: 40px; + grid-row-gap: 20px; +} diff --git a/plugins/postcss-gap-properties/tsconfig.json b/plugins/postcss-gap-properties/tsconfig.json new file mode 100644 index 000000000..e0d06239c --- /dev/null +++ b/plugins/postcss-gap-properties/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "declarationDir": "." + }, + "include": ["./src/**/*"], + "exclude": ["dist"], +} From 44908655e51f540bca589be5636e598bc77215cb Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Fri, 18 Nov 2022 14:51:05 +0100 Subject: [PATCH 08/23] lint --- plugins/postcss-gap-properties/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/postcss-gap-properties/package.json b/plugins/postcss-gap-properties/package.json index d1adcfaac..06dae5609 100644 --- a/plugins/postcss-gap-properties/package.json +++ b/plugins/postcss-gap-properties/package.json @@ -56,11 +56,13 @@ "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs", "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs" }, + "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties#readme", "repository": { "type": "git", "url": "https://github.com/csstools/postcss-plugins.git", "directory": "plugins/postcss-gap-properties" }, + "bugs": "https://github.com/csstools/postcss-plugins/issues", "keywords": [ "columns", "css", @@ -81,7 +83,5 @@ }, "volta": { "extends": "../../package.json" - }, - "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties#readme", - "bugs": "https://github.com/csstools/postcss-plugins/issues" + } } From 444ac2ecf7f467d611cfdb8b5e89cdf04b667aaf Mon Sep 17 00:00:00 2001 From: romainmenke Date: Fri, 18 Nov 2022 15:21:40 +0100 Subject: [PATCH 09/23] postcss-overflow-shorthand --- plugins/postcss-base-plugin/src/index.ts | 2 +- plugins/postcss-overflow-shorthand/.gitignore | 9 +--- plugins/postcss-overflow-shorthand/.tape.mjs | 9 ++++ .../postcss-overflow-shorthand/CHANGELOG.md | 1 + plugins/postcss-overflow-shorthand/README.md | 32 +++++------ .../postcss-overflow-shorthand/docs/README.md | 54 +++++++++++++++++++ .../postcss-overflow-shorthand/package.json | 23 ++++++-- .../src/{index.js => index.ts} | 25 ++++++--- .../test/examples/example.css | 3 ++ .../test/examples/example.expect.css | 5 ++ .../example.preserve-false.expect.css | 4 ++ .../postcss-overflow-shorthand/tsconfig.json | 9 ++++ 12 files changed, 138 insertions(+), 38 deletions(-) create mode 100644 plugins/postcss-overflow-shorthand/docs/README.md rename plugins/postcss-overflow-shorthand/src/{index.js => index.ts} (71%) create mode 100644 plugins/postcss-overflow-shorthand/test/examples/example.css create mode 100644 plugins/postcss-overflow-shorthand/test/examples/example.expect.css create mode 100644 plugins/postcss-overflow-shorthand/test/examples/example.preserve-false.expect.css create mode 100644 plugins/postcss-overflow-shorthand/tsconfig.json diff --git a/plugins/postcss-base-plugin/src/index.ts b/plugins/postcss-base-plugin/src/index.ts index 560992493..e512a8773 100644 --- a/plugins/postcss-base-plugin/src/index.ts +++ b/plugins/postcss-base-plugin/src/index.ts @@ -2,7 +2,7 @@ import type { PluginCreator } from 'postcss'; /** postcss-base-plugin plugin options */ export type pluginOptions = { - /** Preserve the original notation. default: true */ + /** Preserve the original notation. default: false */ preserve?: boolean, /** Replacement color */ color?: string, diff --git a/plugins/postcss-overflow-shorthand/.gitignore b/plugins/postcss-overflow-shorthand/.gitignore index e66299113..87d32f2f5 100644 --- a/plugins/postcss-overflow-shorthand/.gitignore +++ b/plugins/postcss-overflow-shorthand/.gitignore @@ -1,14 +1,7 @@ node_modules -dist package-lock.json yarn.lock -*.log* *.result.css *.result.css.map *.result.html -!.editorconfig -!.gitignore -!.rollup.js -!.tape.js -!.travis.yml -!.github +dist/* diff --git a/plugins/postcss-overflow-shorthand/.tape.mjs b/plugins/postcss-overflow-shorthand/.tape.mjs index a961eb7e9..7ecdf8856 100644 --- a/plugins/postcss-overflow-shorthand/.tape.mjs +++ b/plugins/postcss-overflow-shorthand/.tape.mjs @@ -23,4 +23,13 @@ postcssTape(plugin)({ preserve: true } }, + 'examples/example': { + message: 'minimal example', + }, + 'examples/example:preserve-false': { + message: 'minimal example', + options: { + preserve: false + } + }, }); diff --git a/plugins/postcss-overflow-shorthand/CHANGELOG.md b/plugins/postcss-overflow-shorthand/CHANGELOG.md index ca45f081d..85ad55f4a 100644 --- a/plugins/postcss-overflow-shorthand/CHANGELOG.md +++ b/plugins/postcss-overflow-shorthand/CHANGELOG.md @@ -3,6 +3,7 @@ ### Unreleased (major) - Updated: Support for Node v14+ (major). +- Added: typescript support. ### 3.0.4 (July 8, 2022) diff --git a/plugins/postcss-overflow-shorthand/README.md b/plugins/postcss-overflow-shorthand/README.md index fed7d2539..d3f7f59f2 100644 --- a/plugins/postcss-overflow-shorthand/README.md +++ b/plugins/postcss-overflow-shorthand/README.md @@ -1,26 +1,21 @@ # PostCSS Overflow Shorthand [][postcss] -[![NPM Version][npm-img]][npm-url] -[![CSS Standard Status][css-img]][css-url] -[![Build Status][cli-img]][cli-url] -[][discord] +[][npm-url] [][css-url] [][cli-url] [][discord] [PostCSS Overflow Shorthand] lets you use the `overflow` shorthand in CSS, following the [CSS Overflow] specification. -[](https://caniuse.com/#feat=css-overflow) - ```pcss html { - overflow: hidden auto; + overflow: hidden auto; } /* becomes */ html { - overflow-x: hidden; - overflow-y: auto; - overflow: hidden auto; + overflow-x: hidden; + overflow-y: auto; + overflow: hidden auto; } ``` @@ -39,7 +34,7 @@ const postcss = require('postcss'); const postcssOverflowShorthand = require('postcss-overflow-shorthand'); postcss([ - postcssOverflowShorthand(/* pluginOptions */) + postcssOverflowShorthand(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -53,8 +48,8 @@ instructions for: ### preserve -The `preserve` option determines whether the original `overflow` declaration is -preserved. By default, it is preserved. +The `preserve` option determines whether the original notation +is preserved. By default, it is preserved. ```js postcssOverflowShorthand({ preserve: false }) @@ -62,28 +57,25 @@ postcssOverflowShorthand({ preserve: false }) ```pcss html { - overflow: hidden auto; + overflow: hidden auto; } /* becomes */ html { - overflow-x: hidden; - overflow-y: auto; + overflow-x: hidden; + overflow-y: auto; } ``` -[cli-img]: https://github.com/csstools/postcss-plugins/workflows/test/badge.svg [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test -[css-img]: https://cssdb.org/images/badges/overflow-property.svg [css-url]: https://cssdb.org/#overflow-property [discord]: https://discord.gg/bUadyRwkJS -[npm-img]: https://img.shields.io/npm/v/postcss-overflow-shorthand.svg [npm-url]: https://www.npmjs.com/package/postcss-overflow-shorthand -[CSS Overflow]: https://drafts.csswg.org/css-overflow/#propdef-overflow [Gulp PostCSS]: https://github.com/postcss/gulp-postcss [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss [PostCSS Loader]: https://github.com/postcss/postcss-loader [PostCSS Overflow Shorthand]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-overflow-shorthand +[CSS Overflow]: https://drafts.csswg.org/css-overflow/#propdef-overflow diff --git a/plugins/postcss-overflow-shorthand/docs/README.md b/plugins/postcss-overflow-shorthand/docs/README.md new file mode 100644 index 000000000..e0a16079b --- /dev/null +++ b/plugins/postcss-overflow-shorthand/docs/README.md @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + +

+ +[] lets you use the `overflow` shorthand in CSS, +following the [CSS Overflow] specification. + +```pcss + + +/* becomes */ + + +``` + + + + + +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is preserved. + +```js +({ preserve: false }) +``` + +```pcss + + +/* becomes */ + + +``` + + +[CSS Overflow]: diff --git a/plugins/postcss-overflow-shorthand/package.json b/plugins/postcss-overflow-shorthand/package.json index 5a86b5328..58ae55654 100644 --- a/plugins/postcss-overflow-shorthand/package.json +++ b/plugins/postcss-overflow-shorthand/package.json @@ -2,7 +2,21 @@ "name": "postcss-overflow-shorthand", "description": "Use the overflow shorthand in CSS", "version": "3.0.4", - "author": "Jonathan Neal ", + "contributors": [ + { + "name": "Antonio Laguna", + "email": "antonio@laguna.es", + "url": "https://antonio.laguna.es" + }, + { + "name": "Jonathan Neal", + "email": "jonathantneal@hotmail.com" + }, + { + "name": "Romain Menke", + "email": "romainmenke@gmail.com" + } + ], "license": "CC0-1.0", "funding": { "type": "opencollective", @@ -13,6 +27,7 @@ }, "main": "dist/index.cjs", "module": "dist/index.mjs", + "types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.mjs", @@ -35,7 +50,7 @@ "scripts": { "build": "rollup -c ../../rollup/default.mjs", "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", - "docs": "node ../../.github/bin/generate-docs/install.mjs", + "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs", "lint": "npm run lint:eslint && npm run lint:package-json", "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", "lint:package-json": "node ../../.github/bin/format-package-json.mjs", @@ -61,8 +76,10 @@ "values" ], "csstools": { + "cssdbId": "overflow-property", "exportName": "postcssOverflowShorthand", - "humanReadableName": "PostCSS Overflow Shorthand" + "humanReadableName": "PostCSS Overflow Shorthand", + "specUrl": "https://drafts.csswg.org/css-overflow/#propdef-overflow" }, "volta": { "extends": "../../package.json" diff --git a/plugins/postcss-overflow-shorthand/src/index.js b/plugins/postcss-overflow-shorthand/src/index.ts similarity index 71% rename from plugins/postcss-overflow-shorthand/src/index.js rename to plugins/postcss-overflow-shorthand/src/index.ts index e86822bb8..7e31901d7 100644 --- a/plugins/postcss-overflow-shorthand/src/index.js +++ b/plugins/postcss-overflow-shorthand/src/index.ts @@ -1,12 +1,25 @@ -// overflow shorthand property matcher +import type { PluginCreator } from 'postcss'; import valueParser from 'postcss-value-parser'; -const creator = opts => { - const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true; +/** postcss-overflow-shorthand plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, +}; + +const creator: PluginCreator = (opts?: pluginOptions) => { + const options = Object.assign( + // Default options + { + preserve: true, + }, + // Provided options + opts, + ); return { postcssPlugin: 'postcss-overflow-shorthand', - Declaration: (decl, {result}) => { + Declaration: (decl, { result }) => { if (decl.prop.toLowerCase() !== 'overflow') { return; } @@ -27,7 +40,7 @@ const creator = opts => { xValue = valueParser.stringify(relevantNodes[0]); yValue = valueParser.stringify(relevantNodes[1]); - } catch(err) { + } catch (err) { decl.warn( result, `Failed to parse value '${originalValue}' as a shorthand for "overflow". Leaving the original value intact.`, @@ -56,7 +69,7 @@ const creator = opts => { }); } - if (!preserve) { + if (!options.preserve) { decl.remove(); } }, diff --git a/plugins/postcss-overflow-shorthand/test/examples/example.css b/plugins/postcss-overflow-shorthand/test/examples/example.css new file mode 100644 index 000000000..261109cb6 --- /dev/null +++ b/plugins/postcss-overflow-shorthand/test/examples/example.css @@ -0,0 +1,3 @@ +html { + overflow: hidden auto; +} diff --git a/plugins/postcss-overflow-shorthand/test/examples/example.expect.css b/plugins/postcss-overflow-shorthand/test/examples/example.expect.css new file mode 100644 index 000000000..6aa1a6929 --- /dev/null +++ b/plugins/postcss-overflow-shorthand/test/examples/example.expect.css @@ -0,0 +1,5 @@ +html { + overflow-x: hidden; + overflow-y: auto; + overflow: hidden auto; +} diff --git a/plugins/postcss-overflow-shorthand/test/examples/example.preserve-false.expect.css b/plugins/postcss-overflow-shorthand/test/examples/example.preserve-false.expect.css new file mode 100644 index 000000000..fefd163df --- /dev/null +++ b/plugins/postcss-overflow-shorthand/test/examples/example.preserve-false.expect.css @@ -0,0 +1,4 @@ +html { + overflow-x: hidden; + overflow-y: auto; +} diff --git a/plugins/postcss-overflow-shorthand/tsconfig.json b/plugins/postcss-overflow-shorthand/tsconfig.json new file mode 100644 index 000000000..e0d06239c --- /dev/null +++ b/plugins/postcss-overflow-shorthand/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "declarationDir": "." + }, + "include": ["./src/**/*"], + "exclude": ["dist"], +} From d9fe5212259811271b0ea24008a320aead64ae5f Mon Sep 17 00:00:00 2001 From: romainmenke Date: Fri, 18 Nov 2022 16:08:11 +0100 Subject: [PATCH 10/23] postcss-place --- plugins/postcss-place/.gitignore | 9 +--- plugins/postcss-place/.tape.mjs | 9 ++++ plugins/postcss-place/README.md | 52 +++++++++--------- plugins/postcss-place/docs/README.md | 54 +++++++++++++++++++ plugins/postcss-place/package.json | 23 ++++++-- plugins/postcss-place/src/index.js | 22 -------- plugins/postcss-place/src/index.ts | 34 ++++++++++++ ...nCSSDeclaration.js => onCSSDeclaration.ts} | 6 +-- plugins/postcss-place/src/options.js | 4 -- .../postcss-place/test/examples/example.css | 4 ++ .../test/examples/example.expect.css | 8 +++ .../example.preserve-false.expect.css | 6 +++ plugins/postcss-place/tsconfig.json | 9 ++++ 13 files changed, 173 insertions(+), 67 deletions(-) create mode 100644 plugins/postcss-place/docs/README.md delete mode 100644 plugins/postcss-place/src/index.js create mode 100644 plugins/postcss-place/src/index.ts rename plugins/postcss-place/src/{onCSSDeclaration.js => onCSSDeclaration.ts} (86%) delete mode 100644 plugins/postcss-place/src/options.js create mode 100644 plugins/postcss-place/test/examples/example.css create mode 100644 plugins/postcss-place/test/examples/example.expect.css create mode 100644 plugins/postcss-place/test/examples/example.preserve-false.expect.css create mode 100644 plugins/postcss-place/tsconfig.json diff --git a/plugins/postcss-place/.gitignore b/plugins/postcss-place/.gitignore index e66299113..87d32f2f5 100644 --- a/plugins/postcss-place/.gitignore +++ b/plugins/postcss-place/.gitignore @@ -1,14 +1,7 @@ node_modules -dist package-lock.json yarn.lock -*.log* *.result.css *.result.css.map *.result.html -!.editorconfig -!.gitignore -!.rollup.js -!.tape.js -!.travis.yml -!.github +dist/* diff --git a/plugins/postcss-place/.tape.mjs b/plugins/postcss-place/.tape.mjs index e5f37a7a0..66c4e3fa7 100644 --- a/plugins/postcss-place/.tape.mjs +++ b/plugins/postcss-place/.tape.mjs @@ -23,4 +23,13 @@ postcssTape(plugin)({ preserve: true } }, + 'examples/example': { + message: 'minimal example', + }, + 'examples/example:preserve-false': { + message: 'minimal example', + options: { + preserve: false + } + }, }); diff --git a/plugins/postcss-place/README.md b/plugins/postcss-place/README.md index 87d74035d..b0dffb4de 100644 --- a/plugins/postcss-place/README.md +++ b/plugins/postcss-place/README.md @@ -1,28 +1,25 @@ # PostCSS Place Properties [][postcss] -[][npm-url] -[][css-url] -[][cli-url] -[][discord] +[][npm-url] [][css-url] [][cli-url] [][discord] [PostCSS Place Properties] lets you use `place-*` properties as shorthands for `align-*` and `justify-*`, following the [CSS Box Alignment] specification. ```pcss .example { - place-self: center; - place-content: space-between center; + place-self: center; + place-content: space-between center; } /* becomes */ .example { - align-self: center; - justify-self: center; - place-self: center; - align-content: space-between; - justify-content: center; - place-content: space-between center; + align-self: center; + justify-self: center; + place-self: center; + align-content: space-between; + justify-content: center; + place-content: space-between center; } ``` @@ -37,25 +34,26 @@ npm install postcss postcss-place --save-dev Use it as a [PostCSS] plugin: ```js -import postcss from 'postcss'; -import postcssPlace from 'postcss-place'; +const postcss = require('postcss'); +const postcssPlace = require('postcss-place'); postcss([ - postcssPlace(/* pluginOptions */) + postcssPlace(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` -[PostCSS Place Properties] runs in all Node environments, with special instructions for: +[PostCSS Place Properties] runs in all Node environments, with special +instructions for: -| [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | -| --- | --- | --- | --- | --- | +| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | +| --- | --- | --- | --- | --- | --- | ## Options ### preserve -The `preserve` option determines whether the original place declaration is -preserved. By default, it is preserved. +The `preserve` option determines whether the original notation +is preserved. By default, it is preserved. ```js postcssPlace({ preserve: false }) @@ -63,17 +61,17 @@ postcssPlace({ preserve: false }) ```pcss .example { - place-self: center; - place-content: space-between center; + place-self: center; + place-content: space-between center; } /* becomes */ .example { - align-self: center; - justify-self: center; - align-content: space-between; - justify-content: center; + align-self: center; + justify-self: center; + align-content: space-between; + justify-content: center; } ``` @@ -82,9 +80,9 @@ postcssPlace({ preserve: false }) [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-place -[CSS Box Alignment]: https://www.w3.org/TR/css-align-3/#place-content [Gulp PostCSS]: https://github.com/postcss/gulp-postcss [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss [PostCSS Loader]: https://github.com/postcss/postcss-loader [PostCSS Place Properties]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-place +[CSS Box Alignment]: https://www.w3.org/TR/css-align-3/#place-content diff --git a/plugins/postcss-place/docs/README.md b/plugins/postcss-place/docs/README.md new file mode 100644 index 000000000..ac2393244 --- /dev/null +++ b/plugins/postcss-place/docs/README.md @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + +

+ +[] lets you use `place-*` properties as shorthands for `align-*` +and `justify-*`, following the [CSS Box Alignment] specification. + +```pcss + + +/* becomes */ + + +``` + + + + + +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is preserved. + +```js +({ preserve: false }) +``` + +```pcss + + +/* becomes */ + + +``` + + +[CSS Box Alignment]: diff --git a/plugins/postcss-place/package.json b/plugins/postcss-place/package.json index 6d912b9c6..837335638 100644 --- a/plugins/postcss-place/package.json +++ b/plugins/postcss-place/package.json @@ -2,7 +2,21 @@ "name": "postcss-place", "description": "Use a place-* shorthand for align-* and justify-* in CSS", "version": "7.0.5", - "author": "Jonathan Neal ", + "contributors": [ + { + "name": "Antonio Laguna", + "email": "antonio@laguna.es", + "url": "https://antonio.laguna.es" + }, + { + "name": "Jonathan Neal", + "email": "jonathantneal@hotmail.com" + }, + { + "name": "Romain Menke", + "email": "romainmenke@gmail.com" + } + ], "license": "CC0-1.0", "funding": { "type": "opencollective", @@ -13,6 +27,7 @@ }, "main": "dist/index.cjs", "module": "dist/index.mjs", + "types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.mjs", @@ -35,7 +50,7 @@ "scripts": { "build": "rollup -c ../../rollup/default.mjs", "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", - "docs": "node ../../.github/bin/generate-docs/install.mjs", + "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs", "lint": "npm run lint:eslint && npm run lint:package-json", "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", "lint:package-json": "node ../../.github/bin/format-package-json.mjs", @@ -64,8 +79,10 @@ "shorthands" ], "csstools": { + "cssdbId": "place-properties", "exportName": "postcssPlace", - "humanReadableName": "PostCSS Place Properties" + "humanReadableName": "PostCSS Place Properties", + "specUrl": "https://www.w3.org/TR/css-align-3/#place-content" }, "volta": { "extends": "../../package.json" diff --git a/plugins/postcss-place/src/index.js b/plugins/postcss-place/src/index.js deleted file mode 100644 index fc140a6a7..000000000 --- a/plugins/postcss-place/src/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import options from './options'; -import onCSSDeclaration, { placeMatch } from './onCSSDeclaration'; - -const creator = opts => { - // prepare options - if ('preserve' in Object(opts)) { - options.preserve = Boolean(opts.preserve); - } - - return { - postcssPlugin: 'postcss-place', - Declaration: (decl, { result }) => { - if (placeMatch.test(decl.prop.toLowerCase())) { - onCSSDeclaration(decl, { result }); - } - }, - }; -}; - -creator.postcss = true; - -export default creator; diff --git a/plugins/postcss-place/src/index.ts b/plugins/postcss-place/src/index.ts new file mode 100644 index 000000000..d2adb2c3c --- /dev/null +++ b/plugins/postcss-place/src/index.ts @@ -0,0 +1,34 @@ +import type { PluginCreator } from 'postcss'; +import { onCSSDeclaration, placeMatch } from './onCSSDeclaration'; + +/** postcss-place plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, +}; + +const creator: PluginCreator = (opts?: pluginOptions) => { + const options = Object.assign( + // Default options + { + preserve: true, + }, + // Provided options + opts, + ); + + return { + postcssPlugin: 'postcss-place', + Declaration: (decl, { result }) => { + if (!placeMatch.test(decl.prop.toLowerCase())) { + return; + } + + onCSSDeclaration(decl, result, options); + }, + }; +}; + +creator.postcss = true; + +export default creator; diff --git a/plugins/postcss-place/src/onCSSDeclaration.js b/plugins/postcss-place/src/onCSSDeclaration.ts similarity index 86% rename from plugins/postcss-place/src/onCSSDeclaration.js rename to plugins/postcss-place/src/onCSSDeclaration.ts index 6986f470f..36cab04a5 100644 --- a/plugins/postcss-place/src/onCSSDeclaration.js +++ b/plugins/postcss-place/src/onCSSDeclaration.ts @@ -1,7 +1,7 @@ +import type { Declaration, Result } from 'postcss'; import valueParser from 'postcss-value-parser'; -import options from './options'; -export default (decl, { result }) => { +export function onCSSDeclaration(decl: Declaration, result: Result , options: { preserve: boolean }) { // alignment const alignment = decl.prop.toLowerCase().match(placeMatch)[1]; @@ -47,6 +47,6 @@ export default (decl, { result }) => { if (!options.preserve) { decl.remove(); } -}; +} export const placeMatch = /^place-(content|items|self)/; diff --git a/plugins/postcss-place/src/options.js b/plugins/postcss-place/src/options.js deleted file mode 100644 index 484ccd4a4..000000000 --- a/plugins/postcss-place/src/options.js +++ /dev/null @@ -1,4 +0,0 @@ -export default { - /** Whether to preserve the original place value. */ - preserve: true, -}; diff --git a/plugins/postcss-place/test/examples/example.css b/plugins/postcss-place/test/examples/example.css new file mode 100644 index 000000000..fb1132fb3 --- /dev/null +++ b/plugins/postcss-place/test/examples/example.css @@ -0,0 +1,4 @@ +.example { + place-self: center; + place-content: space-between center; +} diff --git a/plugins/postcss-place/test/examples/example.expect.css b/plugins/postcss-place/test/examples/example.expect.css new file mode 100644 index 000000000..5c5a01e68 --- /dev/null +++ b/plugins/postcss-place/test/examples/example.expect.css @@ -0,0 +1,8 @@ +.example { + align-self: center; + justify-self: center; + place-self: center; + align-content: space-between; + justify-content: center; + place-content: space-between center; +} diff --git a/plugins/postcss-place/test/examples/example.preserve-false.expect.css b/plugins/postcss-place/test/examples/example.preserve-false.expect.css new file mode 100644 index 000000000..404100097 --- /dev/null +++ b/plugins/postcss-place/test/examples/example.preserve-false.expect.css @@ -0,0 +1,6 @@ +.example { + align-self: center; + justify-self: center; + align-content: space-between; + justify-content: center; +} diff --git a/plugins/postcss-place/tsconfig.json b/plugins/postcss-place/tsconfig.json new file mode 100644 index 000000000..e0d06239c --- /dev/null +++ b/plugins/postcss-place/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "declarationDir": "." + }, + "include": ["./src/**/*"], + "exclude": ["dist"], +} From f1c9e1537cdd934effaa6e2c3f73fd04349f817a Mon Sep 17 00:00:00 2001 From: romainmenke Date: Fri, 18 Nov 2022 16:11:22 +0100 Subject: [PATCH 11/23] fix --- plugins/postcss-place/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/postcss-place/CHANGELOG.md b/plugins/postcss-place/CHANGELOG.md index d074967a1..dd3394fb7 100644 --- a/plugins/postcss-place/CHANGELOG.md +++ b/plugins/postcss-place/CHANGELOG.md @@ -3,6 +3,7 @@ ### Unreleased (major) - Updated: Support for Node v14+ (major). +- Added: typescript support. ### 7.0.5 (July 8, 2022) From 73d79a2c2e5eb52fedacf55191bad879932dfe68 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Fri, 18 Nov 2022 19:48:00 +0100 Subject: [PATCH 12/23] postcss-pseudo-class-any-link --- .../postcss-pseudo-class-any-link/.gitignore | 9 +-- .../postcss-pseudo-class-any-link/.tape.mjs | 17 ++++ .../postcss-pseudo-class-any-link/README.md | 50 +++++------- .../docs/README.md | 79 +++++++++++++++++++ .../package.json | 23 +++++- .../src/{index.js => index.ts} | 19 +++-- ...eplace-any-link.js => replace-any-link.ts} | 31 ++++---- .../examples/example.area-false.expect.css | 6 ++ .../test/examples/example.css | 3 + .../test/examples/example.expect.css | 6 ++ .../example.preserve-false.expect.css | 3 + .../tsconfig.json | 9 +++ 12 files changed, 192 insertions(+), 63 deletions(-) create mode 100644 plugins/postcss-pseudo-class-any-link/docs/README.md rename plugins/postcss-pseudo-class-any-link/src/{index.js => index.ts} (64%) rename plugins/postcss-pseudo-class-any-link/src/{replace-any-link.js => replace-any-link.ts} (78%) create mode 100644 plugins/postcss-pseudo-class-any-link/test/examples/example.area-false.expect.css create mode 100644 plugins/postcss-pseudo-class-any-link/test/examples/example.css create mode 100644 plugins/postcss-pseudo-class-any-link/test/examples/example.expect.css create mode 100644 plugins/postcss-pseudo-class-any-link/test/examples/example.preserve-false.expect.css create mode 100644 plugins/postcss-pseudo-class-any-link/tsconfig.json diff --git a/plugins/postcss-pseudo-class-any-link/.gitignore b/plugins/postcss-pseudo-class-any-link/.gitignore index e66299113..87d32f2f5 100644 --- a/plugins/postcss-pseudo-class-any-link/.gitignore +++ b/plugins/postcss-pseudo-class-any-link/.gitignore @@ -1,14 +1,7 @@ node_modules -dist package-lock.json yarn.lock -*.log* *.result.css *.result.css.map *.result.html -!.editorconfig -!.gitignore -!.rollup.js -!.tape.js -!.travis.yml -!.github +dist/* diff --git a/plugins/postcss-pseudo-class-any-link/.tape.mjs b/plugins/postcss-pseudo-class-any-link/.tape.mjs index f599102f4..f104f7bb5 100644 --- a/plugins/postcss-pseudo-class-any-link/.tape.mjs +++ b/plugins/postcss-pseudo-class-any-link/.tape.mjs @@ -36,4 +36,21 @@ postcssTape(plugin)({ } } }, + 'examples/example': { + message: 'minimal example', + }, + 'examples/example:preserve-false': { + message: 'minimal example', + options: { + preserve: false + } + }, + 'examples/example:area-false': { + message: 'minimal example', + options: { + subFeatures: { + areaHrefNeedsFixing: true + } + } + }, }); diff --git a/plugins/postcss-pseudo-class-any-link/README.md b/plugins/postcss-pseudo-class-any-link/README.md index fe0ecb2ad..6c8ad5927 100644 --- a/plugins/postcss-pseudo-class-any-link/README.md +++ b/plugins/postcss-pseudo-class-any-link/README.md @@ -1,37 +1,25 @@ # PostCSS Pseudo Class Any Link [][postcss] -[![NPM Version][npm-img]][npm-url] -[![CSS Standard Status][css-img]][css-url] -[![Build Status][cli-img]][cli-url] -[][discord] +[][npm-url] [][css-url] [][cli-url] [][discord] [PostCSS Pseudo Class Any Link] lets you `:any-link` pseudo-class in CSS, following the [Selectors] specification. ```pcss nav :any-link > span { - background-color: yellow; + background-color: yellow; } /* becomes */ nav :link > span, nav :visited > span { - background-color: yellow; + background-color: yellow; } - nav :any-link > span { - background-color: yellow; + background-color: yellow; } ``` -From the [proposal][Selectors]: - -> The `:any-link` pseudo-class represents an element that acts as the source - anchor of a hyperlink. It matches an element if the element would match - `:link` or `:visited`. - -[](https://caniuse.com/#feat=css-any-link) - ## Usage Add [PostCSS Pseudo Class Any Link] to your project: @@ -40,14 +28,14 @@ Add [PostCSS Pseudo Class Any Link] to your project: npm install postcss postcss-pseudo-class-any-link --save-dev ``` -Use [PostCSS Pseudo Class Any Link] as a [PostCSS] plugin: +Use it as a [PostCSS] plugin: ```js const postcss = require('postcss'); const postcssPseudoClassAnyLink = require('postcss-pseudo-class-any-link'); postcss([ - postcssPseudoClassAnyLink(/* pluginOptions */) + postcssPseudoClassAnyLink(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -61,8 +49,8 @@ instructions for: ### preserve -The `preserve` option determines whether the original `:any-link` rule is -preserved. By default, it is preserved. +The `preserve` option determines whether the original notation +is preserved. By default, it is preserved. ```js postcssPseudoClassAnyLink({ preserve: false }) @@ -70,13 +58,13 @@ postcssPseudoClassAnyLink({ preserve: false }) ```pcss nav :any-link > span { - background-color: yellow; + background-color: yellow; } /* becomes */ nav :link > span, nav :visited > span { - background-color: yellow; + background-color: yellow; } ``` @@ -91,30 +79,30 @@ _This increased CSS bundle size and is disabled by default._ ```js postcssPseudoClassAnyLink({ - subFeatures: { - areaHrefNeedsFixing: true - } + subFeatures: { + areaHrefNeedsFixing: true + } }) ``` ```pcss nav :any-link > span { - background-color: yellow; + background-color: yellow; } /* becomes */ -nav :link > span, nav :visited > span, area[href] > span { - background-color: yellow; +nav :link > span, nav :visited > span, nav area[href] > span { + background-color: yellow; +} +nav :any-link > span { + background-color: yellow; } ``` -[cli-img]: https://github.com/csstools/postcss-plugins/workflows/test/badge.svg [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test -[css-img]: https://cssdb.org/images/badges/any-link-pseudo-class.svg [css-url]: https://cssdb.org/#any-link-pseudo-class [discord]: https://discord.gg/bUadyRwkJS -[npm-img]: https://img.shields.io/npm/v/postcss-pseudo-class-any-link.svg [npm-url]: https://www.npmjs.com/package/postcss-pseudo-class-any-link [Gulp PostCSS]: https://github.com/postcss/gulp-postcss diff --git a/plugins/postcss-pseudo-class-any-link/docs/README.md b/plugins/postcss-pseudo-class-any-link/docs/README.md new file mode 100644 index 000000000..43b5161bf --- /dev/null +++ b/plugins/postcss-pseudo-class-any-link/docs/README.md @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + +

+ +[] lets you `:any-link` pseudo-class in CSS, +following the [Selectors] specification. + +```pcss + + +/* becomes */ + + +``` + + + + + +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is preserved. + +```js +({ preserve: false }) +``` + +```pcss + + +/* becomes */ + + +``` + +### subFeatures + +#### areaHrefNeedsFixing + +The `subFeatures.areaHrefNeedsFixing` option determines if `` elements should match `:any-link` pseudo-class.
+In IE and Edge these do not match `:link` or `:visited`. + +_This increased CSS bundle size and is disabled by default._ + +```js +({ + subFeatures: { + areaHrefNeedsFixing: true + } +}) +``` + +```pcss + + +/* becomes */ + + +``` + + +[Selectors]: diff --git a/plugins/postcss-pseudo-class-any-link/package.json b/plugins/postcss-pseudo-class-any-link/package.json index 91f42060a..a40e376fb 100644 --- a/plugins/postcss-pseudo-class-any-link/package.json +++ b/plugins/postcss-pseudo-class-any-link/package.json @@ -2,7 +2,21 @@ "name": "postcss-pseudo-class-any-link", "description": "Use the :any-link pseudo-class in CSS", "version": "7.1.6", - "author": "Jonathan Neal ", + "contributors": [ + { + "name": "Antonio Laguna", + "email": "antonio@laguna.es", + "url": "https://antonio.laguna.es" + }, + { + "name": "Jonathan Neal", + "email": "jonathantneal@hotmail.com" + }, + { + "name": "Romain Menke", + "email": "romainmenke@gmail.com" + } + ], "license": "CC0-1.0", "funding": { "type": "opencollective", @@ -13,6 +27,7 @@ }, "main": "dist/index.cjs", "module": "dist/index.mjs", + "types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.mjs", @@ -35,7 +50,7 @@ "scripts": { "build": "rollup -c ../../rollup/default.mjs", "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", - "docs": "node ../../.github/bin/generate-docs/install.mjs", + "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs", "lint": "npm run lint:eslint && npm run lint:package-json", "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", "lint:package-json": "node ../../.github/bin/format-package-json.mjs", @@ -64,8 +79,10 @@ "visited" ], "csstools": { + "cssdbId": "any-link-pseudo-class", "exportName": "postcssPseudoClassAnyLink", - "humanReadableName": "PostCSS Pseudo Class Any Link" + "humanReadableName": "PostCSS Pseudo Class Any Link", + "specUrl": "https://www.w3.org/TR/selectors-4/#the-any-link-pseudo" }, "volta": { "extends": "../../package.json" diff --git a/plugins/postcss-pseudo-class-any-link/src/index.js b/plugins/postcss-pseudo-class-any-link/src/index.ts similarity index 64% rename from plugins/postcss-pseudo-class-any-link/src/index.js rename to plugins/postcss-pseudo-class-any-link/src/index.ts index 1d15aae3a..d1e5d1869 100644 --- a/plugins/postcss-pseudo-class-any-link/src/index.js +++ b/plugins/postcss-pseudo-class-any-link/src/index.ts @@ -1,10 +1,17 @@ +import type { PluginCreator } from 'postcss'; import { replaceAnyLink } from './replace-any-link'; -/** - * @param {{preserve?: boolean, subFeatures?: { areaHrefNeedsFixing?: boolean }}} opts - * @returns {import('postcss').Plugin} - */ -function creator(opts) { +/** postcss-pseudo-class-any-link plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, + /** Add an extra fallback for the "" element in IE and Edge. default: false */ + subFeatures?: { + areaHrefNeedsFixing?: boolean + }, +}; + +const creator: PluginCreator = (opts?: pluginOptions) => { const options = { preserve: true, ...opts, @@ -32,7 +39,7 @@ function creator(opts) { replaceAnyLink(rule, result, options.preserve, subFeatures.areaHrefNeedsFixing); }, }; -} +}; creator.postcss = true; diff --git a/plugins/postcss-pseudo-class-any-link/src/replace-any-link.js b/plugins/postcss-pseudo-class-any-link/src/replace-any-link.ts similarity index 78% rename from plugins/postcss-pseudo-class-any-link/src/replace-any-link.js rename to plugins/postcss-pseudo-class-any-link/src/replace-any-link.ts index c92d76ebd..8d6dd214a 100644 --- a/plugins/postcss-pseudo-class-any-link/src/replace-any-link.js +++ b/plugins/postcss-pseudo-class-any-link/src/replace-any-link.ts @@ -1,3 +1,4 @@ +import type { Result, Rule } from 'postcss'; import parser from 'postcss-selector-parser'; const linkAST = parser().astSync(':link').nodes[0]; @@ -5,9 +6,9 @@ const visitedAST = parser().astSync(':visited').nodes[0]; const areaHrefAST = parser().astSync('area[href]').nodes[0]; const hrefAST = parser().astSync('[href]').nodes[0]; -export function replaceAnyLink(rule, result, preserve, areaHrefNeedsFixing) { - let updatedSelectors = []; - let untouchedSelectors = []; +export function replaceAnyLink(rule: Rule, result: Result, preserve: boolean, areaHrefNeedsFixing: boolean) { + const updatedSelectors = []; + const untouchedSelectors = []; try { for (let i = 0; i < rule.selectors.length; i++) { @@ -45,43 +46,43 @@ export function replaceAnyLink(rule, result, preserve, areaHrefNeedsFixing) { } function modifiedSelector(selector, areaHrefNeedsFixing) { - let out = []; + const out = []; // update the selector parser((selectorsAST) => { - let replacements = []; + const replacements = []; selectorsAST.walkPseudos((pseudo) => { if (pseudo.value.toLowerCase() !== ':any-link' || (pseudo.nodes && pseudo.nodes.length)) { return; } if (!areaHrefNeedsFixing) { - replacements.push([linkAST.clone(), visitedAST.clone()]); + replacements.push([linkAST.clone({}), visitedAST.clone({})]); return; } const tags = getTagElementsNextToPseudo(pseudo); if (tags.includes('area')) { - replacements.push([linkAST.clone(), visitedAST.clone(), hrefAST.clone()]); + replacements.push([linkAST.clone({}), visitedAST.clone({}), hrefAST.clone({})]); return; } if (tags.length) { - replacements.push([linkAST.clone(), visitedAST.clone()]); + replacements.push([linkAST.clone({}), visitedAST.clone({})]); return; } - replacements.push([linkAST.clone(), visitedAST.clone(), areaHrefAST.clone()]); + replacements.push([linkAST.clone({}), visitedAST.clone({}), areaHrefAST.clone({})]); }); if (!replacements.length) { return; } - let replacementsCartesianProduct = cartesianProduct(...replacements); + const replacementsCartesianProduct = cartesianProduct(...replacements); replacementsCartesianProduct.forEach((replacement) => { - const clone = selectorsAST.clone(); + const clone = selectorsAST.clone({}) as parser.Selector; clone.walkPseudos((pseudo) => { if (pseudo.value.toLowerCase() !== ':any-link' || (pseudo.nodes && pseudo.nodes.length)) { return; @@ -98,7 +99,7 @@ function modifiedSelector(selector, areaHrefNeedsFixing) { return out; } -function cartesianProduct(...args) { +function cartesianProduct(...args: Array>): Array> { const r = []; const max = args.length - 1; @@ -117,8 +118,8 @@ function cartesianProduct(...args) { return r; } -function getTagElementsNextToPseudo(pseudo) { - let tags = []; +function getTagElementsNextToPseudo(pseudo: parser.Pseudo) { + const tags = []; let prev = pseudo.prev(); while (prev) { @@ -152,7 +153,7 @@ function getTagElementsNextToPseudo(pseudo) { // Inserts a node around a given node. // - in the same compound selector // - try to keep the result serializable without side effects -function insertNode(container, aroundNode, node) { +function insertNode(container: parser.Container, aroundNode: parser.Node, node: parser.Node) { let type = node.type; if (node.type === 'selector' && node.nodes && node.nodes.length) { type = node.nodes[0].type; diff --git a/plugins/postcss-pseudo-class-any-link/test/examples/example.area-false.expect.css b/plugins/postcss-pseudo-class-any-link/test/examples/example.area-false.expect.css new file mode 100644 index 000000000..0cc393465 --- /dev/null +++ b/plugins/postcss-pseudo-class-any-link/test/examples/example.area-false.expect.css @@ -0,0 +1,6 @@ +nav :link > span, nav :visited > span, nav area[href] > span { + background-color: yellow; +} +nav :any-link > span { + background-color: yellow; +} diff --git a/plugins/postcss-pseudo-class-any-link/test/examples/example.css b/plugins/postcss-pseudo-class-any-link/test/examples/example.css new file mode 100644 index 000000000..5a15a3687 --- /dev/null +++ b/plugins/postcss-pseudo-class-any-link/test/examples/example.css @@ -0,0 +1,3 @@ +nav :any-link > span { + background-color: yellow; +} diff --git a/plugins/postcss-pseudo-class-any-link/test/examples/example.expect.css b/plugins/postcss-pseudo-class-any-link/test/examples/example.expect.css new file mode 100644 index 000000000..efe66f229 --- /dev/null +++ b/plugins/postcss-pseudo-class-any-link/test/examples/example.expect.css @@ -0,0 +1,6 @@ +nav :link > span, nav :visited > span { + background-color: yellow; +} +nav :any-link > span { + background-color: yellow; +} diff --git a/plugins/postcss-pseudo-class-any-link/test/examples/example.preserve-false.expect.css b/plugins/postcss-pseudo-class-any-link/test/examples/example.preserve-false.expect.css new file mode 100644 index 000000000..097ed2b2c --- /dev/null +++ b/plugins/postcss-pseudo-class-any-link/test/examples/example.preserve-false.expect.css @@ -0,0 +1,3 @@ +nav :link > span, nav :visited > span { + background-color: yellow; +} diff --git a/plugins/postcss-pseudo-class-any-link/tsconfig.json b/plugins/postcss-pseudo-class-any-link/tsconfig.json new file mode 100644 index 000000000..e0d06239c --- /dev/null +++ b/plugins/postcss-pseudo-class-any-link/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "declarationDir": "." + }, + "include": ["./src/**/*"], + "exclude": ["dist"], +} From b362b71709c047df056ca20efc769692ccb4b024 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Fri, 18 Nov 2022 19:57:39 +0100 Subject: [PATCH 13/23] one more --- plugins/css-has-pseudo/README.md | 2 +- plugins/css-has-pseudo/docs/README.md | 2 +- plugins/css-has-pseudo/src/index.ts | 10 +++++++++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/plugins/css-has-pseudo/README.md b/plugins/css-has-pseudo/README.md index 0a2ce119a..6061d1e81 100644 --- a/plugins/css-has-pseudo/README.md +++ b/plugins/css-has-pseudo/README.md @@ -69,7 +69,7 @@ postcssHasPseudo({ preserve: false }) ### specificityMatchingName -The `specificityMatchingName` option allows you to change to selector that is used to adjust specificity. +The `specificityMatchingName` option allows you to change the selector that is used to adjust specificity. The default value is `does-not-exist`. If this is an actual class, id or tag name in your code, you will need to set a different option here. diff --git a/plugins/css-has-pseudo/docs/README.md b/plugins/css-has-pseudo/docs/README.md index 66592a64d..3e3b03787 100644 --- a/plugins/css-has-pseudo/docs/README.md +++ b/plugins/css-has-pseudo/docs/README.md @@ -51,7 +51,7 @@ is preserved. By default the original rules are preserved. ### specificityMatchingName -The `specificityMatchingName` option allows you to change to selector that is used to adjust specificity. +The `specificityMatchingName` option allows you to change the selector that is used to adjust specificity. The default value is `does-not-exist`. If this is an actual class, id or tag name in your code, you will need to set a different option here. diff --git a/plugins/css-has-pseudo/src/index.ts b/plugins/css-has-pseudo/src/index.ts index 40d784765..fd3137fea 100644 --- a/plugins/css-has-pseudo/src/index.ts +++ b/plugins/css-has-pseudo/src/index.ts @@ -4,7 +4,15 @@ import { selectorSpecificity } from '@csstools/selector-specificity'; import encodeCSS from './encode/encode.mjs'; import { isGuardedByAtSupportsFromAtRuleParams } from './is-guarded-by-at-supports.js'; -const creator: PluginCreator<{ preserve?: boolean, specificityMatchingName?: string }> = (opts?: { preserve?: boolean, specificityMatchingName?: string }) => { +/** css-blank-pseudo plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, + /** Change the selector that is used to adjust specificity. default: "does-not-exist" */ + specificityMatchingName?: string +}; + +const creator: PluginCreator = (opts?: pluginOptions) => { const options = { preserve: true, specificityMatchingName: 'does-not-exist', From 52dbbf32221a7f68c1753b9383f171bcf41c190d Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sat, 19 Nov 2022 16:10:48 +0100 Subject: [PATCH 14/23] more fixes and typings --- .../test/basic.preserve.true.expect.css | 8 ++ .../layers-basic.preserve.true.expect.css | 8 ++ plugins/css-has-pseudo/src/index.ts | 2 +- plugins/css-prefers-color-scheme/src/index.ts | 6 +- .../.tape.mjs | 12 +++ .../CHANGELOG.md | 1 + .../README.md | 26 ++++++ .../docs/README.md | 19 ++++ .../src/index.ts | 51 +++++++---- .../test/basic.css | 36 ++++++++ .../test/basic.expect.css | 34 ++++++++ .../test/basic.preserve-true.expect.css | 87 +++++++++++++++++++ .../examples/example.preserve-true.expect.css | 10 +-- plugins/postcss-cascade-layers/src/index.ts | 4 +- plugins/postcss-cascade-layers/src/options.ts | 4 + plugins/postcss-color-function/src/index.ts | 7 +- .../src/index.ts | 9 +- .../src/index.ts | 9 +- plugins/postcss-ic-unit/src/index.ts | 7 +- plugins/postcss-lab-function/src/index.ts | 9 +- plugins/postcss-oklab-function/src/index.ts | 9 +- 21 files changed, 320 insertions(+), 38 deletions(-) create mode 100644 plugins/postcss-attribute-case-insensitive/test/basic.preserve-true.expect.css 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 6f65e7061..1d2ce906e 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 @@ -259,6 +259,14 @@ h6.test-custom-selectors { order: 13; } +.test-case-insensitive-attributes[frame=hsides i] { + -webkit-box-ordinal-group: 14; + -webkit-order: 13; + -moz-box-ordinal-group: 14; + -ms-flex-order: 13; + order: 13; +} + .test-rebeccapurple-color { color: #639; color: rebeccapurple; diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css index f264bc048..05843f0d7 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css @@ -230,6 +230,14 @@ h6.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 13; } +.test-case-insensitive-attributes[frame=hsides i]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + -webkit-box-ordinal-group: 14; + -webkit-order: 13; + -moz-box-ordinal-group: 14; + -ms-flex-order: 13; + order: 13; +} + .test-rebeccapurple-color:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color: #639; color: rebeccapurple; diff --git a/plugins/css-has-pseudo/src/index.ts b/plugins/css-has-pseudo/src/index.ts index fd3137fea..571f94331 100644 --- a/plugins/css-has-pseudo/src/index.ts +++ b/plugins/css-has-pseudo/src/index.ts @@ -4,7 +4,7 @@ import { selectorSpecificity } from '@csstools/selector-specificity'; import encodeCSS from './encode/encode.mjs'; import { isGuardedByAtSupportsFromAtRuleParams } from './is-guarded-by-at-supports.js'; -/** css-blank-pseudo plugin options */ +/** css-has-pseudo plugin options */ export type pluginOptions = { /** Preserve the original notation. default: true */ preserve?: boolean, diff --git a/plugins/css-prefers-color-scheme/src/index.ts b/plugins/css-prefers-color-scheme/src/index.ts index 051659d3d..2257c4f10 100644 --- a/plugins/css-prefers-color-scheme/src/index.ts +++ b/plugins/css-prefers-color-scheme/src/index.ts @@ -5,7 +5,11 @@ const prefersInterfaceRegExp = /\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\ const colorDepthByStyle = { dark: '48842621', light: '70318723' }; const prefersInterfaceColorDepthReplacer = ($0, style) => `(color: ${colorDepthByStyle[style.toLowerCase()]})`; -type pluginOptions = { preserve?: boolean }; +/** postcss-prefers-color-scheme plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, +}; const creator: PluginCreator = (opts?: pluginOptions) => { const options = Object.assign( diff --git a/plugins/postcss-attribute-case-insensitive/.tape.mjs b/plugins/postcss-attribute-case-insensitive/.tape.mjs index a81bc8968..28cbbf3d8 100644 --- a/plugins/postcss-attribute-case-insensitive/.tape.mjs +++ b/plugins/postcss-attribute-case-insensitive/.tape.mjs @@ -5,6 +5,12 @@ postcssTape(plugin)({ basic: { message: "supports basic usage", }, + 'basic:preserve-true': { + message: 'supports { preserve: true } usage', + options: { + preserve: true + } + }, 'invalid-selector': { message: 'warns on invalid selectors', warnings: 1 @@ -12,4 +18,10 @@ postcssTape(plugin)({ 'examples/example': { message: 'minimal example', }, + 'examples/example:preserve-true': { + message: 'minimal example', + options: { + preserve: true + } + }, }); diff --git a/plugins/postcss-attribute-case-insensitive/CHANGELOG.md b/plugins/postcss-attribute-case-insensitive/CHANGELOG.md index d05779630..c02b2669e 100644 --- a/plugins/postcss-attribute-case-insensitive/CHANGELOG.md +++ b/plugins/postcss-attribute-case-insensitive/CHANGELOG.md @@ -4,6 +4,7 @@ - Updated: Support for Node v14+ (major). - Fix: Do not throw when a selector is invalid, show a warning instead. +- Added: `preserve` plugin option. ### 5.0.2 (July 8, 2022) diff --git a/plugins/postcss-attribute-case-insensitive/README.md b/plugins/postcss-attribute-case-insensitive/README.md index c32023217..a84c2ad0a 100644 --- a/plugins/postcss-attribute-case-insensitive/README.md +++ b/plugins/postcss-attribute-case-insensitive/README.md @@ -47,6 +47,32 @@ instructions for: - [Gulp](INSTALL.md#gulp) - [Grunt](INSTALL.md#grunt) +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is not preserved. + +```js +postcssAttributeCaseInsensitive({ preserve: true }) +``` + +```pcss +[frame=hsides i] { + border-style: solid none; +} + +/* becomes */ + +[frame=hsides],[frame=Hsides],[frame=hSides],[frame=HSides],[frame=hsIdes],[frame=HsIdes],[frame=hSIdes],[frame=HSIdes],[frame=hsiDes],[frame=HsiDes],[frame=hSiDes],[frame=HSiDes],[frame=hsIDes],[frame=HsIDes],[frame=hSIDes],[frame=HSIDes],[frame=hsidEs],[frame=HsidEs],[frame=hSidEs],[frame=HSidEs],[frame=hsIdEs],[frame=HsIdEs],[frame=hSIdEs],[frame=HSIdEs],[frame=hsiDEs],[frame=HsiDEs],[frame=hSiDEs],[frame=HSiDEs],[frame=hsIDEs],[frame=HsIDEs],[frame=hSIDEs],[frame=HSIDEs],[frame=hsideS],[frame=HsideS],[frame=hSideS],[frame=HSideS],[frame=hsIdeS],[frame=HsIdeS],[frame=hSIdeS],[frame=HSIdeS],[frame=hsiDeS],[frame=HsiDeS],[frame=hSiDeS],[frame=HSiDeS],[frame=hsIDeS],[frame=HsIDeS],[frame=hSIDeS],[frame=HSIDeS],[frame=hsidES],[frame=HsidES],[frame=hSidES],[frame=HSidES],[frame=hsIdES],[frame=HsIdES],[frame=hSIdES],[frame=HSIdES],[frame=hsiDES],[frame=HsiDES],[frame=hSiDES],[frame=HSiDES],[frame=hsIDES],[frame=HsIDES],[frame=hSIDES],[frame=HSIDES] { + border-style: solid none; +} +[frame=hsides i] { + border-style: solid none; +} +``` + [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test [css-url]: https://cssdb.org/#case-insensitive-attributes [discord]: https://discord.gg/bUadyRwkJS diff --git a/plugins/postcss-attribute-case-insensitive/docs/README.md b/plugins/postcss-attribute-case-insensitive/docs/README.md index 1558b2e94..97db3ccec 100644 --- a/plugins/postcss-attribute-case-insensitive/docs/README.md +++ b/plugins/postcss-attribute-case-insensitive/docs/README.md @@ -30,5 +30,24 @@ +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is not preserved. + +```js +({ preserve: true }) +``` + +```pcss + + +/* becomes */ + + +``` + [Case Insensitive Attribute]: diff --git a/plugins/postcss-attribute-case-insensitive/src/index.ts b/plugins/postcss-attribute-case-insensitive/src/index.ts index 710fec155..72baf9472 100644 --- a/plugins/postcss-attribute-case-insensitive/src/index.ts +++ b/plugins/postcss-attribute-case-insensitive/src/index.ts @@ -26,7 +26,7 @@ function transformString(strings, charPos, string) { return transformString(newStrings, charPos + 1, string); } -function createSensitiveAtributes(attribute) { +function createSensitiveAttributes(attribute) { const attributes = transformString([''], 0, attribute.value); return attributes.map(x => { const newAttribute = attribute.clone({ @@ -37,6 +37,7 @@ function createSensitiveAtributes(attribute) { insensitive: false, }); + newAttribute.raws.insensitiveFlag = undefined; newAttribute.setValue(x); return newAttribute; @@ -54,7 +55,7 @@ function createNewSelectors(selector) { return; } - const sensitiveAttributes = createSensitiveAtributes(node); + const sensitiveAttributes = createSensitiveAttributes(node); const newSelectorsWithSensitiveAttributes = []; sensitiveAttributes.forEach(newNode => { @@ -86,26 +87,46 @@ function transform(selectors) { } } -const creator: PluginCreator = () => { +/** postcss-prefers-color-scheme plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; + +const creator: PluginCreator = (opts?: pluginOptions) => { + const options = Object.assign( + // Default options + { + preserve: false, + }, + // Provided options + opts, + ); + return { postcssPlugin: 'postcss-attribute-case-insensitive', Rule(rule, { result }) { - if (rule.selector.includes('i]')) { + if (!(/i\s*]/gmi.test(rule.selector))) { + return; + } + + let modifiedSelector = rule.selector; - let modifiedSelector = rule.selector; + try { + modifiedSelector = selectorParser(transform).processSync(rule.selector); + } catch (err) { + rule.warn(result, `Failed to parse selector : "${rule.selector}" with message: "${err.message}"`); + return; + } - try { - modifiedSelector = selectorParser(transform).processSync(rule.selector); - } catch (err) { - rule.warn(result, `Failed to parse selector : "${rule.selector}" with message: "${err.message}"`); - return; - } + if (modifiedSelector === rule.selector) { + return; + } - if (modifiedSelector === rule.selector) { - return; - } + rule.cloneBefore({ selector: modifiedSelector }); - rule.replaceWith(rule.clone({ selector: modifiedSelector })); + if (!options.preserve) { + rule.remove(); } }, }; diff --git a/plugins/postcss-attribute-case-insensitive/test/basic.css b/plugins/postcss-attribute-case-insensitive/test/basic.css index 2668d384a..d6e722ff9 100644 --- a/plugins/postcss-attribute-case-insensitive/test/basic.css +++ b/plugins/postcss-attribute-case-insensitive/test/basic.css @@ -13,3 +13,39 @@ [foo=a i],[foobar=b],[bar=c i]{ order: 4; } + +[foo="a" i] { + order: 5.0; +} + +[foo="b" I] { + order: 5.1; +} + +[foo="c"i] { + /* https: //github.com/postcss/postcss-selector-parser/pull/267 */ + order: 5.2; +} + +[foo="d"I] { + /* https: //github.com/postcss/postcss-selector-parser/pull/267 */ + order: 5.3; +} + +[foo="e" i ] { + order: 5.4; +} + +[foo="f" I ] { + order: 5.5; +} + +[foo="g" i +] { + order: 5.6; +} + +[foo="h" I +] { + order: 5.7; +} diff --git a/plugins/postcss-attribute-case-insensitive/test/basic.expect.css b/plugins/postcss-attribute-case-insensitive/test/basic.expect.css index 6bebaa151..c5cb2b8f4 100644 --- a/plugins/postcss-attribute-case-insensitive/test/basic.expect.css +++ b/plugins/postcss-attribute-case-insensitive/test/basic.expect.css @@ -13,3 +13,37 @@ [foobar=b],[foo=a],[foo=A],[bar=c],[bar=C]{ order: 4; } + +[foo="a"],[foo="A"] { + order: 5.0; +} + +[foo="b"],[foo="B"] { + order: 5.1; +} + +[foo="c"i] { + /* https: //github.com/postcss/postcss-selector-parser/pull/267 */ + order: 5.2; +} + +[foo="d"I] { + /* https: //github.com/postcss/postcss-selector-parser/pull/267 */ + order: 5.3; +} + +[foo="e"],[foo="E"] { + order: 5.4; +} + +[foo="f"],[foo="F"] { + order: 5.5; +} + +[foo="g"],[foo="G"] { + order: 5.6; +} + +[foo="h"],[foo="H"] { + order: 5.7; +} diff --git a/plugins/postcss-attribute-case-insensitive/test/basic.preserve-true.expect.css b/plugins/postcss-attribute-case-insensitive/test/basic.preserve-true.expect.css new file mode 100644 index 000000000..60fc17689 --- /dev/null +++ b/plugins/postcss-attribute-case-insensitive/test/basic.preserve-true.expect.css @@ -0,0 +1,87 @@ +[data-foo=test],[data-foo=Test],[data-foo=tEst],[data-foo=TEst],[data-foo=teSt],[data-foo=TeSt],[data-foo=tESt],[data-foo=TESt],[data-foo=tesT],[data-foo=TesT],[data-foo=tEsT],[data-foo=TEsT],[data-foo=teST],[data-foo=TeST],[data-foo=tEST],[data-foo=TEST] { + order: 1; +} + +[data-foo=test i] { + order: 1; +} + +[foo="a b"],[foo="A b"],[foo="a B"],[foo="A B"] { + order: 2; +} + +[foo="a b" i] { + order: 2; +} + +[foo=a]{ + order: 3; +} + +[foobar=b],[foo=a],[foo=A],[bar=c],[bar=C]{ + order: 4; +} + +[foo=a i],[foobar=b],[bar=c i]{ + order: 4; +} + +[foo="a"],[foo="A"] { + order: 5.0; +} + +[foo="a" i] { + order: 5.0; +} + +[foo="b"],[foo="B"] { + order: 5.1; +} + +[foo="b" I] { + order: 5.1; +} + +[foo="c"i] { + /* https: //github.com/postcss/postcss-selector-parser/pull/267 */ + order: 5.2; +} + +[foo="d"I] { + /* https: //github.com/postcss/postcss-selector-parser/pull/267 */ + order: 5.3; +} + +[foo="e"],[foo="E"] { + order: 5.4; +} + +[foo="e" i ] { + order: 5.4; +} + +[foo="f"],[foo="F"] { + order: 5.5; +} + +[foo="f" I ] { + order: 5.5; +} + +[foo="g"],[foo="G"] { + order: 5.6; +} + +[foo="g" i +] { + order: 5.6; +} + +[foo="h"],[foo="H"] { + order: 5.7; +} + +[foo="h" I +] { + order: 5.7; +} diff --git a/plugins/postcss-attribute-case-insensitive/test/examples/example.preserve-true.expect.css b/plugins/postcss-attribute-case-insensitive/test/examples/example.preserve-true.expect.css index 8b020470a..66a294bd7 100644 --- a/plugins/postcss-attribute-case-insensitive/test/examples/example.preserve-true.expect.css +++ b/plugins/postcss-attribute-case-insensitive/test/examples/example.preserve-true.expect.css @@ -1,8 +1,6 @@ -.foo { - color: blue; - color: red; +[frame=hsides],[frame=Hsides],[frame=hSides],[frame=HSides],[frame=hsIdes],[frame=HsIdes],[frame=hSIdes],[frame=HSIdes],[frame=hsiDes],[frame=HsiDes],[frame=hSiDes],[frame=HSiDes],[frame=hsIDes],[frame=HsIDes],[frame=hSIDes],[frame=HSIDes],[frame=hsidEs],[frame=HsidEs],[frame=hSidEs],[frame=HSidEs],[frame=hsIdEs],[frame=HsIdEs],[frame=hSIdEs],[frame=HSIdEs],[frame=hsiDEs],[frame=HsiDEs],[frame=hSiDEs],[frame=HSiDEs],[frame=hsIDEs],[frame=HsIDEs],[frame=hSIDEs],[frame=HSIDEs],[frame=hsideS],[frame=HsideS],[frame=hSideS],[frame=HSideS],[frame=hsIdeS],[frame=HsIdeS],[frame=hSIdeS],[frame=HSIdeS],[frame=hsiDeS],[frame=HsiDeS],[frame=hSiDeS],[frame=HSiDeS],[frame=hsIDeS],[frame=HsIDeS],[frame=hSIDeS],[frame=HSIDeS],[frame=hsidES],[frame=HsidES],[frame=hSidES],[frame=HSidES],[frame=hsIdES],[frame=HsIdES],[frame=hSIdES],[frame=HSIdES],[frame=hsiDES],[frame=HsiDES],[frame=hSiDES],[frame=HSiDES],[frame=hsIDES],[frame=HsIDES],[frame=hSIDES],[frame=HSIDES] { + border-style: solid none; } - -.baz { - color: green; +[frame=hsides i] { + border-style: solid none; } diff --git a/plugins/postcss-cascade-layers/src/index.ts b/plugins/postcss-cascade-layers/src/index.ts index 4e0afd369..cc6273e3e 100644 --- a/plugins/postcss-cascade-layers/src/index.ts +++ b/plugins/postcss-cascade-layers/src/index.ts @@ -11,9 +11,11 @@ import { sortRootNodes } from './sort-root-nodes'; import { recordLayerOrder } from './record-layer-order'; import { ATRULES_WITH_NON_SELECTOR_BLOCK_LISTS, INVALID_LAYER_NAME } from './constants'; import { splitImportantStyles } from './split-important-styles'; -import { pluginOptions } from './options'; +import type { pluginOptions } from './options'; import { isProcessableLayerRule } from './is-processable-layer-rule'; +export type { pluginOptions } from './options'; + const creator: PluginCreator = (opts?: pluginOptions) => { const options = Object.assign({ onRevertLayerKeyword: 'warn', diff --git a/plugins/postcss-cascade-layers/src/options.ts b/plugins/postcss-cascade-layers/src/options.ts index 8f5c2e885..b58a5e3a9 100644 --- a/plugins/postcss-cascade-layers/src/options.ts +++ b/plugins/postcss-cascade-layers/src/options.ts @@ -1,5 +1,9 @@ +/** postcss-cascasde-layers plugin options */ export type pluginOptions = { + /** Emit a warning when the "revert" keyword is found in your CSS. default: "warn" */ onRevertLayerKeyword: 'warn' | false, + /** Emit a warning when conditional rules could change the layer order. default: "warn" */ onConditionalRulesChangingLayerOrder: 'warn' | false, + /** Emit a warning when "layer" is used in "@import". default: "warn" */ onImportLayerRule: 'warn' | false, } diff --git a/plugins/postcss-color-function/src/index.ts b/plugins/postcss-color-function/src/index.ts index acee770b1..375782251 100644 --- a/plugins/postcss-color-function/src/index.ts +++ b/plugins/postcss-color-function/src/index.ts @@ -44,10 +44,13 @@ const basePlugin: PluginCreator = (opts: basePluginOptions) = basePlugin.postcss = true; -type pluginOptions = { +/** postcss-color-function plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ preserve?: boolean, + /** Enable "@csstools/postcss-progressive-custom-properties". default: true */ enableProgressiveCustomProperties?: boolean, -} +}; /* Transform color() function in CSS. */ const postcssPlugin: PluginCreator = (opts?: pluginOptions) => { diff --git a/plugins/postcss-double-position-gradients/src/index.ts b/plugins/postcss-double-position-gradients/src/index.ts index c6a281356..2462b1a14 100644 --- a/plugins/postcss-double-position-gradients/src/index.ts +++ b/plugins/postcss-double-position-gradients/src/index.ts @@ -137,9 +137,12 @@ const basePlugin = (opts) => { basePlugin.postcss = true; -type pluginOptions = { - preserve?: boolean; - enableProgressiveCustomProperties?: boolean; +/** postcss-double-position-gradients plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, + /** Enable "@csstools/postcss-progressive-custom-properties". default: true */ + enableProgressiveCustomProperties?: boolean, }; // Transform double-position gradients in CSS. diff --git a/plugins/postcss-gradients-interpolation-method/src/index.ts b/plugins/postcss-gradients-interpolation-method/src/index.ts index 1a498126b..5b89ce897 100644 --- a/plugins/postcss-gradients-interpolation-method/src/index.ts +++ b/plugins/postcss-gradients-interpolation-method/src/index.ts @@ -205,9 +205,12 @@ const basePlugin = (opts) => { basePlugin.postcss = true; -type pluginOptions = { - preserve?: boolean; - enableProgressiveCustomProperties?: boolean; +/** postcss-gradients-interpolation-method plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, + /** Enable "@csstools/postcss-progressive-custom-properties". default: true */ + enableProgressiveCustomProperties?: boolean, }; // Transform gradient interpolation methods. diff --git a/plugins/postcss-ic-unit/src/index.ts b/plugins/postcss-ic-unit/src/index.ts index af05bcbaf..e299e1457 100644 --- a/plugins/postcss-ic-unit/src/index.ts +++ b/plugins/postcss-ic-unit/src/index.ts @@ -50,10 +50,13 @@ const basePlugin: PluginCreator = (opts: basePluginOptions) = basePlugin.postcss = true; -type pluginOptions = { +/** postcss-ic-unit plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ preserve?: boolean, + /** Enable "@csstools/postcss-progressive-custom-properties". default: true */ enableProgressiveCustomProperties?: boolean, -} +}; const postcssPlugin: PluginCreator = (opts?: pluginOptions) => { const options = Object.assign({ diff --git a/plugins/postcss-lab-function/src/index.ts b/plugins/postcss-lab-function/src/index.ts index b762cc1dc..e9877e895 100644 --- a/plugins/postcss-lab-function/src/index.ts +++ b/plugins/postcss-lab-function/src/index.ts @@ -56,10 +56,15 @@ const basePlugin: PluginCreator = (opts: basePluginOptions) = basePlugin.postcss = true; -type pluginOptions = { - enableProgressiveCustomProperties?: boolean +/** postcss-lab-function plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ preserve?: boolean, + /** Enable "@csstools/postcss-progressive-custom-properties". default: true */ + enableProgressiveCustomProperties?: boolean, + /** Toggle sub features. default: { displayP3: true } */ subFeatures?: { + /** Enable displayP3 fallbacks. default: true */ displayP3?: boolean } }; diff --git a/plugins/postcss-oklab-function/src/index.ts b/plugins/postcss-oklab-function/src/index.ts index 33915abe8..cd4390bb8 100644 --- a/plugins/postcss-oklab-function/src/index.ts +++ b/plugins/postcss-oklab-function/src/index.ts @@ -56,10 +56,15 @@ const basePlugin: PluginCreator = (opts: basePluginOptions) = basePlugin.postcss = true; -type pluginOptions = { - enableProgressiveCustomProperties?: boolean +/** postcss-oklab-function plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ preserve?: boolean, + /** Enable "@csstools/postcss-progressive-custom-properties". default: true */ + enableProgressiveCustomProperties?: boolean, + /** Toggle sub features. default: { displayP3: true } */ subFeatures?: { + /** Enable displayP3 fallbacks. default: true */ displayP3?: boolean } }; From 5d6718b1c5c9b15592053bc4e5364d7460356fb0 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 20 Nov 2022 10:33:39 +0100 Subject: [PATCH 15/23] wip --- e2e/browserslist/package-json/.gitignore | 1 + e2e/browserslist/package-json/index.mjs | 18 +++ e2e/browserslist/package-json/package.json | 23 +++ e2e/package-lock.json | 46 +++--- plugin-packs/postcss-preset-env/package.json | 1 + .../scripts/generate-plugins-data.mjs | 23 +++ .../src/{index.js => index.ts} | 5 +- .../postcss-preset-env/src/options.ts | 61 ++++++++ .../src/plugins/plugins-options.ts | 138 ++++++++++++++++++ .../src/types/cssdb/index.d.ts | 17 +++ plugin-packs/postcss-preset-env/tsconfig.json | 9 ++ plugins/postcss-cascade-layers/src/options.ts | 6 +- 12 files changed, 320 insertions(+), 28 deletions(-) create mode 100644 e2e/browserslist/package-json/.gitignore create mode 100644 e2e/browserslist/package-json/index.mjs create mode 100644 e2e/browserslist/package-json/package.json rename plugin-packs/postcss-preset-env/src/{index.js => index.ts} (92%) create mode 100644 plugin-packs/postcss-preset-env/src/options.ts create mode 100644 plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/cssdb/index.d.ts create mode 100644 plugin-packs/postcss-preset-env/tsconfig.json diff --git a/e2e/browserslist/package-json/.gitignore b/e2e/browserslist/package-json/.gitignore new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/e2e/browserslist/package-json/.gitignore @@ -0,0 +1 @@ + diff --git a/e2e/browserslist/package-json/index.mjs b/e2e/browserslist/package-json/index.mjs new file mode 100644 index 000000000..524636f35 --- /dev/null +++ b/e2e/browserslist/package-json/index.mjs @@ -0,0 +1,18 @@ +import assert from 'assert'; +import plugin from 'postcss-preset-env'; +import postcss from 'postcss'; + +const result = await postcss([plugin()]).process(':any-link { color: blue; }').css; + +if (process.env.BROWSERSLIST_ENV === 'production') { + assert.equal( + result, + ':link, :visited, area[href] { color: blue; }\n' + + ':-moz-any-link { color: blue; }\n' + + ':any-link { color: blue; }', + ); +} + +if (process.env.BROWSERSLIST_ENV === 'development') { + assert.equal(result, ':any-link { color: blue; }'); +} diff --git a/e2e/browserslist/package-json/package.json b/e2e/browserslist/package-json/package.json new file mode 100644 index 000000000..9dad1234a --- /dev/null +++ b/e2e/browserslist/package-json/package.json @@ -0,0 +1,23 @@ +{ + "name": "@csstools/e2e--browserslist--package-json", + "version": "0.0.0", + "private": true, + "description": "Can you use PostCSS Preset Env with a browserslist in package.json?", + "scripts": { + "test": "BROWSERSLIST_ENV=development node ./index.mjs && BROWSERSLIST_ENV=production node ./index.mjs" + }, + "devDependencies": { + "postcss": "^8.4.19", + "postcss-preset-env": "^7.8.3" + }, + "browserslist": { + "development": [ + "chrome > 100" + ], + "production": [ + "last 1 version", + "> 1%", + "not dead" + ] + } +} diff --git a/e2e/package-lock.json b/e2e/package-lock.json index 32c589eb8..710375445 100644 --- a/e2e/package-lock.json +++ b/e2e/package-lock.json @@ -13,10 +13,10 @@ ] }, "../plugin-packs/postcss-preset-env": { - "version": "8.0.0-alpha.0", + "version": "8.0.0-alpha.1", "license": "CC0-1.0", "dependencies": { - "@csstools/postcss-cascade-layers": "^1.1.1", + "@csstools/postcss-cascade-layers": "^2.0.0", "@csstools/postcss-color-function": "^1.1.1", "@csstools/postcss-font-format-keywords": "^1.0.1", "@csstools/postcss-hwb-function": "^1.0.2", @@ -31,24 +31,24 @@ "@csstools/postcss-text-decoration-shorthand": "^1.0.0", "@csstools/postcss-trigonometric-functions": "^1.0.2", "@csstools/postcss-unset-value": "^1.0.2", - "autoprefixer": "^10.4.11", - "browserslist": "^4.21.3", - "css-blank-pseudo": "^4.0.0", - "css-has-pseudo": "^4.0.0", - "css-prefers-color-scheme": "^7.0.0", + "autoprefixer": "^10.4.13", + "browserslist": "^4.21.4", + "css-blank-pseudo": "^4.1.1", + "css-has-pseudo": "^4.0.1", + "css-prefers-color-scheme": "^7.0.1", "cssdb": "^7.1.0", "postcss-attribute-case-insensitive": "^5.0.2", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^4.2.4", "postcss-color-hex-alpha": "^8.0.4", "postcss-color-rebeccapurple": "^7.1.1", - "postcss-custom-media": "^8.0.2", - "postcss-custom-properties": "^12.1.9", - "postcss-custom-selectors": "^6.0.3", + "postcss-custom-media": "^9.0.0", + "postcss-custom-properties": "^13.0.0", + "postcss-custom-selectors": "^7.0.0", "postcss-dir-pseudo-class": "^6.0.5", "postcss-double-position-gradients": "^3.1.2", - "postcss-focus-visible": "^7.0.0", - "postcss-focus-within": "^6.0.0", + "postcss-focus-visible": "^7.1.0", + "postcss-focus-within": "^6.1.1", "postcss-font-variant": "^5.0.0", "postcss-gap-properties": "^3.0.5", "postcss-image-set-function": "^4.0.7", @@ -2731,7 +2731,7 @@ "postcss-preset-env": { "version": "file:../plugin-packs/postcss-preset-env", "requires": { - "@csstools/postcss-cascade-layers": "^1.1.1", + "@csstools/postcss-cascade-layers": "^2.0.0", "@csstools/postcss-color-function": "^1.1.1", "@csstools/postcss-font-format-keywords": "^1.0.1", "@csstools/postcss-hwb-function": "^1.0.2", @@ -2746,24 +2746,24 @@ "@csstools/postcss-text-decoration-shorthand": "^1.0.0", "@csstools/postcss-trigonometric-functions": "^1.0.2", "@csstools/postcss-unset-value": "^1.0.2", - "autoprefixer": "^10.4.11", - "browserslist": "^4.21.3", - "css-blank-pseudo": "^4.0.0", - "css-has-pseudo": "^4.0.0", - "css-prefers-color-scheme": "^7.0.0", + "autoprefixer": "^10.4.13", + "browserslist": "^4.21.4", + "css-blank-pseudo": "^4.1.1", + "css-has-pseudo": "^4.0.1", + "css-prefers-color-scheme": "^7.0.1", "cssdb": "^7.1.0", "postcss-attribute-case-insensitive": "^5.0.2", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^4.2.4", "postcss-color-hex-alpha": "^8.0.4", "postcss-color-rebeccapurple": "^7.1.1", - "postcss-custom-media": "^8.0.2", - "postcss-custom-properties": "^12.1.9", - "postcss-custom-selectors": "^6.0.3", + "postcss-custom-media": "^9.0.0", + "postcss-custom-properties": "^13.0.0", + "postcss-custom-selectors": "^7.0.0", "postcss-dir-pseudo-class": "^6.0.5", "postcss-double-position-gradients": "^3.1.2", - "postcss-focus-visible": "^7.0.0", - "postcss-focus-within": "^6.0.0", + "postcss-focus-visible": "^7.1.0", + "postcss-focus-within": "^6.1.1", "postcss-font-variant": "^5.0.0", "postcss-gap-properties": "^3.0.5", "postcss-image-set-function": "^4.0.7", diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json index dfac37aef..3960d486c 100644 --- a/plugin-packs/postcss-preset-env/package.json +++ b/plugin-packs/postcss-preset-env/package.json @@ -13,6 +13,7 @@ }, "main": "dist/index.cjs", "module": "dist/index.mjs", + "types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.mjs", diff --git a/plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs b/plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs index 8bd036b41..8c31a24c2 100644 --- a/plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs +++ b/plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs @@ -27,7 +27,30 @@ export const pluginsById = new Map( return result; } +function generatePluginOptions(data) { + const plugins = data.slice(0).sort((a, b) => a.id.localeCompare(b.id)); + let result = ''; + + for (let i = 0; i < plugins.length; i++) { + const plugin = plugins[i]; + result += `import type { pluginOptions as ${plugin.importName} } from '${plugin.importedPackage || plugin.packageName}';\n`; + } + + result += '\nexport type pluginsOptions = {\n'; + + for (let i = 0; i < plugins.length; i++) { + const plugin = plugins[i]; + result += `\t/** plugin options for "${plugin.importedPackage || plugin.packageName}" */\n`; + result += `\t'${plugin.id}'?: ${plugin.importName} | boolean\n`; + } + + result += '};\n'; + + return result; +} + await Promise.all([ writeFile('./src/plugins/plugins-data.mjs', esmPlugins), writeFile('./src/plugins/plugins-by-id.mjs', generatePluginsByID(pluginsData)), + writeFile('./src/plugins/plugins-options.ts', generatePluginOptions(pluginsData)), ]); diff --git a/plugin-packs/postcss-preset-env/src/index.js b/plugin-packs/postcss-preset-env/src/index.ts similarity index 92% rename from plugin-packs/postcss-preset-env/src/index.js rename to plugin-packs/postcss-preset-env/src/index.ts index 80700b0b6..1fee1a0e0 100644 --- a/plugin-packs/postcss-preset-env/src/index.js +++ b/plugin-packs/postcss-preset-env/src/index.ts @@ -6,9 +6,10 @@ import { initializeSharedOptions } from './lib/shared-options.mjs'; import { listFeatures } from './lib/list-features.mjs'; import { newLogger } from './log/helper.mjs'; import { pluginIdHelp } from './plugins/plugin-id-help.mjs'; +import type { pluginOptions } from './options'; +export type { pluginOptions } from './options'; - -const plugin = (opts) => { +const plugin = (opts: pluginOptions) => { const logger = newLogger(); // initialize options diff --git a/plugin-packs/postcss-preset-env/src/options.ts b/plugin-packs/postcss-preset-env/src/options.ts new file mode 100644 index 000000000..f4004925c --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/options.ts @@ -0,0 +1,61 @@ +import type autoprefixer from 'autoprefixer'; +import { pluginsOptions } from './plugins/plugins-options'; + +export type pluginOptions = { + /** + * [Configure autoprefixer](https://github.com/postcss/autoprefixer#options) + */ + autoprefixer? : autoprefixer.Options, + /** + * Determine which CSS features to polyfill, + * based upon their process in becoming web standards. + * default: 2 + */ + stage?: number + + /** + * Determine which CSS features to polyfill, + * based their implementation status. + * default: 0 + */ + minimumVendorImplementations?: number + + /** + * PostCSS Preset Env supports any standard browserslist configuration, + * which can be a `.browserslistrc` file, + * a `browserslist` key in `package.json`, + * or `browserslist` environment variables. + * + * The `browsers` option should only be used when a standard browserslist configuration is not available. + */ + browsers?: string | readonly string[] | null + + /** + * Enable or disable specific polyfills by ID. + * Passing `true` to a specific [feature ID](https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md) will enable its polyfill, + * while passing `false` will disable it. + * + * Passing an object to a specific feature ID will both enable and configure it. + */ + features?: pluginsOptions + + /** + * Determine whether all plugins should receive a `preserve` option, + * which may preserve or remove the original and now polyfilled CSS. + * Each plugin has it's own default, some true, others false. + * default: _not set_ + */ + preserve?: boolean + + /** + * Enable debugging messages to stdout giving insights into which features have been enabled/disabled and why. + * default: false + */ + debug?: boolean + + /** + * Enable any feature that would need an extra browser library to be loaded into the page for it to work. + * default: false + */ + enableClientSidePolyfills?: boolean +} diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts b/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts new file mode 100644 index 000000000..ea75ab8c7 --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts @@ -0,0 +1,138 @@ +import type { pluginOptions as postcssInitial } from 'postcss-initial'; +import type { pluginOptions as postcssPseudoClassAnyLink } from 'postcss-pseudo-class-any-link'; +import type { pluginOptions as postcssBlankPseudo } from 'css-blank-pseudo'; +import type { pluginOptions as postcssPageBreak } from 'postcss-page-break'; +import type { pluginOptions as postcssCascadeLayers } from '@csstools/postcss-cascade-layers'; +import type { pluginOptions as postcssAttributeCaseInsensitive } from 'postcss-attribute-case-insensitive'; +import type { pluginOptions as postcssClamp } from 'postcss-clamp'; +import type { pluginOptions as postcssColorFunction } from '@csstools/postcss-color-function'; +import type { pluginOptions as postcssColorFunctionalNotation } from 'postcss-color-functional-notation'; +import type { pluginOptions as postcssCustomMedia } from 'postcss-custom-media'; +import type { pluginOptions as postcssCustomProperties } from 'postcss-custom-properties'; +import type { pluginOptions as postcssCustomSelectors } from 'postcss-custom-selectors'; +import type { pluginOptions as postcssDirPseudoClass } from 'postcss-dir-pseudo-class'; +import type { pluginOptions as postcssNormalizeDisplayValues } from '@csstools/postcss-normalize-display-values'; +import type { pluginOptions as postcssDoublePositionGradients } from 'postcss-double-position-gradients'; +import type { pluginOptions as postcssFocusVisible } from 'postcss-focus-visible'; +import type { pluginOptions as postcssFocusWithin } from 'postcss-focus-within'; +import type { pluginOptions as postcssFontFormatKeywords } from '@csstools/postcss-font-format-keywords'; +import type { pluginOptions as postcssFontVariant } from 'postcss-font-variant'; +import type { pluginOptions as postcssGapProperties } from 'postcss-gap-properties'; +import type { pluginOptions as postcssHasPseudo } from 'css-has-pseudo'; +import type { pluginOptions as postcssColorHexAlpha } from 'postcss-color-hex-alpha'; +import type { pluginOptions as postcssHWBFunction } from '@csstools/postcss-hwb-function'; +import type { pluginOptions as postcssICUnit } from '@csstools/postcss-ic-unit'; +import type { pluginOptions as postcssImageSetFunction } from 'postcss-image-set-function'; +import type { pluginOptions as postcssIsPseudoClass } from '@csstools/postcss-is-pseudo-class'; +import type { pluginOptions as postcssLabFunction } from 'postcss-lab-function'; +import type { pluginOptions as postcssLogical } from 'postcss-logical'; +import type { pluginOptions as postcssMediaMinmax } from 'postcss-media-minmax'; +import type { pluginOptions as postcssNestedCalc } from '@csstools/postcss-nested-calc'; +import type { pluginOptions as postcssNesting } from 'postcss-nesting'; +import type { pluginOptions as postcssSelectorNot } from 'postcss-selector-not'; +import type { pluginOptions as postcssOKLabFunction } from '@csstools/postcss-oklab-function'; +import type { pluginOptions as postcssOpacityPercentage } from 'postcss-opacity-percentage'; +import type { pluginOptions as postcssOverflowShorthand } from 'postcss-overflow-shorthand'; +import type { pluginOptions as postcssReplaceOverflowWrap } from 'postcss-replace-overflow-wrap'; +import type { pluginOptions as postcssPlace } from 'postcss-place'; +import type { pluginOptions as postcssPrefersColorScheme } from 'css-prefers-color-scheme'; +import type { pluginOptions as postcssColorRebeccapurple } from 'postcss-color-rebeccapurple'; +import type { pluginOptions as postcssScopePseudoClass } from '@csstools/postcss-scope-pseudo-class'; +import type { pluginOptions as postcssSteppedValueFunctions } from '@csstools/postcss-stepped-value-functions'; +import type { pluginOptions as postcssFontFamilySystemUI } from '../patch/postcss-system-ui-font-family.mjs'; +import type { pluginOptions as postcssTextDecorationShorthand } from '@csstools/postcss-text-decoration-shorthand'; +import type { pluginOptions as postcssTrigonometricFunctions } from '@csstools/postcss-trigonometric-functions'; +import type { pluginOptions as postcssUnsetValue } from '@csstools/postcss-unset-value'; + +export type pluginsOptions = { + /** plugin options for "postcss-initial" */ + 'all-property'?: postcssInitial | boolean + /** plugin options for "postcss-pseudo-class-any-link" */ + 'any-link-pseudo-class'?: postcssPseudoClassAnyLink | boolean + /** plugin options for "css-blank-pseudo" */ + 'blank-pseudo-class'?: postcssBlankPseudo | boolean + /** plugin options for "postcss-page-break" */ + 'break-properties'?: postcssPageBreak | boolean + /** plugin options for "@csstools/postcss-cascade-layers" */ + 'cascade-layers'?: postcssCascadeLayers | boolean + /** plugin options for "postcss-attribute-case-insensitive" */ + 'case-insensitive-attributes'?: postcssAttributeCaseInsensitive | boolean + /** plugin options for "postcss-clamp" */ + 'clamp'?: postcssClamp | boolean + /** plugin options for "@csstools/postcss-color-function" */ + 'color-function'?: postcssColorFunction | boolean + /** plugin options for "postcss-color-functional-notation" */ + 'color-functional-notation'?: postcssColorFunctionalNotation | boolean + /** plugin options for "postcss-custom-media" */ + 'custom-media-queries'?: postcssCustomMedia | boolean + /** plugin options for "postcss-custom-properties" */ + 'custom-properties'?: postcssCustomProperties | boolean + /** plugin options for "postcss-custom-selectors" */ + 'custom-selectors'?: postcssCustomSelectors | boolean + /** plugin options for "postcss-dir-pseudo-class" */ + 'dir-pseudo-class'?: postcssDirPseudoClass | boolean + /** plugin options for "@csstools/postcss-normalize-display-values" */ + 'display-two-values'?: postcssNormalizeDisplayValues | boolean + /** plugin options for "postcss-double-position-gradients" */ + 'double-position-gradients'?: postcssDoublePositionGradients | boolean + /** plugin options for "postcss-focus-visible" */ + 'focus-visible-pseudo-class'?: postcssFocusVisible | boolean + /** plugin options for "postcss-focus-within" */ + 'focus-within-pseudo-class'?: postcssFocusWithin | boolean + /** plugin options for "@csstools/postcss-font-format-keywords" */ + 'font-format-keywords'?: postcssFontFormatKeywords | boolean + /** plugin options for "postcss-font-variant" */ + 'font-variant-property'?: postcssFontVariant | boolean + /** plugin options for "postcss-gap-properties" */ + 'gap-properties'?: postcssGapProperties | boolean + /** plugin options for "css-has-pseudo" */ + 'has-pseudo-class'?: postcssHasPseudo | boolean + /** plugin options for "postcss-color-hex-alpha" */ + 'hexadecimal-alpha-notation'?: postcssColorHexAlpha | boolean + /** plugin options for "@csstools/postcss-hwb-function" */ + 'hwb-function'?: postcssHWBFunction | boolean + /** plugin options for "@csstools/postcss-ic-unit" */ + 'ic-unit'?: postcssICUnit | boolean + /** plugin options for "postcss-image-set-function" */ + 'image-set-function'?: postcssImageSetFunction | boolean + /** plugin options for "@csstools/postcss-is-pseudo-class" */ + 'is-pseudo-class'?: postcssIsPseudoClass | boolean + /** plugin options for "postcss-lab-function" */ + 'lab-function'?: postcssLabFunction | boolean + /** plugin options for "postcss-logical" */ + 'logical-properties-and-values'?: postcssLogical | boolean + /** plugin options for "postcss-media-minmax" */ + 'media-query-ranges'?: postcssMediaMinmax | boolean + /** plugin options for "@csstools/postcss-nested-calc" */ + 'nested-calc'?: postcssNestedCalc | boolean + /** plugin options for "postcss-nesting" */ + 'nesting-rules'?: postcssNesting | boolean + /** plugin options for "postcss-selector-not" */ + 'not-pseudo-class'?: postcssSelectorNot | boolean + /** plugin options for "@csstools/postcss-oklab-function" */ + 'oklab-function'?: postcssOKLabFunction | boolean + /** plugin options for "postcss-opacity-percentage" */ + 'opacity-percentage'?: postcssOpacityPercentage | boolean + /** plugin options for "postcss-overflow-shorthand" */ + 'overflow-property'?: postcssOverflowShorthand | boolean + /** plugin options for "postcss-replace-overflow-wrap" */ + 'overflow-wrap-property'?: postcssReplaceOverflowWrap | boolean + /** plugin options for "postcss-place" */ + 'place-properties'?: postcssPlace | boolean + /** plugin options for "css-prefers-color-scheme" */ + 'prefers-color-scheme-query'?: postcssPrefersColorScheme | boolean + /** plugin options for "postcss-color-rebeccapurple" */ + 'rebeccapurple-color'?: postcssColorRebeccapurple | boolean + /** plugin options for "@csstools/postcss-scope-pseudo-class" */ + 'scope-pseudo-class'?: postcssScopePseudoClass | boolean + /** plugin options for "@csstools/postcss-stepped-value-functions" */ + 'stepped-value-functions'?: postcssSteppedValueFunctions | boolean + /** plugin options for "../patch/postcss-system-ui-font-family.mjs" */ + 'system-ui-font-family'?: postcssFontFamilySystemUI | boolean + /** plugin options for "@csstools/postcss-text-decoration-shorthand" */ + 'text-decoration-shorthand'?: postcssTextDecorationShorthand | boolean + /** plugin options for "@csstools/postcss-trigonometric-functions" */ + 'trigonometric-functions'?: postcssTrigonometricFunctions | boolean + /** plugin options for "@csstools/postcss-unset-value" */ + 'unset-value'?: postcssUnsetValue | boolean +}; diff --git a/plugin-packs/postcss-preset-env/src/types/cssdb/index.d.ts b/plugin-packs/postcss-preset-env/src/types/cssdb/index.d.ts new file mode 100644 index 000000000..3e2bb9f5f --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/cssdb/index.d.ts @@ -0,0 +1,17 @@ +declare module 'cssdb' { + export type cssdbEntry = { + id: string + title: string + description: string + specification: string + stage: number + browser_support: Record + docs: Record + example: string + polyfills: Array>, + vendors_implementations: number + }; + + const cssdb: Array; + export default cssdb; +} diff --git a/plugin-packs/postcss-preset-env/tsconfig.json b/plugin-packs/postcss-preset-env/tsconfig.json new file mode 100644 index 000000000..e0d06239c --- /dev/null +++ b/plugin-packs/postcss-preset-env/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "declarationDir": "." + }, + "include": ["./src/**/*"], + "exclude": ["dist"], +} diff --git a/plugins/postcss-cascade-layers/src/options.ts b/plugins/postcss-cascade-layers/src/options.ts index b58a5e3a9..7fdcbdf05 100644 --- a/plugins/postcss-cascade-layers/src/options.ts +++ b/plugins/postcss-cascade-layers/src/options.ts @@ -1,9 +1,9 @@ /** postcss-cascasde-layers plugin options */ export type pluginOptions = { /** Emit a warning when the "revert" keyword is found in your CSS. default: "warn" */ - onRevertLayerKeyword: 'warn' | false, + onRevertLayerKeyword?: 'warn' | false, /** Emit a warning when conditional rules could change the layer order. default: "warn" */ - onConditionalRulesChangingLayerOrder: 'warn' | false, + onConditionalRulesChangingLayerOrder?: 'warn' | false, /** Emit a warning when "layer" is used in "@import". default: "warn" */ - onImportLayerRule: 'warn' | false, + onImportLayerRule?: 'warn' | false, } From 41365afe032e5e9382edd65415b60c020a7e32c3 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 20 Nov 2022 10:34:41 +0100 Subject: [PATCH 16/23] docs --- plugins/postcss-dir-pseudo-class/README.md | 15 +++++++++------ plugins/postcss-gap-properties/README.md | 15 +++++++++------ plugins/postcss-overflow-shorthand/README.md | 15 +++++++++------ plugins/postcss-place/README.md | 15 +++++++++------ plugins/postcss-pseudo-class-any-link/README.md | 15 +++++++++------ 5 files changed, 45 insertions(+), 30 deletions(-) diff --git a/plugins/postcss-dir-pseudo-class/README.md b/plugins/postcss-dir-pseudo-class/README.md index 22d9a50f5..22cfbb620 100644 --- a/plugins/postcss-dir-pseudo-class/README.md +++ b/plugins/postcss-dir-pseudo-class/README.md @@ -1,4 +1,4 @@ -# PostCSS Dir Pseudo Class [][postcss] +# PostCSS Dir Pseudo Class [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -63,8 +63,14 @@ postcss([ [PostCSS Dir Pseudo Class] runs in all Node environments, with special instructions for: -| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options @@ -192,9 +198,6 @@ article h3:dir(ltr) { [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-dir-pseudo-class -[Gulp PostCSS]: https://github.com/postcss/gulp-postcss -[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss -[PostCSS Loader]: https://github.com/postcss/postcss-loader [PostCSS Dir Pseudo Class]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class [Selectors]: https://www.w3.org/TR/selectors-4/#the-dir-pseudo diff --git a/plugins/postcss-gap-properties/README.md b/plugins/postcss-gap-properties/README.md index 4a9228c7d..66f3339dd 100644 --- a/plugins/postcss-gap-properties/README.md +++ b/plugins/postcss-gap-properties/README.md @@ -1,4 +1,4 @@ -# PostCSS Gap Properties [][postcss] +# PostCSS Gap Properties [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -56,8 +56,14 @@ postcss([ [PostCSS Gap Properties] runs in all Node environments, with special instructions for: -| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options @@ -101,9 +107,6 @@ postcssGapProperties({ preserve: false }) [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-gap-properties -[Gulp PostCSS]: https://github.com/postcss/gulp-postcss -[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss -[PostCSS Loader]: https://github.com/postcss/postcss-loader [PostCSS Gap Properties]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties [CSS Grid Layout]: https://www.w3.org/TR/css-grid-1/#gutters diff --git a/plugins/postcss-overflow-shorthand/README.md b/plugins/postcss-overflow-shorthand/README.md index d3f7f59f2..babb3d3f2 100644 --- a/plugins/postcss-overflow-shorthand/README.md +++ b/plugins/postcss-overflow-shorthand/README.md @@ -1,4 +1,4 @@ -# PostCSS Overflow Shorthand [][postcss] +# PostCSS Overflow Shorthand [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -41,8 +41,14 @@ postcss([ [PostCSS Overflow Shorthand] runs in all Node environments, with special instructions for: -| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options @@ -73,9 +79,6 @@ html { [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-overflow-shorthand -[Gulp PostCSS]: https://github.com/postcss/gulp-postcss -[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss -[PostCSS Loader]: https://github.com/postcss/postcss-loader [PostCSS Overflow Shorthand]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-overflow-shorthand [CSS Overflow]: https://drafts.csswg.org/css-overflow/#propdef-overflow diff --git a/plugins/postcss-place/README.md b/plugins/postcss-place/README.md index b0dffb4de..d060a9fab 100644 --- a/plugins/postcss-place/README.md +++ b/plugins/postcss-place/README.md @@ -1,4 +1,4 @@ -# PostCSS Place Properties [][postcss] +# PostCSS Place Properties [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -45,8 +45,14 @@ postcss([ [PostCSS Place Properties] runs in all Node environments, with special instructions for: -| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options @@ -80,9 +86,6 @@ postcssPlace({ preserve: false }) [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-place -[Gulp PostCSS]: https://github.com/postcss/gulp-postcss -[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss -[PostCSS Loader]: https://github.com/postcss/postcss-loader [PostCSS Place Properties]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-place [CSS Box Alignment]: https://www.w3.org/TR/css-align-3/#place-content diff --git a/plugins/postcss-pseudo-class-any-link/README.md b/plugins/postcss-pseudo-class-any-link/README.md index 6c8ad5927..90d4f3357 100644 --- a/plugins/postcss-pseudo-class-any-link/README.md +++ b/plugins/postcss-pseudo-class-any-link/README.md @@ -1,4 +1,4 @@ -# PostCSS Pseudo Class Any Link [][postcss] +# PostCSS Pseudo Class Any Link [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -42,8 +42,14 @@ postcss([ [PostCSS Pseudo Class Any Link] runs in all Node environments, with special instructions for: -| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options @@ -105,9 +111,6 @@ nav :any-link > span { [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-pseudo-class-any-link -[Gulp PostCSS]: https://github.com/postcss/gulp-postcss -[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss -[PostCSS Loader]: https://github.com/postcss/postcss-loader [PostCSS Pseudo Class Any Link]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-pseudo-class-any-link [Selectors]: https://www.w3.org/TR/selectors-4/#the-any-link-pseudo From 4ab9e3bfa7415b45aa9e94ca492c4e5dc8653952 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 20 Nov 2022 12:21:12 +0100 Subject: [PATCH 17/23] typed options for postcss-preset-env --- .../scripts/generate-plugins-data.mjs | 12 +++++- plugin-packs/postcss-preset-env/src/index.ts | 7 ++-- .../src/lib/format-feature.mjs | 10 +++++ .../postcss-preset-env/src/options.ts | 41 ++++++++++--------- .../src/plugins/plugins-options.ts | 20 ++++----- .../src/types/postcss-clamp/index.d.ts | 12 ++++++ .../src/types/postcss-clamp/plugin-options.ts | 10 +++++ .../src/types/postcss-font-variant/index.d.ts | 4 ++ .../postcss-font-variant/plugin-options.ts | 2 + .../src/types/postcss-initial/index.d.ts | 13 ++++++ .../types/postcss-initial/plugin-options.ts | 11 +++++ .../src/types/postcss-logical/index.d.ts | 9 ++++ .../types/postcss-logical/plugin-options.ts | 7 ++++ .../src/types/postcss-media-minmax/index.d.ts | 4 ++ .../postcss-media-minmax/plugin-options.ts | 2 + .../postcss-opacity-percentage/index.d.ts | 7 ++++ .../plugin-options.ts | 5 +++ .../src/types/postcss-page-break/index.d.ts | 4 ++ .../postcss-page-break/plugin-options.ts | 2 + .../postcss-replace-overflow-wrap/index.d.ts | 7 ++++ .../plugin-options.ts | 5 +++ .../postcss-system-ui-font-family/index.d.ts | 4 ++ .../plugin-options.ts | 2 + .../test/basic.preserve.true.expect.css | 3 +- .../layers-basic.preserve.true.expect.css | 3 +- .../src/index.ts | 8 +++- plugins/postcss-color-hex-alpha/src/index.ts | 6 ++- .../postcss-color-rebeccapurple/src/index.ts | 6 ++- .../postcss-conditional-values/src/index.ts | 2 +- plugins/postcss-custom-media/src/index.ts | 11 ++--- .../postcss-custom-properties/src/index.ts | 11 ++--- plugins/postcss-custom-selectors/src/index.ts | 11 ++--- plugins/postcss-extract/src/index.ts | 2 +- plugins/postcss-focus-visible/src/index.ts | 10 ++++- plugins/postcss-focus-within/src/index.ts | 10 ++++- .../postcss-font-format-keywords/src/index.ts | 8 +++- plugins/postcss-hwb-function/src/index.ts | 8 +++- plugins/postcss-image-set-function/.tape.mjs | 4 +- .../postcss-image-set-function/CHANGELOG.md | 1 + plugins/postcss-image-set-function/README.md | 12 +++--- .../postcss-image-set-function/src/index.ts | 21 +++++++++- .../src/lib/process-image-set.ts | 2 +- plugins/postcss-is-pseudo-class/README.md | 2 +- plugins/postcss-is-pseudo-class/src/index.ts | 18 +++++++- .../src/index.ts | 7 +++- plugins/postcss-nested-calc/src/index.ts | 6 ++- plugins/postcss-nesting/src/index.ts | 6 ++- .../src/index.ts | 8 +++- .../postcss-scope-pseudo-class/src/index.ts | 6 ++- plugins/postcss-selector-not/src/index.ts | 5 ++- .../postcss-stepped-value-functions/README.md | 2 +- .../docs/README.md | 2 +- .../src/index.ts | 4 +- .../src/mod.ts | 2 +- .../src/options.ts | 10 +++++ .../src/rem.ts | 2 +- .../src/round.ts | 2 +- .../src/utils.ts | 2 +- .../src/index.ts | 6 ++- .../src/index.ts | 6 ++- plugins/postcss-unset-value/src/index.ts | 10 ++--- 61 files changed, 346 insertions(+), 99 deletions(-) create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-clamp/index.d.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-clamp/plugin-options.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-font-variant/index.d.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-font-variant/plugin-options.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-initial/index.d.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-initial/plugin-options.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-logical/index.d.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-logical/plugin-options.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-media-minmax/index.d.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-media-minmax/plugin-options.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-opacity-percentage/index.d.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-opacity-percentage/plugin-options.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-page-break/index.d.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-page-break/plugin-options.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-replace-overflow-wrap/index.d.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-replace-overflow-wrap/plugin-options.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-system-ui-font-family/index.d.ts create mode 100644 plugin-packs/postcss-preset-env/src/types/postcss-system-ui-font-family/plugin-options.ts create mode 100644 plugins/postcss-stepped-value-functions/src/options.ts diff --git a/plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs b/plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs index 8c31a24c2..c7e7106b7 100644 --- a/plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs +++ b/plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs @@ -1,4 +1,7 @@ import { readFile, writeFile } from 'fs/promises'; +import { existsSync } from 'fs'; +import path from 'path'; + const pluginsData = await readFile('./scripts/plugins-data.json', 'utf8').then(JSON.parse); const esmPlugins = `export default ${JSON.stringify(pluginsData, null, 2)}\n`; @@ -33,14 +36,19 @@ function generatePluginOptions(data) { for (let i = 0; i < plugins.length; i++) { const plugin = plugins[i]; - result += `import type { pluginOptions as ${plugin.importName} } from '${plugin.importedPackage || plugin.packageName}';\n`; + + if (existsSync(path.join('./src/types/', plugin.packageName, 'plugin-options.ts'))) { + result += `import type { pluginOptions as ${plugin.importName} } from '${path.join('../types/', plugin.packageName, 'plugin-options')}';\n`; + } else { + result += `import type { pluginOptions as ${plugin.importName} } from '${plugin.packageName}';\n`; + } } result += '\nexport type pluginsOptions = {\n'; for (let i = 0; i < plugins.length; i++) { const plugin = plugins[i]; - result += `\t/** plugin options for "${plugin.importedPackage || plugin.packageName}" */\n`; + result += `\t/** plugin options for "${plugin.packageName}" */\n`; result += `\t'${plugin.id}'?: ${plugin.importName} | boolean\n`; } diff --git a/plugin-packs/postcss-preset-env/src/index.ts b/plugin-packs/postcss-preset-env/src/index.ts index 1fee1a0e0..61826c771 100644 --- a/plugin-packs/postcss-preset-env/src/index.ts +++ b/plugin-packs/postcss-preset-env/src/index.ts @@ -7,9 +7,10 @@ import { listFeatures } from './lib/list-features.mjs'; import { newLogger } from './log/helper.mjs'; import { pluginIdHelp } from './plugins/plugin-id-help.mjs'; import type { pluginOptions } from './options'; +import type { PluginCreator } from 'postcss'; export type { pluginOptions } from './options'; -const plugin = (opts: pluginOptions) => { +const creator: PluginCreator = (opts?: pluginOptions) => { const logger = newLogger(); // initialize options @@ -59,6 +60,6 @@ const plugin = (opts: pluginOptions) => { }; }; -plugin.postcss = true; +creator.postcss = true; -export default plugin; +export default creator; diff --git a/plugin-packs/postcss-preset-env/src/lib/format-feature.mjs b/plugin-packs/postcss-preset-env/src/lib/format-feature.mjs index d9e246354..671fd0019 100644 --- a/plugin-packs/postcss-preset-env/src/lib/format-feature.mjs +++ b/plugin-packs/postcss-preset-env/src/lib/format-feature.mjs @@ -54,6 +54,16 @@ export function formatStagedFeature(cssdbList, browsers, features, feature, shar // postcss-preset-env : option overrides options.enableProgressiveCustomProperties = false; + // https://github.com/maximkoretskiy/postcss-initial#replace + if (feature.id === 'all-property' && 'preserve' in options) { + options.replace = options.preserve; + } + + // https://github.com/MattDiMu/postcss-replace-overflow-wrap/blob/ec9914e0b9473a75a5d1fe32ea4311555eb81b71/index.js#L10 + if (feature.id === 'overflow-wrap-property' && 'preserve' in options) { + options.method = options.preserve ? 'copy' : 'replace'; + } + if (feature.plugin.postcss && typeof feature.plugin === 'function') { plugin = feature.plugin(options); } else if (feature.plugin && feature.plugin.default && typeof feature.plugin.default === 'function' && feature.plugin.default.postcss) { diff --git a/plugin-packs/postcss-preset-env/src/options.ts b/plugin-packs/postcss-preset-env/src/options.ts index f4004925c..730666053 100644 --- a/plugin-packs/postcss-preset-env/src/options.ts +++ b/plugin-packs/postcss-preset-env/src/options.ts @@ -2,24 +2,26 @@ import type autoprefixer from 'autoprefixer'; import { pluginsOptions } from './plugins/plugins-options'; export type pluginOptions = { - /** - * [Configure autoprefixer](https://github.com/postcss/autoprefixer#options) - */ - autoprefixer? : autoprefixer.Options, /** * Determine which CSS features to polyfill, * based upon their process in becoming web standards. * default: 2 - */ + */ stage?: number /** * Determine which CSS features to polyfill, * based their implementation status. * default: 0 - */ + */ minimumVendorImplementations?: number + /** + * Enable any feature that would need an extra browser library to be loaded into the page for it to work. + * default: false + */ + enableClientSidePolyfills?: boolean + /** * PostCSS Preset Env supports any standard browserslist configuration, * which can be a `.browserslistrc` file, @@ -30,15 +32,6 @@ export type pluginOptions = { */ browsers?: string | readonly string[] | null - /** - * Enable or disable specific polyfills by ID. - * Passing `true` to a specific [feature ID](https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md) will enable its polyfill, - * while passing `false` will disable it. - * - * Passing an object to a specific feature ID will both enable and configure it. - */ - features?: pluginsOptions - /** * Determine whether all plugins should receive a `preserve` option, * which may preserve or remove the original and now polyfilled CSS. @@ -48,14 +41,22 @@ export type pluginOptions = { preserve?: boolean /** - * Enable debugging messages to stdout giving insights into which features have been enabled/disabled and why. - * default: false + * [Configure autoprefixer](https://github.com/postcss/autoprefixer#options) */ - debug?: boolean + autoprefixer?: autoprefixer.Options /** - * Enable any feature that would need an extra browser library to be loaded into the page for it to work. + * Enable or disable specific polyfills by ID. + * Passing `true` to a specific [feature ID](https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md) will enable its polyfill, + * while passing `false` will disable it. + * + * Passing an object to a specific feature ID will both enable and configure it. + */ + features?: pluginsOptions + + /** + * Enable debugging messages to stdout giving insights into which features have been enabled/disabled and why. * default: false */ - enableClientSidePolyfills?: boolean + debug?: boolean } diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts b/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts index ea75ab8c7..443b6d5dd 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts @@ -1,10 +1,10 @@ -import type { pluginOptions as postcssInitial } from 'postcss-initial'; +import type { pluginOptions as postcssInitial } from '../types/postcss-initial/plugin-options'; import type { pluginOptions as postcssPseudoClassAnyLink } from 'postcss-pseudo-class-any-link'; import type { pluginOptions as postcssBlankPseudo } from 'css-blank-pseudo'; -import type { pluginOptions as postcssPageBreak } from 'postcss-page-break'; +import type { pluginOptions as postcssPageBreak } from '../types/postcss-page-break/plugin-options'; import type { pluginOptions as postcssCascadeLayers } from '@csstools/postcss-cascade-layers'; import type { pluginOptions as postcssAttributeCaseInsensitive } from 'postcss-attribute-case-insensitive'; -import type { pluginOptions as postcssClamp } from 'postcss-clamp'; +import type { pluginOptions as postcssClamp } from '../types/postcss-clamp/plugin-options'; import type { pluginOptions as postcssColorFunction } from '@csstools/postcss-color-function'; import type { pluginOptions as postcssColorFunctionalNotation } from 'postcss-color-functional-notation'; import type { pluginOptions as postcssCustomMedia } from 'postcss-custom-media'; @@ -16,7 +16,7 @@ import type { pluginOptions as postcssDoublePositionGradients } from 'postcss-do import type { pluginOptions as postcssFocusVisible } from 'postcss-focus-visible'; import type { pluginOptions as postcssFocusWithin } from 'postcss-focus-within'; import type { pluginOptions as postcssFontFormatKeywords } from '@csstools/postcss-font-format-keywords'; -import type { pluginOptions as postcssFontVariant } from 'postcss-font-variant'; +import type { pluginOptions as postcssFontVariant } from '../types/postcss-font-variant/plugin-options'; import type { pluginOptions as postcssGapProperties } from 'postcss-gap-properties'; import type { pluginOptions as postcssHasPseudo } from 'css-has-pseudo'; import type { pluginOptions as postcssColorHexAlpha } from 'postcss-color-hex-alpha'; @@ -25,21 +25,21 @@ import type { pluginOptions as postcssICUnit } from '@csstools/postcss-ic-unit'; import type { pluginOptions as postcssImageSetFunction } from 'postcss-image-set-function'; import type { pluginOptions as postcssIsPseudoClass } from '@csstools/postcss-is-pseudo-class'; import type { pluginOptions as postcssLabFunction } from 'postcss-lab-function'; -import type { pluginOptions as postcssLogical } from 'postcss-logical'; -import type { pluginOptions as postcssMediaMinmax } from 'postcss-media-minmax'; +import type { pluginOptions as postcssLogical } from '../types/postcss-logical/plugin-options'; +import type { pluginOptions as postcssMediaMinmax } from '../types/postcss-media-minmax/plugin-options'; import type { pluginOptions as postcssNestedCalc } from '@csstools/postcss-nested-calc'; import type { pluginOptions as postcssNesting } from 'postcss-nesting'; import type { pluginOptions as postcssSelectorNot } from 'postcss-selector-not'; import type { pluginOptions as postcssOKLabFunction } from '@csstools/postcss-oklab-function'; -import type { pluginOptions as postcssOpacityPercentage } from 'postcss-opacity-percentage'; +import type { pluginOptions as postcssOpacityPercentage } from '../types/postcss-opacity-percentage/plugin-options'; import type { pluginOptions as postcssOverflowShorthand } from 'postcss-overflow-shorthand'; -import type { pluginOptions as postcssReplaceOverflowWrap } from 'postcss-replace-overflow-wrap'; +import type { pluginOptions as postcssReplaceOverflowWrap } from '../types/postcss-replace-overflow-wrap/plugin-options'; import type { pluginOptions as postcssPlace } from 'postcss-place'; import type { pluginOptions as postcssPrefersColorScheme } from 'css-prefers-color-scheme'; import type { pluginOptions as postcssColorRebeccapurple } from 'postcss-color-rebeccapurple'; import type { pluginOptions as postcssScopePseudoClass } from '@csstools/postcss-scope-pseudo-class'; import type { pluginOptions as postcssSteppedValueFunctions } from '@csstools/postcss-stepped-value-functions'; -import type { pluginOptions as postcssFontFamilySystemUI } from '../patch/postcss-system-ui-font-family.mjs'; +import type { pluginOptions as postcssFontFamilySystemUI } from '../types/postcss-system-ui-font-family/plugin-options'; import type { pluginOptions as postcssTextDecorationShorthand } from '@csstools/postcss-text-decoration-shorthand'; import type { pluginOptions as postcssTrigonometricFunctions } from '@csstools/postcss-trigonometric-functions'; import type { pluginOptions as postcssUnsetValue } from '@csstools/postcss-unset-value'; @@ -127,7 +127,7 @@ export type pluginsOptions = { 'scope-pseudo-class'?: postcssScopePseudoClass | boolean /** plugin options for "@csstools/postcss-stepped-value-functions" */ 'stepped-value-functions'?: postcssSteppedValueFunctions | boolean - /** plugin options for "../patch/postcss-system-ui-font-family.mjs" */ + /** plugin options for "postcss-system-ui-font-family" */ 'system-ui-font-family'?: postcssFontFamilySystemUI | boolean /** plugin options for "@csstools/postcss-text-decoration-shorthand" */ 'text-decoration-shorthand'?: postcssTextDecorationShorthand | boolean diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-clamp/index.d.ts b/plugin-packs/postcss-preset-env/src/types/postcss-clamp/index.d.ts new file mode 100644 index 000000000..03b009e79 --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-clamp/index.d.ts @@ -0,0 +1,12 @@ +declare module 'postcss-clamp' { + /** postcss-clamp plugin options */ + export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, + /** + * The precalculate option determines whether values with the same unit should be precalculated. + * default: false + */ + precalculate?: boolean, + }; +} diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-clamp/plugin-options.ts b/plugin-packs/postcss-preset-env/src/types/postcss-clamp/plugin-options.ts new file mode 100644 index 000000000..d1e433440 --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-clamp/plugin-options.ts @@ -0,0 +1,10 @@ +/** postcss-clamp plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, + /** + * The precalculate option determines whether values with the same unit should be precalculated. + * default: false + */ + precalculate?: boolean, +}; diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-font-variant/index.d.ts b/plugin-packs/postcss-preset-env/src/types/postcss-font-variant/index.d.ts new file mode 100644 index 000000000..cb22aa272 --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-font-variant/index.d.ts @@ -0,0 +1,4 @@ +declare module 'postcss-font-variant' { + /** postcss-font-variant plugin options */ + export type pluginOptions = Record; +} diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-font-variant/plugin-options.ts b/plugin-packs/postcss-preset-env/src/types/postcss-font-variant/plugin-options.ts new file mode 100644 index 000000000..b539e77b2 --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-font-variant/plugin-options.ts @@ -0,0 +1,2 @@ +/** postcss-font-variant plugin options */ +export type pluginOptions = Record; diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-initial/index.d.ts b/plugin-packs/postcss-preset-env/src/types/postcss-initial/index.d.ts new file mode 100644 index 000000000..c586d58a2 --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-initial/index.d.ts @@ -0,0 +1,13 @@ +declare module 'postcss-initial' { + /** postcss-initial plugin options */ + export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, + /** + * Describes what subset of rules should be unsetted with all property (to reduce code weight). + * Possible subsets: all, inherited. + * default: 'all'. + * */ + reset?: string + }; +} diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-initial/plugin-options.ts b/plugin-packs/postcss-preset-env/src/types/postcss-initial/plugin-options.ts new file mode 100644 index 000000000..c661be6d9 --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-initial/plugin-options.ts @@ -0,0 +1,11 @@ +/** postcss-initial plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, + /** + * Describes what subset of rules should be unsetted with all property (to reduce code weight). + * Possible subsets: all, inherited. + * default: 'all'. + * */ + reset?: string +}; diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-logical/index.d.ts b/plugin-packs/postcss-preset-env/src/types/postcss-logical/index.d.ts new file mode 100644 index 000000000..b672797f4 --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-logical/index.d.ts @@ -0,0 +1,9 @@ +declare module 'postcss-logical' { + /** postcss-logical plugin options */ + export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, + /** Assume a direction for the document. default: null */ + dir?: 'ltr' | 'rtl' + }; +} diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-logical/plugin-options.ts b/plugin-packs/postcss-preset-env/src/types/postcss-logical/plugin-options.ts new file mode 100644 index 000000000..ae080e6b5 --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-logical/plugin-options.ts @@ -0,0 +1,7 @@ +/** postcss-logical plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, + /** Assume a direction for the document. default: null */ + dir?: 'ltr' | 'rtl' +}; diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-media-minmax/index.d.ts b/plugin-packs/postcss-preset-env/src/types/postcss-media-minmax/index.d.ts new file mode 100644 index 000000000..93ded2ecd --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-media-minmax/index.d.ts @@ -0,0 +1,4 @@ +declare module 'postcss-media-minmax' { + /** postcss-media-minmax plugin options */ + export type pluginOptions = Record; +} diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-media-minmax/plugin-options.ts b/plugin-packs/postcss-preset-env/src/types/postcss-media-minmax/plugin-options.ts new file mode 100644 index 000000000..a8b99f34e --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-media-minmax/plugin-options.ts @@ -0,0 +1,2 @@ +/** postcss-media-minmax plugin options */ +export type pluginOptions = Record; diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-opacity-percentage/index.d.ts b/plugin-packs/postcss-preset-env/src/types/postcss-opacity-percentage/index.d.ts new file mode 100644 index 000000000..b0a543b06 --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-opacity-percentage/index.d.ts @@ -0,0 +1,7 @@ +declare module 'postcss-opacity-percentage' { + /** postcss-opacity-percentage plugin options */ + export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, + }; +} diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-opacity-percentage/plugin-options.ts b/plugin-packs/postcss-preset-env/src/types/postcss-opacity-percentage/plugin-options.ts new file mode 100644 index 000000000..53ece950a --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-opacity-percentage/plugin-options.ts @@ -0,0 +1,5 @@ +/** postcss-opacity-percentage plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-page-break/index.d.ts b/plugin-packs/postcss-preset-env/src/types/postcss-page-break/index.d.ts new file mode 100644 index 000000000..f3832e8dc --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-page-break/index.d.ts @@ -0,0 +1,4 @@ +declare module 'postcss-page-break' { + /** postcss-page-break plugin options */ + export type pluginOptions = Record; +} diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-page-break/plugin-options.ts b/plugin-packs/postcss-preset-env/src/types/postcss-page-break/plugin-options.ts new file mode 100644 index 000000000..05d36d940 --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-page-break/plugin-options.ts @@ -0,0 +1,2 @@ +/** postcss-page-break plugin options */ +export type pluginOptions = Record; diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-replace-overflow-wrap/index.d.ts b/plugin-packs/postcss-preset-env/src/types/postcss-replace-overflow-wrap/index.d.ts new file mode 100644 index 000000000..043e5f503 --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-replace-overflow-wrap/index.d.ts @@ -0,0 +1,7 @@ +declare module 'postcss-replace-overflow-wrap' { + /** postcss-replace-overflow-wrap plugin options */ + export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, + }; +} diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-replace-overflow-wrap/plugin-options.ts b/plugin-packs/postcss-preset-env/src/types/postcss-replace-overflow-wrap/plugin-options.ts new file mode 100644 index 000000000..d3e75c54d --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-replace-overflow-wrap/plugin-options.ts @@ -0,0 +1,5 @@ +/** postcss-replace-overflow-wrap plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-system-ui-font-family/index.d.ts b/plugin-packs/postcss-preset-env/src/types/postcss-system-ui-font-family/index.d.ts new file mode 100644 index 000000000..8044b80b5 --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-system-ui-font-family/index.d.ts @@ -0,0 +1,4 @@ +declare module 'postcss-system-ui-font-family' { + /** postcss-system-ui-font-family plugin options */ + export type pluginOptions = Record; +} diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-system-ui-font-family/plugin-options.ts b/plugin-packs/postcss-preset-env/src/types/postcss-system-ui-font-family/plugin-options.ts new file mode 100644 index 000000000..6a5f429da --- /dev/null +++ b/plugin-packs/postcss-preset-env/src/types/postcss-system-ui-font-family/plugin-options.ts @@ -0,0 +1,2 @@ +/** postcss-system-ui-font-family plugin options */ +export type pluginOptions = Record; 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 1d2ce906e..c84282ec4 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 @@ -468,7 +468,6 @@ h6.test-custom-selectors { width: auto; word-spacing: normal; z-index: auto; - all: initial; -webkit-box-ordinal-group: 21; -webkit-order: 20; -moz-box-ordinal-group: 21; @@ -542,6 +541,7 @@ h6.test-custom-selectors { -ms-flex-order: 25; order: 25; word-wrap: break-word; + overflow-wrap: break-word; } .test-focus-visible-pseudo-class:focus-visible { @@ -952,7 +952,6 @@ h6.test-custom-selectors { } .unset { - clip: initial; clip: unset; } diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css index 05843f0d7..3e27f2aa1 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css @@ -439,7 +439,6 @@ h6.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n width: auto; word-spacing: normal; z-index: auto; - all: initial; -webkit-box-ordinal-group: 21; -webkit-order: 20; -moz-box-ordinal-group: 21; @@ -513,6 +512,7 @@ h6.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n -ms-flex-order: 25; order: 25; word-wrap: break-word; + overflow-wrap: break-word; } .test-focus-visible-pseudo-class:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { @@ -896,7 +896,6 @@ h6.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n } .unset:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - clip: initial; clip: unset; } diff --git a/plugins/postcss-color-functional-notation/src/index.ts b/plugins/postcss-color-functional-notation/src/index.ts index b5de9bcd1..c42f9e600 100644 --- a/plugins/postcss-color-functional-notation/src/index.ts +++ b/plugins/postcss-color-functional-notation/src/index.ts @@ -6,8 +6,14 @@ import onCSSFunction from './on-css-function'; import type { PluginCreator } from 'postcss'; import { hasSupportsAtRuleAncestor } from './has-supports-at-rule-ancestor'; +/** postcss-color-functional-notation plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; + /** Transform lab() and lch() functions in CSS. */ -const postcssPlugin: PluginCreator<{ preserve: boolean }> = (opts?: { preserve: boolean }) => { +const postcssPlugin: PluginCreator = (opts?: pluginOptions) => { const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false; return { diff --git a/plugins/postcss-color-hex-alpha/src/index.ts b/plugins/postcss-color-hex-alpha/src/index.ts index bcd68766a..089cd671c 100644 --- a/plugins/postcss-color-hex-alpha/src/index.ts +++ b/plugins/postcss-color-hex-alpha/src/index.ts @@ -1,7 +1,11 @@ import type { PluginCreator } from 'postcss'; import valuesParser from 'postcss-value-parser'; -type pluginOptions = { preserve?: boolean }; +/** postcss-color-hex-alpha plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; const creator: PluginCreator = (opts?: pluginOptions) => { const options = Object.assign( diff --git a/plugins/postcss-color-rebeccapurple/src/index.ts b/plugins/postcss-color-rebeccapurple/src/index.ts index 87dc40507..5e2f37a72 100644 --- a/plugins/postcss-color-rebeccapurple/src/index.ts +++ b/plugins/postcss-color-rebeccapurple/src/index.ts @@ -1,7 +1,11 @@ import type { PluginCreator } from 'postcss'; import valuesParser from 'postcss-value-parser'; -type pluginOptions = { preserve?: boolean }; +/** postcss-color-rebeccapurple plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; const creator: PluginCreator = (opts?: pluginOptions) => { const options = Object.assign( diff --git a/plugins/postcss-conditional-values/src/index.ts b/plugins/postcss-conditional-values/src/index.ts index 1514d73d4..01e7b9d52 100644 --- a/plugins/postcss-conditional-values/src/index.ts +++ b/plugins/postcss-conditional-values/src/index.ts @@ -2,7 +2,7 @@ import { PluginCreator } from 'postcss'; import type { Rule } from 'postcss'; import valuesParser from 'postcss-value-parser'; -type pluginOptions = { +export type pluginOptions = { functionName: string; } diff --git a/plugins/postcss-custom-media/src/index.ts b/plugins/postcss-custom-media/src/index.ts index 9ab51864f..cc0c0b1db 100644 --- a/plugins/postcss-custom-media/src/index.ts +++ b/plugins/postcss-custom-media/src/index.ts @@ -3,12 +3,13 @@ import type { PluginCreator } from 'postcss'; import getCustomMedia from './custom-media-from-root'; import { transformAtMediaListTokens } from './transform-at-media/transform-at-media'; -export interface PluginOptions { - /** Determines whether Custom Media and media queries using custom media should be preserved in their original form. */ - preserve?: boolean -} +/** postcss-custom-media plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; -const creator: PluginCreator = (opts?: PluginOptions) => { +const creator: PluginCreator = (opts?: pluginOptions) => { // whether to preserve custom media and rules using them const preserve = Boolean(Object(opts).preserve); diff --git a/plugins/postcss-custom-properties/src/index.ts b/plugins/postcss-custom-properties/src/index.ts index 8085bdfdf..afd3a04b0 100644 --- a/plugins/postcss-custom-properties/src/index.ts +++ b/plugins/postcss-custom-properties/src/index.ts @@ -5,12 +5,13 @@ import getCustomPropertiesFromRoot from './get-custom-properties-from-root'; import { isBlockIgnored } from './is-ignored'; import transformProperties from './transform-properties'; -export interface PluginOptions { - /** Determines whether properties using custom properties should be preserved in their original form. */ - preserve?: boolean -} +/** postcss-custom-properties plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, +}; -const creator: PluginCreator = (opts?: PluginOptions) => { +const creator: PluginCreator = (opts?: pluginOptions) => { const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true; if ('importFrom' in Object(opts)) { diff --git a/plugins/postcss-custom-selectors/src/index.ts b/plugins/postcss-custom-selectors/src/index.ts index 4fa31774f..28f591e19 100644 --- a/plugins/postcss-custom-selectors/src/index.ts +++ b/plugins/postcss-custom-selectors/src/index.ts @@ -2,12 +2,13 @@ import type { PluginCreator } from 'postcss'; import getCustomSelectors from './custom-selectors-from-root'; import transformRule from './transform-rule'; -export interface PluginOptions { - /** Determines whether Custom Selectors and selectors using custom selectors should be preserved in their original form. */ - preserve?: boolean -} +/** postcss-custom-selectors plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; -const creator: PluginCreator = (opts?: PluginOptions) => { +const creator: PluginCreator = (opts?: pluginOptions) => { // whether to preserve custom selectors and rules using them const preserve = Boolean(Object(opts).preserve); diff --git a/plugins/postcss-extract/src/index.ts b/plugins/postcss-extract/src/index.ts index 55b72777a..adc6b4365 100644 --- a/plugins/postcss-extract/src/index.ts +++ b/plugins/postcss-extract/src/index.ts @@ -2,7 +2,7 @@ import type { PluginCreator } from 'postcss'; import selectorParser from 'postcss-selector-parser'; import { extract } from './select-nodes'; -type pluginOptions = { +export type pluginOptions = { /** Mapping of queries */ queries: Record, /** Extract after transforms are likely to be done, or before it */ diff --git a/plugins/postcss-focus-visible/src/index.ts b/plugins/postcss-focus-visible/src/index.ts index 06823a60f..310abb3f0 100644 --- a/plugins/postcss-focus-visible/src/index.ts +++ b/plugins/postcss-focus-visible/src/index.ts @@ -1,7 +1,15 @@ import parser from 'postcss-selector-parser'; import type { PluginCreator } from 'postcss'; -type pluginOptions = { preserve?: boolean, replaceWith?: string, disablePolyfillReadyClass?: boolean }; +/** postcss-focus-visible plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, + /** The replacement class to be used in the polyfill. default: ".focus-visible" */ + replaceWith?: string, + /** Disable the selector prefix that is used to prevent a flash of incorrectly styled content. default: false */ + disablePolyfillReadyClass?: boolean +}; const POLYFILL_READY_CLASSNAME = 'js-focus-visible'; const PSEUDO = ':focus-visible'; diff --git a/plugins/postcss-focus-within/src/index.ts b/plugins/postcss-focus-within/src/index.ts index c9cc5152e..cdb0d7464 100644 --- a/plugins/postcss-focus-within/src/index.ts +++ b/plugins/postcss-focus-within/src/index.ts @@ -2,7 +2,15 @@ import parser from 'postcss-selector-parser'; import type { PluginCreator } from 'postcss'; import isValidReplacement from './is-valid-replacement.mjs'; -type pluginOptions = { preserve?: boolean, replaceWith?: string, disablePolyfillReadyClass?: boolean }; +/** postcss-focus-within plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, + /** The replacement class to be used in the polyfill. default: "[focus-within]" */ + replaceWith?: string, + /** Disable the selector prefix that is used to prevent a flash of incorrectly styled content. default: false */ + disablePolyfillReadyClass?: boolean +}; const POLYFILL_READY_CLASSNAME = 'js-focus-within'; const PSEUDO = ':focus-within'; diff --git a/plugins/postcss-font-format-keywords/src/index.ts b/plugins/postcss-font-format-keywords/src/index.ts index 0bc456000..690f29fa0 100644 --- a/plugins/postcss-font-format-keywords/src/index.ts +++ b/plugins/postcss-font-format-keywords/src/index.ts @@ -11,7 +11,13 @@ const keywords = [ 'svg', ]; -const creator: PluginCreator<{ preserve: boolean }> = (opts?: { preserve: boolean }) => { +/** postcss-font-format-keywords plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; + +const creator: PluginCreator = (opts?: pluginOptions) => { const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false; return { diff --git a/plugins/postcss-hwb-function/src/index.ts b/plugins/postcss-hwb-function/src/index.ts index 001c7c914..8b8850f90 100644 --- a/plugins/postcss-hwb-function/src/index.ts +++ b/plugins/postcss-hwb-function/src/index.ts @@ -8,8 +8,14 @@ import type { PluginCreator } from 'postcss'; const atSupportsHwbParams = '(color: hwb(0% 0 0))'; +/** postcss-hwb-function plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; + /** Transform hwb() functions in CSS. */ -const postcssPlugin: PluginCreator<{ preserve: boolean }> = (opts?: { preserve: boolean }) => { +const postcssPlugin: PluginCreator = (opts?: pluginOptions) => { const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false; return { diff --git a/plugins/postcss-image-set-function/.tape.mjs b/plugins/postcss-image-set-function/.tape.mjs index 8219da2a7..432b13914 100644 --- a/plugins/postcss-image-set-function/.tape.mjs +++ b/plugins/postcss-image-set-function/.tape.mjs @@ -19,7 +19,7 @@ postcssTape(plugin)({ 'invalid:warn': { message: 'warns invalid usage when { onvalid: "warn" }', options: { - oninvalid: 'warn' + onInvalid: 'warn' }, expect: 'invalid.css', result: 'invalid.css', @@ -28,7 +28,7 @@ postcssTape(plugin)({ 'invalid:throw': { message: 'throws invalid usage when { onvalid: "throw" }', options: { - oninvalid: 'throw' + onInvalid: 'throw' }, expect: 'invalid.css', result: 'invalid.css', diff --git a/plugins/postcss-image-set-function/CHANGELOG.md b/plugins/postcss-image-set-function/CHANGELOG.md index ce0776003..176577b32 100644 --- a/plugins/postcss-image-set-function/CHANGELOG.md +++ b/plugins/postcss-image-set-function/CHANGELOG.md @@ -3,6 +3,7 @@ ### Unreleased (major) - Updated: Support for Node v14+ (major). +- Changed: `oninvalid` plugin option to `onInvalid` to match other plugins with similar options (breaking). ### 4.0.7 (July 8, 2022) diff --git a/plugins/postcss-image-set-function/README.md b/plugins/postcss-image-set-function/README.md index a7a16e2a3..c81236b49 100644 --- a/plugins/postcss-image-set-function/README.md +++ b/plugins/postcss-image-set-function/README.md @@ -115,18 +115,18 @@ postcssImageSetFunction({ preserve: false }) } ``` -### onvalid +### onInvalid -The `oninvalid` option determines how invalid usage of `image-set()` should be -handled. By default, invalid usages of `image-set()` are ignored. They can be -configured to display a `warning` or `throw` an error. +The `onInvalid` option determines how invalid usage of `image-set()` should be +handled. By default, invalid usages of `image-set()` are ignored. +They can be configured to emit a warning with `warn` or throw an exception with `throw`. ```js -postcssImageSetFunction({ oninvalid: 'warning' }) // warn on invalid usages +postcssImageSetFunction({ onInvalid: 'warn' }) // warn on invalid usages ``` ```js -postcssImageSetFunction({ oninvalid: 'throw' }) // throw on invalid usages +postcssImageSetFunction({ onInvalid: 'throw' }) // throw on invalid usages ``` ## Image Resolution diff --git a/plugins/postcss-image-set-function/src/index.ts b/plugins/postcss-image-set-function/src/index.ts index c92f9621c..100d6b655 100644 --- a/plugins/postcss-image-set-function/src/index.ts +++ b/plugins/postcss-image-set-function/src/index.ts @@ -6,10 +6,27 @@ import { handleInvalidation } from './lib/handle-invalidation'; const imageSetValueMatchRegExp = /(^|[^\w-])(-webkit-)?image-set\(/i; const imageSetFunctionMatchRegExp = /^(-webkit-)?image-set$/i; -const creator: PluginCreator<{ preserve: boolean, oninvalid: string }> = (opts?: { preserve: boolean, oninvalid: string }) => { +/** postcss-image-set-function plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, + /** + * Determine how invalid usage of `image-set()` should be handled. + * By default, invalid usages of `image-set()` are ignored. + * They can be configured to emit a warning with `warn` or throw an exception with `throw`. + * default: 'ignore' + */ + onInvalid?: 'warn' | 'throw' | 'ignore' | false +}; + +const creator: PluginCreator = (opts?: pluginOptions) => { // prepare options const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true; - const oninvalid = 'oninvalid' in Object(opts) ? opts.oninvalid : 'ignore'; + const oninvalid = 'onInvalid' in Object(opts) ? opts.onInvalid : 'ignore'; + + if ('oninvalid' in Object(opts)) { + throw new Error('"oninvalid" was changed to "onInvalid" to match other plugins with similar options'); + } return { postcssPlugin: 'postcss-image-set-function', diff --git a/plugins/postcss-image-set-function/src/lib/process-image-set.ts b/plugins/postcss-image-set-function/src/lib/process-image-set.ts index a97495b4d..65b8f7211 100644 --- a/plugins/postcss-image-set-function/src/lib/process-image-set.ts +++ b/plugins/postcss-image-set-function/src/lib/process-image-set.ts @@ -16,7 +16,7 @@ type mediaByDpr = { value: string; } -export const processImageSet = (imageSetFunctions: Array, decl: Declaration, opts: { decl: Declaration, oninvalid: string, preserve: boolean, result: Result, postcss: Postcss }) => { +export const processImageSet = (imageSetFunctions: Array, decl: Declaration, opts: { decl: Declaration, oninvalid: 'warn' | 'throw' | 'ignore' | false, preserve: boolean, result: Result, postcss: Postcss }) => { const parent = decl.parent; const mediasByDpr: Map = new Map(); const declValue = decl.value; diff --git a/plugins/postcss-is-pseudo-class/README.md b/plugins/postcss-is-pseudo-class/README.md index 816d2cb3a..3f9e1943b 100644 --- a/plugins/postcss-is-pseudo-class/README.md +++ b/plugins/postcss-is-pseudo-class/README.md @@ -96,7 +96,7 @@ button:focus { ### specificityMatchingName -The `specificityMatchingName` option allows you to change to selector used to adjust specificity. +The `specificityMatchingName` option allows you to change the selector used to adjust specificity. The default value is `does-not-exist`. If this is an actual class, id or tag name in your code, you will need to set a different option here. diff --git a/plugins/postcss-is-pseudo-class/src/index.ts b/plugins/postcss-is-pseudo-class/src/index.ts index 84b4fa94a..c19dedc42 100644 --- a/plugins/postcss-is-pseudo-class/src/index.ts +++ b/plugins/postcss-is-pseudo-class/src/index.ts @@ -2,12 +2,26 @@ import type { PluginCreator } from 'postcss'; import complexSelectors from './split-selectors/complex'; import splitSelectors from './split-selectors/split-selectors'; -type pluginOptions = { +/** postcss-is-pseudo-class plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ preserve?: boolean, + /** + * Warn on complex selectors in `:is` pseudo class functions. + * default: _not set_ + */ onComplexSelector?: 'warning', + /** + * Warn when pseudo elements are used in `:is` pseudo class functions. + * default: _not set_ + */ onPseudoElement?: 'warning', + /** + * Change the selector used to adjust specificity. + * default: `does-not-exist`. + */ specificityMatchingName?: string -} +}; const creator: PluginCreator = (opts?: pluginOptions) => { const options = { diff --git a/plugins/postcss-media-queries-aspect-ratio-number-values/src/index.ts b/plugins/postcss-media-queries-aspect-ratio-number-values/src/index.ts index 0ec474da5..2ad62f602 100644 --- a/plugins/postcss-media-queries-aspect-ratio-number-values/src/index.ts +++ b/plugins/postcss-media-queries-aspect-ratio-number-values/src/index.ts @@ -1,8 +1,11 @@ import type { PluginCreator } from 'postcss'; import { transformMediaQueryList } from './transform-media-query-list'; -type pluginOptions = { preserve?: boolean }; - +/** postcss-media-queries-aspect-ratio-number-values plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; const creator: PluginCreator = (opts?: pluginOptions) => { const options = Object.assign( diff --git a/plugins/postcss-nested-calc/src/index.ts b/plugins/postcss-nested-calc/src/index.ts index baa3dd92b..7acb161e2 100644 --- a/plugins/postcss-nested-calc/src/index.ts +++ b/plugins/postcss-nested-calc/src/index.ts @@ -3,7 +3,11 @@ import valueParser from 'postcss-value-parser'; import type { ParsedValue } from 'postcss-value-parser'; import { numberOfCalcOccurrences } from './occurrences'; -type pluginOptions = { preserve?: boolean }; +/** postcss-nested-calc plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, +}; const creator: PluginCreator = (opts?: pluginOptions) => { const options = Object.assign( diff --git a/plugins/postcss-nesting/src/index.ts b/plugins/postcss-nesting/src/index.ts index 36316b56e..d70f52aef 100644 --- a/plugins/postcss-nesting/src/index.ts +++ b/plugins/postcss-nesting/src/index.ts @@ -1,7 +1,11 @@ import type { PluginCreator } from 'postcss'; import walk from './lib/walk.js'; -type pluginOptions = { noIsPseudoSelector?: boolean }; +/** postcss-nesting plugin options */ +export type pluginOptions = { + /** Avoid the `:is()` pseudo class as much as possible. default: false */ + noIsPseudoSelector?: boolean, +}; const creator: PluginCreator = (opts?: pluginOptions) => { const options = Object.assign( diff --git a/plugins/postcss-normalize-display-values/src/index.ts b/plugins/postcss-normalize-display-values/src/index.ts index 09c234258..4bf11f2cf 100644 --- a/plugins/postcss-normalize-display-values/src/index.ts +++ b/plugins/postcss-normalize-display-values/src/index.ts @@ -26,7 +26,13 @@ function transform(value) { return match; } -const creator: PluginCreator<{ preserve: boolean }> = (opts?: { preserve: boolean }) => { +/** postcss-normalize-display-values plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: true */ + preserve?: boolean, +}; + +const creator: PluginCreator = (opts?: pluginOptions) => { const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true; return { diff --git a/plugins/postcss-scope-pseudo-class/src/index.ts b/plugins/postcss-scope-pseudo-class/src/index.ts index c60e271c5..04adfa4b2 100644 --- a/plugins/postcss-scope-pseudo-class/src/index.ts +++ b/plugins/postcss-scope-pseudo-class/src/index.ts @@ -1,7 +1,11 @@ import type { AtRule, Container, Node, PluginCreator } from 'postcss'; import parser from 'postcss-selector-parser'; -type pluginOptions = { preserve?: boolean }; +/** postcss-scope-pseudo-class plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; const creator: PluginCreator = (opts?: pluginOptions) => { const options = Object.assign( diff --git a/plugins/postcss-selector-not/src/index.ts b/plugins/postcss-selector-not/src/index.ts index dcaab7286..151844083 100644 --- a/plugins/postcss-selector-not/src/index.ts +++ b/plugins/postcss-selector-not/src/index.ts @@ -21,7 +21,10 @@ function cleanupWhitespace(node) { } } -const creator: PluginCreator = () => { +/** postcss-selector-not plugin options */ +export type pluginOptions = Record; + +const creator: PluginCreator = () => { return { postcssPlugin: 'postcss-selector-not', Rule: (rule, { result }) => { diff --git a/plugins/postcss-stepped-value-functions/README.md b/plugins/postcss-stepped-value-functions/README.md index c7c9f39a7..2001513be 100644 --- a/plugins/postcss-stepped-value-functions/README.md +++ b/plugins/postcss-stepped-value-functions/README.md @@ -123,7 +123,7 @@ postcssSteppedValueFunctions({ onInvalid: 'warn' }) Will produce on the terminal: -```bash +```txt [postcss-stepped-value-functions]: Failed to transform mod(18px, 5rem) as the units don't match ``` diff --git a/plugins/postcss-stepped-value-functions/docs/README.md b/plugins/postcss-stepped-value-functions/docs/README.md index d27cfcc22..e27ec16de 100644 --- a/plugins/postcss-stepped-value-functions/docs/README.md +++ b/plugins/postcss-stepped-value-functions/docs/README.md @@ -71,7 +71,7 @@ is preserved. By default, it is not preserved. Will produce on the terminal: -```bash +```txt [postcss-stepped-value-functions]: Failed to transform mod(18px, 5rem) as the units don't match ``` diff --git a/plugins/postcss-stepped-value-functions/src/index.ts b/plugins/postcss-stepped-value-functions/src/index.ts index 077133ed7..a6774e7d1 100644 --- a/plugins/postcss-stepped-value-functions/src/index.ts +++ b/plugins/postcss-stepped-value-functions/src/index.ts @@ -2,8 +2,8 @@ import type { PluginCreator } from 'postcss'; import { transformModFunction, modFunctionCheck } from './mod'; import { transformRemFunction, remFunctionCheck } from './rem'; import { transformRoundFunction, roundFunctionCheck } from './round'; - -export type pluginOptions = { preserve?: boolean, onInvalid?: string }; +import type { pluginOptions } from './options'; +export type { pluginOptions } from './options'; const creator: PluginCreator = (opts?: pluginOptions) => { const options = Object.assign( diff --git a/plugins/postcss-stepped-value-functions/src/mod.ts b/plugins/postcss-stepped-value-functions/src/mod.ts index 1e0cc5fbd..213dc7c5c 100644 --- a/plugins/postcss-stepped-value-functions/src/mod.ts +++ b/plugins/postcss-stepped-value-functions/src/mod.ts @@ -1,7 +1,7 @@ import type { Declaration, Result } from 'postcss'; import valueParser from 'postcss-value-parser'; import { functionNodeToWordNode, validateArgumentsAndTypes } from './utils'; -import { pluginOptions } from './index'; +import type { pluginOptions } from './options'; const modFunctionCheck = 'mod('; diff --git a/plugins/postcss-stepped-value-functions/src/options.ts b/plugins/postcss-stepped-value-functions/src/options.ts new file mode 100644 index 000000000..fe4e96147 --- /dev/null +++ b/plugins/postcss-stepped-value-functions/src/options.ts @@ -0,0 +1,10 @@ +/** postcss-stepped-value-functions plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, + /** + * Set `warn` to get warnings when the usage of the functions is incorrect. + * default: _not set_ + */ + onInvalid?: 'warn' +}; diff --git a/plugins/postcss-stepped-value-functions/src/rem.ts b/plugins/postcss-stepped-value-functions/src/rem.ts index ceb407764..0b143ec06 100644 --- a/plugins/postcss-stepped-value-functions/src/rem.ts +++ b/plugins/postcss-stepped-value-functions/src/rem.ts @@ -1,7 +1,7 @@ import type { Declaration, Result } from 'postcss'; import valueParser from 'postcss-value-parser'; import { functionNodeToWordNode, validateArgumentsAndTypes } from './utils'; -import { pluginOptions } from './index'; +import type { pluginOptions } from './options'; const remFunctionCheck = 'rem('; diff --git a/plugins/postcss-stepped-value-functions/src/round.ts b/plugins/postcss-stepped-value-functions/src/round.ts index 0b7547147..ada98dbbf 100644 --- a/plugins/postcss-stepped-value-functions/src/round.ts +++ b/plugins/postcss-stepped-value-functions/src/round.ts @@ -1,7 +1,7 @@ import type { Declaration, Result } from 'postcss'; import valueParser from 'postcss-value-parser'; import { functionNodeToWordNode, optionallyWarn } from './utils'; -import { pluginOptions } from './index'; +import type { pluginOptions } from './options'; const roundFunctionCheck = 'round('; diff --git a/plugins/postcss-stepped-value-functions/src/utils.ts b/plugins/postcss-stepped-value-functions/src/utils.ts index 01d2c66c6..f77c26041 100644 --- a/plugins/postcss-stepped-value-functions/src/utils.ts +++ b/plugins/postcss-stepped-value-functions/src/utils.ts @@ -1,7 +1,7 @@ import valueParser from 'postcss-value-parser'; import type { FunctionNode, Node, WordNode } from 'postcss-value-parser'; import type { Declaration, Result } from 'postcss'; -import { pluginOptions } from './index'; +import type { pluginOptions } from './options'; export function isVarNode(node: Node) { return node.type === 'function' && node.value.toLowerCase() === 'var'; diff --git a/plugins/postcss-text-decoration-shorthand/src/index.ts b/plugins/postcss-text-decoration-shorthand/src/index.ts index d346aea3c..5427196c3 100644 --- a/plugins/postcss-text-decoration-shorthand/src/index.ts +++ b/plugins/postcss-text-decoration-shorthand/src/index.ts @@ -1,7 +1,11 @@ import type { PluginCreator } from 'postcss'; import valueParser from 'postcss-value-parser'; -type pluginOptions = { color?: string, preserve?: boolean }; +/** postcss-text-decoration-shorthand plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; const creator: PluginCreator = (opts?: pluginOptions) => { const options = Object.assign( diff --git a/plugins/postcss-trigonometric-functions/src/index.ts b/plugins/postcss-trigonometric-functions/src/index.ts index 5486ede70..8cc96927c 100644 --- a/plugins/postcss-trigonometric-functions/src/index.ts +++ b/plugins/postcss-trigonometric-functions/src/index.ts @@ -7,7 +7,11 @@ import { acosFunctionCheck, transformAcosFunction } from './acos'; import { atanFunctionCheck, transformAtanFunction } from './atan'; import { atan2FunctionCheck, transformAtan2Function } from './atan2'; -type pluginOptions = { preserve?: boolean }; +/** postcss-trigonometric-functions plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; const Transformations = [ { check: asinFunctionCheck, transform: transformAsinFunction }, diff --git a/plugins/postcss-unset-value/src/index.ts b/plugins/postcss-unset-value/src/index.ts index f67a646f5..688ae47a9 100644 --- a/plugins/postcss-unset-value/src/index.ts +++ b/plugins/postcss-unset-value/src/index.ts @@ -1,11 +1,11 @@ import type { PluginCreator } from 'postcss'; import { inherited, nonInherited } from './property-def'; -type pluginOptions = { - // Preserve the original declaration. - // Default: false - preserve: boolean; -} +/** postcss-unset-value plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, +}; // Convert "unset" to "inherit" or "initial" based on the property definition. const creator: PluginCreator = (opts?: pluginOptions) => { From 0f4abeda6c38e29060ca817fb86a33f440baa1c2 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 20 Nov 2022 12:55:09 +0100 Subject: [PATCH 18/23] final fixes --- package-lock.json | 2 ++ plugin-packs/postcss-preset-env/README.md | 2 -- plugin-packs/postcss-preset-env/package.json | 1 + .../postcss-preset-env/scripts/plugins-data.json | 5 +++++ plugin-packs/postcss-preset-env/src/options.ts | 14 ++++++++++++++ .../src/plugins/plugins-by-id.mjs | 2 ++ .../src/plugins/plugins-data.mjs | 5 +++++ .../src/plugins/plugins-options.ts | 3 +++ .../test/basic.autoprefixer.expect.css | 4 ++++ .../test/basic.autoprefixer.false.expect.css | 4 ++++ .../postcss-preset-env/test/basic.ch38.expect.css | 4 ++++ .../test/basic.ch88-ff78-saf10.expect.css | 4 ++++ .../test/basic.ch88-ff78.expect.css | 4 ++++ .../test/basic.ch88-ff78.no-is-pseudo.expect.css | 4 ++++ plugin-packs/postcss-preset-env/test/basic.css | 4 ++++ .../postcss-preset-env/test/basic.expect.css | 4 ++++ .../postcss-preset-env/test/basic.ff49.expect.css | 4 ++++ .../postcss-preset-env/test/basic.ff66.expect.css | 4 ++++ .../postcss-preset-env/test/basic.ie10.expect.css | 4 ++++ .../test/basic.nesting.false.expect.css | 4 ++++ .../test/basic.nesting.true.expect.css | 4 ++++ .../test/basic.op_mini.expect.css | 4 ++++ .../test/basic.preserve.true.expect.css | 4 ++++ .../test/basic.safari15.expect.css | 4 ++++ .../test/basic.stage0-ff49.expect.css | 4 ++++ .../test/basic.stage0-ff66.expect.css | 4 ++++ .../test/basic.stage0.expect.css | 4 ++++ .../test/basic.vendors-1.expect.css | 4 ++++ .../test/basic.vendors-2.expect.css | 4 ++++ .../test/basic.vendors-3.expect.css | 4 ++++ .../package.json | 2 +- rollup/configs/externals.mjs | 2 ++ 32 files changed, 123 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index c5ffccf8b..b7e4df0b4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7106,6 +7106,7 @@ "@csstools/postcss-hwb-function": "^1.0.2", "@csstools/postcss-ic-unit": "^1.0.1", "@csstools/postcss-is-pseudo-class": "^2.0.7", + "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.0", "@csstools/postcss-nested-calc": "^1.0.0", "@csstools/postcss-normalize-display-values": "^1.0.1", "@csstools/postcss-oklab-function": "^1.1.1", @@ -12085,6 +12086,7 @@ "@csstools/postcss-hwb-function": "^1.0.2", "@csstools/postcss-ic-unit": "^1.0.1", "@csstools/postcss-is-pseudo-class": "^2.0.7", + "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.0", "@csstools/postcss-nested-calc": "^1.0.0", "@csstools/postcss-normalize-display-values": "^1.0.1", "@csstools/postcss-oklab-function": "^1.1.1", diff --git a/plugin-packs/postcss-preset-env/README.md b/plugin-packs/postcss-preset-env/README.md index 68358b950..717ee5b0f 100644 --- a/plugin-packs/postcss-preset-env/README.md +++ b/plugin-packs/postcss-preset-env/README.md @@ -369,8 +369,6 @@ Given they have no support they will always be enabled if they match by Stage: * `blank-pseudo-class`: [Plugin](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo) / [Polyfill](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README-BROWSER.md) * `custom-media-queries`: [Plugin](https://github.com/postcss/postcss-custom-media) -* `has-pseudo-class`: [Plugin](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo) / [Polyfill](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README-BROWSER.md) -* `image-set-function`: [Plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-image-set-function) * `media-query-ranges`: [Plugin](https://github.com/postcss/postcss-media-minmax) * `nesting-rules`: [Plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting) diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json index 3960d486c..00f428a77 100644 --- a/plugin-packs/postcss-preset-env/package.json +++ b/plugin-packs/postcss-preset-env/package.json @@ -34,6 +34,7 @@ "@csstools/postcss-hwb-function": "^1.0.2", "@csstools/postcss-ic-unit": "^1.0.1", "@csstools/postcss-is-pseudo-class": "^2.0.7", + "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.0", "@csstools/postcss-nested-calc": "^1.0.0", "@csstools/postcss-normalize-display-values": "^1.0.1", "@csstools/postcss-oklab-function": "^1.1.1", diff --git a/plugin-packs/postcss-preset-env/scripts/plugins-data.json b/plugin-packs/postcss-preset-env/scripts/plugins-data.json index 259364b12..f3a3454d5 100644 --- a/plugin-packs/postcss-preset-env/scripts/plugins-data.json +++ b/plugin-packs/postcss-preset-env/scripts/plugins-data.json @@ -139,6 +139,11 @@ "id": "media-query-ranges", "importName": "postcssMediaMinmax" }, + { + "packageName": "@csstools/postcss-media-queries-aspect-ratio-number-values", + "id": "media-queries-aspect-ratio-number-values", + "importName": "postcssMediaQueriesAspectRatioNumberValues" + }, { "packageName": "postcss-nesting", "id": "nesting-rules", diff --git a/plugin-packs/postcss-preset-env/src/options.ts b/plugin-packs/postcss-preset-env/src/options.ts index 730666053..0888d1d89 100644 --- a/plugin-packs/postcss-preset-env/src/options.ts +++ b/plugin-packs/postcss-preset-env/src/options.ts @@ -54,6 +54,20 @@ export type pluginOptions = { */ features?: pluginsOptions + /** + * The `insertBefore` key allows you to insert other PostCSS plugins into the chain. + * This is only useful if you are also using sugary PostCSS plugins that must execute before certain polyfills. + * `insertBefore` supports chaining one or multiple plugins. + */ + insertBefore?: Record // eslint-disable-line @typescript-eslint/no-explicit-any + + /** + * The `insertAfter` key allows you to insert other PostCSS plugins into the chain. + * This is only useful if you are also using sugary PostCSS plugins that must execute after certain polyfills. + * `insertAfter` supports chaining one or multiple plugins. + */ + insertAfter?: Record // eslint-disable-line @typescript-eslint/no-explicit-any + /** * Enable debugging messages to stdout giving insights into which features have been enabled/disabled and why. * default: false diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs index 471f9cdf9..94d133417 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs @@ -26,6 +26,7 @@ import postcssImageSetFunction from 'postcss-image-set-function'; import postcssIsPseudoClass from '@csstools/postcss-is-pseudo-class'; import postcssLabFunction from 'postcss-lab-function'; import postcssLogical from 'postcss-logical'; +import postcssMediaQueriesAspectRatioNumberValues from '@csstools/postcss-media-queries-aspect-ratio-number-values'; import postcssMediaMinmax from 'postcss-media-minmax'; import postcssNestedCalc from '@csstools/postcss-nested-calc'; import postcssNesting from 'postcss-nesting'; @@ -75,6 +76,7 @@ export const pluginsById = new Map( ['is-pseudo-class', postcssIsPseudoClass], ['lab-function', postcssLabFunction], ['logical-properties-and-values', postcssLogical], + ['media-queries-aspect-ratio-number-values', postcssMediaQueriesAspectRatioNumberValues], ['media-query-ranges', postcssMediaMinmax], ['nested-calc', postcssNestedCalc], ['nesting-rules', postcssNesting], diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs index 4743f7050..a331cd0e8 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs @@ -139,6 +139,11 @@ export default [ 'id': 'media-query-ranges', 'importName': 'postcssMediaMinmax', }, + { + 'packageName': '@csstools/postcss-media-queries-aspect-ratio-number-values', + 'id': 'media-queries-aspect-ratio-number-values', + 'importName': 'postcssMediaQueriesAspectRatioNumberValues', + }, { 'packageName': 'postcss-nesting', 'id': 'nesting-rules', diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts b/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts index 443b6d5dd..4083e70e7 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts @@ -26,6 +26,7 @@ import type { pluginOptions as postcssImageSetFunction } from 'postcss-image-set import type { pluginOptions as postcssIsPseudoClass } from '@csstools/postcss-is-pseudo-class'; import type { pluginOptions as postcssLabFunction } from 'postcss-lab-function'; import type { pluginOptions as postcssLogical } from '../types/postcss-logical/plugin-options'; +import type { pluginOptions as postcssMediaQueriesAspectRatioNumberValues } from '@csstools/postcss-media-queries-aspect-ratio-number-values'; import type { pluginOptions as postcssMediaMinmax } from '../types/postcss-media-minmax/plugin-options'; import type { pluginOptions as postcssNestedCalc } from '@csstools/postcss-nested-calc'; import type { pluginOptions as postcssNesting } from 'postcss-nesting'; @@ -101,6 +102,8 @@ export type pluginsOptions = { 'lab-function'?: postcssLabFunction | boolean /** plugin options for "postcss-logical" */ 'logical-properties-and-values'?: postcssLogical | boolean + /** plugin options for "@csstools/postcss-media-queries-aspect-ratio-number-values" */ + 'media-queries-aspect-ratio-number-values'?: postcssMediaQueriesAspectRatioNumberValues | boolean /** plugin options for "postcss-media-minmax" */ 'media-query-ranges'?: postcssMediaMinmax | boolean /** plugin options for "@csstools/postcss-nested-calc" */ 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 c485b0330..db0b2b0dc 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -619,3 +619,7 @@ content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 c485b0330..db0b2b0dc 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 @@ -619,3 +619,7 @@ content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 d34530050..bae4e1282 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -530,3 +530,7 @@ content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 efb2d65d6..1b0222254 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 @@ -543,3 +543,7 @@ h6.test-custom-selectors { content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 d64406a81..9591bc66d 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 @@ -539,3 +539,7 @@ h6.test-custom-selectors { content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 d64406a81..9591bc66d 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 @@ -539,3 +539,7 @@ h6.test-custom-selectors { content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} diff --git a/plugin-packs/postcss-preset-env/test/basic.css b/plugin-packs/postcss-preset-env/test/basic.css index 384587870..902e8ec88 100644 --- a/plugin-packs/postcss-preset-env/test/basic.css +++ b/plugin-packs/postcss-preset-env/test/basic.css @@ -425,3 +425,7 @@ content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index 4d3a148ae..d5e2e0a0c 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -638,3 +638,7 @@ content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 e15ff8711..438dfbade 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -522,3 +522,7 @@ content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 9f7e7411e..8f5e1bc8e 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -499,3 +499,7 @@ content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 9789507b7..eac0ea244 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -659,3 +659,7 @@ content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 95da9533c..15d9c8b6c 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 @@ -654,3 +654,7 @@ h6.test-custom-selectors { content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 b1c38e5fe..5d8447538 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 @@ -436,3 +436,7 @@ content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} diff --git a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css index 2c9cf7719..09e20d570 100644 --- a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css @@ -642,3 +642,7 @@ h6.test-custom-selectors { content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 c84282ec4..1a79b96aa 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 @@ -1174,3 +1174,7 @@ h6.test-custom-selectors { content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 2a0bfdfbd..f4d00635c 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -461,3 +461,7 @@ content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 aad8c3ef8..848bdebca 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 @@ -543,3 +543,7 @@ h6.test-custom-selectors { content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 d286927b0..d97a517cc 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 @@ -520,3 +520,7 @@ h6.test-custom-selectors { content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} 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 d80958b97..8156e8314 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -659,3 +659,7 @@ h6.test-custom-selectors { content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css index 0c2ea07bd..187532fa6 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css @@ -642,3 +642,7 @@ content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css index 70f60fab7..0f4f3affd 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css @@ -605,3 +605,7 @@ content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css index 3f81aa44c..0b66c16fb 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css @@ -576,3 +576,7 @@ content: ":scope in @scope, but with nesting"; } } + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} diff --git a/plugins/postcss-media-queries-aspect-ratio-number-values/package.json b/plugins/postcss-media-queries-aspect-ratio-number-values/package.json index 1db737565..c38507c00 100644 --- a/plugins/postcss-media-queries-aspect-ratio-number-values/package.json +++ b/plugins/postcss-media-queries-aspect-ratio-number-values/package.json @@ -68,7 +68,7 @@ "postcss-plugin" ], "csstools": { - "cssdbId": "TODO", + "cssdbId": "media-queries-aspect-ratio-number-values", "exportName": "postcssMediaQueriesAspectRatioNumberValues", "humanReadableName": "PostCSS Media Queries Aspect-Ratio Number Values", "specUrl": "https://www.w3.org/TR/mediaqueries-4/#aspect-ratio" diff --git a/rollup/configs/externals.mjs b/rollup/configs/externals.mjs index 4c78033bb..45b0284f1 100644 --- a/rollup/configs/externals.mjs +++ b/rollup/configs/externals.mjs @@ -13,6 +13,7 @@ export const externalsForCLI = [ '@csstools/postcss-hwb-function', '@csstools/postcss-ic-unit', '@csstools/postcss-is-pseudo-class', + '@csstools/postcss-media-queries-aspect-ratio-number-values', '@csstools/postcss-nested-calc', '@csstools/postcss-normalize-display-values', '@csstools/postcss-oklab-function', @@ -82,6 +83,7 @@ export const externalsForPlugin = [ '@csstools/postcss-hwb-function', '@csstools/postcss-ic-unit', '@csstools/postcss-is-pseudo-class', + '@csstools/postcss-media-queries-aspect-ratio-number-values', '@csstools/postcss-nested-calc', '@csstools/postcss-normalize-display-values', '@csstools/postcss-oklab-function', From 0c8b51c92a4c95aca7b28e7352fd3f86a4545e7d Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 20 Nov 2022 13:17:21 +0100 Subject: [PATCH 19/23] add to list of plugins in execution order --- .../postcss-preset-env/src/lib/ids-by-execution-order.mjs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs b/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs index 2e3f4c9c3..76c38a19e 100644 --- a/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs +++ b/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs @@ -5,7 +5,8 @@ export default [ 'custom-properties', 'environment-variables', // run environment-variables here to access transpiled custom media params and properties 'image-set-function', // run images-set-function before nesting-rules so that it may fix nested media - 'media-query-ranges', // run media-query-range and + 'media-query-ranges', // run media-query-range + 'media-queries-aspect-ratio-number-values', 'prefers-color-scheme-query', // run prefers-color-scheme-query here to prevent duplicate transpilation after nesting-rules 'nesting-rules', 'custom-selectors', // run custom-selectors after nesting-rules to correctly transpile &:--custom-selector From fcf715a79fc131ad9bf8c3fa5d58d35b52eaafe6 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Sun, 20 Nov 2022 19:24:16 +0100 Subject: [PATCH 20/23] clean up --- .../postcss-attribute-case-insensitive/src/index.ts | 1 - .../postcss-attribute-case-insensitive/test/basic.css | 2 -- .../test/basic.expect.css | 6 ++---- .../test/basic.preserve-true.expect.css | 10 ++++++++-- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/plugins/postcss-attribute-case-insensitive/src/index.ts b/plugins/postcss-attribute-case-insensitive/src/index.ts index 72baf9472..086d8d87d 100644 --- a/plugins/postcss-attribute-case-insensitive/src/index.ts +++ b/plugins/postcss-attribute-case-insensitive/src/index.ts @@ -37,7 +37,6 @@ function createSensitiveAttributes(attribute) { insensitive: false, }); - newAttribute.raws.insensitiveFlag = undefined; newAttribute.setValue(x); return newAttribute; diff --git a/plugins/postcss-attribute-case-insensitive/test/basic.css b/plugins/postcss-attribute-case-insensitive/test/basic.css index d6e722ff9..a4c6d5d91 100644 --- a/plugins/postcss-attribute-case-insensitive/test/basic.css +++ b/plugins/postcss-attribute-case-insensitive/test/basic.css @@ -23,12 +23,10 @@ } [foo="c"i] { - /* https: //github.com/postcss/postcss-selector-parser/pull/267 */ order: 5.2; } [foo="d"I] { - /* https: //github.com/postcss/postcss-selector-parser/pull/267 */ order: 5.3; } diff --git a/plugins/postcss-attribute-case-insensitive/test/basic.expect.css b/plugins/postcss-attribute-case-insensitive/test/basic.expect.css index c5cb2b8f4..ade975b89 100644 --- a/plugins/postcss-attribute-case-insensitive/test/basic.expect.css +++ b/plugins/postcss-attribute-case-insensitive/test/basic.expect.css @@ -22,13 +22,11 @@ order: 5.1; } -[foo="c"i] { - /* https: //github.com/postcss/postcss-selector-parser/pull/267 */ +[foo="c"],[foo="C"] { order: 5.2; } -[foo="d"I] { - /* https: //github.com/postcss/postcss-selector-parser/pull/267 */ +[foo="d"],[foo="D"] { order: 5.3; } diff --git a/plugins/postcss-attribute-case-insensitive/test/basic.preserve-true.expect.css b/plugins/postcss-attribute-case-insensitive/test/basic.preserve-true.expect.css index 60fc17689..5df3c672a 100644 --- a/plugins/postcss-attribute-case-insensitive/test/basic.preserve-true.expect.css +++ b/plugins/postcss-attribute-case-insensitive/test/basic.preserve-true.expect.css @@ -42,13 +42,19 @@ order: 5.1; } +[foo="c"],[foo="C"] { + order: 5.2; +} + [foo="c"i] { - /* https: //github.com/postcss/postcss-selector-parser/pull/267 */ order: 5.2; } +[foo="d"],[foo="D"] { + order: 5.3; +} + [foo="d"I] { - /* https: //github.com/postcss/postcss-selector-parser/pull/267 */ order: 5.3; } From 37d60a7d255aed26e7c6d4202138e7986fbace3a Mon Sep 17 00:00:00 2001 From: Romain Menke <11521496+romainmenke@users.noreply.github.com> Date: Mon, 21 Nov 2022 23:56:35 +0100 Subject: [PATCH 21/23] Update index.ts --- plugins/postcss-custom-media/src/index.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/plugins/postcss-custom-media/src/index.ts b/plugins/postcss-custom-media/src/index.ts index cc0c0b1db..64f13736f 100644 --- a/plugins/postcss-custom-media/src/index.ts +++ b/plugins/postcss-custom-media/src/index.ts @@ -31,6 +31,10 @@ const creator: PluginCreator = (opts?: pluginOptions) => { customMedia = getCustomMedia(root, result, { preserve: preserve }); }, AtRule: (atRule, { result }) => { + if (atRule.name.toLowerCase() !== 'media') { + return; + } + if (!atRule.params) { return; } From c7eb900cd1723dfc3fcb5c0a7c4498e1a94cff8d Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Tue, 29 Nov 2022 17:05:02 +0100 Subject: [PATCH 22/23] update cssdb --- package-lock.json | 16 ++++++++-------- plugin-packs/postcss-preset-env/package.json | 2 +- plugin-packs/postcss-preset-env/src/options.ts | 4 ++-- .../test/basic.autoprefixer.expect.css | 2 +- .../test/basic.autoprefixer.false.expect.css | 2 +- .../test/basic.ch38.expect.css | 2 +- .../test/basic.ch88-ff78-saf10.expect.css | 2 +- .../test/basic.ch88-ff78.expect.css | 2 +- .../test/basic.ch88-ff78.no-is-pseudo.expect.css | 2 +- .../postcss-preset-env/test/basic.expect.css | 2 +- .../test/basic.ff49.expect.css | 2 +- .../test/basic.ff66.expect.css | 2 +- .../test/basic.ie10.expect.css | 2 +- .../test/basic.nesting.false.expect.css | 2 +- .../test/basic.op_mini.expect.css | 2 +- .../test/basic.preserve.true.expect.css | 2 +- .../test/basic.safari15.expect.css | 2 +- .../test/basic.stage0-ff49.expect.css | 2 +- .../test/basic.stage0-ff66.expect.css | 2 +- .../test/basic.stage0.expect.css | 2 +- 20 files changed, 28 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index d040b2c7d..b469f5256 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3434,9 +3434,9 @@ "link": true }, "node_modules/cssdb": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.1.0.tgz", - "integrity": "sha512-Sd99PrFgx28ez4GHu8yoQIufc/70h9oYowDf4EjeIKi8mac9whxRjhM3IaMr6EllP6KKKWtJrMfN6C7T9tIWvQ==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.2.0.tgz", + "integrity": "sha512-JYlIsE7eKHSi0UNuCyo96YuIDFqvhGgHw4Ck6lsN+DP0Tp8M64UTDT2trGbkMDqnCoEjks7CkS0XcjU0rkvBdg==", "funding": { "type": "opencollective", "url": "https://opencollective.com/csstools" @@ -7125,7 +7125,7 @@ "css-blank-pseudo": "^4.1.1", "css-has-pseudo": "^4.0.1", "css-prefers-color-scheme": "^7.0.1", - "cssdb": "^7.1.0", + "cssdb": "^7.2.0", "postcss-attribute-case-insensitive": "^5.0.2", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^4.2.4", @@ -10425,9 +10425,9 @@ } }, "cssdb": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.1.0.tgz", - "integrity": "sha512-Sd99PrFgx28ez4GHu8yoQIufc/70h9oYowDf4EjeIKi8mac9whxRjhM3IaMr6EllP6KKKWtJrMfN6C7T9tIWvQ==" + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.2.0.tgz", + "integrity": "sha512-JYlIsE7eKHSi0UNuCyo96YuIDFqvhGgHw4Ck6lsN+DP0Tp8M64UTDT2trGbkMDqnCoEjks7CkS0XcjU0rkvBdg==" }, "cssesc": { "version": "3.0.0", @@ -12109,7 +12109,7 @@ "css-blank-pseudo": "^4.1.1", "css-has-pseudo": "^4.0.1", "css-prefers-color-scheme": "^7.0.1", - "cssdb": "^7.1.0", + "cssdb": "^7.2.0", "postcss-attribute-case-insensitive": "^5.0.2", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^4.2.4", diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json index 00f428a77..00ee7fbad 100644 --- a/plugin-packs/postcss-preset-env/package.json +++ b/plugin-packs/postcss-preset-env/package.json @@ -49,7 +49,7 @@ "css-blank-pseudo": "^4.1.1", "css-has-pseudo": "^4.0.1", "css-prefers-color-scheme": "^7.0.1", - "cssdb": "^7.1.0", + "cssdb": "^7.2.0", "postcss-attribute-case-insensitive": "^5.0.2", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^4.2.4", diff --git a/plugin-packs/postcss-preset-env/src/options.ts b/plugin-packs/postcss-preset-env/src/options.ts index 0888d1d89..029e72577 100644 --- a/plugin-packs/postcss-preset-env/src/options.ts +++ b/plugin-packs/postcss-preset-env/src/options.ts @@ -59,14 +59,14 @@ export type pluginOptions = { * This is only useful if you are also using sugary PostCSS plugins that must execute before certain polyfills. * `insertBefore` supports chaining one or multiple plugins. */ - insertBefore?: Record // eslint-disable-line @typescript-eslint/no-explicit-any + insertBefore?: Record /** * The `insertAfter` key allows you to insert other PostCSS plugins into the chain. * This is only useful if you are also using sugary PostCSS plugins that must execute after certain polyfills. * `insertAfter` supports chaining one or multiple plugins. */ - insertAfter?: Record // eslint-disable-line @typescript-eslint/no-explicit-any + insertAfter?: Record /** * Enable debugging messages to stdout giving insights into which features have been enabled/disabled and why. 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 db0b2b0dc..f27e64d76 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -620,6 +620,6 @@ } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } 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 db0b2b0dc..f27e64d76 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 @@ -620,6 +620,6 @@ } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } 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 bae4e1282..28ea512cf 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -531,6 +531,6 @@ } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } 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 1b0222254..78a2aefb7 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 @@ -544,6 +544,6 @@ h6.test-custom-selectors { } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } 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 9591bc66d..00ccf869b 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 @@ -540,6 +540,6 @@ h6.test-custom-selectors { } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } 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 9591bc66d..00ccf869b 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 @@ -540,6 +540,6 @@ h6.test-custom-selectors { } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index d5e2e0a0c..b01b75363 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -639,6 +639,6 @@ } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } 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 438dfbade..fa741304a 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -523,6 +523,6 @@ } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } 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 8f5e1bc8e..974affa79 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -500,6 +500,6 @@ } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } 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 eac0ea244..c5aa18ffa 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -660,6 +660,6 @@ } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } 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 15d9c8b6c..2d14b38e0 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 @@ -655,6 +655,6 @@ h6.test-custom-selectors { } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } diff --git a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css index 09e20d570..04f779aa2 100644 --- a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css @@ -643,6 +643,6 @@ h6.test-custom-selectors { } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } 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 1a79b96aa..e7a9a13ae 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 @@ -1175,6 +1175,6 @@ h6.test-custom-selectors { } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 1.77),(min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } 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 f4d00635c..f51e856ba 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -462,6 +462,6 @@ } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } 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 848bdebca..afef2ef1f 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 @@ -544,6 +544,6 @@ h6.test-custom-selectors { } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } 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 d97a517cc..59c09b83c 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 @@ -521,6 +521,6 @@ h6.test-custom-selectors { } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } 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 8156e8314..fb80fae44 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -660,6 +660,6 @@ h6.test-custom-selectors { } } -@media (min-aspect-ratio: 1.77) { +@media (min-aspect-ratio: 177/100) { /* media query aspect ratio : */ } From d2d24cd0860cc58c68502167ee45f4a92998ee2a Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Wed, 30 Nov 2022 08:40:21 +0100 Subject: [PATCH 23/23] update CHANGELOG --- plugin-packs/postcss-preset-env/CHANGELOG.md | 6 ++++++ plugins/postcss-color-rebeccapurple/CHANGELOG.md | 2 +- plugins/postcss-custom-properties/CHANGELOG.md | 2 +- plugins/postcss-dir-pseudo-class/CHANGELOG.md | 2 +- plugins/postcss-double-position-gradients/CHANGELOG.md | 2 +- plugins/postcss-gap-properties/CHANGELOG.md | 2 +- plugins/postcss-overflow-shorthand/CHANGELOG.md | 2 +- plugins/postcss-place/CHANGELOG.md | 2 +- 8 files changed, 13 insertions(+), 7 deletions(-) diff --git a/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md index 109927dd4..5ed3fe8ed 100644 --- a/plugin-packs/postcss-preset-env/CHANGELOG.md +++ b/plugin-packs/postcss-preset-env/CHANGELOG.md @@ -1,5 +1,11 @@ # Changes to PostCSS Preset Env +### Unreleased + +- Added: TypeScript support. +- Added `@csstools/postcss-media-queries-aspect-ratio-number-values` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-queries-aspect-ratio-number-values#readme) for usage details. +- Fixed: `all-property` and `overflow-wrap-property` now follow the `preserve` plugin option + ### (8.0.0-alpha.1) (November 14, 2022) - Updated Support for Node v14+ (major). diff --git a/plugins/postcss-color-rebeccapurple/CHANGELOG.md b/plugins/postcss-color-rebeccapurple/CHANGELOG.md index 6ed61925a..3622d6abc 100644 --- a/plugins/postcss-color-rebeccapurple/CHANGELOG.md +++ b/plugins/postcss-color-rebeccapurple/CHANGELOG.md @@ -10,7 +10,7 @@ ### 7.1.0 (June 10, 2022) -- Added: Typescript typings +- Added: TypeScript typings ### 7.0.2 (January 2, 2022) diff --git a/plugins/postcss-custom-properties/CHANGELOG.md b/plugins/postcss-custom-properties/CHANGELOG.md index 7cb304e53..a20a3b9aa 100644 --- a/plugins/postcss-custom-properties/CHANGELOG.md +++ b/plugins/postcss-custom-properties/CHANGELOG.md @@ -102,7 +102,7 @@ - Add `overrideImportFromWithRoot` option - Allow `.mjs` in `importFrom` -- Converted to typescript +- Converted to TypeScript - Correct typings for plugin options - Fix unicode support in custom property names diff --git a/plugins/postcss-dir-pseudo-class/CHANGELOG.md b/plugins/postcss-dir-pseudo-class/CHANGELOG.md index dd5319588..277310375 100644 --- a/plugins/postcss-dir-pseudo-class/CHANGELOG.md +++ b/plugins/postcss-dir-pseudo-class/CHANGELOG.md @@ -3,7 +3,7 @@ ### Unreleased (major) - Updated: Support for Node v14+ (major). -- Added: typescript support. +- Added: TypeScript support. ### 6.0.5 (July 8, 2022) diff --git a/plugins/postcss-double-position-gradients/CHANGELOG.md b/plugins/postcss-double-position-gradients/CHANGELOG.md index 0d7ec37f6..282f33b81 100644 --- a/plugins/postcss-double-position-gradients/CHANGELOG.md +++ b/plugins/postcss-double-position-gradients/CHANGELOG.md @@ -10,7 +10,7 @@ ### 3.1.1 (March 7, 2022) -- Add typescript support +- Add TypeScript support - Fix color functions. - Fix `at` keyword with `at 20px 20px` being interpreted as a double position color stop. diff --git a/plugins/postcss-gap-properties/CHANGELOG.md b/plugins/postcss-gap-properties/CHANGELOG.md index 447b5e0d7..04f2e3dec 100644 --- a/plugins/postcss-gap-properties/CHANGELOG.md +++ b/plugins/postcss-gap-properties/CHANGELOG.md @@ -3,7 +3,7 @@ ### Unreleased (major) - Updated: Support for Node v14+ (major). -- Added: typescript support. +- Added: TypeScript support. ### 3.0.5 (July 12, 2022) diff --git a/plugins/postcss-overflow-shorthand/CHANGELOG.md b/plugins/postcss-overflow-shorthand/CHANGELOG.md index 85ad55f4a..32cb062f0 100644 --- a/plugins/postcss-overflow-shorthand/CHANGELOG.md +++ b/plugins/postcss-overflow-shorthand/CHANGELOG.md @@ -3,7 +3,7 @@ ### Unreleased (major) - Updated: Support for Node v14+ (major). -- Added: typescript support. +- Added: TypeScript support. ### 3.0.4 (July 8, 2022) diff --git a/plugins/postcss-place/CHANGELOG.md b/plugins/postcss-place/CHANGELOG.md index dd3394fb7..6b01f62c7 100644 --- a/plugins/postcss-place/CHANGELOG.md +++ b/plugins/postcss-place/CHANGELOG.md @@ -3,7 +3,7 @@ ### Unreleased (major) - Updated: Support for Node v14+ (major). -- Added: typescript support. +- Added: TypeScript support. ### 7.0.5 (July 8, 2022)