From e56d02c90ed2fc59fcaf4134c865ff1de022b27f Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Mon, 31 Jul 2023 17:04:40 +0200 Subject: [PATCH 01/15] progressive-color-gamut --- package-lock.json | 27 ++ .../.gitignore | 6 + .../postcss-progressive-color-gamut/.nvmrc | 1 + .../postcss-progressive-color-gamut/.tape.mjs | 27 ++ .../CHANGELOG.md | 5 + .../INSTALL.md | 235 ++++++++++++++++++ .../LICENSE.md | 18 ++ .../postcss-progressive-color-gamut/README.md | 96 +++++++ .../docs/README.md | 53 ++++ .../package.json | 80 ++++++ .../src/index.ts | 57 +++++ .../test/_import.mjs | 6 + .../test/_require.cjs | 6 + .../test/basic.color.expect.css | 7 + .../test/basic.css | 7 + .../test/basic.expect.css | 7 + .../test/document.expect.html | 21 ++ .../test/document.html | 21 ++ .../test/examples/example.css | 7 + .../test/examples/example.expect.css | 7 + .../examples/example.preserve-true.expect.css | 8 + .../tsconfig.json | 10 + .../dist/index.cjs | 2 +- .../dist/index.mjs | 2 +- .../src/index.ts | 146 +++++------ 25 files changed, 788 insertions(+), 74 deletions(-) create mode 100644 plugins/postcss-progressive-color-gamut/.gitignore create mode 100644 plugins/postcss-progressive-color-gamut/.nvmrc create mode 100644 plugins/postcss-progressive-color-gamut/.tape.mjs create mode 100644 plugins/postcss-progressive-color-gamut/CHANGELOG.md create mode 100644 plugins/postcss-progressive-color-gamut/INSTALL.md create mode 100644 plugins/postcss-progressive-color-gamut/LICENSE.md create mode 100644 plugins/postcss-progressive-color-gamut/README.md create mode 100644 plugins/postcss-progressive-color-gamut/docs/README.md create mode 100644 plugins/postcss-progressive-color-gamut/package.json create mode 100644 plugins/postcss-progressive-color-gamut/src/index.ts create mode 100644 plugins/postcss-progressive-color-gamut/test/_import.mjs create mode 100644 plugins/postcss-progressive-color-gamut/test/_require.cjs create mode 100644 plugins/postcss-progressive-color-gamut/test/basic.color.expect.css create mode 100644 plugins/postcss-progressive-color-gamut/test/basic.css create mode 100644 plugins/postcss-progressive-color-gamut/test/basic.expect.css create mode 100644 plugins/postcss-progressive-color-gamut/test/document.expect.html create mode 100644 plugins/postcss-progressive-color-gamut/test/document.html create mode 100644 plugins/postcss-progressive-color-gamut/test/examples/example.css create mode 100644 plugins/postcss-progressive-color-gamut/test/examples/example.expect.css create mode 100644 plugins/postcss-progressive-color-gamut/test/examples/example.preserve-true.expect.css create mode 100644 plugins/postcss-progressive-color-gamut/tsconfig.json diff --git a/package-lock.json b/package-lock.json index 29fd93dd5..99a483494 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2177,6 +2177,10 @@ "resolved": "plugins/postcss-oklab-function", "link": true }, + "node_modules/@csstools/postcss-progressive-color-gamut": { + "resolved": "plugins/postcss-progressive-color-gamut", + "link": true + }, "node_modules/@csstools/postcss-progressive-custom-properties": { "resolved": "plugins/postcss-progressive-custom-properties", "link": true @@ -14201,6 +14205,29 @@ "postcss": "^8.4" } }, + "plugins/postcss-progressive-color-gamut": { + "version": "0.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "devDependencies": { + "@csstools/postcss-tape": "*" + }, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "plugins/postcss-progressive-custom-properties": { "name": "@csstools/postcss-progressive-custom-properties", "version": "3.0.0", diff --git a/plugins/postcss-progressive-color-gamut/.gitignore b/plugins/postcss-progressive-color-gamut/.gitignore new file mode 100644 index 000000000..e5b28db4a --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/.gitignore @@ -0,0 +1,6 @@ +node_modules +package-lock.json +yarn.lock +*.result.css +*.result.css.map +*.result.html diff --git a/plugins/postcss-progressive-color-gamut/.nvmrc b/plugins/postcss-progressive-color-gamut/.nvmrc new file mode 100644 index 000000000..6ed5da955 --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/.nvmrc @@ -0,0 +1 @@ +v20.2.0 diff --git a/plugins/postcss-progressive-color-gamut/.tape.mjs b/plugins/postcss-progressive-color-gamut/.tape.mjs new file mode 100644 index 000000000..850ab116c --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/.tape.mjs @@ -0,0 +1,27 @@ +import { postcssTape } from '@csstools/postcss-tape'; +import plugin from '@csstools/postcss-progressive-color-gamut'; + +postcssTape(plugin)({ + basic: { + message: "supports basic usage", + }, + 'basic:color': { + message: "supports { color: '' }", + options: { + color: 'purple' + } + }, + document: { + postcssSyntaxHTML: true, + message: "supports document usage", + }, + 'examples/example': { + message: 'minimal example', + }, + 'examples/example:preserve-true': { + message: 'minimal example', + options: { + preserve: true + } + }, +}); diff --git a/plugins/postcss-progressive-color-gamut/CHANGELOG.md b/plugins/postcss-progressive-color-gamut/CHANGELOG.md new file mode 100644 index 000000000..86b037dc4 --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/CHANGELOG.md @@ -0,0 +1,5 @@ +# Changes to PostCSS Progressive Color Gamut + +### Unreleased (major) + +- Initial version diff --git a/plugins/postcss-progressive-color-gamut/INSTALL.md b/plugins/postcss-progressive-color-gamut/INSTALL.md new file mode 100644 index 000000000..d9748ec53 --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/INSTALL.md @@ -0,0 +1,235 @@ +# Installing PostCSS Progressive Color Gamut + +[PostCSS Progressive Color Gamut] runs in all Node environments, with special instructions for: + +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) +- [Webpack](#webpack) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) + + + +## Node + +Add [PostCSS Progressive Color Gamut] to your project: + +```bash +npm install postcss @csstools/postcss-progressive-color-gamut --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +// commonjs +const postcss = require('postcss'); +const postcssBasePlugin = require('@csstools/postcss-progressive-color-gamut'); + +postcss([ + postcssBasePlugin(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +```js +// esm +import postcss from 'postcss'; +import postcssBasePlugin from '@csstools/postcss-progressive-color-gamut'; + +postcss([ + postcssBasePlugin(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +## PostCSS CLI + +Add [PostCSS CLI] to your project: + +```bash +npm install postcss-cli @csstools/postcss-progressive-color-gamut --save-dev +``` + +Use [PostCSS Progressive Color Gamut] in your `postcss.config.js` configuration file: + +```js +const postcssBasePlugin = require('@csstools/postcss-progressive-color-gamut'); + +module.exports = { + plugins: [ + postcssBasePlugin(/* pluginOptions */) + ] +} +``` + +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +```bash +npm install @csstools/postcss-progressive-color-gamut --save-dev +``` + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-progressive-color-gamut": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-progressive-color-gamut": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + +## Webpack + +_Webpack version 5_ + +Add [PostCSS Loader] to your project: + +```bash +npm install postcss-loader @csstools/postcss-progressive-color-gamut --save-dev +``` + +Use [PostCSS Progressive Color Gamut] in your Webpack configuration: + +```js +module.exports = { + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + // Other plugins, + [ + "@csstools/postcss-progressive-color-gamut", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, +}; +``` + +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +```bash +npm install @csstools/postcss-progressive-color-gamut --save-dev +``` + +Use [PostCSS Progressive Color Gamut] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-progressive-color-gamut" + ] +} +``` + +```json5 +{ + "plugins": [ + [ + "@csstools/postcss-progressive-color-gamut", + { + // Optionally add plugin options + } + ] + ] +} +``` + +## Gulp + +Add [Gulp PostCSS] to your project: + +```bash +npm install gulp-postcss @csstools/postcss-progressive-color-gamut --save-dev +``` + +Use [PostCSS Progressive Color Gamut] in your Gulpfile: + +```js +const postcss = require('gulp-postcss'); +const postcssBasePlugin = require('@csstools/postcss-progressive-color-gamut'); + +gulp.task('css', function () { + var plugins = [ + postcssBasePlugin(/* pluginOptions */) + ]; + + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); +}); +``` + +## Grunt + +Add [Grunt PostCSS] to your project: + +```bash +npm install grunt-postcss @csstools/postcss-progressive-color-gamut --save-dev +``` + +Use [PostCSS Progressive Color Gamut] in your Gruntfile: + +```js +const postcssBasePlugin = require('@csstools/postcss-progressive-color-gamut'); + +grunt.loadNpmTasks('grunt-postcss'); + +grunt.initConfig({ + postcss: { + options: { + processors: [ + postcssBasePlugin(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } +}); +``` + +[Gulp PostCSS]: https://github.com/postcss/gulp-postcss +[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss +[PostCSS]: https://github.com/postcss/postcss +[PostCSS CLI]: https://github.com/postcss/postcss-cli +[PostCSS Loader]: https://github.com/postcss/postcss-loader +[PostCSS Progressive Color Gamut]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-color-gamut +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-progressive-color-gamut/LICENSE.md b/plugins/postcss-progressive-color-gamut/LICENSE.md new file mode 100644 index 000000000..e8ae93b9f --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/LICENSE.md @@ -0,0 +1,18 @@ +MIT No Attribution (MIT-0) + +Copyright © CSSTools Contributors + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the “Software”), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies +of the Software, and to permit persons to whom the Software is furnished to do +so. + +THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/plugins/postcss-progressive-color-gamut/README.md b/plugins/postcss-progressive-color-gamut/README.md new file mode 100644 index 000000000..a9a984325 --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/README.md @@ -0,0 +1,96 @@ +# PostCSS Progressive Color Gamut [][PostCSS] + +[][npm-url] [][css-url] [][cli-url] [][discord] + +[PostCSS Progressive Color Gamut] lets you easily create new plugins following some [CSS Specification]. + +```pcss +.foo { + color: red; +} + +.baz { + color: green; +} + +/* becomes */ + +.foo { + color: blue; +} + +.baz { + color: green; +} +``` + +## Usage + +Add [PostCSS Progressive Color Gamut] to your project: + +```bash +npm install postcss @csstools/postcss-progressive-color-gamut --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +const postcss = require('postcss'); +const postcssBasePlugin = require('@csstools/postcss-progressive-color-gamut'); + +postcss([ + postcssBasePlugin(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +[PostCSS Progressive Color Gamut] runs in all Node environments, with special +instructions for: + +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) +- [Webpack](INSTALL.md#webpack) +- [Next.js](INSTALL.md#nextjs) +- [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 +postcssBasePlugin({ preserve: true }) +``` + +```pcss +.foo { + color: red; +} + +.baz { + color: green; +} + +/* becomes */ + +.foo { + color: blue; + color: red; +} + +.baz { + color: green; +} +``` + +[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test +[css-url]: https://cssdb.org/#TODO +[discord]: https://discord.gg/bUadyRwkJS +[npm-url]: https://www.npmjs.com/package/@csstools/postcss-progressive-color-gamut + +[PostCSS]: https://github.com/postcss/postcss +[PostCSS Progressive Color Gamut]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-color-gamut +[CSS Specification]: #TODO diff --git a/plugins/postcss-progressive-color-gamut/docs/README.md b/plugins/postcss-progressive-color-gamut/docs/README.md new file mode 100644 index 000000000..000652492 --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/docs/README.md @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + +

+ +[] lets you easily create new plugins following some [CSS Specification]. + +```pcss + + +/* becomes */ + + +``` + + + + + +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is not preserved. + +```js +({ preserve: true }) +``` + +```pcss + + +/* becomes */ + + +``` + + +[CSS Specification]: diff --git a/plugins/postcss-progressive-color-gamut/package.json b/plugins/postcss-progressive-color-gamut/package.json new file mode 100644 index 000000000..79ceea6f4 --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/package.json @@ -0,0 +1,80 @@ +{ + "name": "@csstools/postcss-progressive-color-gamut", + "description": "TODO: Add description for Progressive Color Gamut", + "version": "0.0.0", + "contributors": [ + { + "name": "Antonio Laguna", + "email": "antonio@laguna.es", + "url": "https://antonio.laguna.es" + }, + { + "name": "Romain Menke", + "email": "romainmenke@gmail.com" + } + ], + "license": "MIT-0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "main": "dist/index.cjs", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.mjs", + "require": "./dist/index.cjs", + "default": "./dist/index.mjs" + } + }, + "files": [ + "CHANGELOG.md", + "LICENSE.md", + "README.md", + "dist" + ], + "peerDependencies": { + "postcss": "^8.4" + }, + "devDependencies": { + "@csstools/postcss-tape": "*" + }, + "scripts": { + "build": "rollup -c ../../rollup/default.mjs", + "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs", + "lint": "node ../../.github/bin/format-package-json.mjs", + "prepublishOnly": "npm run build && npm run test", + "test": "node .tape.mjs && node ./test/_import.mjs && node ./test/_require.cjs", + "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs" + }, + "repository": { + "type": "git", + "url": "https://github.com/csstools/postcss-plugins.git", + "directory": "plugins/postcss-progressive-color-gamut" + }, + "keywords": [ + "postcss-plugin" + ], + "csstools": { + "cssdbId": "TODO", + "exportName": "postcssProgressiveColorGamut", + "humanReadableName": "PostCSS Progressive Color Gamut", + "specUrl": "#TODO" + }, + "volta": { + "extends": "../../package.json" + }, + "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-color-gamut#readme", + "bugs": "https://github.com/csstools/postcss-plugins/issues" +} \ No newline at end of file diff --git a/plugins/postcss-progressive-color-gamut/src/index.ts b/plugins/postcss-progressive-color-gamut/src/index.ts new file mode 100644 index 000000000..5bd3a3d26 --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/src/index.ts @@ -0,0 +1,57 @@ +import type { PluginCreator } from 'postcss'; + +/** postcss-progressive-color-gamut plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, + /** Replacement color */ + color?: string, +}; + +const creator: PluginCreator = (opts?: pluginOptions) => { + const options: pluginOptions = Object.assign( + // Default options + { + color: null, + preserve: false, + }, + // Provided options + opts, + ); + + return { + postcssPlugin: 'postcss-progressive-color-gamut', + Declaration(decl) { + if (decl.value === 'red') { + // Determine the new value. + let newValue = 'blue'; + if (options.color) { + newValue = options.color; + } + + // Check if it is different from the current value. + if (newValue === decl.value) { + return; + } + + // Insert the new value before the current value. + decl.cloneBefore({ + prop: 'color', + value: newValue, + }); + + // If the current value is preserved we are done and return here. + if (options.preserve) { + return; + } + + // If the current value is not preserved we remove it. + decl.remove(); + } + }, + }; +}; + +creator.postcss = true; + +export default creator; diff --git a/plugins/postcss-progressive-color-gamut/test/_import.mjs b/plugins/postcss-progressive-color-gamut/test/_import.mjs new file mode 100644 index 000000000..ef7f23ae9 --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/test/_import.mjs @@ -0,0 +1,6 @@ +import assert from 'assert'; +import plugin from '@csstools/postcss-progressive-color-gamut'; +plugin(); + +assert.ok(plugin.postcss, 'should have "postcss flag"'); +assert.equal(typeof plugin, 'function', 'should return a function'); diff --git a/plugins/postcss-progressive-color-gamut/test/_require.cjs b/plugins/postcss-progressive-color-gamut/test/_require.cjs new file mode 100644 index 000000000..f8d5ec8fa --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/test/_require.cjs @@ -0,0 +1,6 @@ +const assert = require('assert'); +const plugin = require('@csstools/postcss-progressive-color-gamut'); +plugin(); + +assert.ok(plugin.postcss, 'should have "postcss flag"'); +assert.equal(typeof plugin, 'function', 'should return a function'); diff --git a/plugins/postcss-progressive-color-gamut/test/basic.color.expect.css b/plugins/postcss-progressive-color-gamut/test/basic.color.expect.css new file mode 100644 index 000000000..041b1dabf --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/test/basic.color.expect.css @@ -0,0 +1,7 @@ +.foo { + color: purple; +} + +.baz { + color: green; +} diff --git a/plugins/postcss-progressive-color-gamut/test/basic.css b/plugins/postcss-progressive-color-gamut/test/basic.css new file mode 100644 index 000000000..181f83a54 --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/test/basic.css @@ -0,0 +1,7 @@ +.foo { + color: red; +} + +.baz { + color: green; +} diff --git a/plugins/postcss-progressive-color-gamut/test/basic.expect.css b/plugins/postcss-progressive-color-gamut/test/basic.expect.css new file mode 100644 index 000000000..9d738d5ac --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/test/basic.expect.css @@ -0,0 +1,7 @@ +.foo { + color: blue; +} + +.baz { + color: green; +} diff --git a/plugins/postcss-progressive-color-gamut/test/document.expect.html b/plugins/postcss-progressive-color-gamut/test/document.expect.html new file mode 100644 index 000000000..65a369d89 --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/test/document.expect.html @@ -0,0 +1,21 @@ + + + + + + + + + + +

+ + diff --git a/plugins/postcss-progressive-color-gamut/test/document.html b/plugins/postcss-progressive-color-gamut/test/document.html new file mode 100644 index 000000000..87d683cc9 --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/test/document.html @@ -0,0 +1,21 @@ + + + + + + + + + + +

+ + diff --git a/plugins/postcss-progressive-color-gamut/test/examples/example.css b/plugins/postcss-progressive-color-gamut/test/examples/example.css new file mode 100644 index 000000000..181f83a54 --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/test/examples/example.css @@ -0,0 +1,7 @@ +.foo { + color: red; +} + +.baz { + color: green; +} diff --git a/plugins/postcss-progressive-color-gamut/test/examples/example.expect.css b/plugins/postcss-progressive-color-gamut/test/examples/example.expect.css new file mode 100644 index 000000000..9d738d5ac --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/test/examples/example.expect.css @@ -0,0 +1,7 @@ +.foo { + color: blue; +} + +.baz { + color: green; +} diff --git a/plugins/postcss-progressive-color-gamut/test/examples/example.preserve-true.expect.css b/plugins/postcss-progressive-color-gamut/test/examples/example.preserve-true.expect.css new file mode 100644 index 000000000..8b020470a --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/test/examples/example.preserve-true.expect.css @@ -0,0 +1,8 @@ +.foo { + color: blue; + color: red; +} + +.baz { + color: green; +} diff --git a/plugins/postcss-progressive-color-gamut/tsconfig.json b/plugins/postcss-progressive-color-gamut/tsconfig.json new file mode 100644 index 000000000..500af6d26 --- /dev/null +++ b/plugins/postcss-progressive-color-gamut/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "declarationDir": ".", + "strict": true + }, + "include": ["./src/**/*"], + "exclude": ["dist"] +} diff --git a/plugins/postcss-progressive-custom-properties/dist/index.cjs b/plugins/postcss-progressive-custom-properties/dist/index.cjs index d40acd30f..a36f6f268 100644 --- a/plugins/postcss-progressive-custom-properties/dist/index.cjs +++ b/plugins/postcss-progressive-custom-properties/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("postcss-value-parser");const a=[{supports:"color-mix(in lch, red, blue)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"rgb(from red r g b)",property:"color",sniff:"from ",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function matches(e,a){if(e.isVariable&&a&&("word"===a.type||"string"===a.type||"function"===a.type))return!0;if(e.type!==a.type)return!1;if(doesNotMatchValue(e,a))return!1;if(e.nodes&&a.nodes){for(let r=0;r{r.indexOf(e.sniff)>-1&&o.push(e)}));let s=!1;try{e(r).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{a.dimension=e.unit(a.value)}finally{!1===a.dimension&&delete a.dimension}for(let e=0;e0&&i.push("(top: var(--f))"),Array.from(new Set(i)))}const t=/var\(/i,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",RuleExit:(e,{postcss:a})=>{const r=[],p=new Map,i=new Set;e.each((o=>{if("decl"!==o.type)return;if(o.variable){if(!i.has(o.prop.toString()))return void i.add(o.prop.toString())}else if(!i.has(o.prop.toString().toLowerCase()))return void i.add(o.prop.toString().toLowerCase());if(!o.variable&&!t.test(o.value))return;if("initial"===o.value.trim().toLowerCase())return;if(""===o.value.trim())return;const s=!o.variable,y=supportConditionsFromValue(o.value,s);if(!y.length)return;const l=y.join(" and ");if(r.length&&r[r.length-1].params===l){const e=r[r.length-1],a=p.get(e);if(a)return a.append(o.clone()),void o.remove()}const d=a.atRule({name:"supports",params:l,source:e.source,raws:{before:"\n\n",after:"\n"}}),c=e.clone();c.removeAll(),c.raws.before="\n",c.append(o.clone()),o.remove(),p.set(d,c),d.append(c),r.push(d)})),0!==r.length&&r.reverse().forEach((a=>{e.after(a)}))}});creator.postcss=!0,module.exports=creator; +"use strict";var e=require("postcss-value-parser");const a=[{supports:"color-mix(in lch, red, blue)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"rgb(from red r g b)",property:"color",sniff:"from ",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function matches(e,a){if(e.isVariable&&a&&("word"===a.type||"string"===a.type||"function"===a.type))return!0;if(e.type!==a.type)return!1;if(doesNotMatchValue(e,a))return!1;if(e.nodes&&a.nodes){for(let r=0;r{r.indexOf(e.sniff)>-1&&o.push(e)}));let s=!1;try{e(r).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{a.dimension=e.unit(a.value)}finally{!1===a.dimension&&delete a.dimension}for(let e=0;e0&&i.push("(top: var(--f))"),Array.from(new Set(i)))}const t=/var\(/i,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",OnceExit:(e,{postcss:a})=>{e.walkRules((e=>{const r=[],p=new Map,i=new Set;e.each((o=>{if("decl"!==o.type)return;if(o.variable){if(!i.has(o.prop.toString()))return void i.add(o.prop.toString())}else if(!i.has(o.prop.toString().toLowerCase()))return void i.add(o.prop.toString().toLowerCase());if(!o.variable&&!t.test(o.value))return;if("initial"===o.value.trim().toLowerCase())return;if(""===o.value.trim())return;const s=!o.variable,y=supportConditionsFromValue(o.value,s);if(!y.length)return;const l=y.join(" and ");if(r.length&&r[r.length-1].params===l){const e=r[r.length-1],a=p.get(e);if(a)return a.append(o.clone()),void o.remove()}const d=a.atRule({name:"supports",params:l,source:e.source,raws:{before:"\n\n",after:"\n"}}),c=e.clone();c.removeAll(),c.raws.before="\n",c.append(o.clone()),o.remove(),p.set(d,c),d.append(c),r.push(d)})),0!==r.length&&r.reverse().forEach((a=>{e.after(a)}))}))}});creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-progressive-custom-properties/dist/index.mjs b/plugins/postcss-progressive-custom-properties/dist/index.mjs index ef854aa63..cf523da72 100644 --- a/plugins/postcss-progressive-custom-properties/dist/index.mjs +++ b/plugins/postcss-progressive-custom-properties/dist/index.mjs @@ -1 +1 @@ -import e from"postcss-value-parser";const a=[{supports:"color-mix(in lch, red, blue)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"rgb(from red r g b)",property:"color",sniff:"from ",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function matches(e,a){if(e.isVariable&&a&&("word"===a.type||"string"===a.type||"function"===a.type))return!0;if(e.type!==a.type)return!1;if(doesNotMatchValue(e,a))return!1;if(e.nodes&&a.nodes){for(let r=0;r{r.indexOf(e.sniff)>-1&&o.push(e)}));let s=!1;try{e(r).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{a.dimension=e.unit(a.value)}finally{!1===a.dimension&&delete a.dimension}for(let e=0;e0&&i.push("(top: var(--f))"),Array.from(new Set(i)))}const t=/var\(/i,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",RuleExit:(e,{postcss:a})=>{const r=[],p=new Map,i=new Set;e.each((o=>{if("decl"!==o.type)return;if(o.variable){if(!i.has(o.prop.toString()))return void i.add(o.prop.toString())}else if(!i.has(o.prop.toString().toLowerCase()))return void i.add(o.prop.toString().toLowerCase());if(!o.variable&&!t.test(o.value))return;if("initial"===o.value.trim().toLowerCase())return;if(""===o.value.trim())return;const s=!o.variable,y=supportConditionsFromValue(o.value,s);if(!y.length)return;const l=y.join(" and ");if(r.length&&r[r.length-1].params===l){const e=r[r.length-1],a=p.get(e);if(a)return a.append(o.clone()),void o.remove()}const d=a.atRule({name:"supports",params:l,source:e.source,raws:{before:"\n\n",after:"\n"}}),c=e.clone();c.removeAll(),c.raws.before="\n",c.append(o.clone()),o.remove(),p.set(d,c),d.append(c),r.push(d)})),0!==r.length&&r.reverse().forEach((a=>{e.after(a)}))}});creator.postcss=!0;export{creator as default}; +import e from"postcss-value-parser";const a=[{supports:"color-mix(in lch, red, blue)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"rgb(from red r g b)",property:"color",sniff:"from ",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function matches(e,a){if(e.isVariable&&a&&("word"===a.type||"string"===a.type||"function"===a.type))return!0;if(e.type!==a.type)return!1;if(doesNotMatchValue(e,a))return!1;if(e.nodes&&a.nodes){for(let r=0;r{r.indexOf(e.sniff)>-1&&o.push(e)}));let s=!1;try{e(r).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{a.dimension=e.unit(a.value)}finally{!1===a.dimension&&delete a.dimension}for(let e=0;e0&&i.push("(top: var(--f))"),Array.from(new Set(i)))}const t=/var\(/i,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",OnceExit:(e,{postcss:a})=>{e.walkRules((e=>{const r=[],p=new Map,i=new Set;e.each((o=>{if("decl"!==o.type)return;if(o.variable){if(!i.has(o.prop.toString()))return void i.add(o.prop.toString())}else if(!i.has(o.prop.toString().toLowerCase()))return void i.add(o.prop.toString().toLowerCase());if(!o.variable&&!t.test(o.value))return;if("initial"===o.value.trim().toLowerCase())return;if(""===o.value.trim())return;const s=!o.variable,y=supportConditionsFromValue(o.value,s);if(!y.length)return;const l=y.join(" and ");if(r.length&&r[r.length-1].params===l){const e=r[r.length-1],a=p.get(e);if(a)return a.append(o.clone()),void o.remove()}const d=a.atRule({name:"supports",params:l,source:e.source,raws:{before:"\n\n",after:"\n"}}),c=e.clone();c.removeAll(),c.raws.before="\n",c.append(o.clone()),o.remove(),p.set(d,c),d.append(c),r.push(d)})),0!==r.length&&r.reverse().forEach((a=>{e.after(a)}))}))}});creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-progressive-custom-properties/src/index.ts b/plugins/postcss-progressive-custom-properties/src/index.ts index 31964918b..ac8be6b4c 100644 --- a/plugins/postcss-progressive-custom-properties/src/index.ts +++ b/plugins/postcss-progressive-custom-properties/src/index.ts @@ -6,98 +6,100 @@ const hasVariableFunction = /var\(/i; const creator: PluginCreator = () => { return { postcssPlugin: 'postcss-progressive-custom-properties', - RuleExit: (rule, { postcss }) => { - const atSupportsRules: Array = []; - const parentRuleClones: Map = new Map(); - const propNames = new Set(); + OnceExit: (root, { postcss }) => { + root.walkRules((rule) => { + const atSupportsRules: Array = []; + const parentRuleClones: Map = new Map(); + const propNames = new Set(); + + rule.each((decl) => { + if (decl.type !== 'decl') { + return; + } - rule.each((decl) => { - if (decl.type !== 'decl') { - return; - } + // The first encountered property is the fallback for the oldest targets. + if (decl.variable) { + // custom properties are case-sensitive + if (!propNames.has(decl.prop.toString())) { + propNames.add(decl.prop.toString()); + return; + } + } else { + // regular properties are case-insensitive + if (!propNames.has(decl.prop.toString().toLowerCase())) { + propNames.add(decl.prop.toString().toLowerCase()); + return; + } + } - // The first encountered property is the fallback for the oldest targets. - if (decl.variable) { - // custom properties are case-sensitive - if (!propNames.has(decl.prop.toString())) { - propNames.add(decl.prop.toString()); + if (!(decl.variable || hasVariableFunction.test(decl.value))) { return; } - } else { - // regular properties are case-insensitive - if (!propNames.has(decl.prop.toString().toLowerCase())) { - propNames.add(decl.prop.toString().toLowerCase()); + + if (decl.value.trim().toLowerCase() === 'initial') { + // https://www.w3.org/TR/css-variables-1/#guaranteed-invalid return; } - } - if (!(decl.variable || hasVariableFunction.test(decl.value))) { - return; - } - - if (decl.value.trim().toLowerCase() === 'initial') { - // https://www.w3.org/TR/css-variables-1/#guaranteed-invalid - return; - } - - if (decl.value.trim() === '') { // empty string value - // https://www.w3.org/TR/css-variables-1/#guaranteed-invalid - return; - } + if (decl.value.trim() === '') { // empty string value + // https://www.w3.org/TR/css-variables-1/#guaranteed-invalid + return; + } - // if the property itself isn't a custom property, the value must contain a var() function - const mustContainVar = !decl.variable; + // if the property itself isn't a custom property, the value must contain a var() function + const mustContainVar = !decl.variable; - const supportConditions = supportConditionsFromValue(decl.value, mustContainVar); - if (!supportConditions.length) { - return; - } + const supportConditions = supportConditionsFromValue(decl.value, mustContainVar); + if (!supportConditions.length) { + return; + } - const params = supportConditions.join(' and '); + const params = supportConditions.join(' and '); - if (atSupportsRules.length && atSupportsRules[atSupportsRules.length - 1].params === params) { - const atSupports = atSupportsRules[atSupportsRules.length - 1]; - const parentClone = parentRuleClones.get(atSupports); + if (atSupportsRules.length && atSupportsRules[atSupportsRules.length - 1].params === params) { + const atSupports = atSupportsRules[atSupportsRules.length - 1]; + const parentClone = parentRuleClones.get(atSupports); - if (parentClone) { - parentClone.append(decl.clone()); - decl.remove(); - return; + if (parentClone) { + parentClone.append(decl.clone()); + decl.remove(); + return; + } } - } - // Any subsequent properties are progressive enhancements. - const atSupports = postcss.atRule({ - name: 'supports', - params: params, - source: rule.source, - raws: { - before: '\n\n', - after: '\n', - }, - }); + // Any subsequent properties are progressive enhancements. + const atSupports = postcss.atRule({ + name: 'supports', + params: params, + source: rule.source, + raws: { + before: '\n\n', + after: '\n', + }, + }); - const parentClone = rule.clone(); - parentClone.removeAll(); + const parentClone = rule.clone(); + parentClone.removeAll(); - parentClone.raws.before = '\n'; + parentClone.raws.before = '\n'; - parentClone.append(decl.clone()); - decl.remove(); + parentClone.append(decl.clone()); + decl.remove(); - parentRuleClones.set(atSupports, parentClone); - atSupports.append(parentClone); - atSupportsRules.push(atSupports); - }); + parentRuleClones.set(atSupports, parentClone); + atSupports.append(parentClone); + atSupportsRules.push(atSupports); + }); - if (atSupportsRules.length === 0) { - return; - } + if (atSupportsRules.length === 0) { + return; + } - // rule.after reverses the at rule order. - // reversing the call order gives in the correct order overall. - atSupportsRules.reverse().forEach((atSupports) => { - rule.after(atSupports); + // rule.after reverses the at rule order. + // reversing the call order gives in the correct order overall. + atSupportsRules.reverse().forEach((atSupports) => { + rule.after(atSupports); + }); }); }, }; From 03fb65672e1171bd5b5b2e5ee8345ffad1add55b Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Tue, 1 Aug 2023 22:39:07 +0200 Subject: [PATCH 02/15] wip --- packages/css-color-parser/CHANGELOG.md | 4 + .../css-color-parser/dist/color-data.d.ts | 1 + packages/css-color-parser/dist/index.cjs | 2 +- packages/css-color-parser/dist/index.d.ts | 2 +- packages/css-color-parser/dist/index.mjs | 2 +- packages/css-color-parser/src/color-data.ts | 12 ++ packages/css-color-parser/src/index.ts | 2 +- .../dist/conditions-from-values.d.ts | 4 + .../dist/index.cjs | 2 +- .../dist/index.d.ts | 2 +- .../dist/index.mjs | 2 +- .../dist/support-conditions-from-values.d.ts | 1 - .../generate/color.mjs | 20 +++- .../package.json | 3 + ...om-values.ts => conditions-from-values.ts} | 55 ++++++++- .../src/index.ts | 106 +++++++++++++----- .../src/matchers.ts | 36 +++--- .../test/basic.css | 9 ++ .../test/basic.expect.css | 80 +++++++++---- 19 files changed, 259 insertions(+), 86 deletions(-) create mode 100644 plugins/postcss-progressive-custom-properties/dist/conditions-from-values.d.ts delete mode 100644 plugins/postcss-progressive-custom-properties/dist/support-conditions-from-values.d.ts rename plugins/postcss-progressive-custom-properties/src/{support-conditions-from-values.ts => conditions-from-values.ts} (57%) diff --git a/packages/css-color-parser/CHANGELOG.md b/packages/css-color-parser/CHANGELOG.md index 3e84e1998..ce1af0894 100644 --- a/packages/css-color-parser/CHANGELOG.md +++ b/packages/css-color-parser/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to CSS Color Parser +### Unreleased (minor) + +- Add utility to determine if a color is in the Display P3 gamut. + ### 1.2.3 _July 24, 2023_ diff --git a/packages/css-color-parser/dist/color-data.d.ts b/packages/css-color-parser/dist/color-data.d.ts index cd72f47ee..aa7b42927 100644 --- a/packages/css-color-parser/dist/color-data.d.ts +++ b/packages/css-color-parser/dist/color-data.d.ts @@ -32,3 +32,4 @@ export declare function fillInMissingComponents(a: Color, b: Color): Color; export declare function normalizeRelativeColorDataChannels(x: ColorData): Map; export declare function noneToZeroInRelativeColorDataChannels(x: Map): Map; export declare function colorDataFitsRGB_Gamut(x: ColorData): boolean; +export declare function colorDataFitsDisplayP3_Gamut(x: ColorData): boolean; diff --git a/packages/css-color-parser/dist/index.cjs b/packages/css-color-parser/dist/index.cjs index c55d85b21..29260d39d 100644 --- a/packages/css-color-parser/dist/index.cjs +++ b/packages/css-color-parser/dist/index.cjs @@ -1 +1 @@ -"use strict";var e,o,a=require("@csstools/css-tokenizer"),n=require("@csstools/color-helpers"),t=require("@csstools/css-parser-algorithms"),r=require("@csstools/css-calc");function colorData_to_XYZ_D50(e){switch(e.colorNotation){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:case exports.ColorNotation.sRGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Linear_sRGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Display_P3:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Rec2020:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.A98_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.ProPhoto_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HSL:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HWB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Lab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.LCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D50:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D65:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}exports.ColorNotation=void 0,(e=exports.ColorNotation||(exports.ColorNotation={})).A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_sRGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.sRGB="srgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65",exports.SyntaxFlag=void 0,(o=exports.SyntaxFlag||(exports.SyntaxFlag={})).ColorKeyword="color-keyword",o.HasAlpha="has-alpha",o.HasDimensionValues="has-dimension-values",o.HasNoneKeywords="has-none-keywords",o.HasNumberValues="has-number-values",o.HasPercentageAlpha="has-percentage-alpha",o.HasPercentageValues="has-percentage-values",o.HasVariableAlpha="has-variable-alpha",o.Hex="hex",o.LegacyHSL="legacy-hsl",o.LegacyRGB="legacy-rgb",o.NamedColor="named-color",o.RelativeColorSyntax="relative-color-syntax",o.ColorMix="color-mix";const s=new Set([exports.ColorNotation.A98_RGB,exports.ColorNotation.Display_P3,exports.ColorNotation.HEX,exports.ColorNotation.Linear_sRGB,exports.ColorNotation.ProPhoto_RGB,exports.ColorNotation.RGB,exports.ColorNotation.sRGB,exports.ColorNotation.Rec2020,exports.ColorNotation.XYZ_D50,exports.ColorNotation.XYZ_D65]);function colorDataTo(e,o){const a=colorData_to_XYZ_D50(e),t={...e};switch(o){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:t.colorNotation=exports.ColorNotation.RGB,t.channels=n.xyz.XYZ_D50_to_sRGB(a.channels);break;case exports.ColorNotation.sRGB:t.colorNotation=exports.ColorNotation.sRGB,t.channels=n.xyz.XYZ_D50_to_sRGB(a.channels);break;case exports.ColorNotation.Linear_sRGB:t.colorNotation=exports.ColorNotation.Linear_sRGB,t.channels=n.xyz.XYZ_D50_to_lin_sRGB(a.channels);break;case exports.ColorNotation.Display_P3:t.colorNotation=exports.ColorNotation.Display_P3,t.channels=n.xyz.XYZ_D50_to_P3(a.channels);break;case exports.ColorNotation.Rec2020:t.colorNotation=exports.ColorNotation.Rec2020,t.channels=n.xyz.XYZ_D50_to_rec_2020(a.channels);break;case exports.ColorNotation.ProPhoto_RGB:t.colorNotation=exports.ColorNotation.ProPhoto_RGB,t.channels=n.xyz.XYZ_D50_to_ProPhoto(a.channels);break;case exports.ColorNotation.A98_RGB:t.colorNotation=exports.ColorNotation.A98_RGB,t.channels=n.xyz.XYZ_D50_to_a98_RGB(a.channels);break;case exports.ColorNotation.HSL:t.colorNotation=exports.ColorNotation.HSL,t.channels=n.xyz.XYZ_D50_to_HSL(a.channels);break;case exports.ColorNotation.HWB:t.colorNotation=exports.ColorNotation.HWB,t.channels=n.xyz.XYZ_D50_to_HWB(a.channels);break;case exports.ColorNotation.Lab:t.colorNotation=exports.ColorNotation.Lab,t.channels=n.xyz.XYZ_D50_to_Lab(a.channels);break;case exports.ColorNotation.LCH:t.colorNotation=exports.ColorNotation.LCH,t.channels=n.xyz.XYZ_D50_to_LCH(a.channels);break;case exports.ColorNotation.OKLCH:t.colorNotation=exports.ColorNotation.OKLCH,t.channels=n.xyz.XYZ_D50_to_OKLCH(a.channels);break;case exports.ColorNotation.OKLab:t.colorNotation=exports.ColorNotation.OKLab,t.channels=n.xyz.XYZ_D50_to_OKLab(a.channels);break;case exports.ColorNotation.XYZ_D50:t.colorNotation=exports.ColorNotation.XYZ_D50,t.channels=n.xyz.XYZ_D50_to_XYZ_D50(a.channels);break;case exports.ColorNotation.XYZ_D65:t.colorNotation=exports.ColorNotation.XYZ_D65,t.channels=n.xyz.XYZ_D50_to_XYZ_D65(a.channels);break;default:throw new Error("Unsupported color notation")}if(o===e.colorNotation)t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2]);else if(s.has(o)&&s.has(e.colorNotation))t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2]);else switch(o){case exports.ColorNotation.HSL:switch(e.colorNotation){case exports.ColorNotation.HWB:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:t.channels=carryForwardMissingComponents(e.channels,[2],t.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[2,1,0])}break;case exports.ColorNotation.HWB:switch(e.colorNotation){case exports.ColorNotation.HSL:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[2])}break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:switch(e.colorNotation){case exports.ColorNotation.HSL:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0])}break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:switch(e.colorNotation){case exports.ColorNotation.HSL:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[2,1,0]);break;case exports.ColorNotation.HWB:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2])}}return t.channels=convertPowerlessComponentsToMissingComponents(t.channels,o),t}function convertPowerlessComponentsToMissingComponents(e,o){const a=[...e];switch(o){case exports.ColorNotation.HSL:(reducePrecision(a[2],4)<=0||reducePrecision(a[2],4)>=100)&&(a[0]=NaN,a[1]=NaN),reducePrecision(a[1],4)<=0&&(a[0]=NaN);break;case exports.ColorNotation.HWB:Math.max(0,reducePrecision(a[1],4))+Math.max(0,reducePrecision(a[2],4))>=100&&(a[0]=NaN);break;case exports.ColorNotation.LCH:reducePrecision(a[1],4)<=0&&(a[2]=NaN);break;case exports.ColorNotation.OKLCH:reducePrecision(a[1],6)<=0&&(a[2]=NaN)}return a}function convertPowerlessComponentsToZeroValuesForDisplay(e,o){const a=[...e];switch(o){case exports.ColorNotation.HSL:(reducePrecision(a[2])<=0||reducePrecision(a[2])>=100)&&(a[0]=NaN,a[1]=NaN),reducePrecision(a[1])<=0&&(a[0]=NaN);break;case exports.ColorNotation.HWB:Math.max(0,reducePrecision(a[1]))+Math.max(0,reducePrecision(a[2]))>=100&&(a[0]=NaN);break;case exports.ColorNotation.Lab:(reducePrecision(a[0])<=0||reducePrecision(a[0])>=100)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.LCH:reducePrecision(a[1])<=0&&(a[2]=NaN),(reducePrecision(a[0])<=0||reducePrecision(a[0])>=100)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.OKLab:(reducePrecision(a[0])<=0||reducePrecision(a[0])>=1)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.OKLCH:reducePrecision(a[1])<=0&&(a[2]=NaN),(reducePrecision(a[0])<=0||reducePrecision(a[0])>=1)&&(a[1]=NaN,a[2]=NaN)}return a}function carryForwardMissingComponents(e,o,a,n){const t=[...a];for(const a of o)Number.isNaN(e[o[a]])&&(t[n[a]]=NaN);return t}function fillInMissingComponents(e,o){const a=[...e];for(let n=0;nString.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(e,o){const n=[];for(let t=0;t=0){i=u.value[4].value;continue}}return!1}if(!l)return!1;n.push({color:l,percentage:i}),l=!1,i=!1}}if(l&&n.push({color:l,percentage:i}),2!==n.length)return!1;let u=n[0].percentage,c=n[1].percentage;return(!1===u||!(u<0||u>100))&&((!1===c||!(c<0||c>100))&&(!1===u&&!1===c?(u=50,c=50):!1!==u&&!1===c?c=100-u:!1===u&&!1!==c&&(u=100-c),(0!==u||0!==c)&&(!1!==u&&!1!==c&&(u+c>100&&(u=u/(u+c)*100,c=c/(u+c)*100),u+c<100&&(s=(u+c)/100,u=u/(u+c)*100,c=c/(u+c)*100),{a:{color:n[0].color,percentage:u},b:{color:n[1].color,percentage:c},alphaMultiplier:s}))))}function colorMixRectangular(e,o){if(!o)return!1;const a=o.a.color,n=o.b.color,t=o.a.percentage/100;let r=a.channels,s=n.channels,l=exports.ColorNotation.RGB,i=a.alpha;if("number"!=typeof i)return!1;let u=n.alpha;if("number"!=typeof u)return!1;switch(i=Number.isNaN(i)?u:i,u=Number.isNaN(u)?i:u,e){case"srgb":l=exports.ColorNotation.RGB,a.colorNotation!==exports.ColorNotation.RGB&&a.colorNotation!==exports.ColorNotation.sRGB&&a.colorNotation!==exports.ColorNotation.HEX&&(r=colorDataTo(a,exports.ColorNotation.RGB).channels),n.colorNotation!==exports.ColorNotation.RGB&&n.colorNotation!==exports.ColorNotation.sRGB&&n.colorNotation!==exports.ColorNotation.HEX&&(s=colorDataTo(n,exports.ColorNotation.RGB).channels);break;case"srgb-linear":l=exports.ColorNotation.Linear_sRGB,a.colorNotation!==exports.ColorNotation.Linear_sRGB&&(r=colorDataTo(a,exports.ColorNotation.Linear_sRGB).channels),n.colorNotation!==exports.ColorNotation.Linear_sRGB&&(s=colorDataTo(n,exports.ColorNotation.Linear_sRGB).channels);break;case"lab":l=exports.ColorNotation.Lab,a.colorNotation!==exports.ColorNotation.Lab&&(r=colorDataTo(a,exports.ColorNotation.Lab).channels),n.colorNotation!==exports.ColorNotation.Lab&&(s=colorDataTo(n,exports.ColorNotation.Lab).channels);break;case"oklab":l=exports.ColorNotation.OKLab,a.colorNotation!==exports.ColorNotation.OKLab&&(r=colorDataTo(a,exports.ColorNotation.OKLab).channels),n.colorNotation!==exports.ColorNotation.OKLab&&(s=colorDataTo(n,exports.ColorNotation.OKLab).channels);break;case"xyz-d50":l=exports.ColorNotation.XYZ_D50,a.colorNotation!==exports.ColorNotation.XYZ_D50&&(r=colorDataTo(a,exports.ColorNotation.XYZ_D50).channels),n.colorNotation!==exports.ColorNotation.XYZ_D50&&(s=colorDataTo(n,exports.ColorNotation.XYZ_D50).channels);break;case"xyz":case"xyz-d65":l=exports.ColorNotation.XYZ_D65,a.colorNotation!==exports.ColorNotation.XYZ_D65&&(r=colorDataTo(a,exports.ColorNotation.XYZ_D65).channels),n.colorNotation!==exports.ColorNotation.XYZ_D65&&(s=colorDataTo(n,exports.ColorNotation.XYZ_D65).channels)}r=fillInMissingComponents(r,s),s=fillInMissingComponents(s,r),r[0]=premultiply(r[0],i),r[1]=premultiply(r[1],i),r[2]=premultiply(r[2],i),s[0]=premultiply(s[0],u),s[1]=premultiply(s[1],u),s[2]=premultiply(s[2],u);const c=interpolate(i,u,t);return{colorNotation:l,channels:[un_premultiply(interpolate(r[0],s[0],t),c),un_premultiply(interpolate(r[1],s[1],t),c),un_premultiply(interpolate(r[2],s[2],t),c)],alpha:c*o.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function colorMixPolar(e,o,a){if(!a)return!1;const n=a.a.color,t=a.b.color,r=a.a.percentage/100;let s=n.channels,l=t.channels,i=0,u=0,c=0,p=0,N=0,m=0,h=exports.ColorNotation.RGB,x=n.alpha;if("number"!=typeof x)return!1;let y=t.alpha;if("number"!=typeof y)return!1;switch(x=Number.isNaN(x)?y:x,y=Number.isNaN(y)?x:y,e){case"hsl":h=exports.ColorNotation.HSL,n.colorNotation!==exports.ColorNotation.HSL&&(s=colorDataTo(n,exports.ColorNotation.HSL).channels),t.colorNotation!==exports.ColorNotation.HSL&&(l=colorDataTo(t,exports.ColorNotation.HSL).channels);break;case"hwb":h=exports.ColorNotation.HWB,n.colorNotation!==exports.ColorNotation.HWB&&(s=colorDataTo(n,exports.ColorNotation.HWB).channels),t.colorNotation!==exports.ColorNotation.HWB&&(l=colorDataTo(t,exports.ColorNotation.HWB).channels);break;case"lch":h=exports.ColorNotation.LCH,n.colorNotation!==exports.ColorNotation.LCH&&(s=colorDataTo(n,exports.ColorNotation.LCH).channels),t.colorNotation!==exports.ColorNotation.LCH&&(l=colorDataTo(t,exports.ColorNotation.LCH).channels);break;case"oklch":h=exports.ColorNotation.OKLCH,n.colorNotation!==exports.ColorNotation.OKLCH&&(s=colorDataTo(n,exports.ColorNotation.OKLCH).channels),t.colorNotation!==exports.ColorNotation.OKLCH&&(l=colorDataTo(t,exports.ColorNotation.OKLCH).channels)}switch(s=fillInMissingComponents(s,l),l=fillInMissingComponents(l,s),e){case"hsl":case"hwb":i=s[0],u=l[0],c=s[1],p=l[1],N=s[2],m=l[2];break;case"lch":case"oklch":c=s[0],p=l[0],N=s[1],m=l[1],i=s[2],u=l[2]}const C=u-i;switch(o){case"shorter":C>180?i+=360:C<-180&&(u+=360);break;case"longer":-180<180&&(C>0?i+=360:u+=360);break;case"increasing":C<0&&(u+=360);break;case"decreasing":C>0&&(i+=360);break;default:throw new Error("Unknown hue interpolation method")}c=premultiply(c,x),N=premultiply(N,x),p=premultiply(p,y),m=premultiply(m,y);let b=[0,0,0];const T=interpolate(x,y,r);switch(e){case"hsl":case"hwb":b=[interpolate(i,u,r),un_premultiply(interpolate(c,p,r),T),un_premultiply(interpolate(N,m,r),T)];break;case"lch":case"oklch":b=[un_premultiply(interpolate(c,p,r),T),un_premultiply(interpolate(N,m,r),T),interpolate(i,u,r)]}return{colorNotation:h,channels:b,alpha:T*a.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function interpolate(e,o,a){return Number.isNaN(e)?o:Number.isNaN(o)?e:e*a+o*(1-a)}function premultiply(e,o){return Number.isNaN(o)?e:Number.isNaN(e)?NaN:e*o}function un_premultiply(e,o){return 0===o||Number.isNaN(o)?e:Number.isNaN(e)?NaN:e/o}function hex(e){const o=toLowerCaseAZ(e[4].value);if(o.match(/[^a-f0-9]/))return!1;const a={colorNotation:exports.ColorNotation.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([exports.SyntaxFlag.Hex])},n=o.length;if(3===n){const e=o[0],n=o[1],t=o[2];return a.channels=[parseInt(e+e,16)/255,parseInt(n+n,16)/255,parseInt(t+t,16)/255],a}if(6===n){const e=o[0]+o[1],n=o[2]+o[3],t=o[4]+o[5];return a.channels=[parseInt(e,16)/255,parseInt(n,16)/255,parseInt(t,16)/255],a}if(4===n){const e=o[0],n=o[1],t=o[2],r=o[3];return a.channels=[parseInt(e+e,16)/255,parseInt(n+n,16)/255,parseInt(t+t,16)/255],a.alpha=parseInt(r+r,16)/255,a.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),a}if(8===n){const e=o[0]+o[1],n=o[2]+o[3],t=o[4]+o[5],r=o[6]+o[7];return a.channels=[parseInt(e,16)/255,parseInt(n,16)/255,parseInt(t,16)/255],a.alpha=parseInt(r,16)/255,a.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),a}return!1}function normalizeHue(e){if(e[0]===a.TokenType.Number)return e[4].value=e[4].value%360,e[1]=e[4].value.toString(),e;if(e[0]===a.TokenType.Dimension){let o=e[4].value;switch(toLowerCaseAZ(e[4].unit)){case"deg":break;case"rad":o=180*e[4].value/Math.PI;break;case"grad":o=.9*e[4].value;break;case"turn":o=360*e[4].value;break;default:return!1}return o%=360,[a.TokenType.Number,o.toString(),e[2],e[3],{value:o,type:a.NumberType.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(e,o){const n=[];for(let t=0;t.999999&&(a=[1,0,0]),n.calculations.mapGamut(a,(e=>(e=n.conversions.OKLCH_to_OKLab(e),e=n.conversions.OKLab_to_XYZ(e),e=n.conversions.XYZ_to_lin_sRGB(e),n.conversions.gam_sRGB(e))),(e=>(e=n.conversions.lin_sRGB(e),e=n.conversions.lin_sRGB_to_XYZ(e),e=n.conversions.XYZ_to_OKLab(e),n.conversions.OKLab_to_OKLCH(e))))}function threeChannelSpaceSeparated(e,o,s,l,i){const u=toLowerCaseAZ(e.getName()),c=[],p=[],N=[],m=[];let h,x,y=!1;const C={colorNotation:s,channels:[0,0,0],alpha:1,syntaxFlags:new Set(l)};let b=c;for(let o=0;ot.isTokenNode(e)&&e.value[0]===a.TokenType.Comma))){const o=hslCommaSeparated(e);if(!1!==o)return o}{const a=hslSpaceSeparated(e,o);if(!1!==a)return a}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,exports.ColorNotation.HSL,[exports.SyntaxFlag.LegacyHSL])}function hslSpaceSeparated(e,o){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,exports.ColorNotation.HSL,[],o)}function normalize_HWB_ChannelValues(e,o){const n=[];for(let t=0;tt.isTokenNode(e)&&e.value[0]===a.TokenType.Comma))){const o=rgbCommaSeparated(e);if(!1!==o)return o}else{const a=rgbSpaceSeparated(e,o);if(!1!==a)return a}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,exports.ColorNotation.RGB,[exports.SyntaxFlag.LegacyRGB])}function rgbSpaceSeparated(e,o){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,exports.ColorNotation.RGB,[],o)}function toPrecision(e,o=7){e=+e,o=+o;const a=(Math.floor(e)+"").length;if(o>a)return+e.toFixed(o-a);{const n=10**(a-o);return Math.round(e/n)*n}}function XYZ_D50_to_P3_Gamut(e){const o=n.xyz.XYZ_D50_to_P3(e);if(n.utils.inGamut(o))return n.utils.clip(o);let a=e.slice();return a=n.conversions.D50_to_D65(a),a=n.conversions.XYZ_to_OKLab(a),a=n.conversions.OKLab_to_OKLCH(a),a[0]<1e-6&&(a=[0,0,0]),a[0]>.999999&&(a=[1,0,0]),n.calculations.mapGamut(a,(e=>(e=n.conversions.OKLCH_to_OKLab(e),e=n.conversions.OKLab_to_XYZ(e),e=n.conversions.XYZ_to_lin_P3(e),n.conversions.gam_P3(e))),(e=>(e=n.conversions.lin_P3(e),e=n.conversions.lin_P3_to_XYZ(e),e=n.conversions.XYZ_to_OKLab(e),n.conversions.OKLab_to_OKLCH(e))))}exports.color=function color(e){if(t.isFunctionNode(e)){switch(toLowerCaseAZ(e.getName())){case"rgb":case"rgba":return rgb(e,color);case"hsl":case"hsla":return hsl(e,color);case"hwb":return o=color,threeChannelSpaceSeparated(e,normalize_HWB_ChannelValues,exports.ColorNotation.HWB,[],o);case"lab":return lab(e,color);case"lch":return lch(e,color);case"oklab":return oklab(e,color);case"oklch":return oklch(e,color);case"color":return color$1(e,color);case"color-mix":return colorMix(e,color)}}var o;if(t.isTokenNode(e)){if(e.value[0]===a.TokenType.Hash)return hex(e.value);if(e.value[0]===a.TokenType.Ident){const o=namedColor(e.value[4].value);return!1!==o?o:"transparent"===toLowerCaseAZ(e.value[4].value)&&{colorNotation:exports.ColorNotation.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([exports.SyntaxFlag.ColorKeyword])}}}return!1},exports.colorDataFitsRGB_Gamut=function colorDataFitsRGB_Gamut(e){const o=JSON.parse(JSON.stringify(e));return o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation),!colorDataTo(o,exports.ColorNotation.RGB).channels.find((e=>e<-1e-5||e>1.00001))},exports.colorDataTo=colorDataTo,exports.serializeP3=function serializeP3(e,o=!0){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation!==exports.ColorNotation.Display_P3&&(r=o?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(e).channels):n.xyz.XYZ_D50_to_P3(colorData_to_XYZ_D50(e).channels));const s=toPrecision(r[0],6),l=toPrecision(r[1],6),i=toPrecision(r[2],6),u=[a.TokenType.Function,"color(",-1,-1,{value:"color"}],c=[a.TokenType.CloseParen,")",-1,-1,void 0],p=[a.TokenType.Whitespace," ",-1,-1,void 0],N=[new t.TokenNode([a.TokenType.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:a.NumberType.Number}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:a.NumberType.Number}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:a.NumberType.Number}])];if("number"==typeof e.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===toPrecision(o,4)?new t.FunctionNode(u,c,N):new t.FunctionNode(u,c,[...N,new t.TokenNode(p),new t.TokenNode([a.TokenType.Delim,"/",-1,-1,{value:"/"}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,toPrecision(o,4).toString(),-1,-1,{value:e.alpha,type:a.NumberType.Integer}])])}return new t.FunctionNode(u,c,[...N,new t.TokenNode(p),new t.TokenNode([a.TokenType.Delim,"/",-1,-1,{value:"/"}]),new t.TokenNode(p),e.alpha])},exports.serializeRGB=function serializeRGB(e,o=!0){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation===exports.ColorNotation.HWB?r=n.conversions.HWB_to_sRGB(r):e.colorNotation===exports.ColorNotation.HSL?r=n.conversions.HSL_to_sRGB(r):e.colorNotation!==exports.ColorNotation.RGB&&e.colorNotation!==exports.ColorNotation.HEX&&(r=o?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(e).channels):n.xyz.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(e).channels));const s=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[0])))),l=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[1])))),i=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[2])))),u=[a.TokenType.CloseParen,")",-1,-1,void 0],c=[a.TokenType.Whitespace," ",-1,-1,void 0],p=[a.TokenType.Comma,",",-1,-1,void 0],N=[new t.TokenNode([a.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:a.NumberType.Integer}]),new t.TokenNode(p),new t.TokenNode(c),new t.TokenNode([a.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:a.NumberType.Integer}]),new t.TokenNode(p),new t.TokenNode(c),new t.TokenNode([a.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:a.NumberType.Integer}])];if("number"==typeof e.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===toPrecision(o,4)?new t.FunctionNode([a.TokenType.Function,"rgb(",-1,-1,{value:"rgb"}],u,N):new t.FunctionNode([a.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],u,[...N,new t.TokenNode(p),new t.TokenNode(c),new t.TokenNode([a.TokenType.Number,toPrecision(o,4).toString(),-1,-1,{value:e.alpha,type:a.NumberType.Number}])])}return new t.FunctionNode([a.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],u,[...N,new t.TokenNode(p),new t.TokenNode(c),e.alpha])}; +"use strict";var e,o,a=require("@csstools/css-tokenizer"),n=require("@csstools/color-helpers"),t=require("@csstools/css-parser-algorithms"),r=require("@csstools/css-calc");function colorData_to_XYZ_D50(e){switch(e.colorNotation){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:case exports.ColorNotation.sRGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Linear_sRGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Display_P3:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Rec2020:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.A98_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.ProPhoto_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HSL:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HWB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Lab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.LCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D50:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D65:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}exports.ColorNotation=void 0,(e=exports.ColorNotation||(exports.ColorNotation={})).A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_sRGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.sRGB="srgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65",exports.SyntaxFlag=void 0,(o=exports.SyntaxFlag||(exports.SyntaxFlag={})).ColorKeyword="color-keyword",o.HasAlpha="has-alpha",o.HasDimensionValues="has-dimension-values",o.HasNoneKeywords="has-none-keywords",o.HasNumberValues="has-number-values",o.HasPercentageAlpha="has-percentage-alpha",o.HasPercentageValues="has-percentage-values",o.HasVariableAlpha="has-variable-alpha",o.Hex="hex",o.LegacyHSL="legacy-hsl",o.LegacyRGB="legacy-rgb",o.NamedColor="named-color",o.RelativeColorSyntax="relative-color-syntax",o.ColorMix="color-mix";const s=new Set([exports.ColorNotation.A98_RGB,exports.ColorNotation.Display_P3,exports.ColorNotation.HEX,exports.ColorNotation.Linear_sRGB,exports.ColorNotation.ProPhoto_RGB,exports.ColorNotation.RGB,exports.ColorNotation.sRGB,exports.ColorNotation.Rec2020,exports.ColorNotation.XYZ_D50,exports.ColorNotation.XYZ_D65]);function colorDataTo(e,o){const a=colorData_to_XYZ_D50(e),t={...e};switch(o){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:t.colorNotation=exports.ColorNotation.RGB,t.channels=n.xyz.XYZ_D50_to_sRGB(a.channels);break;case exports.ColorNotation.sRGB:t.colorNotation=exports.ColorNotation.sRGB,t.channels=n.xyz.XYZ_D50_to_sRGB(a.channels);break;case exports.ColorNotation.Linear_sRGB:t.colorNotation=exports.ColorNotation.Linear_sRGB,t.channels=n.xyz.XYZ_D50_to_lin_sRGB(a.channels);break;case exports.ColorNotation.Display_P3:t.colorNotation=exports.ColorNotation.Display_P3,t.channels=n.xyz.XYZ_D50_to_P3(a.channels);break;case exports.ColorNotation.Rec2020:t.colorNotation=exports.ColorNotation.Rec2020,t.channels=n.xyz.XYZ_D50_to_rec_2020(a.channels);break;case exports.ColorNotation.ProPhoto_RGB:t.colorNotation=exports.ColorNotation.ProPhoto_RGB,t.channels=n.xyz.XYZ_D50_to_ProPhoto(a.channels);break;case exports.ColorNotation.A98_RGB:t.colorNotation=exports.ColorNotation.A98_RGB,t.channels=n.xyz.XYZ_D50_to_a98_RGB(a.channels);break;case exports.ColorNotation.HSL:t.colorNotation=exports.ColorNotation.HSL,t.channels=n.xyz.XYZ_D50_to_HSL(a.channels);break;case exports.ColorNotation.HWB:t.colorNotation=exports.ColorNotation.HWB,t.channels=n.xyz.XYZ_D50_to_HWB(a.channels);break;case exports.ColorNotation.Lab:t.colorNotation=exports.ColorNotation.Lab,t.channels=n.xyz.XYZ_D50_to_Lab(a.channels);break;case exports.ColorNotation.LCH:t.colorNotation=exports.ColorNotation.LCH,t.channels=n.xyz.XYZ_D50_to_LCH(a.channels);break;case exports.ColorNotation.OKLCH:t.colorNotation=exports.ColorNotation.OKLCH,t.channels=n.xyz.XYZ_D50_to_OKLCH(a.channels);break;case exports.ColorNotation.OKLab:t.colorNotation=exports.ColorNotation.OKLab,t.channels=n.xyz.XYZ_D50_to_OKLab(a.channels);break;case exports.ColorNotation.XYZ_D50:t.colorNotation=exports.ColorNotation.XYZ_D50,t.channels=n.xyz.XYZ_D50_to_XYZ_D50(a.channels);break;case exports.ColorNotation.XYZ_D65:t.colorNotation=exports.ColorNotation.XYZ_D65,t.channels=n.xyz.XYZ_D50_to_XYZ_D65(a.channels);break;default:throw new Error("Unsupported color notation")}if(o===e.colorNotation)t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2]);else if(s.has(o)&&s.has(e.colorNotation))t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2]);else switch(o){case exports.ColorNotation.HSL:switch(e.colorNotation){case exports.ColorNotation.HWB:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:t.channels=carryForwardMissingComponents(e.channels,[2],t.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[2,1,0])}break;case exports.ColorNotation.HWB:switch(e.colorNotation){case exports.ColorNotation.HSL:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[2])}break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:switch(e.colorNotation){case exports.ColorNotation.HSL:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0])}break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:switch(e.colorNotation){case exports.ColorNotation.HSL:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[2,1,0]);break;case exports.ColorNotation.HWB:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2])}}return t.channels=convertPowerlessComponentsToMissingComponents(t.channels,o),t}function convertPowerlessComponentsToMissingComponents(e,o){const a=[...e];switch(o){case exports.ColorNotation.HSL:(reducePrecision(a[2],4)<=0||reducePrecision(a[2],4)>=100)&&(a[0]=NaN,a[1]=NaN),reducePrecision(a[1],4)<=0&&(a[0]=NaN);break;case exports.ColorNotation.HWB:Math.max(0,reducePrecision(a[1],4))+Math.max(0,reducePrecision(a[2],4))>=100&&(a[0]=NaN);break;case exports.ColorNotation.LCH:reducePrecision(a[1],4)<=0&&(a[2]=NaN);break;case exports.ColorNotation.OKLCH:reducePrecision(a[1],6)<=0&&(a[2]=NaN)}return a}function convertPowerlessComponentsToZeroValuesForDisplay(e,o){const a=[...e];switch(o){case exports.ColorNotation.HSL:(reducePrecision(a[2])<=0||reducePrecision(a[2])>=100)&&(a[0]=NaN,a[1]=NaN),reducePrecision(a[1])<=0&&(a[0]=NaN);break;case exports.ColorNotation.HWB:Math.max(0,reducePrecision(a[1]))+Math.max(0,reducePrecision(a[2]))>=100&&(a[0]=NaN);break;case exports.ColorNotation.Lab:(reducePrecision(a[0])<=0||reducePrecision(a[0])>=100)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.LCH:reducePrecision(a[1])<=0&&(a[2]=NaN),(reducePrecision(a[0])<=0||reducePrecision(a[0])>=100)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.OKLab:(reducePrecision(a[0])<=0||reducePrecision(a[0])>=1)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.OKLCH:reducePrecision(a[1])<=0&&(a[2]=NaN),(reducePrecision(a[0])<=0||reducePrecision(a[0])>=1)&&(a[1]=NaN,a[2]=NaN)}return a}function carryForwardMissingComponents(e,o,a,n){const t=[...a];for(const a of o)Number.isNaN(e[o[a]])&&(t[n[a]]=NaN);return t}function fillInMissingComponents(e,o){const a=[...e];for(let n=0;nString.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(e,o){const n=[];for(let t=0;t=0){i=c.value[4].value;continue}}return!1}if(!l)return!1;n.push({color:l,percentage:i}),l=!1,i=!1}}if(l&&n.push({color:l,percentage:i}),2!==n.length)return!1;let c=n[0].percentage,u=n[1].percentage;return(!1===c||!(c<0||c>100))&&((!1===u||!(u<0||u>100))&&(!1===c&&!1===u?(c=50,u=50):!1!==c&&!1===u?u=100-c:!1===c&&!1!==u&&(c=100-u),(0!==c||0!==u)&&(!1!==c&&!1!==u&&(c+u>100&&(c=c/(c+u)*100,u=u/(c+u)*100),c+u<100&&(s=(c+u)/100,c=c/(c+u)*100,u=u/(c+u)*100),{a:{color:n[0].color,percentage:c},b:{color:n[1].color,percentage:u},alphaMultiplier:s}))))}function colorMixRectangular(e,o){if(!o)return!1;const a=o.a.color,n=o.b.color,t=o.a.percentage/100;let r=a.channels,s=n.channels,l=exports.ColorNotation.RGB,i=a.alpha;if("number"!=typeof i)return!1;let c=n.alpha;if("number"!=typeof c)return!1;switch(i=Number.isNaN(i)?c:i,c=Number.isNaN(c)?i:c,e){case"srgb":l=exports.ColorNotation.RGB,a.colorNotation!==exports.ColorNotation.RGB&&a.colorNotation!==exports.ColorNotation.sRGB&&a.colorNotation!==exports.ColorNotation.HEX&&(r=colorDataTo(a,exports.ColorNotation.RGB).channels),n.colorNotation!==exports.ColorNotation.RGB&&n.colorNotation!==exports.ColorNotation.sRGB&&n.colorNotation!==exports.ColorNotation.HEX&&(s=colorDataTo(n,exports.ColorNotation.RGB).channels);break;case"srgb-linear":l=exports.ColorNotation.Linear_sRGB,a.colorNotation!==exports.ColorNotation.Linear_sRGB&&(r=colorDataTo(a,exports.ColorNotation.Linear_sRGB).channels),n.colorNotation!==exports.ColorNotation.Linear_sRGB&&(s=colorDataTo(n,exports.ColorNotation.Linear_sRGB).channels);break;case"lab":l=exports.ColorNotation.Lab,a.colorNotation!==exports.ColorNotation.Lab&&(r=colorDataTo(a,exports.ColorNotation.Lab).channels),n.colorNotation!==exports.ColorNotation.Lab&&(s=colorDataTo(n,exports.ColorNotation.Lab).channels);break;case"oklab":l=exports.ColorNotation.OKLab,a.colorNotation!==exports.ColorNotation.OKLab&&(r=colorDataTo(a,exports.ColorNotation.OKLab).channels),n.colorNotation!==exports.ColorNotation.OKLab&&(s=colorDataTo(n,exports.ColorNotation.OKLab).channels);break;case"xyz-d50":l=exports.ColorNotation.XYZ_D50,a.colorNotation!==exports.ColorNotation.XYZ_D50&&(r=colorDataTo(a,exports.ColorNotation.XYZ_D50).channels),n.colorNotation!==exports.ColorNotation.XYZ_D50&&(s=colorDataTo(n,exports.ColorNotation.XYZ_D50).channels);break;case"xyz":case"xyz-d65":l=exports.ColorNotation.XYZ_D65,a.colorNotation!==exports.ColorNotation.XYZ_D65&&(r=colorDataTo(a,exports.ColorNotation.XYZ_D65).channels),n.colorNotation!==exports.ColorNotation.XYZ_D65&&(s=colorDataTo(n,exports.ColorNotation.XYZ_D65).channels)}r=fillInMissingComponents(r,s),s=fillInMissingComponents(s,r),r[0]=premultiply(r[0],i),r[1]=premultiply(r[1],i),r[2]=premultiply(r[2],i),s[0]=premultiply(s[0],c),s[1]=premultiply(s[1],c),s[2]=premultiply(s[2],c);const u=interpolate(i,c,t);return{colorNotation:l,channels:[un_premultiply(interpolate(r[0],s[0],t),u),un_premultiply(interpolate(r[1],s[1],t),u),un_premultiply(interpolate(r[2],s[2],t),u)],alpha:u*o.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function colorMixPolar(e,o,a){if(!a)return!1;const n=a.a.color,t=a.b.color,r=a.a.percentage/100;let s=n.channels,l=t.channels,i=0,c=0,u=0,p=0,N=0,m=0,h=exports.ColorNotation.RGB,y=n.alpha;if("number"!=typeof y)return!1;let x=t.alpha;if("number"!=typeof x)return!1;switch(y=Number.isNaN(y)?x:y,x=Number.isNaN(x)?y:x,e){case"hsl":h=exports.ColorNotation.HSL,n.colorNotation!==exports.ColorNotation.HSL&&(s=colorDataTo(n,exports.ColorNotation.HSL).channels),t.colorNotation!==exports.ColorNotation.HSL&&(l=colorDataTo(t,exports.ColorNotation.HSL).channels);break;case"hwb":h=exports.ColorNotation.HWB,n.colorNotation!==exports.ColorNotation.HWB&&(s=colorDataTo(n,exports.ColorNotation.HWB).channels),t.colorNotation!==exports.ColorNotation.HWB&&(l=colorDataTo(t,exports.ColorNotation.HWB).channels);break;case"lch":h=exports.ColorNotation.LCH,n.colorNotation!==exports.ColorNotation.LCH&&(s=colorDataTo(n,exports.ColorNotation.LCH).channels),t.colorNotation!==exports.ColorNotation.LCH&&(l=colorDataTo(t,exports.ColorNotation.LCH).channels);break;case"oklch":h=exports.ColorNotation.OKLCH,n.colorNotation!==exports.ColorNotation.OKLCH&&(s=colorDataTo(n,exports.ColorNotation.OKLCH).channels),t.colorNotation!==exports.ColorNotation.OKLCH&&(l=colorDataTo(t,exports.ColorNotation.OKLCH).channels)}switch(s=fillInMissingComponents(s,l),l=fillInMissingComponents(l,s),e){case"hsl":case"hwb":i=s[0],c=l[0],u=s[1],p=l[1],N=s[2],m=l[2];break;case"lch":case"oklch":u=s[0],p=l[0],N=s[1],m=l[1],i=s[2],c=l[2]}const C=c-i;switch(o){case"shorter":C>180?i+=360:C<-180&&(c+=360);break;case"longer":-180<180&&(C>0?i+=360:c+=360);break;case"increasing":C<0&&(c+=360);break;case"decreasing":C>0&&(i+=360);break;default:throw new Error("Unknown hue interpolation method")}u=premultiply(u,y),N=premultiply(N,y),p=premultiply(p,x),m=premultiply(m,x);let b=[0,0,0];const T=interpolate(y,x,r);switch(e){case"hsl":case"hwb":b=[interpolate(i,c,r),un_premultiply(interpolate(u,p,r),T),un_premultiply(interpolate(N,m,r),T)];break;case"lch":case"oklch":b=[un_premultiply(interpolate(u,p,r),T),un_premultiply(interpolate(N,m,r),T),interpolate(i,c,r)]}return{colorNotation:h,channels:b,alpha:T*a.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function interpolate(e,o,a){return Number.isNaN(e)?o:Number.isNaN(o)?e:e*a+o*(1-a)}function premultiply(e,o){return Number.isNaN(o)?e:Number.isNaN(e)?NaN:e*o}function un_premultiply(e,o){return 0===o||Number.isNaN(o)?e:Number.isNaN(e)?NaN:e/o}function hex(e){const o=toLowerCaseAZ(e[4].value);if(o.match(/[^a-f0-9]/))return!1;const a={colorNotation:exports.ColorNotation.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([exports.SyntaxFlag.Hex])},n=o.length;if(3===n){const e=o[0],n=o[1],t=o[2];return a.channels=[parseInt(e+e,16)/255,parseInt(n+n,16)/255,parseInt(t+t,16)/255],a}if(6===n){const e=o[0]+o[1],n=o[2]+o[3],t=o[4]+o[5];return a.channels=[parseInt(e,16)/255,parseInt(n,16)/255,parseInt(t,16)/255],a}if(4===n){const e=o[0],n=o[1],t=o[2],r=o[3];return a.channels=[parseInt(e+e,16)/255,parseInt(n+n,16)/255,parseInt(t+t,16)/255],a.alpha=parseInt(r+r,16)/255,a.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),a}if(8===n){const e=o[0]+o[1],n=o[2]+o[3],t=o[4]+o[5],r=o[6]+o[7];return a.channels=[parseInt(e,16)/255,parseInt(n,16)/255,parseInt(t,16)/255],a.alpha=parseInt(r,16)/255,a.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),a}return!1}function normalizeHue(e){if(e[0]===a.TokenType.Number)return e[4].value=e[4].value%360,e[1]=e[4].value.toString(),e;if(e[0]===a.TokenType.Dimension){let o=e[4].value;switch(toLowerCaseAZ(e[4].unit)){case"deg":break;case"rad":o=180*e[4].value/Math.PI;break;case"grad":o=.9*e[4].value;break;case"turn":o=360*e[4].value;break;default:return!1}return o%=360,[a.TokenType.Number,o.toString(),e[2],e[3],{value:o,type:a.NumberType.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(e,o){const n=[];for(let t=0;t.999999&&(a=[1,0,0]),n.calculations.mapGamut(a,(e=>(e=n.conversions.OKLCH_to_OKLab(e),e=n.conversions.OKLab_to_XYZ(e),e=n.conversions.XYZ_to_lin_sRGB(e),n.conversions.gam_sRGB(e))),(e=>(e=n.conversions.lin_sRGB(e),e=n.conversions.lin_sRGB_to_XYZ(e),e=n.conversions.XYZ_to_OKLab(e),n.conversions.OKLab_to_OKLCH(e))))}function threeChannelSpaceSeparated(e,o,s,l,i){const c=toLowerCaseAZ(e.getName()),u=[],p=[],N=[],m=[];let h,y,x=!1;const C={colorNotation:s,channels:[0,0,0],alpha:1,syntaxFlags:new Set(l)};let b=u;for(let o=0;ot.isTokenNode(e)&&e.value[0]===a.TokenType.Comma))){const o=hslCommaSeparated(e);if(!1!==o)return o}{const a=hslSpaceSeparated(e,o);if(!1!==a)return a}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,exports.ColorNotation.HSL,[exports.SyntaxFlag.LegacyHSL])}function hslSpaceSeparated(e,o){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,exports.ColorNotation.HSL,[],o)}function normalize_HWB_ChannelValues(e,o){const n=[];for(let t=0;tt.isTokenNode(e)&&e.value[0]===a.TokenType.Comma))){const o=rgbCommaSeparated(e);if(!1!==o)return o}else{const a=rgbSpaceSeparated(e,o);if(!1!==a)return a}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,exports.ColorNotation.RGB,[exports.SyntaxFlag.LegacyRGB])}function rgbSpaceSeparated(e,o){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,exports.ColorNotation.RGB,[],o)}function toPrecision(e,o=7){e=+e,o=+o;const a=(Math.floor(e)+"").length;if(o>a)return+e.toFixed(o-a);{const n=10**(a-o);return Math.round(e/n)*n}}function XYZ_D50_to_P3_Gamut(e){const o=n.xyz.XYZ_D50_to_P3(e);if(n.utils.inGamut(o))return n.utils.clip(o);let a=e.slice();return a=n.conversions.D50_to_D65(a),a=n.conversions.XYZ_to_OKLab(a),a=n.conversions.OKLab_to_OKLCH(a),a[0]<1e-6&&(a=[0,0,0]),a[0]>.999999&&(a=[1,0,0]),n.calculations.mapGamut(a,(e=>(e=n.conversions.OKLCH_to_OKLab(e),e=n.conversions.OKLab_to_XYZ(e),e=n.conversions.XYZ_to_lin_P3(e),n.conversions.gam_P3(e))),(e=>(e=n.conversions.lin_P3(e),e=n.conversions.lin_P3_to_XYZ(e),e=n.conversions.XYZ_to_OKLab(e),n.conversions.OKLab_to_OKLCH(e))))}exports.color=function color(e){if(t.isFunctionNode(e)){switch(toLowerCaseAZ(e.getName())){case"rgb":case"rgba":return rgb(e,color);case"hsl":case"hsla":return hsl(e,color);case"hwb":return o=color,threeChannelSpaceSeparated(e,normalize_HWB_ChannelValues,exports.ColorNotation.HWB,[],o);case"lab":return lab(e,color);case"lch":return lch(e,color);case"oklab":return oklab(e,color);case"oklch":return oklch(e,color);case"color":return color$1(e,color);case"color-mix":return colorMix(e,color)}}var o;if(t.isTokenNode(e)){if(e.value[0]===a.TokenType.Hash)return hex(e.value);if(e.value[0]===a.TokenType.Ident){const o=namedColor(e.value[4].value);return!1!==o?o:"transparent"===toLowerCaseAZ(e.value[4].value)&&{colorNotation:exports.ColorNotation.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([exports.SyntaxFlag.ColorKeyword])}}}return!1},exports.colorDataFitsDisplayP3_Gamut=function colorDataFitsDisplayP3_Gamut(e){const o=JSON.parse(JSON.stringify(e));return o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation),!colorDataTo(o,exports.ColorNotation.Display_P3).channels.find((e=>e<-1e-5||e>1.00001))},exports.colorDataFitsRGB_Gamut=function colorDataFitsRGB_Gamut(e){const o=JSON.parse(JSON.stringify(e));return o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation),!colorDataTo(o,exports.ColorNotation.RGB).channels.find((e=>e<-1e-5||e>1.00001))},exports.colorDataTo=colorDataTo,exports.serializeP3=function serializeP3(e,o=!0){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation!==exports.ColorNotation.Display_P3&&(r=o?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(e).channels):n.xyz.XYZ_D50_to_P3(colorData_to_XYZ_D50(e).channels));const s=toPrecision(r[0],6),l=toPrecision(r[1],6),i=toPrecision(r[2],6),c=[a.TokenType.Function,"color(",-1,-1,{value:"color"}],u=[a.TokenType.CloseParen,")",-1,-1,void 0],p=[a.TokenType.Whitespace," ",-1,-1,void 0],N=[new t.TokenNode([a.TokenType.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:a.NumberType.Number}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:a.NumberType.Number}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:a.NumberType.Number}])];if("number"==typeof e.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===toPrecision(o,4)?new t.FunctionNode(c,u,N):new t.FunctionNode(c,u,[...N,new t.TokenNode(p),new t.TokenNode([a.TokenType.Delim,"/",-1,-1,{value:"/"}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,toPrecision(o,4).toString(),-1,-1,{value:e.alpha,type:a.NumberType.Integer}])])}return new t.FunctionNode(c,u,[...N,new t.TokenNode(p),new t.TokenNode([a.TokenType.Delim,"/",-1,-1,{value:"/"}]),new t.TokenNode(p),e.alpha])},exports.serializeRGB=function serializeRGB(e,o=!0){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation===exports.ColorNotation.HWB?r=n.conversions.HWB_to_sRGB(r):e.colorNotation===exports.ColorNotation.HSL?r=n.conversions.HSL_to_sRGB(r):e.colorNotation!==exports.ColorNotation.RGB&&e.colorNotation!==exports.ColorNotation.HEX&&(r=o?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(e).channels):n.xyz.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(e).channels));const s=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[0])))),l=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[1])))),i=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[2])))),c=[a.TokenType.CloseParen,")",-1,-1,void 0],u=[a.TokenType.Whitespace," ",-1,-1,void 0],p=[a.TokenType.Comma,",",-1,-1,void 0],N=[new t.TokenNode([a.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:a.NumberType.Integer}]),new t.TokenNode(p),new t.TokenNode(u),new t.TokenNode([a.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:a.NumberType.Integer}]),new t.TokenNode(p),new t.TokenNode(u),new t.TokenNode([a.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:a.NumberType.Integer}])];if("number"==typeof e.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===toPrecision(o,4)?new t.FunctionNode([a.TokenType.Function,"rgb(",-1,-1,{value:"rgb"}],c,N):new t.FunctionNode([a.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],c,[...N,new t.TokenNode(p),new t.TokenNode(u),new t.TokenNode([a.TokenType.Number,toPrecision(o,4).toString(),-1,-1,{value:e.alpha,type:a.NumberType.Number}])])}return new t.FunctionNode([a.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],c,[...N,new t.TokenNode(p),new t.TokenNode(u),e.alpha])}; diff --git a/packages/css-color-parser/dist/index.d.ts b/packages/css-color-parser/dist/index.d.ts index 4b6f7737e..fb7729a04 100644 --- a/packages/css-color-parser/dist/index.d.ts +++ b/packages/css-color-parser/dist/index.d.ts @@ -3,7 +3,7 @@ import type { ComponentValue } from '@csstools/css-parser-algorithms'; export type { ColorData } from './color-data'; export { ColorNotation } from './color-notation'; export { SyntaxFlag } from './color-data'; -export { colorDataTo, colorDataFitsRGB_Gamut } from './color-data'; +export { colorDataTo, colorDataFitsRGB_Gamut, colorDataFitsDisplayP3_Gamut } from './color-data'; export { serializeP3 } from './serialize/p3'; export { serializeRGB } from './serialize/rgb'; export declare function color(colorNode: ComponentValue): ColorData | false; diff --git a/packages/css-color-parser/dist/index.mjs b/packages/css-color-parser/dist/index.mjs index 5be34ea70..7bf104cd6 100644 --- a/packages/css-color-parser/dist/index.mjs +++ b/packages/css-color-parser/dist/index.mjs @@ -1 +1 @@ -import{TokenType as e,NumberType as a}from"@csstools/css-tokenizer";import{xyz as n,utils as o,conversions as r,calculations as t,namedColors as l}from"@csstools/color-helpers";import{isWhitespaceNode as s,isCommentNode as c,isTokenNode as u,isFunctionNode as i,TokenNode as h,FunctionNode as m}from"@csstools/css-parser-algorithms";import{mathFunctionNames as N,calcFromComponentValues as p}from"@csstools/css-calc";var b,_;function colorData_to_XYZ_D50(e){switch(e.colorNotation){case b.HEX:case b.RGB:case b.sRGB:return{...e,colorNotation:b.XYZ_D50,channels:n.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.Linear_sRGB:return{...e,colorNotation:b.XYZ_D50,channels:n.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.Display_P3:return{...e,colorNotation:b.XYZ_D50,channels:n.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.Rec2020:return{...e,colorNotation:b.XYZ_D50,channels:n.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.A98_RGB:return{...e,colorNotation:b.XYZ_D50,channels:n.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.ProPhoto_RGB:return{...e,colorNotation:b.XYZ_D50,channels:n.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.HSL:return{...e,colorNotation:b.XYZ_D50,channels:n.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.HWB:return{...e,colorNotation:b.XYZ_D50,channels:n.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.Lab:return{...e,colorNotation:b.XYZ_D50,channels:n.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.OKLab:return{...e,colorNotation:b.XYZ_D50,channels:n.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.LCH:return{...e,colorNotation:b.XYZ_D50,channels:n.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.OKLCH:return{...e,colorNotation:b.XYZ_D50,channels:n.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.XYZ_D50:return{...e,colorNotation:b.XYZ_D50,channels:n.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.XYZ_D65:return{...e,colorNotation:b.XYZ_D50,channels:n.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}!function(e){e.A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_sRGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.sRGB="srgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65"}(b||(b={})),function(e){e.ColorKeyword="color-keyword",e.HasAlpha="has-alpha",e.HasDimensionValues="has-dimension-values",e.HasNoneKeywords="has-none-keywords",e.HasNumberValues="has-number-values",e.HasPercentageAlpha="has-percentage-alpha",e.HasPercentageValues="has-percentage-values",e.HasVariableAlpha="has-variable-alpha",e.Hex="hex",e.LegacyHSL="legacy-hsl",e.LegacyRGB="legacy-rgb",e.NamedColor="named-color",e.RelativeColorSyntax="relative-color-syntax",e.ColorMix="color-mix"}(_||(_={}));const g=new Set([b.A98_RGB,b.Display_P3,b.HEX,b.Linear_sRGB,b.ProPhoto_RGB,b.RGB,b.sRGB,b.Rec2020,b.XYZ_D50,b.XYZ_D65]);function colorDataTo(e,a){const o=colorData_to_XYZ_D50(e),r={...e};switch(a){case b.HEX:case b.RGB:r.colorNotation=b.RGB,r.channels=n.XYZ_D50_to_sRGB(o.channels);break;case b.sRGB:r.colorNotation=b.sRGB,r.channels=n.XYZ_D50_to_sRGB(o.channels);break;case b.Linear_sRGB:r.colorNotation=b.Linear_sRGB,r.channels=n.XYZ_D50_to_lin_sRGB(o.channels);break;case b.Display_P3:r.colorNotation=b.Display_P3,r.channels=n.XYZ_D50_to_P3(o.channels);break;case b.Rec2020:r.colorNotation=b.Rec2020,r.channels=n.XYZ_D50_to_rec_2020(o.channels);break;case b.ProPhoto_RGB:r.colorNotation=b.ProPhoto_RGB,r.channels=n.XYZ_D50_to_ProPhoto(o.channels);break;case b.A98_RGB:r.colorNotation=b.A98_RGB,r.channels=n.XYZ_D50_to_a98_RGB(o.channels);break;case b.HSL:r.colorNotation=b.HSL,r.channels=n.XYZ_D50_to_HSL(o.channels);break;case b.HWB:r.colorNotation=b.HWB,r.channels=n.XYZ_D50_to_HWB(o.channels);break;case b.Lab:r.colorNotation=b.Lab,r.channels=n.XYZ_D50_to_Lab(o.channels);break;case b.LCH:r.colorNotation=b.LCH,r.channels=n.XYZ_D50_to_LCH(o.channels);break;case b.OKLCH:r.colorNotation=b.OKLCH,r.channels=n.XYZ_D50_to_OKLCH(o.channels);break;case b.OKLab:r.colorNotation=b.OKLab,r.channels=n.XYZ_D50_to_OKLab(o.channels);break;case b.XYZ_D50:r.colorNotation=b.XYZ_D50,r.channels=n.XYZ_D50_to_XYZ_D50(o.channels);break;case b.XYZ_D65:r.colorNotation=b.XYZ_D65,r.channels=n.XYZ_D50_to_XYZ_D65(o.channels);break;default:throw new Error("Unsupported color notation")}if(a===e.colorNotation)r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);else if(g.has(a)&&g.has(e.colorNotation))r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);else switch(a){case b.HSL:switch(e.colorNotation){case b.HWB:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case b.Lab:case b.OKLab:r.channels=carryForwardMissingComponents(e.channels,[2],r.channels,[0]);break;case b.LCH:case b.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[2,1,0])}break;case b.HWB:switch(e.colorNotation){case b.HSL:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case b.LCH:case b.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2])}break;case b.Lab:case b.OKLab:switch(e.colorNotation){case b.HSL:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2]);break;case b.Lab:case b.OKLab:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);break;case b.LCH:case b.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0])}break;case b.LCH:case b.OKLCH:switch(e.colorNotation){case b.HSL:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[2,1,0]);break;case b.HWB:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2]);break;case b.Lab:case b.OKLab:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case b.LCH:case b.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2])}}return r.channels=convertPowerlessComponentsToMissingComponents(r.channels,a),r}function convertPowerlessComponentsToMissingComponents(e,a){const n=[...e];switch(a){case b.HSL:(reducePrecision(n[2],4)<=0||reducePrecision(n[2],4)>=100)&&(n[0]=NaN,n[1]=NaN),reducePrecision(n[1],4)<=0&&(n[0]=NaN);break;case b.HWB:Math.max(0,reducePrecision(n[1],4))+Math.max(0,reducePrecision(n[2],4))>=100&&(n[0]=NaN);break;case b.LCH:reducePrecision(n[1],4)<=0&&(n[2]=NaN);break;case b.OKLCH:reducePrecision(n[1],6)<=0&&(n[2]=NaN)}return n}function convertPowerlessComponentsToZeroValuesForDisplay(e,a){const n=[...e];switch(a){case b.HSL:(reducePrecision(n[2])<=0||reducePrecision(n[2])>=100)&&(n[0]=NaN,n[1]=NaN),reducePrecision(n[1])<=0&&(n[0]=NaN);break;case b.HWB:Math.max(0,reducePrecision(n[1]))+Math.max(0,reducePrecision(n[2]))>=100&&(n[0]=NaN);break;case b.Lab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case b.LCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case b.OKLab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN);break;case b.OKLCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN)}return n}function carryForwardMissingComponents(e,a,n,o){const r=[...n];for(const n of a)Number.isNaN(e[a[n]])&&(r[o[n]]=NaN);return r}function fillInMissingComponents(e,a){const n=[...e];for(let o=0;oe<-1e-5||e>1.00001))}function normalize(e,a,n,o){return Math.min(Math.max(e/a,n),o)}const d=/[A-Z]/g;function toLowerCaseAZ(e){return e.replace(d,(e=>String.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(n,o){const r=[];for(let t=0;t=0){l=h.value[4].value;continue}}return!1}if(!t)return!1;o.push({color:t,percentage:l}),t=!1,l=!1}}if(t&&o.push({color:t,percentage:l}),2!==o.length)return!1;let h=o[0].percentage,m=o[1].percentage;return(!1===h||!(h<0||h>100))&&((!1===m||!(m<0||m>100))&&(!1===h&&!1===m?(h=50,m=50):!1!==h&&!1===m?m=100-h:!1===h&&!1!==m&&(h=100-m),(0!==h||0!==m)&&(!1!==h&&!1!==m&&(h+m>100&&(h=h/(h+m)*100,m=m/(h+m)*100),h+m<100&&(r=(h+m)/100,h=h/(h+m)*100,m=m/(h+m)*100),{a:{color:o[0].color,percentage:h},b:{color:o[1].color,percentage:m},alphaMultiplier:r}))))}function colorMixRectangular(e,a){if(!a)return!1;const n=a.a.color,o=a.b.color,r=a.a.percentage/100;let t=n.channels,l=o.channels,s=b.RGB,c=n.alpha;if("number"!=typeof c)return!1;let u=o.alpha;if("number"!=typeof u)return!1;switch(c=Number.isNaN(c)?u:c,u=Number.isNaN(u)?c:u,e){case"srgb":s=b.RGB,n.colorNotation!==b.RGB&&n.colorNotation!==b.sRGB&&n.colorNotation!==b.HEX&&(t=colorDataTo(n,b.RGB).channels),o.colorNotation!==b.RGB&&o.colorNotation!==b.sRGB&&o.colorNotation!==b.HEX&&(l=colorDataTo(o,b.RGB).channels);break;case"srgb-linear":s=b.Linear_sRGB,n.colorNotation!==b.Linear_sRGB&&(t=colorDataTo(n,b.Linear_sRGB).channels),o.colorNotation!==b.Linear_sRGB&&(l=colorDataTo(o,b.Linear_sRGB).channels);break;case"lab":s=b.Lab,n.colorNotation!==b.Lab&&(t=colorDataTo(n,b.Lab).channels),o.colorNotation!==b.Lab&&(l=colorDataTo(o,b.Lab).channels);break;case"oklab":s=b.OKLab,n.colorNotation!==b.OKLab&&(t=colorDataTo(n,b.OKLab).channels),o.colorNotation!==b.OKLab&&(l=colorDataTo(o,b.OKLab).channels);break;case"xyz-d50":s=b.XYZ_D50,n.colorNotation!==b.XYZ_D50&&(t=colorDataTo(n,b.XYZ_D50).channels),o.colorNotation!==b.XYZ_D50&&(l=colorDataTo(o,b.XYZ_D50).channels);break;case"xyz":case"xyz-d65":s=b.XYZ_D65,n.colorNotation!==b.XYZ_D65&&(t=colorDataTo(n,b.XYZ_D65).channels),o.colorNotation!==b.XYZ_D65&&(l=colorDataTo(o,b.XYZ_D65).channels)}t=fillInMissingComponents(t,l),l=fillInMissingComponents(l,t),t[0]=premultiply(t[0],c),t[1]=premultiply(t[1],c),t[2]=premultiply(t[2],c),l[0]=premultiply(l[0],u),l[1]=premultiply(l[1],u),l[2]=premultiply(l[2],u);const i=interpolate(c,u,r);return{colorNotation:s,channels:[un_premultiply(interpolate(t[0],l[0],r),i),un_premultiply(interpolate(t[1],l[1],r),i),un_premultiply(interpolate(t[2],l[2],r),i)],alpha:i*a.alphaMultiplier,syntaxFlags:new Set([_.ColorMix])}}function colorMixPolar(e,a,n){if(!n)return!1;const o=n.a.color,r=n.b.color,t=n.a.percentage/100;let l=o.channels,s=r.channels,c=0,u=0,i=0,h=0,m=0,N=0,p=b.RGB,g=o.alpha;if("number"!=typeof g)return!1;let d=r.alpha;if("number"!=typeof d)return!1;switch(g=Number.isNaN(g)?d:g,d=Number.isNaN(d)?g:d,e){case"hsl":p=b.HSL,o.colorNotation!==b.HSL&&(l=colorDataTo(o,b.HSL).channels),r.colorNotation!==b.HSL&&(s=colorDataTo(r,b.HSL).channels);break;case"hwb":p=b.HWB,o.colorNotation!==b.HWB&&(l=colorDataTo(o,b.HWB).channels),r.colorNotation!==b.HWB&&(s=colorDataTo(r,b.HWB).channels);break;case"lch":p=b.LCH,o.colorNotation!==b.LCH&&(l=colorDataTo(o,b.LCH).channels),r.colorNotation!==b.LCH&&(s=colorDataTo(r,b.LCH).channels);break;case"oklch":p=b.OKLCH,o.colorNotation!==b.OKLCH&&(l=colorDataTo(o,b.OKLCH).channels),r.colorNotation!==b.OKLCH&&(s=colorDataTo(r,b.OKLCH).channels)}switch(l=fillInMissingComponents(l,s),s=fillInMissingComponents(s,l),e){case"hsl":case"hwb":c=l[0],u=s[0],i=l[1],h=s[1],m=l[2],N=s[2];break;case"lch":case"oklch":i=l[0],h=s[0],m=l[1],N=s[1],c=l[2],u=s[2]}const v=u-c;switch(a){case"shorter":v>180?c+=360:v<-180&&(u+=360);break;case"longer":-180<180&&(v>0?c+=360:u+=360);break;case"increasing":v<0&&(u+=360);break;case"decreasing":v>0&&(c+=360);break;default:throw new Error("Unknown hue interpolation method")}i=premultiply(i,g),m=premultiply(m,g),h=premultiply(h,d),N=premultiply(N,d);let f=[0,0,0];const y=interpolate(g,d,t);switch(e){case"hsl":case"hwb":f=[interpolate(c,u,t),un_premultiply(interpolate(i,h,t),y),un_premultiply(interpolate(m,N,t),y)];break;case"lch":case"oklch":f=[un_premultiply(interpolate(i,h,t),y),un_premultiply(interpolate(m,N,t),y),interpolate(c,u,t)]}return{colorNotation:p,channels:f,alpha:y*n.alphaMultiplier,syntaxFlags:new Set([_.ColorMix])}}function interpolate(e,a,n){return Number.isNaN(e)?a:Number.isNaN(a)?e:e*n+a*(1-n)}function premultiply(e,a){return Number.isNaN(a)?e:Number.isNaN(e)?NaN:e*a}function un_premultiply(e,a){return 0===a||Number.isNaN(a)?e:Number.isNaN(e)?NaN:e/a}function hex(e){const a=toLowerCaseAZ(e[4].value);if(a.match(/[^a-f0-9]/))return!1;const n={colorNotation:b.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([_.Hex])},o=a.length;if(3===o){const e=a[0],o=a[1],r=a[2];return n.channels=[parseInt(e+e,16)/255,parseInt(o+o,16)/255,parseInt(r+r,16)/255],n}if(6===o){const e=a[0]+a[1],o=a[2]+a[3],r=a[4]+a[5];return n.channels=[parseInt(e,16)/255,parseInt(o,16)/255,parseInt(r,16)/255],n}if(4===o){const e=a[0],o=a[1],r=a[2],t=a[3];return n.channels=[parseInt(e+e,16)/255,parseInt(o+o,16)/255,parseInt(r+r,16)/255],n.alpha=parseInt(t+t,16)/255,n.syntaxFlags.add(_.HasAlpha),n}if(8===o){const e=a[0]+a[1],o=a[2]+a[3],r=a[4]+a[5],t=a[6]+a[7];return n.channels=[parseInt(e,16)/255,parseInt(o,16)/255,parseInt(r,16)/255],n.alpha=parseInt(t,16)/255,n.syntaxFlags.add(_.HasAlpha),n}return!1}function normalizeHue(n){if(n[0]===e.Number)return n[4].value=n[4].value%360,n[1]=n[4].value.toString(),n;if(n[0]===e.Dimension){let o=n[4].value;switch(toLowerCaseAZ(n[4].unit)){case"deg":break;case"rad":o=180*n[4].value/Math.PI;break;case"grad":o=.9*n[4].value;break;case"turn":o=360*n[4].value;break;default:return!1}return o%=360,[e.Number,o.toString(),n[2],n[3],{value:o,type:a.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(n,o){const r=[];for(let t=0;t.999999&&(l=[1,0,0]),t.mapGamut(l,(e=>(e=r.OKLCH_to_OKLab(e),e=r.OKLab_to_XYZ(e),e=r.XYZ_to_lin_sRGB(e),r.gam_sRGB(e))),(e=>(e=r.lin_sRGB(e),e=r.lin_sRGB_to_XYZ(e),e=r.XYZ_to_OKLab(e),r.OKLab_to_OKLCH(e))))}function threeChannelSpaceSeparated(a,n,o,t,l){const m=toLowerCaseAZ(a.getName()),g=[],d=[],v=[],f=[];let y,C,L=!1;const H={colorNotation:o,channels:[0,0,0],alpha:1,syntaxFlags:new Set(t)};let D=g;for(let n=0;nu(a)&&a.value[0]===e.Comma))){const e=hslCommaSeparated(a);if(!1!==e)return e}{const e=hslSpaceSeparated(a,n);if(!1!==e)return e}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,b.HSL,[_.LegacyHSL])}function hslSpaceSeparated(e,a){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,b.HSL,[],a)}function normalize_HWB_ChannelValues(n,o){const r=[];for(let t=0;tu(a)&&a.value[0]===e.Comma))){const e=rgbCommaSeparated(a);if(!1!==e)return e}else{const e=rgbSpaceSeparated(a,n);if(!1!==e)return e}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,b.RGB,[_.LegacyRGB])}function rgbSpaceSeparated(e,a){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,b.RGB,[],a)}function toPrecision(e,a=7){e=+e,a=+a;const n=(Math.floor(e)+"").length;if(a>n)return+e.toFixed(a-n);{const o=10**(n-a);return Math.round(e/o)*o}}function XYZ_D50_to_P3_Gamut(e){const a=n.XYZ_D50_to_P3(e);if(o.inGamut(a))return o.clip(a);let l=e.slice();return l=r.D50_to_D65(l),l=r.XYZ_to_OKLab(l),l=r.OKLab_to_OKLCH(l),l[0]<1e-6&&(l=[0,0,0]),l[0]>.999999&&(l=[1,0,0]),t.mapGamut(l,(e=>(e=r.OKLCH_to_OKLab(e),e=r.OKLab_to_XYZ(e),e=r.XYZ_to_lin_P3(e),r.gam_P3(e))),(e=>(e=r.lin_P3(e),e=r.lin_P3_to_XYZ(e),e=r.XYZ_to_OKLab(e),r.OKLab_to_OKLCH(e))))}function serializeP3(o,r=!0){o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation);let t=o.channels.map((e=>Number.isNaN(e)?0:e));o.colorNotation!==b.Display_P3&&(t=r?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(o).channels):n.XYZ_D50_to_P3(colorData_to_XYZ_D50(o).channels));const l=toPrecision(t[0],6),s=toPrecision(t[1],6),c=toPrecision(t[2],6),u=[e.Function,"color(",-1,-1,{value:"color"}],i=[e.CloseParen,")",-1,-1,void 0],N=[e.Whitespace," ",-1,-1,void 0],p=[new h([e.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new h(N),new h([e.Number,l.toString(),-1,-1,{value:t[0],type:a.Number}]),new h(N),new h([e.Number,s.toString(),-1,-1,{value:t[1],type:a.Number}]),new h(N),new h([e.Number,c.toString(),-1,-1,{value:t[2],type:a.Number}])];if("number"==typeof o.alpha){const n=Math.min(1,Math.max(0,toPrecision(Number.isNaN(o.alpha)?0:o.alpha)));return 1===toPrecision(n,4)?new m(u,i,p):new m(u,i,[...p,new h(N),new h([e.Delim,"/",-1,-1,{value:"/"}]),new h(N),new h([e.Number,toPrecision(n,4).toString(),-1,-1,{value:o.alpha,type:a.Integer}])])}return new m(u,i,[...p,new h(N),new h([e.Delim,"/",-1,-1,{value:"/"}]),new h(N),o.alpha])}function serializeRGB(o,t=!0){o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation);let l=o.channels.map((e=>Number.isNaN(e)?0:e));o.colorNotation===b.HWB?l=r.HWB_to_sRGB(l):o.colorNotation===b.HSL?l=r.HSL_to_sRGB(l):o.colorNotation!==b.RGB&&o.colorNotation!==b.HEX&&(l=t?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(o).channels):n.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(o).channels));const s=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[0])))),c=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[1])))),u=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[2])))),i=[e.CloseParen,")",-1,-1,void 0],N=[e.Whitespace," ",-1,-1,void 0],p=[e.Comma,",",-1,-1,void 0],_=[new h([e.Number,s.toString(),-1,-1,{value:l[0],type:a.Integer}]),new h(p),new h(N),new h([e.Number,c.toString(),-1,-1,{value:l[1],type:a.Integer}]),new h(p),new h(N),new h([e.Number,u.toString(),-1,-1,{value:l[2],type:a.Integer}])];if("number"==typeof o.alpha){const n=Math.min(1,Math.max(0,toPrecision(Number.isNaN(o.alpha)?0:o.alpha)));return 1===toPrecision(n,4)?new m([e.Function,"rgb(",-1,-1,{value:"rgb"}],i,_):new m([e.Function,"rgba(",-1,-1,{value:"rgba"}],i,[..._,new h(p),new h(N),new h([e.Number,toPrecision(n,4).toString(),-1,-1,{value:o.alpha,type:a.Number}])])}return new m([e.Function,"rgba(",-1,-1,{value:"rgba"}],i,[..._,new h(p),new h(N),o.alpha])}function color(a){if(i(a)){switch(toLowerCaseAZ(a.getName())){case"rgb":case"rgba":return rgb(a,color);case"hsl":case"hsla":return hsl(a,color);case"hwb":return n=color,threeChannelSpaceSeparated(a,normalize_HWB_ChannelValues,b.HWB,[],n);case"lab":return lab(a,color);case"lch":return lch(a,color);case"oklab":return oklab(a,color);case"oklch":return oklch(a,color);case"color":return color$1(a,color);case"color-mix":return colorMix(a,color)}}var n;if(u(a)){if(a.value[0]===e.Hash)return hex(a.value);if(a.value[0]===e.Ident){const e=namedColor(a.value[4].value);return!1!==e?e:"transparent"===toLowerCaseAZ(a.value[4].value)&&{colorNotation:b.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([_.ColorKeyword])}}}return!1}export{b as ColorNotation,_ as SyntaxFlag,color,colorDataFitsRGB_Gamut,colorDataTo,serializeP3,serializeRGB}; +import{TokenType as e,NumberType as a}from"@csstools/css-tokenizer";import{xyz as n,utils as o,conversions as r,calculations as t,namedColors as l}from"@csstools/color-helpers";import{isWhitespaceNode as s,isCommentNode as c,isTokenNode as u,isFunctionNode as i,TokenNode as h,FunctionNode as m}from"@csstools/css-parser-algorithms";import{mathFunctionNames as N,calcFromComponentValues as p}from"@csstools/css-calc";var b,_;function colorData_to_XYZ_D50(e){switch(e.colorNotation){case b.HEX:case b.RGB:case b.sRGB:return{...e,colorNotation:b.XYZ_D50,channels:n.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.Linear_sRGB:return{...e,colorNotation:b.XYZ_D50,channels:n.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.Display_P3:return{...e,colorNotation:b.XYZ_D50,channels:n.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.Rec2020:return{...e,colorNotation:b.XYZ_D50,channels:n.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.A98_RGB:return{...e,colorNotation:b.XYZ_D50,channels:n.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.ProPhoto_RGB:return{...e,colorNotation:b.XYZ_D50,channels:n.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.HSL:return{...e,colorNotation:b.XYZ_D50,channels:n.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.HWB:return{...e,colorNotation:b.XYZ_D50,channels:n.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.Lab:return{...e,colorNotation:b.XYZ_D50,channels:n.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.OKLab:return{...e,colorNotation:b.XYZ_D50,channels:n.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.LCH:return{...e,colorNotation:b.XYZ_D50,channels:n.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.OKLCH:return{...e,colorNotation:b.XYZ_D50,channels:n.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.XYZ_D50:return{...e,colorNotation:b.XYZ_D50,channels:n.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case b.XYZ_D65:return{...e,colorNotation:b.XYZ_D50,channels:n.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}!function(e){e.A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_sRGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.sRGB="srgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65"}(b||(b={})),function(e){e.ColorKeyword="color-keyword",e.HasAlpha="has-alpha",e.HasDimensionValues="has-dimension-values",e.HasNoneKeywords="has-none-keywords",e.HasNumberValues="has-number-values",e.HasPercentageAlpha="has-percentage-alpha",e.HasPercentageValues="has-percentage-values",e.HasVariableAlpha="has-variable-alpha",e.Hex="hex",e.LegacyHSL="legacy-hsl",e.LegacyRGB="legacy-rgb",e.NamedColor="named-color",e.RelativeColorSyntax="relative-color-syntax",e.ColorMix="color-mix"}(_||(_={}));const g=new Set([b.A98_RGB,b.Display_P3,b.HEX,b.Linear_sRGB,b.ProPhoto_RGB,b.RGB,b.sRGB,b.Rec2020,b.XYZ_D50,b.XYZ_D65]);function colorDataTo(e,a){const o=colorData_to_XYZ_D50(e),r={...e};switch(a){case b.HEX:case b.RGB:r.colorNotation=b.RGB,r.channels=n.XYZ_D50_to_sRGB(o.channels);break;case b.sRGB:r.colorNotation=b.sRGB,r.channels=n.XYZ_D50_to_sRGB(o.channels);break;case b.Linear_sRGB:r.colorNotation=b.Linear_sRGB,r.channels=n.XYZ_D50_to_lin_sRGB(o.channels);break;case b.Display_P3:r.colorNotation=b.Display_P3,r.channels=n.XYZ_D50_to_P3(o.channels);break;case b.Rec2020:r.colorNotation=b.Rec2020,r.channels=n.XYZ_D50_to_rec_2020(o.channels);break;case b.ProPhoto_RGB:r.colorNotation=b.ProPhoto_RGB,r.channels=n.XYZ_D50_to_ProPhoto(o.channels);break;case b.A98_RGB:r.colorNotation=b.A98_RGB,r.channels=n.XYZ_D50_to_a98_RGB(o.channels);break;case b.HSL:r.colorNotation=b.HSL,r.channels=n.XYZ_D50_to_HSL(o.channels);break;case b.HWB:r.colorNotation=b.HWB,r.channels=n.XYZ_D50_to_HWB(o.channels);break;case b.Lab:r.colorNotation=b.Lab,r.channels=n.XYZ_D50_to_Lab(o.channels);break;case b.LCH:r.colorNotation=b.LCH,r.channels=n.XYZ_D50_to_LCH(o.channels);break;case b.OKLCH:r.colorNotation=b.OKLCH,r.channels=n.XYZ_D50_to_OKLCH(o.channels);break;case b.OKLab:r.colorNotation=b.OKLab,r.channels=n.XYZ_D50_to_OKLab(o.channels);break;case b.XYZ_D50:r.colorNotation=b.XYZ_D50,r.channels=n.XYZ_D50_to_XYZ_D50(o.channels);break;case b.XYZ_D65:r.colorNotation=b.XYZ_D65,r.channels=n.XYZ_D50_to_XYZ_D65(o.channels);break;default:throw new Error("Unsupported color notation")}if(a===e.colorNotation)r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);else if(g.has(a)&&g.has(e.colorNotation))r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);else switch(a){case b.HSL:switch(e.colorNotation){case b.HWB:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case b.Lab:case b.OKLab:r.channels=carryForwardMissingComponents(e.channels,[2],r.channels,[0]);break;case b.LCH:case b.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[2,1,0])}break;case b.HWB:switch(e.colorNotation){case b.HSL:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case b.LCH:case b.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2])}break;case b.Lab:case b.OKLab:switch(e.colorNotation){case b.HSL:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2]);break;case b.Lab:case b.OKLab:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);break;case b.LCH:case b.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0])}break;case b.LCH:case b.OKLCH:switch(e.colorNotation){case b.HSL:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[2,1,0]);break;case b.HWB:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2]);break;case b.Lab:case b.OKLab:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case b.LCH:case b.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2])}}return r.channels=convertPowerlessComponentsToMissingComponents(r.channels,a),r}function convertPowerlessComponentsToMissingComponents(e,a){const n=[...e];switch(a){case b.HSL:(reducePrecision(n[2],4)<=0||reducePrecision(n[2],4)>=100)&&(n[0]=NaN,n[1]=NaN),reducePrecision(n[1],4)<=0&&(n[0]=NaN);break;case b.HWB:Math.max(0,reducePrecision(n[1],4))+Math.max(0,reducePrecision(n[2],4))>=100&&(n[0]=NaN);break;case b.LCH:reducePrecision(n[1],4)<=0&&(n[2]=NaN);break;case b.OKLCH:reducePrecision(n[1],6)<=0&&(n[2]=NaN)}return n}function convertPowerlessComponentsToZeroValuesForDisplay(e,a){const n=[...e];switch(a){case b.HSL:(reducePrecision(n[2])<=0||reducePrecision(n[2])>=100)&&(n[0]=NaN,n[1]=NaN),reducePrecision(n[1])<=0&&(n[0]=NaN);break;case b.HWB:Math.max(0,reducePrecision(n[1]))+Math.max(0,reducePrecision(n[2]))>=100&&(n[0]=NaN);break;case b.Lab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case b.LCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case b.OKLab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN);break;case b.OKLCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN)}return n}function carryForwardMissingComponents(e,a,n,o){const r=[...n];for(const n of a)Number.isNaN(e[a[n]])&&(r[o[n]]=NaN);return r}function fillInMissingComponents(e,a){const n=[...e];for(let o=0;oe<-1e-5||e>1.00001))}function colorDataFitsDisplayP3_Gamut(e){const a=JSON.parse(JSON.stringify(e));a.channels=convertPowerlessComponentsToZeroValuesForDisplay(a.channels,a.colorNotation);return!colorDataTo(a,b.Display_P3).channels.find((e=>e<-1e-5||e>1.00001))}function normalize(e,a,n,o){return Math.min(Math.max(e/a,n),o)}const d=/[A-Z]/g;function toLowerCaseAZ(e){return e.replace(d,(e=>String.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(n,o){const r=[];for(let t=0;t=0){l=h.value[4].value;continue}}return!1}if(!t)return!1;o.push({color:t,percentage:l}),t=!1,l=!1}}if(t&&o.push({color:t,percentage:l}),2!==o.length)return!1;let h=o[0].percentage,m=o[1].percentage;return(!1===h||!(h<0||h>100))&&((!1===m||!(m<0||m>100))&&(!1===h&&!1===m?(h=50,m=50):!1!==h&&!1===m?m=100-h:!1===h&&!1!==m&&(h=100-m),(0!==h||0!==m)&&(!1!==h&&!1!==m&&(h+m>100&&(h=h/(h+m)*100,m=m/(h+m)*100),h+m<100&&(r=(h+m)/100,h=h/(h+m)*100,m=m/(h+m)*100),{a:{color:o[0].color,percentage:h},b:{color:o[1].color,percentage:m},alphaMultiplier:r}))))}function colorMixRectangular(e,a){if(!a)return!1;const n=a.a.color,o=a.b.color,r=a.a.percentage/100;let t=n.channels,l=o.channels,s=b.RGB,c=n.alpha;if("number"!=typeof c)return!1;let u=o.alpha;if("number"!=typeof u)return!1;switch(c=Number.isNaN(c)?u:c,u=Number.isNaN(u)?c:u,e){case"srgb":s=b.RGB,n.colorNotation!==b.RGB&&n.colorNotation!==b.sRGB&&n.colorNotation!==b.HEX&&(t=colorDataTo(n,b.RGB).channels),o.colorNotation!==b.RGB&&o.colorNotation!==b.sRGB&&o.colorNotation!==b.HEX&&(l=colorDataTo(o,b.RGB).channels);break;case"srgb-linear":s=b.Linear_sRGB,n.colorNotation!==b.Linear_sRGB&&(t=colorDataTo(n,b.Linear_sRGB).channels),o.colorNotation!==b.Linear_sRGB&&(l=colorDataTo(o,b.Linear_sRGB).channels);break;case"lab":s=b.Lab,n.colorNotation!==b.Lab&&(t=colorDataTo(n,b.Lab).channels),o.colorNotation!==b.Lab&&(l=colorDataTo(o,b.Lab).channels);break;case"oklab":s=b.OKLab,n.colorNotation!==b.OKLab&&(t=colorDataTo(n,b.OKLab).channels),o.colorNotation!==b.OKLab&&(l=colorDataTo(o,b.OKLab).channels);break;case"xyz-d50":s=b.XYZ_D50,n.colorNotation!==b.XYZ_D50&&(t=colorDataTo(n,b.XYZ_D50).channels),o.colorNotation!==b.XYZ_D50&&(l=colorDataTo(o,b.XYZ_D50).channels);break;case"xyz":case"xyz-d65":s=b.XYZ_D65,n.colorNotation!==b.XYZ_D65&&(t=colorDataTo(n,b.XYZ_D65).channels),o.colorNotation!==b.XYZ_D65&&(l=colorDataTo(o,b.XYZ_D65).channels)}t=fillInMissingComponents(t,l),l=fillInMissingComponents(l,t),t[0]=premultiply(t[0],c),t[1]=premultiply(t[1],c),t[2]=premultiply(t[2],c),l[0]=premultiply(l[0],u),l[1]=premultiply(l[1],u),l[2]=premultiply(l[2],u);const i=interpolate(c,u,r);return{colorNotation:s,channels:[un_premultiply(interpolate(t[0],l[0],r),i),un_premultiply(interpolate(t[1],l[1],r),i),un_premultiply(interpolate(t[2],l[2],r),i)],alpha:i*a.alphaMultiplier,syntaxFlags:new Set([_.ColorMix])}}function colorMixPolar(e,a,n){if(!n)return!1;const o=n.a.color,r=n.b.color,t=n.a.percentage/100;let l=o.channels,s=r.channels,c=0,u=0,i=0,h=0,m=0,N=0,p=b.RGB,g=o.alpha;if("number"!=typeof g)return!1;let d=r.alpha;if("number"!=typeof d)return!1;switch(g=Number.isNaN(g)?d:g,d=Number.isNaN(d)?g:d,e){case"hsl":p=b.HSL,o.colorNotation!==b.HSL&&(l=colorDataTo(o,b.HSL).channels),r.colorNotation!==b.HSL&&(s=colorDataTo(r,b.HSL).channels);break;case"hwb":p=b.HWB,o.colorNotation!==b.HWB&&(l=colorDataTo(o,b.HWB).channels),r.colorNotation!==b.HWB&&(s=colorDataTo(r,b.HWB).channels);break;case"lch":p=b.LCH,o.colorNotation!==b.LCH&&(l=colorDataTo(o,b.LCH).channels),r.colorNotation!==b.LCH&&(s=colorDataTo(r,b.LCH).channels);break;case"oklch":p=b.OKLCH,o.colorNotation!==b.OKLCH&&(l=colorDataTo(o,b.OKLCH).channels),r.colorNotation!==b.OKLCH&&(s=colorDataTo(r,b.OKLCH).channels)}switch(l=fillInMissingComponents(l,s),s=fillInMissingComponents(s,l),e){case"hsl":case"hwb":c=l[0],u=s[0],i=l[1],h=s[1],m=l[2],N=s[2];break;case"lch":case"oklch":i=l[0],h=s[0],m=l[1],N=s[1],c=l[2],u=s[2]}const v=u-c;switch(a){case"shorter":v>180?c+=360:v<-180&&(u+=360);break;case"longer":-180<180&&(v>0?c+=360:u+=360);break;case"increasing":v<0&&(u+=360);break;case"decreasing":v>0&&(c+=360);break;default:throw new Error("Unknown hue interpolation method")}i=premultiply(i,g),m=premultiply(m,g),h=premultiply(h,d),N=premultiply(N,d);let f=[0,0,0];const y=interpolate(g,d,t);switch(e){case"hsl":case"hwb":f=[interpolate(c,u,t),un_premultiply(interpolate(i,h,t),y),un_premultiply(interpolate(m,N,t),y)];break;case"lch":case"oklch":f=[un_premultiply(interpolate(i,h,t),y),un_premultiply(interpolate(m,N,t),y),interpolate(c,u,t)]}return{colorNotation:p,channels:f,alpha:y*n.alphaMultiplier,syntaxFlags:new Set([_.ColorMix])}}function interpolate(e,a,n){return Number.isNaN(e)?a:Number.isNaN(a)?e:e*n+a*(1-n)}function premultiply(e,a){return Number.isNaN(a)?e:Number.isNaN(e)?NaN:e*a}function un_premultiply(e,a){return 0===a||Number.isNaN(a)?e:Number.isNaN(e)?NaN:e/a}function hex(e){const a=toLowerCaseAZ(e[4].value);if(a.match(/[^a-f0-9]/))return!1;const n={colorNotation:b.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([_.Hex])},o=a.length;if(3===o){const e=a[0],o=a[1],r=a[2];return n.channels=[parseInt(e+e,16)/255,parseInt(o+o,16)/255,parseInt(r+r,16)/255],n}if(6===o){const e=a[0]+a[1],o=a[2]+a[3],r=a[4]+a[5];return n.channels=[parseInt(e,16)/255,parseInt(o,16)/255,parseInt(r,16)/255],n}if(4===o){const e=a[0],o=a[1],r=a[2],t=a[3];return n.channels=[parseInt(e+e,16)/255,parseInt(o+o,16)/255,parseInt(r+r,16)/255],n.alpha=parseInt(t+t,16)/255,n.syntaxFlags.add(_.HasAlpha),n}if(8===o){const e=a[0]+a[1],o=a[2]+a[3],r=a[4]+a[5],t=a[6]+a[7];return n.channels=[parseInt(e,16)/255,parseInt(o,16)/255,parseInt(r,16)/255],n.alpha=parseInt(t,16)/255,n.syntaxFlags.add(_.HasAlpha),n}return!1}function normalizeHue(n){if(n[0]===e.Number)return n[4].value=n[4].value%360,n[1]=n[4].value.toString(),n;if(n[0]===e.Dimension){let o=n[4].value;switch(toLowerCaseAZ(n[4].unit)){case"deg":break;case"rad":o=180*n[4].value/Math.PI;break;case"grad":o=.9*n[4].value;break;case"turn":o=360*n[4].value;break;default:return!1}return o%=360,[e.Number,o.toString(),n[2],n[3],{value:o,type:a.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(n,o){const r=[];for(let t=0;t.999999&&(l=[1,0,0]),t.mapGamut(l,(e=>(e=r.OKLCH_to_OKLab(e),e=r.OKLab_to_XYZ(e),e=r.XYZ_to_lin_sRGB(e),r.gam_sRGB(e))),(e=>(e=r.lin_sRGB(e),e=r.lin_sRGB_to_XYZ(e),e=r.XYZ_to_OKLab(e),r.OKLab_to_OKLCH(e))))}function threeChannelSpaceSeparated(a,n,o,t,l){const m=toLowerCaseAZ(a.getName()),g=[],d=[],v=[],f=[];let y,C,L=!1;const H={colorNotation:o,channels:[0,0,0],alpha:1,syntaxFlags:new Set(t)};let D=g;for(let n=0;nu(a)&&a.value[0]===e.Comma))){const e=hslCommaSeparated(a);if(!1!==e)return e}{const e=hslSpaceSeparated(a,n);if(!1!==e)return e}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,b.HSL,[_.LegacyHSL])}function hslSpaceSeparated(e,a){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,b.HSL,[],a)}function normalize_HWB_ChannelValues(n,o){const r=[];for(let t=0;tu(a)&&a.value[0]===e.Comma))){const e=rgbCommaSeparated(a);if(!1!==e)return e}else{const e=rgbSpaceSeparated(a,n);if(!1!==e)return e}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,b.RGB,[_.LegacyRGB])}function rgbSpaceSeparated(e,a){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,b.RGB,[],a)}function toPrecision(e,a=7){e=+e,a=+a;const n=(Math.floor(e)+"").length;if(a>n)return+e.toFixed(a-n);{const o=10**(n-a);return Math.round(e/o)*o}}function XYZ_D50_to_P3_Gamut(e){const a=n.XYZ_D50_to_P3(e);if(o.inGamut(a))return o.clip(a);let l=e.slice();return l=r.D50_to_D65(l),l=r.XYZ_to_OKLab(l),l=r.OKLab_to_OKLCH(l),l[0]<1e-6&&(l=[0,0,0]),l[0]>.999999&&(l=[1,0,0]),t.mapGamut(l,(e=>(e=r.OKLCH_to_OKLab(e),e=r.OKLab_to_XYZ(e),e=r.XYZ_to_lin_P3(e),r.gam_P3(e))),(e=>(e=r.lin_P3(e),e=r.lin_P3_to_XYZ(e),e=r.XYZ_to_OKLab(e),r.OKLab_to_OKLCH(e))))}function serializeP3(o,r=!0){o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation);let t=o.channels.map((e=>Number.isNaN(e)?0:e));o.colorNotation!==b.Display_P3&&(t=r?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(o).channels):n.XYZ_D50_to_P3(colorData_to_XYZ_D50(o).channels));const l=toPrecision(t[0],6),s=toPrecision(t[1],6),c=toPrecision(t[2],6),u=[e.Function,"color(",-1,-1,{value:"color"}],i=[e.CloseParen,")",-1,-1,void 0],N=[e.Whitespace," ",-1,-1,void 0],p=[new h([e.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new h(N),new h([e.Number,l.toString(),-1,-1,{value:t[0],type:a.Number}]),new h(N),new h([e.Number,s.toString(),-1,-1,{value:t[1],type:a.Number}]),new h(N),new h([e.Number,c.toString(),-1,-1,{value:t[2],type:a.Number}])];if("number"==typeof o.alpha){const n=Math.min(1,Math.max(0,toPrecision(Number.isNaN(o.alpha)?0:o.alpha)));return 1===toPrecision(n,4)?new m(u,i,p):new m(u,i,[...p,new h(N),new h([e.Delim,"/",-1,-1,{value:"/"}]),new h(N),new h([e.Number,toPrecision(n,4).toString(),-1,-1,{value:o.alpha,type:a.Integer}])])}return new m(u,i,[...p,new h(N),new h([e.Delim,"/",-1,-1,{value:"/"}]),new h(N),o.alpha])}function serializeRGB(o,t=!0){o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation);let l=o.channels.map((e=>Number.isNaN(e)?0:e));o.colorNotation===b.HWB?l=r.HWB_to_sRGB(l):o.colorNotation===b.HSL?l=r.HSL_to_sRGB(l):o.colorNotation!==b.RGB&&o.colorNotation!==b.HEX&&(l=t?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(o).channels):n.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(o).channels));const s=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[0])))),c=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[1])))),u=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[2])))),i=[e.CloseParen,")",-1,-1,void 0],N=[e.Whitespace," ",-1,-1,void 0],p=[e.Comma,",",-1,-1,void 0],_=[new h([e.Number,s.toString(),-1,-1,{value:l[0],type:a.Integer}]),new h(p),new h(N),new h([e.Number,c.toString(),-1,-1,{value:l[1],type:a.Integer}]),new h(p),new h(N),new h([e.Number,u.toString(),-1,-1,{value:l[2],type:a.Integer}])];if("number"==typeof o.alpha){const n=Math.min(1,Math.max(0,toPrecision(Number.isNaN(o.alpha)?0:o.alpha)));return 1===toPrecision(n,4)?new m([e.Function,"rgb(",-1,-1,{value:"rgb"}],i,_):new m([e.Function,"rgba(",-1,-1,{value:"rgba"}],i,[..._,new h(p),new h(N),new h([e.Number,toPrecision(n,4).toString(),-1,-1,{value:o.alpha,type:a.Number}])])}return new m([e.Function,"rgba(",-1,-1,{value:"rgba"}],i,[..._,new h(p),new h(N),o.alpha])}function color(a){if(i(a)){switch(toLowerCaseAZ(a.getName())){case"rgb":case"rgba":return rgb(a,color);case"hsl":case"hsla":return hsl(a,color);case"hwb":return n=color,threeChannelSpaceSeparated(a,normalize_HWB_ChannelValues,b.HWB,[],n);case"lab":return lab(a,color);case"lch":return lch(a,color);case"oklab":return oklab(a,color);case"oklch":return oklch(a,color);case"color":return color$1(a,color);case"color-mix":return colorMix(a,color)}}var n;if(u(a)){if(a.value[0]===e.Hash)return hex(a.value);if(a.value[0]===e.Ident){const e=namedColor(a.value[4].value);return!1!==e?e:"transparent"===toLowerCaseAZ(a.value[4].value)&&{colorNotation:b.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([_.ColorKeyword])}}}return!1}export{b as ColorNotation,_ as SyntaxFlag,color,colorDataFitsDisplayP3_Gamut,colorDataFitsRGB_Gamut,colorDataTo,serializeP3,serializeRGB}; diff --git a/packages/css-color-parser/src/color-data.ts b/packages/css-color-parser/src/color-data.ts index f5a1ce39d..0e4a2e2db 100644 --- a/packages/css-color-parser/src/color-data.ts +++ b/packages/css-color-parser/src/color-data.ts @@ -534,3 +534,15 @@ export function colorDataFitsRGB_Gamut(x: ColorData): boolean { return false; } + +export function colorDataFitsDisplayP3_Gamut(x: ColorData): boolean { + const copy = JSON.parse(JSON.stringify(x)) as ColorData; + + copy.channels = convertPowerlessComponentsToZeroValuesForDisplay(copy.channels, copy.colorNotation); + const displayP3 = colorDataTo(copy, ColorNotation.Display_P3); + if (!displayP3.channels.find((y) => y < -0.00001 || y > 1.00001)) { + return true; + } + + return false; +} diff --git a/packages/css-color-parser/src/index.ts b/packages/css-color-parser/src/index.ts index a5ca64139..27c3695b0 100644 --- a/packages/css-color-parser/src/index.ts +++ b/packages/css-color-parser/src/index.ts @@ -19,7 +19,7 @@ import { toLowerCaseAZ } from './util/to-lower-case-a-z'; export type { ColorData } from './color-data'; export { ColorNotation } from './color-notation'; export { SyntaxFlag } from './color-data'; -export { colorDataTo, colorDataFitsRGB_Gamut } from './color-data'; +export { colorDataTo, colorDataFitsRGB_Gamut, colorDataFitsDisplayP3_Gamut } from './color-data'; export { serializeP3 } from './serialize/p3'; export { serializeRGB } from './serialize/rgb'; diff --git a/plugins/postcss-progressive-custom-properties/dist/conditions-from-values.d.ts b/plugins/postcss-progressive-custom-properties/dist/conditions-from-values.d.ts new file mode 100644 index 000000000..ba14169d4 --- /dev/null +++ b/plugins/postcss-progressive-custom-properties/dist/conditions-from-values.d.ts @@ -0,0 +1,4 @@ +export declare function conditionsFromValue(value: string, mustContainVar?: boolean): { + support: Array; + media: Array; +}; diff --git a/plugins/postcss-progressive-custom-properties/dist/index.cjs b/plugins/postcss-progressive-custom-properties/dist/index.cjs index a36f6f268..2e146ffaf 100644 --- a/plugins/postcss-progressive-custom-properties/dist/index.cjs +++ b/plugins/postcss-progressive-custom-properties/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("postcss-value-parser");const a=[{supports:"color-mix(in lch, red, blue)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"rgb(from red r g b)",property:"color",sniff:"from ",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function matches(e,a){if(e.isVariable&&a&&("word"===a.type||"string"===a.type||"function"===a.type))return!0;if(e.type!==a.type)return!1;if(doesNotMatchValue(e,a))return!1;if(e.nodes&&a.nodes){for(let r=0;r{r.indexOf(e.sniff)>-1&&o.push(e)}));let s=!1;try{e(r).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{a.dimension=e.unit(a.value)}finally{!1===a.dimension&&delete a.dimension}for(let e=0;e0&&i.push("(top: var(--f))"),Array.from(new Set(i)))}const t=/var\(/i,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",OnceExit:(e,{postcss:a})=>{e.walkRules((e=>{const r=[],p=new Map,i=new Set;e.each((o=>{if("decl"!==o.type)return;if(o.variable){if(!i.has(o.prop.toString()))return void i.add(o.prop.toString())}else if(!i.has(o.prop.toString().toLowerCase()))return void i.add(o.prop.toString().toLowerCase());if(!o.variable&&!t.test(o.value))return;if("initial"===o.value.trim().toLowerCase())return;if(""===o.value.trim())return;const s=!o.variable,y=supportConditionsFromValue(o.value,s);if(!y.length)return;const l=y.join(" and ");if(r.length&&r[r.length-1].params===l){const e=r[r.length-1],a=p.get(e);if(a)return a.append(o.clone()),void o.remove()}const d=a.atRule({name:"supports",params:l,source:e.source,raws:{before:"\n\n",after:"\n"}}),c=e.clone();c.removeAll(),c.raws.before="\n",c.append(o.clone()),o.remove(),p.set(d,c),d.append(c),r.push(d)})),0!==r.length&&r.reverse().forEach((a=>{e.after(a)}))}))}});creator.postcss=!0,module.exports=creator; +"use strict";var e=require("postcss-value-parser"),a=require("@csstools/css-color-parser"),r=require("@csstools/css-parser-algorithms"),p=require("@csstools/css-tokenizer");const t=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const a=[],r=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===r||"linear-gradient"===r||"radial-gradient"===r||"repeating-conic-gradient"===r||"repeating-linear-gradient"===r||"repeating-radial-gradient"===r)){let r=0,p=!1,i=!1;e:for(let o=0;o{a.includes(e.sniff)&&s.push(e)}));let l=!1;try{e(a).walk((a=>{"function"===a.type&&o.test(a.value)&&(l=!0);try{a.dimension=e.unit(a.value)}finally{!1===a.dimension&&delete a.dimension}for(let e=0;e0&&p.push("(top: var(--f))"),{support:Array.from(new Set(p)).sort(),media:Array.from(new Set(t)).sort()})}function colorGamutConditions(t){const i=r.parseComponentValue(p.tokenize({css:e.stringify(t)}));if(!i)return!1;const o=a.color(i);return!!o&&(!a.colorDataFitsRGB_Gamut(o)&&(a.colorDataFitsDisplayP3_Gamut(o)?"(color-gamut: display-p3)":"(color-gamut: rec2020)"))}const s=/var\(/i,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",OnceExit:(e,{postcss:a})=>{e.walkRules((e=>{const r=[],p=new Set,t={support:void 0,media:void 0};let i;e.each((o=>{if("decl"!==o.type)return;if(o.variable){if(!p.has(o.prop.toString()))return void p.add(o.prop.toString())}else if(!p.has(o.prop.toString().toLowerCase()))return void p.add(o.prop.toString().toLowerCase());if(!o.variable&&!s.test(o.value))return;if("initial"===o.value.trim().toLowerCase())return;if(""===o.value.trim())return;const l=!o.variable,y=conditionsFromValue(o.value,l);let d,c;if(y.support.length&&(d=y.support.join(" and ")),y.media.length&&(c=y.media.join(" and ")),!c&&!d)return;if(t.support===d&&t.media===c||(i=void 0),i)return i.append(o.clone()),void o.remove();const n=[];if(d&&n.push(a.atRule({name:"supports",params:d,source:e.source,raws:{before:"\n\n",after:"\n"}})),c&&n.push(a.atRule({name:"media",params:c,source:e.source,raws:{before:"\n\n",after:"\n"}})),!n.length)return;for(let e=0;e{e.after(a)}))}))}});creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-progressive-custom-properties/dist/index.d.ts b/plugins/postcss-progressive-custom-properties/dist/index.d.ts index 2b298ab45..5b5a74dd2 100644 --- a/plugins/postcss-progressive-custom-properties/dist/index.d.ts +++ b/plugins/postcss-progressive-custom-properties/dist/index.d.ts @@ -1,3 +1,3 @@ -import type { PluginCreator } from 'postcss'; +import { type PluginCreator } from 'postcss'; declare const creator: PluginCreator; export default creator; diff --git a/plugins/postcss-progressive-custom-properties/dist/index.mjs b/plugins/postcss-progressive-custom-properties/dist/index.mjs index cf523da72..1a8812b49 100644 --- a/plugins/postcss-progressive-custom-properties/dist/index.mjs +++ b/plugins/postcss-progressive-custom-properties/dist/index.mjs @@ -1 +1 @@ -import e from"postcss-value-parser";const a=[{supports:"color-mix(in lch, red, blue)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"rgb(from red r g b)",property:"color",sniff:"from ",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function matches(e,a){if(e.isVariable&&a&&("word"===a.type||"string"===a.type||"function"===a.type))return!0;if(e.type!==a.type)return!1;if(doesNotMatchValue(e,a))return!1;if(e.nodes&&a.nodes){for(let r=0;r{r.indexOf(e.sniff)>-1&&o.push(e)}));let s=!1;try{e(r).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{a.dimension=e.unit(a.value)}finally{!1===a.dimension&&delete a.dimension}for(let e=0;e0&&i.push("(top: var(--f))"),Array.from(new Set(i)))}const t=/var\(/i,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",OnceExit:(e,{postcss:a})=>{e.walkRules((e=>{const r=[],p=new Map,i=new Set;e.each((o=>{if("decl"!==o.type)return;if(o.variable){if(!i.has(o.prop.toString()))return void i.add(o.prop.toString())}else if(!i.has(o.prop.toString().toLowerCase()))return void i.add(o.prop.toString().toLowerCase());if(!o.variable&&!t.test(o.value))return;if("initial"===o.value.trim().toLowerCase())return;if(""===o.value.trim())return;const s=!o.variable,y=supportConditionsFromValue(o.value,s);if(!y.length)return;const l=y.join(" and ");if(r.length&&r[r.length-1].params===l){const e=r[r.length-1],a=p.get(e);if(a)return a.append(o.clone()),void o.remove()}const d=a.atRule({name:"supports",params:l,source:e.source,raws:{before:"\n\n",after:"\n"}}),c=e.clone();c.removeAll(),c.raws.before="\n",c.append(o.clone()),o.remove(),p.set(d,c),d.append(c),r.push(d)})),0!==r.length&&r.reverse().forEach((a=>{e.after(a)}))}))}});creator.postcss=!0;export{creator as default}; +import e from"postcss-value-parser";import{color as a,colorDataFitsRGB_Gamut as r,colorDataFitsDisplayP3_Gamut as p}from"@csstools/css-color-parser";import{parseComponentValue as t}from"@csstools/css-parser-algorithms";import{tokenize as i}from"@csstools/css-tokenizer";const o=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const a=[],r=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===r||"linear-gradient"===r||"radial-gradient"===r||"repeating-conic-gradient"===r||"repeating-linear-gradient"===r||"repeating-radial-gradient"===r)){let r=0,p=!1,t=!1;e:for(let i=0;i{a.includes(e.sniff)&&i.push(e)}));let o=!1;try{e(a).walk((a=>{"function"===a.type&&y.test(a.value)&&(o=!0);try{a.dimension=e.unit(a.value)}finally{!1===a.dimension&&delete a.dimension}for(let e=0;e0&&p.push("(top: var(--f))"),{support:Array.from(new Set(p)).sort(),media:Array.from(new Set(t)).sort()})}function colorGamutConditions(o){const s=t(i({css:e.stringify(o)}));if(!s)return!1;const y=a(s);return!!y&&(!r(y)&&(p(y)?"(color-gamut: display-p3)":"(color-gamut: rec2020)"))}const l=/var\(/i,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",OnceExit:(e,{postcss:a})=>{e.walkRules((e=>{const r=[],p=new Set,t={support:void 0,media:void 0};let i;e.each((o=>{if("decl"!==o.type)return;if(o.variable){if(!p.has(o.prop.toString()))return void p.add(o.prop.toString())}else if(!p.has(o.prop.toString().toLowerCase()))return void p.add(o.prop.toString().toLowerCase());if(!o.variable&&!l.test(o.value))return;if("initial"===o.value.trim().toLowerCase())return;if(""===o.value.trim())return;const s=!o.variable,y=conditionsFromValue(o.value,s);let d,c;if(y.support.length&&(d=y.support.join(" and ")),y.media.length&&(c=y.media.join(" and ")),!c&&!d)return;if(t.support===d&&t.media===c||(i=void 0),i)return i.append(o.clone()),void o.remove();const n=[];if(d&&n.push(a.atRule({name:"supports",params:d,source:e.source,raws:{before:"\n\n",after:"\n"}})),c&&n.push(a.atRule({name:"media",params:c,source:e.source,raws:{before:"\n\n",after:"\n"}})),!n.length)return;for(let e=0;e{e.after(a)}))}))}});creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-progressive-custom-properties/dist/support-conditions-from-values.d.ts b/plugins/postcss-progressive-custom-properties/dist/support-conditions-from-values.d.ts deleted file mode 100644 index ac2825f3c..000000000 --- a/plugins/postcss-progressive-custom-properties/dist/support-conditions-from-values.d.ts +++ /dev/null @@ -1 +0,0 @@ -export declare function supportConditionsFromValue(value: string, mustContainVar?: boolean): Array; diff --git a/plugins/postcss-progressive-custom-properties/generate/color.mjs b/plugins/postcss-progressive-custom-properties/generate/color.mjs index 9f0df9273..1ce2aebf6 100644 --- a/plugins/postcss-progressive-custom-properties/generate/color.mjs +++ b/plugins/postcss-progressive-custom-properties/generate/color.mjs @@ -3,17 +3,29 @@ import { matcherForValue } from './matcher-for-value.mjs'; export const colorMatchers = [ ...([ 'srgb', + 'display-p3', + ].map((colorSpace) => { + return { + 'supports': 'color(display-p3 0 0 0)', + 'property': 'color', + 'sniff': 'color', + 'matchers': [ + matcherForValue(`color(${colorSpace} $1 $2 $3)`), + matcherForValue(`color(${colorSpace} $1 $2 $3 / $4)`), + ], + }; + })), + ...([ 'srgb-linear', 'a98-rgb', 'prophoto-rgb', - 'display-p3', 'rec2020', 'xyz-d50', 'xyz-d65', 'xyz', ].map((colorSpace) => { return { - 'supports': `color(${colorSpace} 0 0 0)`, + 'supports': 'color(xyz 0 0 0)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -78,7 +90,7 @@ export const labMatchers = [ export const lchMatchers = [ { - 'supports': 'lch(0% 0 0)', + 'supports': 'lab(0% 0 0)', 'property': 'color', 'sniff': 'lch', 'matchers': [ @@ -102,7 +114,7 @@ export const oklabMatchers = [ export const oklchMatchers = [ { - 'supports': 'oklch(0% 0 0)', + 'supports': 'oklab(0% 0 0)', 'property': 'color', 'sniff': 'oklch', 'matchers': [ diff --git a/plugins/postcss-progressive-custom-properties/package.json b/plugins/postcss-progressive-custom-properties/package.json index dc2cf5f84..54e9ecc12 100644 --- a/plugins/postcss-progressive-custom-properties/package.json +++ b/plugins/postcss-progressive-custom-properties/package.json @@ -35,6 +35,9 @@ "dist" ], "dependencies": { + "@csstools/css-color-parser": "^1.2.3", + "@csstools/css-parser-algorithms": "2.3.1", + "@csstools/css-tokenizer": "^2.2.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { diff --git a/plugins/postcss-progressive-custom-properties/src/support-conditions-from-values.ts b/plugins/postcss-progressive-custom-properties/src/conditions-from-values.ts similarity index 57% rename from plugins/postcss-progressive-custom-properties/src/support-conditions-from-values.ts rename to plugins/postcss-progressive-custom-properties/src/conditions-from-values.ts index 012c9b8ed..24e542509 100644 --- a/plugins/postcss-progressive-custom-properties/src/support-conditions-from-values.ts +++ b/plugins/postcss-progressive-custom-properties/src/conditions-from-values.ts @@ -1,17 +1,21 @@ import valueParser from 'postcss-value-parser'; +import { color, colorDataFitsRGB_Gamut, colorDataFitsDisplayP3_Gamut } from '@csstools/css-color-parser'; +import { doublePositionGradients } from './custom/double-position-gradients'; import { matchers } from './matchers'; import { matches } from './match'; -import { doublePositionGradients } from './custom/double-position-gradients'; +import { parseComponentValue } from '@csstools/css-parser-algorithms'; +import { tokenize } from '@csstools/css-tokenizer'; const varFunctionName = /^var$/i; -export function supportConditionsFromValue(value: string, mustContainVar = false): Array { +export function conditionsFromValue(value: string, mustContainVar = false): { support: Array, media: Array } { const supportConditions: Array = []; + const mediaConditions: Array = []; const relevantMatchers: typeof matchers = []; matchers.forEach((matcher) => { - if (value.indexOf(matcher.sniff) > -1) { + if (value.includes(matcher.sniff)) { relevantMatchers.push(matcher); } }); @@ -44,6 +48,13 @@ export function supportConditionsFromValue(value: string, mustContainVar = false // Matchers are ordered from most specific to least. // Only one needs to match. if (matches(matcherAST, node)) { + if (propertyValueMatcher.property === 'color') { + const condition = colorGamutConditions(node); + if (condition) { + mediaConditions.push(condition); + } + } + supportConditions.push(`(${propertyValueMatcher.property}: ${propertyValueMatcher.supports})`); return; } @@ -58,7 +69,10 @@ export function supportConditionsFromValue(value: string, mustContainVar = false } if (mustContainVar && !hasVar) { - return []; + return { + support: [], + media: [], + }; } if (hasVar && supportConditions.length > 0) { @@ -66,5 +80,36 @@ export function supportConditionsFromValue(value: string, mustContainVar = false supportConditions.push('(top: var(--f))'); } - return Array.from(new Set(supportConditions)); // list with unique items. + return { + support: Array.from(new Set(supportConditions)).sort(), + media: Array.from(new Set(mediaConditions)).sort(), + }; +} + +function colorGamutConditions(node: valueParser.Node) { + const componentValue = parseComponentValue( + tokenize({ css: valueParser.stringify(node) }), + ); + + if (!componentValue) { + return false; + } + + const colorData = color( + componentValue, + ); + + if (!colorData) { + return false; + } + + if (colorDataFitsRGB_Gamut(colorData)) { + return false; + } + + if (colorDataFitsDisplayP3_Gamut(colorData)) { + return '(color-gamut: display-p3)'; + } + + return '(color-gamut: rec2020)'; } diff --git a/plugins/postcss-progressive-custom-properties/src/index.ts b/plugins/postcss-progressive-custom-properties/src/index.ts index ac8be6b4c..e9b95842e 100644 --- a/plugins/postcss-progressive-custom-properties/src/index.ts +++ b/plugins/postcss-progressive-custom-properties/src/index.ts @@ -1,5 +1,5 @@ -import type { AtRule, PluginCreator, Rule } from 'postcss'; -import { supportConditionsFromValue } from './support-conditions-from-values'; +import { type AtRule, type PluginCreator, type Rule } from 'postcss'; +import { conditionsFromValue } from './conditions-from-values'; const hasVariableFunction = /var\(/i; @@ -9,9 +9,17 @@ const creator: PluginCreator = () => { OnceExit: (root, { postcss }) => { root.walkRules((rule) => { const atSupportsRules: Array = []; - const parentRuleClones: Map = new Map(); const propNames = new Set(); + const lastConditionParams: { + support: string | undefined, + media: string | undefined, + } = { + support: undefined, + media: undefined, + }; + let lastConditionalRule: Rule | undefined = undefined; + rule.each((decl) => { if (decl.type !== 'decl') { return; @@ -49,34 +57,75 @@ const creator: PluginCreator = () => { // if the property itself isn't a custom property, the value must contain a var() function const mustContainVar = !decl.variable; - const supportConditions = supportConditionsFromValue(decl.value, mustContainVar); - if (!supportConditions.length) { + const conditions = conditionsFromValue(decl.value, mustContainVar); + + let supportParams: string | undefined = undefined; + let mediaParams: string | undefined = undefined; + + if (conditions.support.length) { + supportParams = conditions.support.join(' and '); + } + + if (conditions.media.length) { + mediaParams = conditions.media.join(' and '); + } + + if (!mediaParams && !supportParams) { return; } - const params = supportConditions.join(' and '); + if ( + (lastConditionParams.support !== supportParams) || + (lastConditionParams.media !== mediaParams) + ) { + lastConditionalRule = undefined; + } - if (atSupportsRules.length && atSupportsRules[atSupportsRules.length - 1].params === params) { - const atSupports = atSupportsRules[atSupportsRules.length - 1]; - const parentClone = parentRuleClones.get(atSupports); + if (lastConditionalRule) { + lastConditionalRule.append(decl.clone()); + decl.remove(); + return; + } - if (parentClone) { - parentClone.append(decl.clone()); - decl.remove(); - return; - } + const atRules = []; + + if (supportParams) { + atRules.push(postcss.atRule({ + name: 'supports', + params: supportParams, + source: rule.source, + raws: { + before: '\n\n', + after: '\n', + }, + })); + } + + if (mediaParams) { + atRules.push(postcss.atRule({ + name: 'media', + params: mediaParams, + source: rule.source, + raws: { + before: '\n\n', + after: '\n', + }, + })); + } + + if (!atRules.length) { + return; } - // Any subsequent properties are progressive enhancements. - const atSupports = postcss.atRule({ - name: 'supports', - params: params, - source: rule.source, - raws: { - before: '\n\n', - after: '\n', - }, - }); + for (let i = 0; i < (atRules.length - 1); i++) { + const x = atRules[i]; + const y = atRules[i + 1]; + + x.append(y); + } + + const outerAtRule = atRules[0]; + const innerAtRule = atRules[atRules.length - 1]; const parentClone = rule.clone(); parentClone.removeAll(); @@ -86,9 +135,12 @@ const creator: PluginCreator = () => { parentClone.append(decl.clone()); decl.remove(); - parentRuleClones.set(atSupports, parentClone); - atSupports.append(parentClone); - atSupportsRules.push(atSupports); + lastConditionParams.support = supportParams; + lastConditionParams.media = mediaParams; + lastConditionalRule = parentClone; + + innerAtRule.append(parentClone); + atSupportsRules.push(outerAtRule); }); if (atSupportsRules.length === 0) { diff --git a/plugins/postcss-progressive-custom-properties/src/matchers.ts b/plugins/postcss-progressive-custom-properties/src/matchers.ts index 3ee1477b4..ab999a727 100644 --- a/plugins/postcss-progressive-custom-properties/src/matchers.ts +++ b/plugins/postcss-progressive-custom-properties/src/matchers.ts @@ -1048,7 +1048,7 @@ export const matchers = [ ], }, { - 'supports': 'color(srgb 0 0 0)', + 'supports': 'color(display-p3 0 0 0)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1125,7 +1125,7 @@ export const matchers = [ ], }, { - 'supports': 'color(srgb-linear 0 0 0)', + 'supports': 'color(display-p3 0 0 0)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1135,7 +1135,7 @@ export const matchers = [ 'nodes': [ { 'type': 'word', - 'value': 'srgb-linear', + 'value': 'display-p3', }, { 'type': 'space', @@ -1166,7 +1166,7 @@ export const matchers = [ 'nodes': [ { 'type': 'word', - 'value': 'srgb-linear', + 'value': 'display-p3', }, { 'type': 'space', @@ -1202,7 +1202,7 @@ export const matchers = [ ], }, { - 'supports': 'color(a98-rgb 0 0 0)', + 'supports': 'color(xyz 0 0 0)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1212,7 +1212,7 @@ export const matchers = [ 'nodes': [ { 'type': 'word', - 'value': 'a98-rgb', + 'value': 'srgb-linear', }, { 'type': 'space', @@ -1243,7 +1243,7 @@ export const matchers = [ 'nodes': [ { 'type': 'word', - 'value': 'a98-rgb', + 'value': 'srgb-linear', }, { 'type': 'space', @@ -1279,7 +1279,7 @@ export const matchers = [ ], }, { - 'supports': 'color(prophoto-rgb 0 0 0)', + 'supports': 'color(xyz 0 0 0)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1289,7 +1289,7 @@ export const matchers = [ 'nodes': [ { 'type': 'word', - 'value': 'prophoto-rgb', + 'value': 'a98-rgb', }, { 'type': 'space', @@ -1320,7 +1320,7 @@ export const matchers = [ 'nodes': [ { 'type': 'word', - 'value': 'prophoto-rgb', + 'value': 'a98-rgb', }, { 'type': 'space', @@ -1356,7 +1356,7 @@ export const matchers = [ ], }, { - 'supports': 'color(display-p3 0 0 0)', + 'supports': 'color(xyz 0 0 0)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1366,7 +1366,7 @@ export const matchers = [ 'nodes': [ { 'type': 'word', - 'value': 'display-p3', + 'value': 'prophoto-rgb', }, { 'type': 'space', @@ -1397,7 +1397,7 @@ export const matchers = [ 'nodes': [ { 'type': 'word', - 'value': 'display-p3', + 'value': 'prophoto-rgb', }, { 'type': 'space', @@ -1433,7 +1433,7 @@ export const matchers = [ ], }, { - 'supports': 'color(rec2020 0 0 0)', + 'supports': 'color(xyz 0 0 0)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1510,7 +1510,7 @@ export const matchers = [ ], }, { - 'supports': 'color(xyz-d50 0 0 0)', + 'supports': 'color(xyz 0 0 0)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1587,7 +1587,7 @@ export const matchers = [ ], }, { - 'supports': 'color(xyz-d65 0 0 0)', + 'supports': 'color(xyz 0 0 0)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -2010,7 +2010,7 @@ export const matchers = [ ], }, { - 'supports': 'lch(0% 0 0)', + 'supports': 'lab(0% 0 0)', 'property': 'color', 'sniff': 'lch', 'matchers': [ @@ -2136,7 +2136,7 @@ export const matchers = [ ], }, { - 'supports': 'oklch(0% 0 0)', + 'supports': 'oklab(0% 0 0)', 'property': 'color', 'sniff': 'oklch', 'matchers': [ diff --git a/plugins/postcss-progressive-custom-properties/test/basic.css b/plugins/postcss-progressive-custom-properties/test/basic.css index afc154111..a5d5d83bb 100644 --- a/plugins/postcss-progressive-custom-properties/test/basic.css +++ b/plugins/postcss-progressive-custom-properties/test/basic.css @@ -84,6 +84,15 @@ --color-6: orange; --color-6: color(rec2020 0.64331 0.19245 0.16771); + + --color-7: pink; + --color-7: color(srgb 0.999 0.95 0.95); + + --color-8: pink; + --color-8: color(display-p3 0.999 0.95 0.95); + + --color-9: pink; + --color-9: color(rec2020 0.999 0.95 0.95); } :root { diff --git a/plugins/postcss-progressive-custom-properties/test/basic.expect.css b/plugins/postcss-progressive-custom-properties/test/basic.expect.css index c9ae61476..434ace75d 100644 --- a/plugins/postcss-progressive-custom-properties/test/basic.expect.css +++ b/plugins/postcss-progressive-custom-properties/test/basic.expect.css @@ -24,13 +24,16 @@ --prop-9: red; } -@supports (color: oklch(0% 0 0)) and (top: var(--f)) { +@supports (color: oklab(0% 0 0)) and (top: var(--f)) { + +@media (color-gamut: rec2020) { :root { --prop-1: oklch(40% 0.234 0.39 / var(--opacity-50)); } } +} -@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) and (color: rgba(0 0 0 / 0)) and (color: color(rec2020 0 0 0)) { +@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) and (color: color(xyz 0 0 0)) and (color: rgba(0 0 0 / 0)) { :root { --prop-2: linear-gradient( 45deg, @@ -81,11 +84,14 @@ } } -@supports (color: oklch(0% 0 0)) and (top: var(--f)) { +@supports (color: oklab(0% 0 0)) and (top: var(--f)) { + +@media (color-gamut: rec2020) { :root { --prop-8: 1px solid oklch(40% 0.234 0.39 / var(--opacity-50)); } } +} @supports (color: rgb(0, 0, 0, 0)) { :root { @@ -113,7 +119,7 @@ --color-1: red; } -@supports (color: color(srgb 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .not-root { --color-1: color(srgb 0.64331 0.19245 0.16771); } @@ -133,34 +139,64 @@ --color-5: yellow; --color-6: orange; + + --color-7: pink; + + --color-8: pink; + + --color-9: pink; } -@supports (color: color(srgb 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { :root { --color-1: color(srgb 0.64331 0.19245 0.16771); --color-2: color(srgb 0.64331 0.19245 0.16771 / 50); } } -@supports (color: color(srgb 0 0 0)) and (top: var(--f)) { +@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) { :root { --color-3: color(srgb 0.64331 0.19245 0.16771 / var(--opacity-50)); --color-4: color(srgb 0.64331 var(--point-5) 0.16771 / var(--opacity-50)); } } -@supports (color: color(srgb 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { :root { --color-5: color(srgb 0.64331 0.19245 0.16771 / calc(1 / 2)); } } -@supports (color: color(rec2020 0 0 0)) { +@supports (color: color(xyz 0 0 0)) { :root { --color-6: color(rec2020 0.64331 0.19245 0.16771); } } +@supports (color: color(display-p3 0 0 0)) { +:root { + --color-7: color(srgb 0.999 0.95 0.95); +} +} + +@supports (color: color(display-p3 0 0 0)) { + +@media (color-gamut: display-p3) { +:root { + --color-8: color(display-p3 0.999 0.95 0.95); +} +} +} + +@supports (color: color(xyz 0 0 0)) { + +@media (color-gamut: rec2020) { +:root { + --color-9: color(rec2020 0.999 0.95 0.95); +} +} +} + :root { /* interleaved with color interpolation */ --gradient-prop-6: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%); @@ -276,49 +312,45 @@ --color-rcs-12: green; } -@supports (color: rgb(from red r g b)) and (color: color(a98-rgb 0 0 0)) { +@supports (color: color(xyz 0 0 0)) and (color: rgb(from red r g b)) { :root { --color-rcs-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); --color-rcs-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); + --color-rcs-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); } } -@supports (color: rgb(from red r g b)) and (color: color(prophoto-rgb 0 0 0)) { +@supports (color: color(xyz 0 0 0)) and (color: rgb(from red r g b)) { + +@media (color-gamut: rec2020) { :root { - --color-rcs-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); --color-rcs-4: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); } } +} -@supports (color: rgb(from red r g b)) and (color: hwb(0 0% 0%)) { +@supports (color: hwb(0 0% 0%)) and (color: rgb(from red r g b)) { :root { --color-rcs-5: hwb(from hwb(50deg 20% 30%) h w b); } } -@supports (color: rgb(from red r g b)) and (color: lab(0% 0 0)) { +@supports (color: lab(0% 0 0)) and (color: rgb(from red r g b)) { :root { --color-rcs-6: lab(from lab(40% 56.6 39) l a b); -} -} - -@supports (color: rgb(from red r g b)) and (color: lch(0% 0 0)) { -:root { --color-rcs-7: lch(from lch(40% 56.6 39) l c h); } } -@supports (color: rgb(from red r g b)) and (color: oklab(0% 0 0)) { -:root { - --color-rcs-8: oklab(from oklab(40% 0.566 0.39) l a b); -} -} +@supports (color: oklab(0% 0 0)) and (color: rgb(from red r g b)) { -@supports (color: rgb(from red r g b)) and (color: oklch(0% 0 0)) { +@media (color-gamut: rec2020) { :root { + --color-rcs-8: oklab(from oklab(40% 0.566 0.39) l a b); --color-rcs-9: oklch(from oklch(40% 0.566 39deg) l c h); } } +} @supports (color: rgb(from red r g b)) { :root { From c06795f6ac35e768a7c8a43692e753dbeceeba15 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 8 Oct 2023 18:45:00 +0200 Subject: [PATCH 03/15] wip --- .github/ISSUE_TEMPLATE/css-issue.yml | 1 + .github/ISSUE_TEMPLATE/plugin-issue.yml | 1 + .github/labeler.yml | 4 + package-lock.json | 71 ++--- .../postcss-preset-env/dist/index.cjs | 2 +- .../postcss-preset-env/dist/index.mjs | 2 +- .../dist/plugins/plugins-options.d.ts | 3 + plugin-packs/postcss-preset-env/package.json | 3 +- .../scripts/plugins-data.json | 5 + .../src/lib/ids-by-execution-order.mjs | 2 + .../src/plugins/plugins-by-id.mjs | 2 + .../src/plugins/plugins-data.mjs | 5 + .../src/plugins/plugins-options.ts | 3 + .../test/basic.autoprefixer.expect.css | 42 ++- .../test/basic.autoprefixer.false.expect.css | 42 ++- .../test/basic.ch38.expect.css | 42 ++- .../test/basic.ch88-ff78-saf10.expect.css | 42 ++- .../test/basic.ch88-ff78.expect.css | 42 ++- .../basic.ch88-ff78.no-is-pseudo.expect.css | 42 ++- .../postcss-preset-env/test/basic.expect.css | 42 ++- .../test/basic.ff49.expect.css | 42 ++- .../test/basic.ff66.expect.css | 42 ++- ...ebrew.all-browsers-have-support.expect.css | 43 ++- .../test/basic.hebrew.expect.css | 42 ++- .../test/basic.ie10.expect.css | 42 ++- .../test/basic.nesting.false.expect.css | 42 ++- .../test/basic.op_mini.expect.css | 42 ++- .../test/basic.preserve.false.expect.css | 43 ++- .../test/basic.preserve.true.expect.css | 48 +++- .../test/basic.safari15.expect.css | 50 +++- .../test/basic.stage0-ff49.expect.css | 42 ++- .../test/basic.stage0-ff66.expect.css | 42 ++- .../test/basic.stage0.expect.css | 42 ++- .../test/basic.supports-query.expect.css | 42 ++- .../test/layers-basic.expect.css | 17 +- .../layers-basic.preserve.true.expect.css | 24 +- .../.gitignore | 0 .../.nvmrc | 0 plugins/postcss-gamut-mapping/.tape.mjs | 11 + plugins/postcss-gamut-mapping/CHANGELOG.md | 5 + .../INSTALL.md | 62 ++--- .../LICENSE.md | 0 plugins/postcss-gamut-mapping/README.md | 68 +++++ .../dist/has-conditional-ancestor.d.ts | 2 + .../dist/has-override-decl.d.ts | 5 + plugins/postcss-gamut-mapping/dist/index.cjs | 1 + plugins/postcss-gamut-mapping/dist/index.d.ts | 5 + plugins/postcss-gamut-mapping/dist/index.mjs | 1 + .../docs/README.md | 23 +- .../package.json | 27 +- .../src/has-conditional-ancestor.ts | 24 ++ .../src/has-override-decl.ts | 33 +++ plugins/postcss-gamut-mapping/src/index.ts | 165 ++++++++++++ .../test/_import.mjs | 2 +- .../test/_require.cjs | 2 +- plugins/postcss-gamut-mapping/test/basic.css | 30 +++ .../test/basic.expect.css | 46 ++++ .../test/examples/example.css | 4 + .../test/examples/example.expect.css | 10 + .../tsconfig.json | 0 .../postcss-progressive-color-gamut/.tape.mjs | 27 -- .../CHANGELOG.md | 5 - .../postcss-progressive-color-gamut/README.md | 96 ------- .../dist/index.cjs | 1 - .../dist/index.d.ts | 10 - .../dist/index.mjs | 1 - .../src/index.ts | 57 ---- .../test/basic.color.expect.css | 7 - .../test/basic.css | 7 - .../test/basic.expect.css | 7 - .../test/document.expect.html | 21 -- .../test/document.html | 21 -- .../test/examples/example.css | 7 - .../test/examples/example.expect.css | 7 - .../examples/example.preserve-true.expect.css | 8 - .../CHANGELOG.md | 4 + .../dist/conditions-from-values.d.ts | 1 - .../dist/index.cjs | 2 +- .../dist/index.mjs | 2 +- .../package.json | 3 - .../src/conditions-from-values.ts | 43 +-- .../src/index.ts | 244 +++++++++--------- .../test/basic.css | 8 + .../test/basic.expect.css | 13 + .../test/basic.expect.css | 42 ++- rollup/configs/externals.mjs | 2 + 86 files changed, 1401 insertions(+), 814 deletions(-) rename plugins/{postcss-progressive-color-gamut => postcss-gamut-mapping}/.gitignore (100%) rename plugins/{postcss-progressive-color-gamut => postcss-gamut-mapping}/.nvmrc (100%) create mode 100644 plugins/postcss-gamut-mapping/.tape.mjs create mode 100644 plugins/postcss-gamut-mapping/CHANGELOG.md rename plugins/{postcss-progressive-color-gamut => postcss-gamut-mapping}/INSTALL.md (55%) rename plugins/{postcss-progressive-color-gamut => postcss-gamut-mapping}/LICENSE.md (100%) create mode 100644 plugins/postcss-gamut-mapping/README.md create mode 100644 plugins/postcss-gamut-mapping/dist/has-conditional-ancestor.d.ts create mode 100644 plugins/postcss-gamut-mapping/dist/has-override-decl.d.ts create mode 100644 plugins/postcss-gamut-mapping/dist/index.cjs create mode 100644 plugins/postcss-gamut-mapping/dist/index.d.ts create mode 100644 plugins/postcss-gamut-mapping/dist/index.mjs rename plugins/{postcss-progressive-color-gamut => postcss-gamut-mapping}/docs/README.md (64%) rename plugins/{postcss-progressive-color-gamut => postcss-gamut-mapping}/package.json (72%) create mode 100644 plugins/postcss-gamut-mapping/src/has-conditional-ancestor.ts create mode 100644 plugins/postcss-gamut-mapping/src/has-override-decl.ts create mode 100644 plugins/postcss-gamut-mapping/src/index.ts rename plugins/{postcss-progressive-color-gamut => postcss-gamut-mapping}/test/_import.mjs (72%) rename plugins/{postcss-progressive-color-gamut => postcss-gamut-mapping}/test/_require.cjs (71%) create mode 100644 plugins/postcss-gamut-mapping/test/basic.css create mode 100644 plugins/postcss-gamut-mapping/test/basic.expect.css create mode 100644 plugins/postcss-gamut-mapping/test/examples/example.css create mode 100644 plugins/postcss-gamut-mapping/test/examples/example.expect.css rename plugins/{postcss-progressive-color-gamut => postcss-gamut-mapping}/tsconfig.json (100%) delete mode 100644 plugins/postcss-progressive-color-gamut/.tape.mjs delete mode 100644 plugins/postcss-progressive-color-gamut/CHANGELOG.md delete mode 100644 plugins/postcss-progressive-color-gamut/README.md delete mode 100644 plugins/postcss-progressive-color-gamut/dist/index.cjs delete mode 100644 plugins/postcss-progressive-color-gamut/dist/index.d.ts delete mode 100644 plugins/postcss-progressive-color-gamut/dist/index.mjs delete mode 100644 plugins/postcss-progressive-color-gamut/src/index.ts delete mode 100644 plugins/postcss-progressive-color-gamut/test/basic.color.expect.css delete mode 100644 plugins/postcss-progressive-color-gamut/test/basic.css delete mode 100644 plugins/postcss-progressive-color-gamut/test/basic.expect.css delete mode 100644 plugins/postcss-progressive-color-gamut/test/document.expect.html delete mode 100644 plugins/postcss-progressive-color-gamut/test/document.html delete mode 100644 plugins/postcss-progressive-color-gamut/test/examples/example.css delete mode 100644 plugins/postcss-progressive-color-gamut/test/examples/example.expect.css delete mode 100644 plugins/postcss-progressive-color-gamut/test/examples/example.preserve-true.expect.css diff --git a/.github/ISSUE_TEMPLATE/css-issue.yml b/.github/ISSUE_TEMPLATE/css-issue.yml index 27da593d4..a349f6465 100644 --- a/.github/ISSUE_TEMPLATE/css-issue.yml +++ b/.github/ISSUE_TEMPLATE/css-issue.yml @@ -82,6 +82,7 @@ body: - PostCSS Focus Visible - PostCSS Focus Within - PostCSS Font Variant + - PostCSS Gamut Mapping - PostCSS Gap Properties - PostCSS Global Data - PostCSS Gradients Interpolation Method diff --git a/.github/ISSUE_TEMPLATE/plugin-issue.yml b/.github/ISSUE_TEMPLATE/plugin-issue.yml index fa487b20a..95fe0aed3 100644 --- a/.github/ISSUE_TEMPLATE/plugin-issue.yml +++ b/.github/ISSUE_TEMPLATE/plugin-issue.yml @@ -84,6 +84,7 @@ body: - PostCSS Focus Visible - PostCSS Focus Within - PostCSS Font Variant + - PostCSS Gamut Mapping - PostCSS Gap Properties - PostCSS Global Data - PostCSS Gradients Interpolation Method diff --git a/.github/labeler.yml b/.github/labeler.yml index 194c3b4b0..3d9510f86 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -129,6 +129,10 @@ - plugins/postcss-font-format-keywords/** - experimental/postcss-font-format-keywords/** +"plugins/postcss-gamut-mapping": + - plugins/postcss-gamut-mapping/** + - experimental/postcss-gamut-mapping/** + "plugins/postcss-gap-properties": - plugins/postcss-gap-properties/** - experimental/postcss-gap-properties/** diff --git a/package-lock.json b/package-lock.json index ffd38bc3e..98ad30cef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2065,6 +2065,10 @@ "resolved": "plugins/postcss-font-format-keywords", "link": true }, + "node_modules/@csstools/postcss-gamut-mapping": { + "resolved": "plugins/postcss-gamut-mapping", + "link": true + }, "node_modules/@csstools/postcss-global-data": { "resolved": "plugins/postcss-global-data", "link": true @@ -2133,10 +2137,6 @@ "resolved": "plugins/postcss-oklab-function", "link": true }, - "node_modules/@csstools/postcss-progressive-color-gamut": { - "resolved": "plugins/postcss-progressive-color-gamut", - "link": true - }, "node_modules/@csstools/postcss-progressive-custom-properties": { "resolved": "plugins/postcss-progressive-custom-properties", "link": true @@ -5335,9 +5335,9 @@ "dev": true }, "node_modules/cssdb": { - "version": "7.7.3", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.7.3.tgz", - "integrity": "sha512-QPbpOl+jR13quGTIvwCavognmtpr6T9ra6G9S++scJek7BY4xdkJpB3slU1JkjQmzKmpDHnPB+wkz+mxoT/h4w==", + "version": "7.8.0", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.8.0.tgz", + "integrity": "sha512-SkeezZOQr5AHt9MgJgSFNyiuJwg1p8AwoVln6JwaQJsyxduRW9QJ+HP/gAQzbsz8SIqINtYvpJKjxTRI67zxLg==", "funding": [ { "type": "opencollective", @@ -12761,6 +12761,7 @@ "@csstools/postcss-color-mix-function": "^2.0.6", "@csstools/postcss-exponential-functions": "^1.0.1", "@csstools/postcss-font-format-keywords": "^3.0.0", + "@csstools/postcss-gamut-mapping": "^0.0.0", "@csstools/postcss-gradients-interpolation-method": "^4.0.6", "@csstools/postcss-hwb-function": "^3.0.5", "@csstools/postcss-ic-unit": "^3.0.1", @@ -12786,7 +12787,7 @@ "css-blank-pseudo": "^6.0.0", "css-has-pseudo": "^6.0.0", "css-prefers-color-scheme": "^9.0.0", - "cssdb": "^7.7.3", + "cssdb": "^7.8.0", "postcss-attribute-case-insensitive": "^6.0.2", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^6.0.1", @@ -13567,6 +13568,35 @@ "postcss": "^8.4" } }, + "plugins/postcss-gamut-mapping": { + "name": "@csstools/postcss-gamut-mapping", + "version": "0.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/css-color-parser": "^1.3.3", + "@csstools/css-parser-algorithms": "2.3.2", + "@csstools/css-tokenizer": "^2.2.1" + }, + "devDependencies": { + "@csstools/postcss-tape": "*" + }, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "plugins/postcss-gap-properties": { "version": "5.0.0", "funding": [ @@ -14169,6 +14199,7 @@ "plugins/postcss-progressive-color-gamut": { "name": "@csstools/postcss-progressive-color-gamut", "version": "0.0.0", + "extraneous": true, "funding": [ { "type": "github", @@ -14205,9 +14236,6 @@ ], "license": "MIT-0", "dependencies": { - "@csstools/css-color-parser": "^1.2.3", - "@csstools/css-parser-algorithms": "2.3.1", - "@csstools/css-tokenizer": "^2.2.0", "postcss-value-parser": "^4.2.0" }, "devDependencies": { @@ -14220,27 +14248,6 @@ "postcss": "^8.4" } }, - "plugins/postcss-progressive-custom-properties/node_modules/@csstools/css-parser-algorithms": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz", - "integrity": "sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "engines": { - "node": "^14 || ^16 || >=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^2.2.0" - } - }, "plugins/postcss-pseudo-class-any-link": { "version": "9.0.0", "funding": [ diff --git a/plugin-packs/postcss-preset-env/dist/index.cjs b/plugin-packs/postcss-preset-env/dist/index.cjs index 1e3f49493..adadc57a3 100644 --- a/plugin-packs/postcss-preset-env/dist/index.cjs +++ b/plugin-packs/postcss-preset-env/dist/index.cjs @@ -1 +1 @@ -"use strict";var s=require("autoprefixer"),e=require("cssdb"),o=require("@csstools/postcss-progressive-custom-properties"),t=require("browserslist"),i=require("@csstools/postcss-initial"),r=require("postcss-pseudo-class-any-link"),a=require("css-blank-pseudo"),c=require("postcss-page-break"),n=require("@csstools/postcss-cascade-layers"),p=require("postcss-attribute-case-insensitive"),l=require("postcss-clamp"),u=require("@csstools/postcss-color-function"),m=require("postcss-color-functional-notation"),d=require("@csstools/postcss-color-mix-function"),g=require("postcss-custom-media"),f=require("postcss-custom-properties"),b=require("postcss-custom-selectors"),h=require("postcss-dir-pseudo-class"),N=require("@csstools/postcss-normalize-display-values"),v=require("postcss-double-position-gradients"),y=require("@csstools/postcss-exponential-functions"),k=require("@csstools/postcss-logical-float-and-clear"),w=require("postcss-focus-visible"),q=require("postcss-focus-within"),x=require("@csstools/postcss-font-format-keywords"),F=require("postcss-font-variant"),$=require("postcss-gap-properties"),O=require("@csstools/postcss-gradients-interpolation-method"),S=require("css-has-pseudo"),P=require("postcss-color-hex-alpha"),C=require("@csstools/postcss-hwb-function"),I=require("@csstools/postcss-ic-unit"),E=require("postcss-image-set-function"),L=require("@csstools/postcss-is-pseudo-class"),U=require("postcss-lab-function"),A=require("postcss-logical"),B=require("@csstools/postcss-logical-resize"),_=require("@csstools/postcss-logical-viewport-units"),j=require("@csstools/postcss-media-queries-aspect-ratio-number-values"),z=require("@csstools/postcss-media-minmax"),M=require("@csstools/postcss-nested-calc"),D=require("postcss-nesting"),R=require("postcss-selector-not"),V=require("@csstools/postcss-oklab-function"),T=require("postcss-opacity-percentage"),H=require("postcss-overflow-shorthand"),W=require("postcss-replace-overflow-wrap"),G=require("postcss-place"),K=require("css-prefers-color-scheme"),Z=require("postcss-color-rebeccapurple"),Q=require("@csstools/postcss-relative-color-syntax"),J=require("@csstools/postcss-scope-pseudo-class"),X=require("@csstools/postcss-stepped-value-functions"),Y=require("@csstools/postcss-text-decoration-shorthand"),ss=require("@csstools/postcss-trigonometric-functions"),es=require("@csstools/postcss-unset-value");const os={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},ts=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,e,o){if(e.debug){o.log("Enabling the following feature(s):");const t=[],i=[];!1!==e.autoprefixer&&i.push(" autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(` ${s.id} (injected via options)`):i.push(` ${s.id}`),void 0!==os[s.id]&&t.push(s.id)})),i.sort(((s,e)=>s.localeCompare(e))),t.sort(((s,e)=>s.localeCompare(e))),i.forEach((s=>o.log(s))),t.length&&(o.log("These feature(s) need a browser library to work:"),t.forEach((s=>o.log(` ${s}: ${os[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const e={};return e.preserve=s.preserve,e}return!1}function clamp(s,e,o){return Math.max(s,Math.min(e,o))}const is=2,rs=5;function stageFromOptions(s,e){let o=is;if(void 0===s.stage)return e.log(`Using features from Stage ${o} (default)`),o;if(!1===s.stage)o=rs;else{let e=parseInt(s.stage,10);Number.isNaN(e)&&(e=0),o=clamp(0,e,rs)}return o===rs?e.log('Stage has been disabled, features will be handled via the "features" option.'):e.log(`Using features from Stage ${o}`),o}const as=Symbol("insertBefore"),cs=Symbol("insertAfter"),ns=Symbol("insertOrder"),ps=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?as:cs,i=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let r=e[o];Array.isArray(r)||(r=[r]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const hs=["and_chr","and_ff","android","chrome","edge","firefox","ie","ios_saf","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return hs.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,t,i){switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),s))return i.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(s.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return i.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in t?t.logical:{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s),i=t(o,{ignoreUnknownVersions:!0});return!!e.some((s=>i.some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[as]||s[cs]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[ps],id:o,stage:rs+1}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:bs.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,r,a){let c,n;return c=getOptionsForBrowsersByFeature(e,t,s,r,a),!0===o[t.id]?i&&(c=Object.assign({},c,i)):c=i?Object.assign({},c,i,o[t.id]):Object.assign({},c,o[t.id]),c.enableProgressiveCustomProperties=!1,"overflow-wrap-property"===t.id&&"preserve"in c&&(c.method=c.preserve?"copy":"replace"),n=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(c):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(c):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:n,pluginOptions:c,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,i){const r=Object(e.features),a="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,c=Object(e.insertBefore),n=Object(e.insertAfter),p=e.browsers?void 0:e.env,l=e.browsers,u=clamp(0,intOrZero(e.minimumVendorImplementations),3);u>0&&i.log(`Using features with ${u} or more vendor implementations`);const m=stageFromOptions(e,i),d=prepareFeaturesList(s,c,n).map((s=>formatPolyfillableFeature(s))).filter((s=>0===u||(!(!s[as]&&!s[cs])||(u<=s.vendors_implementations||(r[s.id]?(i.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))),g=t(l,{env:p,ignoreUnknownVersions:!0}).filter((s=>hs.includes(s.split(" ")[0])));return d.filter((s=>{const e=s.stage>=m,o=a||!ts.includes(s.id),t=!1===r[s.id],c=r[s.id]?r[s.id]:e&&o;return t?i.log(` ${s.id} has been disabled by options`):e?o||i.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):c?i.log(` ${s.id} does not meet the required stage but has been enabled by options`):i.log(` ${s.id} with stage ${s.stage} has been disabled`),c})).map((t=>formatStagedFeature(s,g,r,t,o,e,i))).filter((s=>{if(s.id in r)return r[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=g.some((s=>e.some((e=>e===s))));return o||i.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var Ns=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"@csstools/postcss-exponential-functions",id:"exponential-functions",importName:"postcssExponentialFunctions"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-gradients-interpolation-method",id:"gradients-interpolation-method",importName:"postcssGradientsInterpolationMethod"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"@csstools/postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/postcss-media-minmax",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",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return Ns.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=Ns.map((s=>s.id)),i=Ns.map((s=>s.packageName)),r=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const a=[...t.map((e=>[e,levenshteinDistance(s,e)])),...i.map((e=>[r[e],levenshteinDistance(s,e)]))].sort(((s,e)=>s[1]-e[1])).filter((s=>s[1]<10)),c=new Set;for(let s=0;s=3));s++);if(!c.size)return void e.warn(o,`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`);let n='"';n+=Array.from(c).join('", "'),n+='"',e.warn(o,`Unknown feature: "${s}", did you mean one of: ${n}`)}))}function levenshteinDistance(s,e){if(!s.length)return e.length;if(!e.length)return s.length;const o=[];for(let t=0;t<=e.length;t++){o[t]=[t];for(let i=1;i<=s.length;i++)o[t][i]=0===t?i:Math.min(o[t-1][i]+1,o[t][i-1]+1,o[t-1][i-1]+(s[i-1]===e[t-1]?0:1))}return o[e.length][s.length]}const creator=t=>{const i=new Logger,r=Object(t),a=Object.keys(Object(r.features)),c=r.browsers?void 0:r.env,n=r.browsers,p=initializeSharedOptions(r),l=listFeatures(e,r,p,i),u=l.map((s=>s.plugin));!1!==r.autoprefixer&&u.push(s(Object.assign({env:c,overrideBrowserslist:n},r.autoprefixer))),u.push(o()),logFeaturesList(l,r,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(a,s,e),r.debug&&i.dumpLogs(e),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...u,internalPlugin()]}};creator.postcss=!0,module.exports=creator; +"use strict";var s=require("autoprefixer"),e=require("cssdb"),o=require("@csstools/postcss-progressive-custom-properties"),t=require("browserslist"),i=require("@csstools/postcss-initial"),a=require("postcss-pseudo-class-any-link"),r=require("css-blank-pseudo"),c=require("postcss-page-break"),n=require("@csstools/postcss-cascade-layers"),p=require("postcss-attribute-case-insensitive"),l=require("postcss-clamp"),u=require("@csstools/postcss-color-function"),m=require("postcss-color-functional-notation"),d=require("@csstools/postcss-color-mix-function"),g=require("postcss-custom-media"),f=require("postcss-custom-properties"),b=require("postcss-custom-selectors"),h=require("postcss-dir-pseudo-class"),N=require("@csstools/postcss-normalize-display-values"),v=require("postcss-double-position-gradients"),y=require("@csstools/postcss-exponential-functions"),k=require("@csstools/postcss-logical-float-and-clear"),w=require("postcss-focus-visible"),q=require("postcss-focus-within"),x=require("@csstools/postcss-font-format-keywords"),F=require("postcss-font-variant"),$=require("@csstools/postcss-gamut-mapping"),O=require("postcss-gap-properties"),S=require("@csstools/postcss-gradients-interpolation-method"),P=require("css-has-pseudo"),C=require("postcss-color-hex-alpha"),I=require("@csstools/postcss-hwb-function"),E=require("@csstools/postcss-ic-unit"),L=require("postcss-image-set-function"),U=require("@csstools/postcss-is-pseudo-class"),A=require("postcss-lab-function"),B=require("postcss-logical"),_=require("@csstools/postcss-logical-resize"),j=require("@csstools/postcss-logical-viewport-units"),M=require("@csstools/postcss-media-queries-aspect-ratio-number-values"),z=require("@csstools/postcss-media-minmax"),D=require("@csstools/postcss-nested-calc"),R=require("postcss-nesting"),V=require("postcss-selector-not"),T=require("@csstools/postcss-oklab-function"),H=require("postcss-opacity-percentage"),W=require("postcss-overflow-shorthand"),G=require("postcss-replace-overflow-wrap"),K=require("postcss-place"),Z=require("css-prefers-color-scheme"),Q=require("postcss-color-rebeccapurple"),J=require("@csstools/postcss-relative-color-syntax"),X=require("@csstools/postcss-scope-pseudo-class"),Y=require("@csstools/postcss-stepped-value-functions"),ss=require("@csstools/postcss-text-decoration-shorthand"),es=require("@csstools/postcss-trigonometric-functions"),os=require("@csstools/postcss-unset-value");const ts={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},is=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,e,o){if(e.debug){o.log("Enabling the following feature(s):");const t=[],i=[];!1!==e.autoprefixer&&i.push(" autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(` ${s.id} (injected via options)`):i.push(` ${s.id}`),void 0!==ts[s.id]&&t.push(s.id)})),i.sort(((s,e)=>s.localeCompare(e))),t.sort(((s,e)=>s.localeCompare(e))),i.forEach((s=>o.log(s))),t.length&&(o.log("These feature(s) need a browser library to work:"),t.forEach((s=>o.log(` ${s}: ${ts[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const e={};return e.preserve=s.preserve,e}return!1}function clamp(s,e,o){return Math.max(s,Math.min(e,o))}const as=2,rs=5;function stageFromOptions(s,e){let o=as;if(void 0===s.stage)return e.log(`Using features from Stage ${o} (default)`),o;if(!1===s.stage)o=rs;else{let e=parseInt(s.stage,10);Number.isNaN(e)&&(e=0),o=clamp(0,e,rs)}return o===rs?e.log('Stage has been disabled, features will be handled via the "features" option.'):e.log(`Using features from Stage ${o}`),o}const cs=Symbol("insertBefore"),ns=Symbol("insertAfter"),ps=Symbol("insertOrder"),ls=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?cs:ns,i=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let a=e[o];Array.isArray(a)||(a=[a]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const Ns=["and_chr","and_ff","android","chrome","edge","firefox","ie","ios_saf","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return Ns.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,t,i){switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),s))return i.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(s.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return i.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in t?t.logical:{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s),i=t(o,{ignoreUnknownVersions:!0});return!!e.some((s=>i.some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[cs]||s[ns]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[ls],id:o,stage:rs+1}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:hs.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,a,r){let c,n;return c=getOptionsForBrowsersByFeature(e,t,s,a,r),!0===o[t.id]?i&&(c=Object.assign({},c,i)):c=i?Object.assign({},c,i,o[t.id]):Object.assign({},c,o[t.id]),c.enableProgressiveCustomProperties=!1,"overflow-wrap-property"===t.id&&"preserve"in c&&(c.method=c.preserve?"copy":"replace"),n=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(c):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(c):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:n,pluginOptions:c,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,i){const a=Object(e.features),r="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,c=Object(e.insertBefore),n=Object(e.insertAfter),p=e.browsers?void 0:e.env,l=e.browsers,u=clamp(0,intOrZero(e.minimumVendorImplementations),3);u>0&&i.log(`Using features with ${u} or more vendor implementations`);const m=stageFromOptions(e,i),d=prepareFeaturesList(s,c,n).map((s=>formatPolyfillableFeature(s))).filter((s=>0===u||(!(!s[cs]&&!s[ns])||(u<=s.vendors_implementations||(a[s.id]?(i.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))),g=t(l,{env:p,ignoreUnknownVersions:!0}).filter((s=>Ns.includes(s.split(" ")[0])));return d.filter((s=>{const e=s.stage>=m,o=r||!is.includes(s.id),t=!1===a[s.id],c=a[s.id]?a[s.id]:e&&o;return t?i.log(` ${s.id} has been disabled by options`):e?o||i.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):c?i.log(` ${s.id} does not meet the required stage but has been enabled by options`):i.log(` ${s.id} with stage ${s.stage} has been disabled`),c})).map((t=>formatStagedFeature(s,g,a,t,o,e,i))).filter((s=>{if(s.id in a)return a[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=g.some((s=>e.some((e=>e===s))));return o||i.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var vs=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"@csstools/postcss-exponential-functions",id:"exponential-functions",importName:"postcssExponentialFunctions"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"@csstools/postcss-gamut-mapping",id:"gamut-mapping",importName:"postcssGamutMapping"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-gradients-interpolation-method",id:"gradients-interpolation-method",importName:"postcssGradientsInterpolationMethod"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"@csstools/postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/postcss-media-minmax",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",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return vs.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=vs.map((s=>s.id)),i=vs.map((s=>s.packageName)),a=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const r=[...t.map((e=>[e,levenshteinDistance(s,e)])),...i.map((e=>[a[e],levenshteinDistance(s,e)]))].sort(((s,e)=>s[1]-e[1])).filter((s=>s[1]<10)),c=new Set;for(let s=0;s=3));s++);if(!c.size)return void e.warn(o,`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`);let n='"';n+=Array.from(c).join('", "'),n+='"',e.warn(o,`Unknown feature: "${s}", did you mean one of: ${n}`)}))}function levenshteinDistance(s,e){if(!s.length)return e.length;if(!e.length)return s.length;const o=[];for(let t=0;t<=e.length;t++){o[t]=[t];for(let i=1;i<=s.length;i++)o[t][i]=0===t?i:Math.min(o[t-1][i]+1,o[t][i-1]+1,o[t-1][i-1]+(s[i-1]===e[t-1]?0:1))}return o[e.length][s.length]}const creator=t=>{const i=new Logger,a=Object(t),r=Object.keys(Object(a.features)),c=a.browsers?void 0:a.env,n=a.browsers,p=initializeSharedOptions(a),l=listFeatures(e,a,p,i),u=l.map((s=>s.plugin));!1!==a.autoprefixer&&u.push(s(Object.assign({env:c,overrideBrowserslist:n},a.autoprefixer))),u.push(o()),logFeaturesList(l,a,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(r,s,e),a.debug&&i.dumpLogs(e),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...u,internalPlugin()]}};creator.postcss=!0,module.exports=creator; diff --git a/plugin-packs/postcss-preset-env/dist/index.mjs b/plugin-packs/postcss-preset-env/dist/index.mjs index a053da3d1..58ed53a39 100644 --- a/plugin-packs/postcss-preset-env/dist/index.mjs +++ b/plugin-packs/postcss-preset-env/dist/index.mjs @@ -1 +1 @@ -import s from"autoprefixer";import o from"cssdb";import e from"@csstools/postcss-progressive-custom-properties";import t from"browserslist";import i from"@csstools/postcss-initial";import a from"postcss-pseudo-class-any-link";import r from"css-blank-pseudo";import p from"postcss-page-break";import c from"@csstools/postcss-cascade-layers";import n from"postcss-attribute-case-insensitive";import l from"postcss-clamp";import m from"@csstools/postcss-color-function";import u from"postcss-color-functional-notation";import d from"@csstools/postcss-color-mix-function";import f from"postcss-custom-media";import g from"postcss-custom-properties";import b from"postcss-custom-selectors";import h from"postcss-dir-pseudo-class";import N from"@csstools/postcss-normalize-display-values";import v from"postcss-double-position-gradients";import y from"@csstools/postcss-exponential-functions";import k from"@csstools/postcss-logical-float-and-clear";import w from"postcss-focus-visible";import x from"postcss-focus-within";import F from"@csstools/postcss-font-format-keywords";import $ from"postcss-font-variant";import O from"postcss-gap-properties";import S from"@csstools/postcss-gradients-interpolation-method";import P from"css-has-pseudo";import C from"postcss-color-hex-alpha";import I from"@csstools/postcss-hwb-function";import E from"@csstools/postcss-ic-unit";import L from"postcss-image-set-function";import U from"@csstools/postcss-is-pseudo-class";import A from"postcss-lab-function";import B from"postcss-logical";import _ from"@csstools/postcss-logical-resize";import j from"@csstools/postcss-logical-viewport-units";import q from"@csstools/postcss-media-queries-aspect-ratio-number-values";import z from"@csstools/postcss-media-minmax";import M from"@csstools/postcss-nested-calc";import D from"postcss-nesting";import R from"postcss-selector-not";import V from"@csstools/postcss-oklab-function";import T from"postcss-opacity-percentage";import H from"postcss-overflow-shorthand";import W from"postcss-replace-overflow-wrap";import G from"postcss-place";import K from"css-prefers-color-scheme";import Z from"postcss-color-rebeccapurple";import Q from"@csstools/postcss-relative-color-syntax";import J from"@csstools/postcss-scope-pseudo-class";import X from"@csstools/postcss-stepped-value-functions";import Y from"@csstools/postcss-text-decoration-shorthand";import ss from"@csstools/postcss-trigonometric-functions";import os from"@csstools/postcss-unset-value";const es={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},ts=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,o,e){if(o.debug){e.log("Enabling the following feature(s):");const t=[],i=[];!1!==o.autoprefixer&&i.push(" autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(` ${s.id} (injected via options)`):i.push(` ${s.id}`),void 0!==es[s.id]&&t.push(s.id)})),i.sort(((s,o)=>s.localeCompare(o))),t.sort(((s,o)=>s.localeCompare(o))),i.forEach((s=>e.log(s))),t.length&&(e.log("These feature(s) need a browser library to work:"),t.forEach((s=>e.log(` ${s}: ${es[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const o={};return o.preserve=s.preserve,o}return!1}function clamp(s,o,e){return Math.max(s,Math.min(o,e))}const is=2,as=5;function stageFromOptions(s,o){let e=is;if(void 0===s.stage)return o.log(`Using features from Stage ${e} (default)`),e;if(!1===s.stage)e=as;else{let o=parseInt(s.stage,10);Number.isNaN(o)&&(o=0),e=clamp(0,o,as)}return e===as?o.log('Stage has been disabled, features will be handled via the "features" option.'):o.log(`Using features from Stage ${e}`),e}const rs=Symbol("insertBefore"),ps=Symbol("insertAfter"),cs=Symbol("insertOrder"),ns=Symbol("plugin");function getTransformedInsertions(s,o,e){if("insertBefore"!==e&&"insertAfter"!==e)return[];const t="insertBefore"===e?rs:ps,i=[];for(const e in o){if(!Object.hasOwnProperty.call(o,e))continue;if(!s.find((s=>s.id===e)))continue;let a=o[e];Array.isArray(a)||(a=[a]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,o)=>featureIsLess(s,o)))}const hs=["and_chr","and_ff","android","chrome","edge","firefox","ie","ios_saf","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const o=[];return hs.forEach((e=>{if("op_mini"===e&&void 0===s.browser_support[e])return void o.push("op_mini all");const t=s.browser_support[e];"string"==typeof t&&/^[0-9|.]+$/.test(t)?o.push(`${e} < ${s.browser_support[e]}`):o.push(`${e} >= 1`)})),o}function getOptionsForBrowsersByFeature(s,o,e,t,i){switch(o.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(e.find((s=>"is-pseudo-class"===s.id)),s))return i.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(s.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return i.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in t?t.logical:{};default:return{}}}function needsOptionFor(s,o){const e=getUnsupportedBrowsersByFeature(s),i=t(e,{ignoreUnknownVersions:!0});return!!o.some((s=>i.some((o=>o===s))))}function formatPolyfillableFeature(s){const o=getUnsupportedBrowsersByFeature(s);if(s[rs]||s[ps]){let e=s.id;return e=s.insertBefore?`before-${e}`:`after-${e}`,{browsers:o,vendors_implementations:s.vendors_implementations,plugin:s[ns],id:e,stage:as+1}}return{browsers:o,vendors_implementations:s.vendors_implementations,plugin:bs.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,o,e,t,i,a,r){let p,c;return p=getOptionsForBrowsersByFeature(o,t,s,a,r),!0===e[t.id]?i&&(p=Object.assign({},p,i)):p=i?Object.assign({},p,i,e[t.id]):Object.assign({},p,e[t.id]),p.enableProgressiveCustomProperties=!1,"overflow-wrap-property"===t.id&&"preserve"in p&&(p.method=p.preserve?"copy":"replace"),c=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(p):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(p):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:c,pluginOptions:p,id:t.id}}function intOrZero(s){const o=parseInt(s,10);return Number.isNaN(o)?0:o}function listFeatures(s,o,e,i){const a=Object(o.features),r="enableClientSidePolyfills"in o&&o.enableClientSidePolyfills,p=Object(o.insertBefore),c=Object(o.insertAfter),n=o.browsers?void 0:o.env,l=o.browsers,m=clamp(0,intOrZero(o.minimumVendorImplementations),3);m>0&&i.log(`Using features with ${m} or more vendor implementations`);const u=stageFromOptions(o,i),d=prepareFeaturesList(s,p,c).map((s=>formatPolyfillableFeature(s))).filter((s=>0===m||(!(!s[rs]&&!s[ps])||(m<=s.vendors_implementations||(a[s.id]?(i.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))),f=t(l,{env:n,ignoreUnknownVersions:!0}).filter((s=>hs.includes(s.split(" ")[0])));return d.filter((s=>{const o=s.stage>=u,e=r||!ts.includes(s.id),t=!1===a[s.id],p=a[s.id]?a[s.id]:o&&e;return t?i.log(` ${s.id} has been disabled by options`):o?e||i.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):p?i.log(` ${s.id} does not meet the required stage but has been enabled by options`):i.log(` ${s.id} with stage ${s.stage} has been disabled`),p})).map((t=>formatStagedFeature(s,f,a,t,e,o,i))).filter((s=>{if(s.id in a)return a[s.id];const o=t(s.browsers,{ignoreUnknownVersions:!0}),e=f.some((s=>o.some((o=>o===s))));return e||i.log(`${s.id} disabled due to browser support`),e}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var Ns=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"@csstools/postcss-exponential-functions",id:"exponential-functions",importName:"postcssExponentialFunctions"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-gradients-interpolation-method",id:"gradients-interpolation-method",importName:"postcssGradientsInterpolationMethod"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"@csstools/postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/postcss-media-minmax",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",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return Ns.forEach((o=>{s[o.packageName]=o.id})),s}function pluginIdHelp(s,o,e){const t=Ns.map((s=>s.id)),i=Ns.map((s=>s.packageName)),a=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const r=[...t.map((o=>[o,levenshteinDistance(s,o)])),...i.map((o=>[a[o],levenshteinDistance(s,o)]))].sort(((s,o)=>s[1]-o[1])).filter((s=>s[1]<10)),p=new Set;for(let s=0;s=3));s++);if(!p.size)return void o.warn(e,`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`);let c='"';c+=Array.from(p).join('", "'),c+='"',o.warn(e,`Unknown feature: "${s}", did you mean one of: ${c}`)}))}function levenshteinDistance(s,o){if(!s.length)return o.length;if(!o.length)return s.length;const e=[];for(let t=0;t<=o.length;t++){e[t]=[t];for(let i=1;i<=s.length;i++)e[t][i]=0===t?i:Math.min(e[t-1][i]+1,e[t][i-1]+1,e[t-1][i-1]+(s[i-1]===o[t-1]?0:1))}return e[o.length][s.length]}const creator=t=>{const i=new Logger,a=Object(t),r=Object.keys(Object(a.features)),p=a.browsers?void 0:a.env,c=a.browsers,n=initializeSharedOptions(a),l=listFeatures(o,a,n,i),m=l.map((s=>s.plugin));!1!==a.autoprefixer&&m.push(s(Object.assign({env:p,overrideBrowserslist:c},a.autoprefixer))),m.push(e()),logFeaturesList(l,a,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:o}){pluginIdHelp(r,s,o),a.debug&&i.dumpLogs(o),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...m,internalPlugin()]}};creator.postcss=!0;export{creator as default}; +import s from"autoprefixer";import o from"cssdb";import e from"@csstools/postcss-progressive-custom-properties";import t from"browserslist";import i from"@csstools/postcss-initial";import a from"postcss-pseudo-class-any-link";import r from"css-blank-pseudo";import p from"postcss-page-break";import c from"@csstools/postcss-cascade-layers";import n from"postcss-attribute-case-insensitive";import l from"postcss-clamp";import m from"@csstools/postcss-color-function";import u from"postcss-color-functional-notation";import d from"@csstools/postcss-color-mix-function";import f from"postcss-custom-media";import g from"postcss-custom-properties";import b from"postcss-custom-selectors";import h from"postcss-dir-pseudo-class";import N from"@csstools/postcss-normalize-display-values";import v from"postcss-double-position-gradients";import y from"@csstools/postcss-exponential-functions";import k from"@csstools/postcss-logical-float-and-clear";import w from"postcss-focus-visible";import x from"postcss-focus-within";import F from"@csstools/postcss-font-format-keywords";import $ from"postcss-font-variant";import O from"@csstools/postcss-gamut-mapping";import S from"postcss-gap-properties";import P from"@csstools/postcss-gradients-interpolation-method";import C from"css-has-pseudo";import I from"postcss-color-hex-alpha";import E from"@csstools/postcss-hwb-function";import L from"@csstools/postcss-ic-unit";import U from"postcss-image-set-function";import A from"@csstools/postcss-is-pseudo-class";import B from"postcss-lab-function";import _ from"postcss-logical";import j from"@csstools/postcss-logical-resize";import q from"@csstools/postcss-logical-viewport-units";import M from"@csstools/postcss-media-queries-aspect-ratio-number-values";import z from"@csstools/postcss-media-minmax";import D from"@csstools/postcss-nested-calc";import R from"postcss-nesting";import V from"postcss-selector-not";import T from"@csstools/postcss-oklab-function";import H from"postcss-opacity-percentage";import W from"postcss-overflow-shorthand";import G from"postcss-replace-overflow-wrap";import K from"postcss-place";import Z from"css-prefers-color-scheme";import Q from"postcss-color-rebeccapurple";import J from"@csstools/postcss-relative-color-syntax";import X from"@csstools/postcss-scope-pseudo-class";import Y from"@csstools/postcss-stepped-value-functions";import ss from"@csstools/postcss-text-decoration-shorthand";import os from"@csstools/postcss-trigonometric-functions";import es from"@csstools/postcss-unset-value";const ts={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},is=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,o,e){if(o.debug){e.log("Enabling the following feature(s):");const t=[],i=[];!1!==o.autoprefixer&&i.push(" autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(` ${s.id} (injected via options)`):i.push(` ${s.id}`),void 0!==ts[s.id]&&t.push(s.id)})),i.sort(((s,o)=>s.localeCompare(o))),t.sort(((s,o)=>s.localeCompare(o))),i.forEach((s=>e.log(s))),t.length&&(e.log("These feature(s) need a browser library to work:"),t.forEach((s=>e.log(` ${s}: ${ts[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const o={};return o.preserve=s.preserve,o}return!1}function clamp(s,o,e){return Math.max(s,Math.min(o,e))}const as=2,rs=5;function stageFromOptions(s,o){let e=as;if(void 0===s.stage)return o.log(`Using features from Stage ${e} (default)`),e;if(!1===s.stage)e=rs;else{let o=parseInt(s.stage,10);Number.isNaN(o)&&(o=0),e=clamp(0,o,rs)}return e===rs?o.log('Stage has been disabled, features will be handled via the "features" option.'):o.log(`Using features from Stage ${e}`),e}const ps=Symbol("insertBefore"),cs=Symbol("insertAfter"),ns=Symbol("insertOrder"),ls=Symbol("plugin");function getTransformedInsertions(s,o,e){if("insertBefore"!==e&&"insertAfter"!==e)return[];const t="insertBefore"===e?ps:cs,i=[];for(const e in o){if(!Object.hasOwnProperty.call(o,e))continue;if(!s.find((s=>s.id===e)))continue;let a=o[e];Array.isArray(a)||(a=[a]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,o)=>featureIsLess(s,o)))}const Ns=["and_chr","and_ff","android","chrome","edge","firefox","ie","ios_saf","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const o=[];return Ns.forEach((e=>{if("op_mini"===e&&void 0===s.browser_support[e])return void o.push("op_mini all");const t=s.browser_support[e];"string"==typeof t&&/^[0-9|.]+$/.test(t)?o.push(`${e} < ${s.browser_support[e]}`):o.push(`${e} >= 1`)})),o}function getOptionsForBrowsersByFeature(s,o,e,t,i){switch(o.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(e.find((s=>"is-pseudo-class"===s.id)),s))return i.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(s.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return i.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in t?t.logical:{};default:return{}}}function needsOptionFor(s,o){const e=getUnsupportedBrowsersByFeature(s),i=t(e,{ignoreUnknownVersions:!0});return!!o.some((s=>i.some((o=>o===s))))}function formatPolyfillableFeature(s){const o=getUnsupportedBrowsersByFeature(s);if(s[ps]||s[cs]){let e=s.id;return e=s.insertBefore?`before-${e}`:`after-${e}`,{browsers:o,vendors_implementations:s.vendors_implementations,plugin:s[ls],id:e,stage:rs+1}}return{browsers:o,vendors_implementations:s.vendors_implementations,plugin:hs.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,o,e,t,i,a,r){let p,c;return p=getOptionsForBrowsersByFeature(o,t,s,a,r),!0===e[t.id]?i&&(p=Object.assign({},p,i)):p=i?Object.assign({},p,i,e[t.id]):Object.assign({},p,e[t.id]),p.enableProgressiveCustomProperties=!1,"overflow-wrap-property"===t.id&&"preserve"in p&&(p.method=p.preserve?"copy":"replace"),c=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(p):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(p):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:c,pluginOptions:p,id:t.id}}function intOrZero(s){const o=parseInt(s,10);return Number.isNaN(o)?0:o}function listFeatures(s,o,e,i){const a=Object(o.features),r="enableClientSidePolyfills"in o&&o.enableClientSidePolyfills,p=Object(o.insertBefore),c=Object(o.insertAfter),n=o.browsers?void 0:o.env,l=o.browsers,m=clamp(0,intOrZero(o.minimumVendorImplementations),3);m>0&&i.log(`Using features with ${m} or more vendor implementations`);const u=stageFromOptions(o,i),d=prepareFeaturesList(s,p,c).map((s=>formatPolyfillableFeature(s))).filter((s=>0===m||(!(!s[ps]&&!s[cs])||(m<=s.vendors_implementations||(a[s.id]?(i.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))),f=t(l,{env:n,ignoreUnknownVersions:!0}).filter((s=>Ns.includes(s.split(" ")[0])));return d.filter((s=>{const o=s.stage>=u,e=r||!is.includes(s.id),t=!1===a[s.id],p=a[s.id]?a[s.id]:o&&e;return t?i.log(` ${s.id} has been disabled by options`):o?e||i.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):p?i.log(` ${s.id} does not meet the required stage but has been enabled by options`):i.log(` ${s.id} with stage ${s.stage} has been disabled`),p})).map((t=>formatStagedFeature(s,f,a,t,e,o,i))).filter((s=>{if(s.id in a)return a[s.id];const o=t(s.browsers,{ignoreUnknownVersions:!0}),e=f.some((s=>o.some((o=>o===s))));return e||i.log(`${s.id} disabled due to browser support`),e}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var vs=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"@csstools/postcss-exponential-functions",id:"exponential-functions",importName:"postcssExponentialFunctions"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"@csstools/postcss-gamut-mapping",id:"gamut-mapping",importName:"postcssGamutMapping"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-gradients-interpolation-method",id:"gradients-interpolation-method",importName:"postcssGradientsInterpolationMethod"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"@csstools/postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/postcss-media-minmax",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",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return vs.forEach((o=>{s[o.packageName]=o.id})),s}function pluginIdHelp(s,o,e){const t=vs.map((s=>s.id)),i=vs.map((s=>s.packageName)),a=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const r=[...t.map((o=>[o,levenshteinDistance(s,o)])),...i.map((o=>[a[o],levenshteinDistance(s,o)]))].sort(((s,o)=>s[1]-o[1])).filter((s=>s[1]<10)),p=new Set;for(let s=0;s=3));s++);if(!p.size)return void o.warn(e,`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`);let c='"';c+=Array.from(p).join('", "'),c+='"',o.warn(e,`Unknown feature: "${s}", did you mean one of: ${c}`)}))}function levenshteinDistance(s,o){if(!s.length)return o.length;if(!o.length)return s.length;const e=[];for(let t=0;t<=o.length;t++){e[t]=[t];for(let i=1;i<=s.length;i++)e[t][i]=0===t?i:Math.min(e[t-1][i]+1,e[t][i-1]+1,e[t-1][i-1]+(s[i-1]===o[t-1]?0:1))}return e[o.length][s.length]}const creator=t=>{const i=new Logger,a=Object(t),r=Object.keys(Object(a.features)),p=a.browsers?void 0:a.env,c=a.browsers,n=initializeSharedOptions(a),l=listFeatures(o,a,n,i),m=l.map((s=>s.plugin));!1!==a.autoprefixer&&m.push(s(Object.assign({env:p,overrideBrowserslist:c},a.autoprefixer))),m.push(e()),logFeaturesList(l,a,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:o}){pluginIdHelp(r,s,o),a.debug&&i.dumpLogs(o),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...m,internalPlugin()]}};creator.postcss=!0;export{creator as default}; diff --git a/plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts b/plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts index 600779f0f..4d46682e1 100644 --- a/plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts +++ b/plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts @@ -20,6 +20,7 @@ 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 '../types/postcss-font-variant/plugin-options'; +import type { pluginOptions as postcssGamutMapping } from '@csstools/postcss-gamut-mapping'; import type { pluginOptions as postcssGapProperties } from 'postcss-gap-properties'; import type { pluginOptions as postcssGradientsInterpolationMethod } from '@csstools/postcss-gradients-interpolation-method'; import type { pluginOptions as postcssHasPseudo } from 'css-has-pseudo'; @@ -96,6 +97,8 @@ export type pluginsOptions = { 'font-format-keywords'?: postcssFontFormatKeywords | boolean; /** plugin options for "postcss-font-variant" */ 'font-variant-property'?: postcssFontVariant | boolean; + /** plugin options for "@csstools/postcss-gamut-mapping" */ + 'gamut-mapping'?: postcssGamutMapping | boolean; /** plugin options for "postcss-gap-properties" */ 'gap-properties'?: postcssGapProperties | boolean; /** plugin options for "@csstools/postcss-gradients-interpolation-method" */ diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json index e85018460..0c40a912a 100644 --- a/plugin-packs/postcss-preset-env/package.json +++ b/plugin-packs/postcss-preset-env/package.json @@ -54,6 +54,7 @@ "@csstools/postcss-color-mix-function": "^2.0.6", "@csstools/postcss-exponential-functions": "^1.0.1", "@csstools/postcss-font-format-keywords": "^3.0.0", + "@csstools/postcss-gamut-mapping": "^0.0.0", "@csstools/postcss-gradients-interpolation-method": "^4.0.6", "@csstools/postcss-hwb-function": "^3.0.5", "@csstools/postcss-ic-unit": "^3.0.1", @@ -79,7 +80,7 @@ "css-blank-pseudo": "^6.0.0", "css-has-pseudo": "^6.0.0", "css-prefers-color-scheme": "^9.0.0", - "cssdb": "^7.7.3", + "cssdb": "^7.8.0", "postcss-attribute-case-insensitive": "^6.0.2", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^6.0.1", diff --git a/plugin-packs/postcss-preset-env/scripts/plugins-data.json b/plugin-packs/postcss-preset-env/scripts/plugins-data.json index c7446c943..0853e6984 100644 --- a/plugin-packs/postcss-preset-env/scripts/plugins-data.json +++ b/plugin-packs/postcss-preset-env/scripts/plugins-data.json @@ -99,6 +99,11 @@ "id": "font-variant-property", "importName": "postcssFontVariant" }, + { + "packageName": "@csstools/postcss-gamut-mapping", + "id": "gamut-mapping", + "importName": "postcssGamutMapping" + }, { "packageName": "postcss-gap-properties", "id": "gap-properties", 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 21282fbe2..257e28d17 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 @@ -60,4 +60,6 @@ export default [ 'custom-properties', 'cascade-layers', + + 'gamut-mapping', ]; 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 0091db521..4d7a5155a 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 @@ -20,6 +20,7 @@ import postcssFocusVisible from 'postcss-focus-visible'; import postcssFocusWithin from 'postcss-focus-within'; import postcssFontFormatKeywords from '@csstools/postcss-font-format-keywords'; import postcssFontVariant from 'postcss-font-variant'; +import postcssGamutMapping from '@csstools/postcss-gamut-mapping'; import postcssGapProperties from 'postcss-gap-properties'; import postcssGradientsInterpolationMethod from '@csstools/postcss-gradients-interpolation-method'; import postcssHasPseudo from 'css-has-pseudo'; @@ -77,6 +78,7 @@ export const pluginsById = new Map( ['focus-within-pseudo-class', postcssFocusWithin], ['font-format-keywords', postcssFontFormatKeywords], ['font-variant-property', postcssFontVariant], + ['gamut-mapping', postcssGamutMapping], ['gap-properties', postcssGapProperties], ['gradients-interpolation-method', postcssGradientsInterpolationMethod], ['has-pseudo-class', postcssHasPseudo], 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 5da794d47..e64f3674f 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs @@ -99,6 +99,11 @@ export default [ 'id': 'font-variant-property', 'importName': 'postcssFontVariant', }, + { + 'packageName': '@csstools/postcss-gamut-mapping', + 'id': 'gamut-mapping', + 'importName': 'postcssGamutMapping', + }, { 'packageName': 'postcss-gap-properties', 'id': 'gap-properties', 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 95e77c77b..075ea6552 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts @@ -20,6 +20,7 @@ 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 '../types/postcss-font-variant/plugin-options'; +import type { pluginOptions as postcssGamutMapping } from '@csstools/postcss-gamut-mapping'; import type { pluginOptions as postcssGapProperties } from 'postcss-gap-properties'; import type { pluginOptions as postcssGradientsInterpolationMethod } from '@csstools/postcss-gradients-interpolation-method'; import type { pluginOptions as postcssHasPseudo } from 'css-has-pseudo'; @@ -97,6 +98,8 @@ export type pluginsOptions = { 'font-format-keywords'?: postcssFontFormatKeywords | boolean /** plugin options for "postcss-font-variant" */ 'font-variant-property'?: postcssFontVariant | boolean + /** plugin options for "@csstools/postcss-gamut-mapping" */ + 'gamut-mapping'?: postcssGamutMapping | boolean /** plugin options for "postcss-gap-properties" */ 'gap-properties'?: postcssGapProperties | boolean /** plugin options for "@csstools/postcss-gradients-interpolation-method" */ 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 56d4ab185..3f4d1576d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -431,16 +431,10 @@ color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -450,6 +444,17 @@ color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -567,20 +572,23 @@ color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -595,6 +603,13 @@ } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -604,10 +619,15 @@ color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; 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 56d4ab185..3f4d1576d 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 @@ -431,16 +431,10 @@ color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -450,6 +444,17 @@ color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -567,20 +572,23 @@ color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -595,6 +603,13 @@ } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -604,10 +619,15 @@ color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; 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 08e28a6c2..770970d52 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -344,16 +344,10 @@ color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -363,6 +357,17 @@ color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -479,20 +484,23 @@ color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -507,6 +515,13 @@ } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -516,10 +531,15 @@ color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; 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 30f8ee90f..e63a6165d 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 @@ -344,16 +344,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -363,6 +357,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -477,20 +482,23 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -505,6 +513,13 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -514,10 +529,15 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; 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 53a20dba9..9c26c7caf 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 @@ -344,16 +344,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -363,6 +357,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -471,20 +476,23 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -499,6 +507,13 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -508,10 +523,15 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; 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 53a20dba9..9c26c7caf 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 @@ -344,16 +344,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -363,6 +357,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -471,20 +476,23 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -499,6 +507,13 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -508,10 +523,15 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index 4bfb5691b..12a5dca36 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -448,16 +448,10 @@ color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -467,6 +461,17 @@ color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -586,20 +591,23 @@ color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -614,6 +622,13 @@ } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -623,10 +638,15 @@ color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; 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 61d22b6a2..8f4f9630e 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -348,16 +348,10 @@ color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -367,6 +361,17 @@ color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -480,20 +485,23 @@ color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -508,6 +516,13 @@ } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -517,10 +532,15 @@ color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; 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 c06f4708d..608a3f645 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -343,16 +343,10 @@ color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -362,6 +356,17 @@ color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -475,20 +480,23 @@ color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -503,6 +511,13 @@ } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -512,10 +527,15 @@ color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css index 9ec8d7d40..3cb2e63d6 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css @@ -301,13 +301,19 @@ } .color-function { - prop-1: color(display-p3 0.00000 0.51872 0.36985); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: color(display-p3 0.02472 0.01150 0.00574 / 1); prop-4: color(display-p3 0.02472 0.01150 0.00574 / calc(33 / 22)); prop-5: color(display-p3 1 1 1 1); } +@media (color-gamut: p3) { +.color-function { + prop-1: color(display-p3 0.00000 0.51872 0.36985); +} +} + .oklab { color-1: oklab(40% 0.001236 0.0039); color-2: oklab(40% 0.1236 0.0039 / 1); @@ -331,11 +337,11 @@ color-5: oklch(40% 0.1268735435 34.568626 / 50%); color-6: oklch(60% 0.150 0); - color-7: oklch(60% 0.1250 180); - color-8: oklch(60% 0.1250 180deg); - color-9: oklch(60% 0.1250 0.5turn); - color-10: oklch(60% 0.1250 200grad); - color-11: oklch(60% 0.1250 3.14159rad); + color-7: rgb(0, 149, 131); + color-8: rgb(0, 149, 131); + color-9: rgb(0, 149, 131); + color-10: rgb(0, 149, 131); + color-11: rgb(0, 149, 131); color-12: oklch(60% 0.1250 45); color-13: oklch(60% 0.1250 45deg); @@ -345,6 +351,17 @@ color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: oklch(60% 0.1250 180); + color-8: oklch(60% 0.1250 180deg); + color-9: oklch(60% 0.1250 0.5turn); + color-10: oklch(60% 0.1250 200grad); + color-11: oklch(60% 0.1250 3.14159rad); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2ic; @@ -460,8 +477,15 @@ .gradients-interpolation-method { --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, rgb(255, 157, 133) 0%, rgb(31, 251, 255) 100%); +} + +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } +} .test-css-color-5-interop { color-1: rgb(196, 129, 72); @@ -472,10 +496,15 @@ color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css index affb9c7f2..23c172188 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css @@ -446,16 +446,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -465,6 +459,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -582,20 +587,23 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -610,6 +618,13 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -619,10 +634,15 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; 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 73316e674..488e01a9d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -465,16 +465,10 @@ color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -484,6 +478,17 @@ color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -603,20 +608,23 @@ color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -631,6 +639,13 @@ } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -640,10 +655,15 @@ color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; 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 cba8ea78b..dad612169 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 @@ -446,16 +446,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -465,6 +459,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -584,20 +589,23 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -612,6 +620,13 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -621,10 +636,15 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; 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 87d66baaa..cf6145fe8 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 @@ -430,16 +430,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -449,6 +443,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -564,20 +569,23 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -592,6 +600,13 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -601,10 +616,15 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css index 1dd09130a..86dce0d88 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css @@ -552,16 +552,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -571,6 +565,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -697,12 +702,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); @@ -711,6 +721,11 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: -moz-radial-gradient(50% 115%, farthest-corner circle, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); +} + +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); background-image: -webkit-radial-gradient(50% 115%, farthest-corner circle, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); @@ -718,11 +733,6 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } - -@supports (color: color(display-p3 0 0 0)) { -.gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); -} } .test-css-color-5-interop { @@ -734,10 +744,15 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; 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 8c73d83ae..c3bdace7e 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 @@ -674,7 +674,6 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .color-function { prop-1: rgb(0, 129, 96); - prop-1: color(display-p3 0.00000 0.51872 0.36985); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-3: color(display-p3 0.02472 0.01150 0.00574 / 1); @@ -685,6 +684,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe prop-5: color(display-p3 1 1 1 1); } +@media (color-gamut: p3) { +.color-function { + prop-1: color(display-p3 0.00000 0.51872 0.36985); +} +} + .oklab { color-1: rgb(73, 71, 69); color-1: oklab(40% 0.001236 0.0039); @@ -728,20 +733,14 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - - color-7: oklch(60% 0.1250 180); color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-8: oklch(60% 0.1250 180deg); color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-9: oklch(60% 0.1250 0.5turn); color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-10: oklch(60% 0.1250 200grad); color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); - color-11: oklch(60% 0.1250 3.14159rad); color-12: rgb(188, 101, 59); @@ -757,6 +756,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: oklch(60% 0.1250 180); + color-8: oklch(60% 0.1250 180deg); + color-9: oklch(60% 0.1250 0.5turn); + color-10: oklch(60% 0.1250 200grad); + color-11: oklch(60% 0.1250 3.14159rad); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -979,12 +989,6 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: -moz-radial-gradient(50% 115%, farthest-corner circle, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: -webkit-radial-gradient(50% 115% in oklch, farthest-corner circle, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); - - background-image: -moz-radial-gradient(50% 115% in oklch, farthest-corner circle, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -999,6 +1003,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: -webkit-radial-gradient(50% 115% in oklch, farthest-corner circle, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); + + background-image: -moz-radial-gradient(50% 115% in oklch, farthest-corner circle, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); @@ -1016,11 +1031,16 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-7: lch(from lch(40% 56.6 39) l c h); color-8: rgb(141, 0, 0); color-8: color(display-p3 0.50566 0.0781 0); - color-8: oklab(from oklab(40% 0.566 0.39) l a b); color-9: rgb(130, 31, 0); color-9: color(display-p3 0.48896 0.1211 0); +} + +@media (color-gamut: rec2020) { +.test-css-color-5-interop { + color-8: oklab(from oklab(40% 0.566 0.39) l a b); color-9: oklch(from oklch(40% 0.566 39deg) l c h); } +} .test-property-with-var { --opacity: 1; 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 f20c6be37..c9e2614cf 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -285,13 +285,19 @@ } .color-function { - prop-1: color(display-p3 0.00000 0.51872 0.36985); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: color(display-p3 0.02472 0.01150 0.00574 / 1); prop-4: color(display-p3 0.02472 0.01150 0.00574 / calc(33 / 22)); prop-5: color(display-p3 1 1 1 1); } +@media (color-gamut: p3) { +.color-function { + prop-1: color(display-p3 0.00000 0.51872 0.36985); +} +} + .oklab { color-1: rgb(73, 71, 69); color-2: rgb(121, 34, 67); @@ -316,16 +322,10 @@ color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -335,6 +335,17 @@ color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -450,20 +461,23 @@ color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -478,6 +492,13 @@ } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); @@ -487,10 +508,15 @@ color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; 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 27b177155..92aa90758 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 @@ -346,16 +346,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -365,6 +359,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -476,20 +481,23 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -504,6 +512,13 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -513,10 +528,15 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; 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 c2159b270..3326b5805 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 @@ -341,16 +341,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -360,6 +354,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -471,20 +476,23 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -499,6 +507,13 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -508,10 +523,15 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; 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 4213d5144..d67ddf76e 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -446,16 +446,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -465,6 +459,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -582,20 +587,23 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -610,6 +618,13 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -619,10 +634,15 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; diff --git a/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css b/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css index d87211b21..de085d22e 100644 --- a/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css @@ -339,16 +339,10 @@ color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -358,6 +352,17 @@ color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2ic; @@ -473,20 +478,23 @@ color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -501,6 +509,13 @@ } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -510,10 +525,15 @@ color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css index 1817747c9..168f0a2cf 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css @@ -597,16 +597,10 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -616,6 +610,17 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { --value-2ic: 'something'; text-indent: 2em; 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 aa814d37b..4bdcae800 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 @@ -673,7 +673,6 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n .color-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { prop-1: rgb(0, 129, 96); - prop-1: color(display-p3 0.00000 0.51872 0.36985); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-3: color(display-p3 0.02472 0.01150 0.00574 / 1); @@ -684,6 +683,12 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n prop-5: color(display-p3 1 1 1 1); } +@media (color-gamut: p3){ +.color-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + prop-1: color(display-p3 0.00000 0.51872 0.36985); +} +} + .oklab:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color-1: rgb(73, 71, 69); color-1: oklab(40% 0.001236 0.0039); @@ -727,20 +732,14 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - - color-7: oklch(60% 0.1250 180); color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-8: oklch(60% 0.1250 180deg); color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-9: oklch(60% 0.1250 0.5turn); color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-10: oklch(60% 0.1250 200grad); color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); - color-11: oklch(60% 0.1250 3.14159rad); color-12: rgb(188, 101, 59); @@ -756,6 +755,17 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3){ +.oklch:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + + color-7: oklch(60% 0.1250 180); + color-8: oklch(60% 0.1250 180deg); + color-9: oklch(60% 0.1250 0.5turn); + color-10: oklch(60% 0.1250 200grad); + color-11: oklch(60% 0.1250 3.14159rad); +} +} + .ic-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { --value-2ic: 'something'; text-indent: 2em; diff --git a/plugins/postcss-progressive-color-gamut/.gitignore b/plugins/postcss-gamut-mapping/.gitignore similarity index 100% rename from plugins/postcss-progressive-color-gamut/.gitignore rename to plugins/postcss-gamut-mapping/.gitignore diff --git a/plugins/postcss-progressive-color-gamut/.nvmrc b/plugins/postcss-gamut-mapping/.nvmrc similarity index 100% rename from plugins/postcss-progressive-color-gamut/.nvmrc rename to plugins/postcss-gamut-mapping/.nvmrc diff --git a/plugins/postcss-gamut-mapping/.tape.mjs b/plugins/postcss-gamut-mapping/.tape.mjs new file mode 100644 index 000000000..99dbd92cc --- /dev/null +++ b/plugins/postcss-gamut-mapping/.tape.mjs @@ -0,0 +1,11 @@ +import { postcssTape } from '@csstools/postcss-tape'; +import plugin from '@csstools/postcss-gamut-mapping'; + +postcssTape(plugin)({ + basic: { + message: "supports basic usage", + }, + 'examples/example': { + message: 'minimal example', + }, +}); diff --git a/plugins/postcss-gamut-mapping/CHANGELOG.md b/plugins/postcss-gamut-mapping/CHANGELOG.md new file mode 100644 index 000000000..41837059a --- /dev/null +++ b/plugins/postcss-gamut-mapping/CHANGELOG.md @@ -0,0 +1,5 @@ +# Changes to PostCSS gamut-mapping + +### Unreleased (major) + +- Initial version diff --git a/plugins/postcss-progressive-color-gamut/INSTALL.md b/plugins/postcss-gamut-mapping/INSTALL.md similarity index 55% rename from plugins/postcss-progressive-color-gamut/INSTALL.md rename to plugins/postcss-gamut-mapping/INSTALL.md index d9748ec53..a25ce1907 100644 --- a/plugins/postcss-progressive-color-gamut/INSTALL.md +++ b/plugins/postcss-gamut-mapping/INSTALL.md @@ -1,6 +1,6 @@ -# Installing PostCSS Progressive Color Gamut +# Installing PostCSS Gamut Mapping -[PostCSS Progressive Color Gamut] runs in all Node environments, with special instructions for: +[PostCSS Gamut Mapping] runs in all Node environments, with special instructions for: - [Node](#node) - [PostCSS CLI](#postcss-cli) @@ -14,10 +14,10 @@ ## Node -Add [PostCSS Progressive Color Gamut] to your project: +Add [PostCSS Gamut Mapping] to your project: ```bash -npm install postcss @csstools/postcss-progressive-color-gamut --save-dev +npm install postcss @csstools/postcss-gamut-mapping --save-dev ``` Use it as a [PostCSS] plugin: @@ -25,20 +25,20 @@ Use it as a [PostCSS] plugin: ```js // commonjs const postcss = require('postcss'); -const postcssBasePlugin = require('@csstools/postcss-progressive-color-gamut'); +const postcssGamutMapping = require('@csstools/postcss-gamut-mapping'); postcss([ - postcssBasePlugin(/* pluginOptions */) + postcssGamutMapping(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` ```js // esm import postcss from 'postcss'; -import postcssBasePlugin from '@csstools/postcss-progressive-color-gamut'; +import postcssGamutMapping from '@csstools/postcss-gamut-mapping'; postcss([ - postcssBasePlugin(/* pluginOptions */) + postcssGamutMapping(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -47,17 +47,17 @@ postcss([ Add [PostCSS CLI] to your project: ```bash -npm install postcss-cli @csstools/postcss-progressive-color-gamut --save-dev +npm install postcss-cli @csstools/postcss-gamut-mapping --save-dev ``` -Use [PostCSS Progressive Color Gamut] in your `postcss.config.js` configuration file: +Use [PostCSS Gamut Mapping] in your `postcss.config.js` configuration file: ```js -const postcssBasePlugin = require('@csstools/postcss-progressive-color-gamut'); +const postcssGamutMapping = require('@csstools/postcss-gamut-mapping'); module.exports = { plugins: [ - postcssBasePlugin(/* pluginOptions */) + postcssGamutMapping(/* pluginOptions */) ] } ``` @@ -67,7 +67,7 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). ```bash -npm install @csstools/postcss-progressive-color-gamut --save-dev +npm install @csstools/postcss-gamut-mapping --save-dev ``` `package.json`: @@ -76,7 +76,7 @@ npm install @csstools/postcss-progressive-color-gamut --save-dev { "postcss": { "plugins": { - "@csstools/postcss-progressive-color-gamut": {} + "@csstools/postcss-gamut-mapping": {} } } } @@ -87,7 +87,7 @@ npm install @csstools/postcss-progressive-color-gamut --save-dev ```json { "plugins": { - "@csstools/postcss-progressive-color-gamut": {} + "@csstools/postcss-gamut-mapping": {} } } ``` @@ -101,10 +101,10 @@ _Webpack version 5_ Add [PostCSS Loader] to your project: ```bash -npm install postcss-loader @csstools/postcss-progressive-color-gamut --save-dev +npm install postcss-loader @csstools/postcss-gamut-mapping --save-dev ``` -Use [PostCSS Progressive Color Gamut] in your Webpack configuration: +Use [PostCSS Gamut Mapping] in your Webpack configuration: ```js module.exports = { @@ -125,7 +125,7 @@ module.exports = { plugins: [ // Other plugins, [ - "@csstools/postcss-progressive-color-gamut", + "@csstools/postcss-gamut-mapping", { // Options }, @@ -146,15 +146,15 @@ module.exports = { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) ```bash -npm install @csstools/postcss-progressive-color-gamut --save-dev +npm install @csstools/postcss-gamut-mapping --save-dev ``` -Use [PostCSS Progressive Color Gamut] in your `postcss.config.json` file: +Use [PostCSS Gamut Mapping] in your `postcss.config.json` file: ```json { "plugins": [ - "@csstools/postcss-progressive-color-gamut" + "@csstools/postcss-gamut-mapping" ] } ``` @@ -163,7 +163,7 @@ Use [PostCSS Progressive Color Gamut] in your `postcss.config.json` file: { "plugins": [ [ - "@csstools/postcss-progressive-color-gamut", + "@csstools/postcss-gamut-mapping", { // Optionally add plugin options } @@ -177,18 +177,18 @@ Use [PostCSS Progressive Color Gamut] in your `postcss.config.json` file: Add [Gulp PostCSS] to your project: ```bash -npm install gulp-postcss @csstools/postcss-progressive-color-gamut --save-dev +npm install gulp-postcss @csstools/postcss-gamut-mapping --save-dev ``` -Use [PostCSS Progressive Color Gamut] in your Gulpfile: +Use [PostCSS Gamut Mapping] in your Gulpfile: ```js const postcss = require('gulp-postcss'); -const postcssBasePlugin = require('@csstools/postcss-progressive-color-gamut'); +const postcssGamutMapping = require('@csstools/postcss-gamut-mapping'); gulp.task('css', function () { var plugins = [ - postcssBasePlugin(/* pluginOptions */) + postcssGamutMapping(/* pluginOptions */) ]; return gulp.src('./src/*.css') @@ -202,13 +202,13 @@ gulp.task('css', function () { Add [Grunt PostCSS] to your project: ```bash -npm install grunt-postcss @csstools/postcss-progressive-color-gamut --save-dev +npm install grunt-postcss @csstools/postcss-gamut-mapping --save-dev ``` -Use [PostCSS Progressive Color Gamut] in your Gruntfile: +Use [PostCSS Gamut Mapping] in your Gruntfile: ```js -const postcssBasePlugin = require('@csstools/postcss-progressive-color-gamut'); +const postcssGamutMapping = require('@csstools/postcss-gamut-mapping'); grunt.loadNpmTasks('grunt-postcss'); @@ -216,7 +216,7 @@ grunt.initConfig({ postcss: { options: { processors: [ - postcssBasePlugin(/* pluginOptions */) + postcssGamutMapping(/* pluginOptions */) ] }, dist: { @@ -231,5 +231,5 @@ grunt.initConfig({ [PostCSS]: https://github.com/postcss/postcss [PostCSS CLI]: https://github.com/postcss/postcss-cli [PostCSS Loader]: https://github.com/postcss/postcss-loader -[PostCSS Progressive Color Gamut]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-color-gamut +[PostCSS Gamut Mapping]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gamut-mapping [Next.js]: https://nextjs.org diff --git a/plugins/postcss-progressive-color-gamut/LICENSE.md b/plugins/postcss-gamut-mapping/LICENSE.md similarity index 100% rename from plugins/postcss-progressive-color-gamut/LICENSE.md rename to plugins/postcss-gamut-mapping/LICENSE.md diff --git a/plugins/postcss-gamut-mapping/README.md b/plugins/postcss-gamut-mapping/README.md new file mode 100644 index 000000000..9b98466bf --- /dev/null +++ b/plugins/postcss-gamut-mapping/README.md @@ -0,0 +1,68 @@ +# PostCSS Gamut Mapping [][PostCSS] + +[][npm-url] [][css-url] [][cli-url] [][discord] + +```bash +npm install @csstools/postcss-gamut-mapping --save-dev +``` + +[PostCSS Gamut Mapping] lets you use wide gamut colors with gamut mapping for specific displays following the [CSS Color 4 Specification]. + +```pcss +p { + background-color: oklch(80% 0.05 0.39 / 0.5); + color: oklch(20% 0.234 0.39 / 0.5); +} + +/* becomes */ + +p { + background-color: oklch(80% 0.05 0.39 / 0.5); + color: rgba(50, 0, 20, 0.5); +} + +@media (color-gamut: rec2020) { +p { + color: oklch(20% 0.234 0.39 / 0.5); +} +} +``` + +## Usage + +Add [PostCSS Gamut Mapping] to your project: + +```bash +npm install postcss @csstools/postcss-gamut-mapping --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +const postcss = require('postcss'); +const postcssGamutMapping = require('@csstools/postcss-gamut-mapping'); + +postcss([ + postcssGamutMapping(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +[PostCSS Gamut Mapping] runs in all Node environments, with special +instructions for: + +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) +- [Webpack](INSTALL.md#webpack) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) + +[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test +[css-url]: https://cssdb.org/#gamut-mapping +[discord]: https://discord.gg/bUadyRwkJS +[npm-url]: https://www.npmjs.com/package/@csstools/postcss-gamut-mapping + +[PostCSS]: https://github.com/postcss/postcss +[PostCSS Gamut Mapping]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gamut-mapping +[CSS Color 4 Specification]: https://www.w3.org/TR/css-color-4/#gamut-mapping diff --git a/plugins/postcss-gamut-mapping/dist/has-conditional-ancestor.d.ts b/plugins/postcss-gamut-mapping/dist/has-conditional-ancestor.d.ts new file mode 100644 index 000000000..7c0862708 --- /dev/null +++ b/plugins/postcss-gamut-mapping/dist/has-conditional-ancestor.d.ts @@ -0,0 +1,2 @@ +import type { Node } from 'postcss'; +export declare function hasConditionalAncestor(node: Node): boolean; diff --git a/plugins/postcss-gamut-mapping/dist/has-override-decl.d.ts b/plugins/postcss-gamut-mapping/dist/has-override-decl.d.ts new file mode 100644 index 000000000..e98c4f8ab --- /dev/null +++ b/plugins/postcss-gamut-mapping/dist/has-override-decl.d.ts @@ -0,0 +1,5 @@ +import type { Declaration } from 'postcss'; +export declare function hasOverrideOrFallback(node: Declaration): { + hasOverride: boolean; + hasFallback: boolean; +}; diff --git a/plugins/postcss-gamut-mapping/dist/index.cjs b/plugins/postcss-gamut-mapping/dist/index.cjs new file mode 100644 index 000000000..832691efc --- /dev/null +++ b/plugins/postcss-gamut-mapping/dist/index.cjs @@ -0,0 +1 @@ +"use strict";var e=require("@csstools/css-tokenizer"),o=require("@csstools/css-parser-algorithms"),a=require("@csstools/css-color-parser");const t=/\bcolor-gamut\b/i;function hasConditionalAncestor(e){let o=e.parent;for(;o;)if("atrule"===o.type){if("media"===o.name.toLowerCase()&&t.test(o.params))return!0;o=o.parent}else o=o.parent;return!1}function hasOverrideOrFallback(e){var o;const a=e.prop.toLowerCase();let t=!1,r=!1;const s=(null==(o=e.parent)?void 0:o.nodes)??[],n=s.indexOf(e);for(let e=0;e({postcssPlugin:"postcss-gamut-mapping",prepare(){const t=new WeakMap;return{OnceExit:(n,{postcss:l})=>{n.walkDecls((n=>{const i=n.value;if(!r.test(i))return;if(!n.parent||hasConditionalAncestor(n))return;const{hasOverride:c,hasFallback:u}=hasOverrideOrFallback(n);if(c)return;const p=t.get(n.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{media:void 0},lastConditionalRule:void 0};t.set(n.parent,p);let d=!1;const m=o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(e.tokenize({css:i})),(e=>{if(o.isFunctionNode(e)&&s.test(e.getName())){const o=a.color(e);if(!o)return;if(o.syntaxFlags.has(a.SyntaxFlag.HasNoneKeywords))return;if(a.colorDataFitsRGB_Gamut(o))return;return d||a.colorDataFitsDisplayP3_Gamut(o)||(d=!0),a.serializeRGB(o,!0)}})),f=o.stringify(m);if(f===i)return;const h=`(color-gamut: ${d?"rec2020":"p3"})`;if(p.lastConditionParams.media!==h&&(p.lastConditionalRule=void 0),p.lastConditionalRule)return u||n.cloneBefore({value:f}),p.lastConditionalRule.append(n.clone()),void n.remove();u||n.cloneBefore({value:f});const v=l.atRule({name:"media",params:h,source:n.parent.source,raws:{before:"\n\n",after:"\n"}}),C=n.parent.clone();C.removeAll(),C.raws.before="\n",C.append(n.clone()),n.remove(),p.lastConditionParams.media=v.params,p.lastConditionalRule=C,v.append(C),p.conditionalRules.push(v)})),n.walk((e=>{const o=t.get(e);o&&0!==o.conditionalRules.length&&o.conditionalRules.reverse().forEach((o=>{e.after(o)}))}))}}}});creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-gamut-mapping/dist/index.d.ts b/plugins/postcss-gamut-mapping/dist/index.d.ts new file mode 100644 index 000000000..cf42343c3 --- /dev/null +++ b/plugins/postcss-gamut-mapping/dist/index.d.ts @@ -0,0 +1,5 @@ +import type { PluginCreator } from 'postcss'; +/** postcss-gamut-mapping plugin options */ +export type pluginOptions = never; +declare const creator: PluginCreator; +export default creator; diff --git a/plugins/postcss-gamut-mapping/dist/index.mjs b/plugins/postcss-gamut-mapping/dist/index.mjs new file mode 100644 index 000000000..2ad737535 --- /dev/null +++ b/plugins/postcss-gamut-mapping/dist/index.mjs @@ -0,0 +1 @@ +import{tokenize as e}from"@csstools/css-tokenizer";import{replaceComponentValues as o,parseCommaSeparatedListOfComponentValues as t,isFunctionNode as a,stringify as r}from"@csstools/css-parser-algorithms";import{color as n,SyntaxFlag as s,colorDataFitsRGB_Gamut as l,colorDataFitsDisplayP3_Gamut as i,serializeRGB as c}from"@csstools/css-color-parser";const p=/\bcolor-gamut\b/i;function hasConditionalAncestor(e){let o=e.parent;for(;o;)if("atrule"===o.type){if("media"===o.name.toLowerCase()&&p.test(o.params))return!0;o=o.parent}else o=o.parent;return!1}function hasOverrideOrFallback(e){var o;const t=e.prop.toLowerCase();let a=!1,r=!1;const n=(null==(o=e.parent)?void 0:o.nodes)??[],s=n.indexOf(e);for(let e=0;e({postcssPlugin:"postcss-gamut-mapping",prepare(){const p=new WeakMap;return{OnceExit:(f,{postcss:m})=>{f.walkDecls((f=>{const h=f.value;if(!u.test(h))return;if(!f.parent||hasConditionalAncestor(f))return;const{hasOverride:v,hasFallback:b}=hasOverrideOrFallback(f);if(v)return;const k=p.get(f.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{media:void 0},lastConditionalRule:void 0};p.set(f.parent,k);let C=!1;const g=o(t(e({css:h})),(e=>{if(a(e)&&d.test(e.getName())){const o=n(e);if(!o)return;if(o.syntaxFlags.has(s.HasNoneKeywords))return;if(l(o))return;return C||i(o)||(C=!0),c(o,!0)}})),w=r(g);if(w===h)return;const R=`(color-gamut: ${C?"rec2020":"p3"})`;if(k.lastConditionParams.media!==R&&(k.lastConditionalRule=void 0),k.lastConditionalRule)return b||f.cloneBefore({value:w}),k.lastConditionalRule.append(f.clone()),void f.remove();b||f.cloneBefore({value:w});const O=m.atRule({name:"media",params:R,source:f.parent.source,raws:{before:"\n\n",after:"\n"}}),F=f.parent.clone();F.removeAll(),F.raws.before="\n",F.append(f.clone()),f.remove(),k.lastConditionParams.media=O.params,k.lastConditionalRule=F,O.append(F),k.conditionalRules.push(O)})),f.walk((e=>{const o=p.get(e);o&&0!==o.conditionalRules.length&&o.conditionalRules.reverse().forEach((o=>{e.after(o)}))}))}}}});creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-progressive-color-gamut/docs/README.md b/plugins/postcss-gamut-mapping/docs/README.md similarity index 64% rename from plugins/postcss-progressive-color-gamut/docs/README.md rename to plugins/postcss-gamut-mapping/docs/README.md index 000652492..f7f2dec54 100644 --- a/plugins/postcss-progressive-color-gamut/docs/README.md +++ b/plugins/postcss-gamut-mapping/docs/README.md @@ -16,7 +16,7 @@

-[] lets you easily create new plugins following some [CSS Specification]. +[] lets you use wide gamut colors with gamut mapping for specific displays following the [CSS Color 4 Specification]. ```pcss @@ -30,24 +30,5 @@ -## Options - -### preserve - -The `preserve` option determines whether the original notation -is preserved. By default, it is not preserved. - -```js -({ preserve: true }) -``` - -```pcss - - -/* becomes */ - - -``` - -[CSS Specification]: +[CSS Color 4 Specification]: diff --git a/plugins/postcss-progressive-color-gamut/package.json b/plugins/postcss-gamut-mapping/package.json similarity index 72% rename from plugins/postcss-progressive-color-gamut/package.json rename to plugins/postcss-gamut-mapping/package.json index 79ceea6f4..756d9a117 100644 --- a/plugins/postcss-progressive-color-gamut/package.json +++ b/plugins/postcss-gamut-mapping/package.json @@ -1,6 +1,6 @@ { - "name": "@csstools/postcss-progressive-color-gamut", - "description": "TODO: Add description for Progressive Color Gamut", + "name": "@csstools/postcss-gamut-mapping", + "description": "Gamut map css colors to fit display specific gamuts", "version": "0.0.0", "contributors": [ { @@ -44,6 +44,11 @@ "README.md", "dist" ], + "dependencies": { + "@csstools/css-color-parser": "^1.3.3", + "@csstools/css-parser-algorithms": "2.3.2", + "@csstools/css-tokenizer": "^2.2.1" + }, "peerDependencies": { "postcss": "^8.4" }, @@ -58,23 +63,23 @@ "test": "node .tape.mjs && 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-gamut-mapping#readme", "repository": { "type": "git", "url": "https://github.com/csstools/postcss-plugins.git", - "directory": "plugins/postcss-progressive-color-gamut" + "directory": "plugins/postcss-gamut-mapping" }, + "bugs": "https://github.com/csstools/postcss-plugins/issues", "keywords": [ "postcss-plugin" ], "csstools": { - "cssdbId": "TODO", - "exportName": "postcssProgressiveColorGamut", - "humanReadableName": "PostCSS Progressive Color Gamut", - "specUrl": "#TODO" + "cssdbId": "gamut-mapping", + "exportName": "postcssGamutMapping", + "humanReadableName": "PostCSS Gamut Mapping", + "specUrl": "https://www.w3.org/TR/css-color-4/#gamut-mapping" }, "volta": { "extends": "../../package.json" - }, - "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-color-gamut#readme", - "bugs": "https://github.com/csstools/postcss-plugins/issues" -} \ No newline at end of file + } +} diff --git a/plugins/postcss-gamut-mapping/src/has-conditional-ancestor.ts b/plugins/postcss-gamut-mapping/src/has-conditional-ancestor.ts new file mode 100644 index 000000000..be9e6679e --- /dev/null +++ b/plugins/postcss-gamut-mapping/src/has-conditional-ancestor.ts @@ -0,0 +1,24 @@ +import type { Node, AtRule } from 'postcss'; + +const HAS_COLOR_GAMUT = /\bcolor-gamut\b/i; + +export function hasConditionalAncestor(node: Node): boolean { + let parent = node.parent; + while (parent) { + if (parent.type !== 'atrule') { + parent = parent.parent; + continue; + } + + if ( + (parent as AtRule).name.toLowerCase() === 'media' && + HAS_COLOR_GAMUT.test((parent as AtRule).params) + ) { + return true; + } + + parent = parent.parent; + } + + return false; +} diff --git a/plugins/postcss-gamut-mapping/src/has-override-decl.ts b/plugins/postcss-gamut-mapping/src/has-override-decl.ts new file mode 100644 index 000000000..f93fa69f2 --- /dev/null +++ b/plugins/postcss-gamut-mapping/src/has-override-decl.ts @@ -0,0 +1,33 @@ +import type { Declaration } from 'postcss'; + +export function hasOverrideOrFallback(node: Declaration): { hasOverride: boolean, hasFallback: boolean } { + const nodeProp = node.prop.toLowerCase(); + + let hasOverride = false; + let hasFallback = false; + + const nodes = node.parent?.nodes ?? []; + const index = nodes.indexOf(node); + + for (let i = 0; i < nodes.length; i++) { + if (i === index) { + continue; + } + + const sibling = nodes[i]; + if (sibling.type === 'decl' && sibling.prop.toLowerCase() === nodeProp) { + if (i < index) { + hasFallback = true; + i = index; + } else { + hasOverride = true; + break; + } + } + } + + return { + hasOverride, + hasFallback, + }; +} diff --git a/plugins/postcss-gamut-mapping/src/index.ts b/plugins/postcss-gamut-mapping/src/index.ts new file mode 100644 index 000000000..82de82e36 --- /dev/null +++ b/plugins/postcss-gamut-mapping/src/index.ts @@ -0,0 +1,165 @@ +import type { AtRule, Container, Node, PluginCreator } from 'postcss'; +import { hasConditionalAncestor } from './has-conditional-ancestor'; +import { tokenize } from '@csstools/css-tokenizer'; +import { isFunctionNode, parseCommaSeparatedListOfComponentValues, replaceComponentValues, stringify } from '@csstools/css-parser-algorithms'; +import { SyntaxFlag, color, colorDataFitsDisplayP3_Gamut, colorDataFitsRGB_Gamut, serializeRGB } from '@csstools/css-color-parser'; +import { hasOverrideOrFallback } from './has-override-decl'; + +/** postcss-gamut-mapping plugin options */ +export type pluginOptions = never; + +const HAS_WIDE_GAMUT_COLOR_FUNCTION = /\b(?:color|lab|lch|oklab|oklch)\(/i; +const HAS_WIDE_GAMUT_COLOR_NAME = /^(?:color|lab|lch|oklab|oklch)$/i; + +type State = { + conditionalRules: Array, + propNames: Set, + lastConditionParams: { + media: string | undefined, + }, + lastConditionalRule: Container | undefined, +} + +const creator: PluginCreator = () => { + + return { + postcssPlugin: 'postcss-gamut-mapping', + prepare() { + const states = new WeakMap(); + + return { + OnceExit: (root, { postcss }) => { + root.walkDecls((decl) => { + const originalValue = decl.value; + if (!HAS_WIDE_GAMUT_COLOR_FUNCTION.test(originalValue)) { + return; + } + + if (!decl.parent || hasConditionalAncestor(decl)) { + return; + } + + const { hasOverride, hasFallback } = hasOverrideOrFallback(decl); + if (hasOverride) { + return; + } + + const state = states.get(decl.parent) || { + conditionalRules: [], + propNames: new Set(), + lastConditionParams: { + media: undefined, + }, + lastConditionalRule: undefined, + }; + + states.set(decl.parent, state); + + let isRec2020 = false; + + const replacedRGB = replaceComponentValues( + parseCommaSeparatedListOfComponentValues(tokenize({ css: originalValue })), + (componentValue) => { + if (isFunctionNode(componentValue) && HAS_WIDE_GAMUT_COLOR_NAME.test(componentValue.getName())) { + const colorData = color(componentValue); + if (!colorData) { + return; + } + + if (colorData.syntaxFlags.has(SyntaxFlag.HasNoneKeywords)) { + return; + } + + if (colorDataFitsRGB_Gamut(colorData)) { + return; + } + + if (!isRec2020 && !colorDataFitsDisplayP3_Gamut(colorData)) { + isRec2020 = true; + } + + return serializeRGB(colorData, true); + } + }, + ); + + const modifiedRGB = stringify(replacedRGB); + if (modifiedRGB === originalValue) { + return; + } + + const condition = `(color-gamut: ${isRec2020 ? 'rec2020' : 'p3'})`; + + if (state.lastConditionParams.media !== condition) { + state.lastConditionalRule = undefined; + } + + if (state.lastConditionalRule) { + if (!hasFallback) { + decl.cloneBefore({ + value: modifiedRGB, + }); + } + + state.lastConditionalRule.append(decl.clone()); + + decl.remove(); + return; + } + + if (!hasFallback) { + decl.cloneBefore({ + value: modifiedRGB, + }); + } + + const atRule = postcss.atRule({ + name: 'media', + params: condition, + source: decl.parent.source, + raws: { + before: '\n\n', + after: '\n', + }, + }); + + const parentClone = decl.parent.clone(); + parentClone.removeAll(); + + parentClone.raws.before = '\n'; + + parentClone.append(decl.clone()); + decl.remove(); + + state.lastConditionParams.media = atRule.params; + state.lastConditionalRule = parentClone; + + atRule.append(parentClone); + state.conditionalRules.push(atRule); + }); + + root.walk((node) => { + const state = states.get(node); + if (!state) { + return; + } + + if (state.conditionalRules.length === 0) { + return; + } + + // rule.after reverses the at rule order. + // reversing the call order gives in the correct order overall. + state.conditionalRules.reverse().forEach((atSupports) => { + node.after(atSupports); + }); + }); + }, + }; + }, + }; +}; + +creator.postcss = true; + +export default creator; diff --git a/plugins/postcss-progressive-color-gamut/test/_import.mjs b/plugins/postcss-gamut-mapping/test/_import.mjs similarity index 72% rename from plugins/postcss-progressive-color-gamut/test/_import.mjs rename to plugins/postcss-gamut-mapping/test/_import.mjs index ef7f23ae9..3c6f7f396 100644 --- a/plugins/postcss-progressive-color-gamut/test/_import.mjs +++ b/plugins/postcss-gamut-mapping/test/_import.mjs @@ -1,5 +1,5 @@ import assert from 'assert'; -import plugin from '@csstools/postcss-progressive-color-gamut'; +import plugin from '@csstools/postcss-gamut-mapping'; plugin(); assert.ok(plugin.postcss, 'should have "postcss flag"'); diff --git a/plugins/postcss-progressive-color-gamut/test/_require.cjs b/plugins/postcss-gamut-mapping/test/_require.cjs similarity index 71% rename from plugins/postcss-progressive-color-gamut/test/_require.cjs rename to plugins/postcss-gamut-mapping/test/_require.cjs index f8d5ec8fa..bcfe66bba 100644 --- a/plugins/postcss-progressive-color-gamut/test/_require.cjs +++ b/plugins/postcss-gamut-mapping/test/_require.cjs @@ -1,5 +1,5 @@ const assert = require('assert'); -const plugin = require('@csstools/postcss-progressive-color-gamut'); +const plugin = require('@csstools/postcss-gamut-mapping'); plugin(); assert.ok(plugin.postcss, 'should have "postcss flag"'); diff --git a/plugins/postcss-gamut-mapping/test/basic.css b/plugins/postcss-gamut-mapping/test/basic.css new file mode 100644 index 000000000..f0e8f08fd --- /dev/null +++ b/plugins/postcss-gamut-mapping/test/basic.css @@ -0,0 +1,30 @@ +:root { + --a-color: oklch(40% 0.05 0.39 / var(--opacity-50)); + --b-color: oklch(40% 0.234 0.39 / var(--opacity-50)); +} + +.oklch { + color-1: oklch(40% 0.1268735435 34.568626); + color-2: oklch(40% 0.1268735435 34.568626 / 1); + color-3: oklch(40% 0.1268735435 34.568626 / .5); + color-4: oklch(40% 0.1268735435 34.568626 / 100%); + color-5: oklch(40% 0.1268735435 34.568626 / 50%); + color-6: oklch(60% 0.150 0); + + @supports (color: oklch(60% 0.1250 180)) { + color-7: oklch(60% 0.1250 180); + color-8: oklch(60% 0.1250 180deg); + color-9: oklch(60% 0.1250 0.5turn); + color-10: oklch(60% 0.1250 200grad); + color-11: oklch(60% 0.1250 3.14159rad); + } + + @media (prefers-color-scheme: dark) { + color-12: oklch(60% 0.1250 45); + color-13: oklch(60% 0.1250 45deg); + color-14: oklch(60% 0.1250 0.125turn); + color-15: oklch(60% 0.1250 50grad); + color-16: oklch(60% 0.1250 0.785398rad); + color-17: oklch(60% 0.1250 0.785398unknown); + } +} diff --git a/plugins/postcss-gamut-mapping/test/basic.expect.css b/plugins/postcss-gamut-mapping/test/basic.expect.css new file mode 100644 index 000000000..f54d5e0eb --- /dev/null +++ b/plugins/postcss-gamut-mapping/test/basic.expect.css @@ -0,0 +1,46 @@ +:root { + --a-color: oklch(40% 0.05 0.39 / var(--opacity-50)); + --b-color: rgba(138, 0, 67, var(--opacity-50)); +} + +@media (color-gamut: rec2020) { +:root { + --b-color: oklch(40% 0.234 0.39 / var(--opacity-50)); +} +} + +.oklch { + color-1: oklch(40% 0.1268735435 34.568626); + color-2: oklch(40% 0.1268735435 34.568626 / 1); + color-3: oklch(40% 0.1268735435 34.568626 / .5); + color-4: oklch(40% 0.1268735435 34.568626 / 100%); + color-5: oklch(40% 0.1268735435 34.568626 / 50%); + color-6: oklch(60% 0.150 0); + + @supports (color: oklch(60% 0.1250 180)) { + color-7: rgb(0, 149, 131); + color-8: rgb(0, 149, 131); + color-9: rgb(0, 149, 131); + color-10: rgb(0, 149, 131); + color-11: rgb(0, 149, 131); + } + +@media (color-gamut: p3) { +@supports (color: oklch(60% 0.1250 180)) { + color-7: oklch(60% 0.1250 180); + color-8: oklch(60% 0.1250 180deg); + color-9: oklch(60% 0.1250 0.5turn); + color-10: oklch(60% 0.1250 200grad); + color-11: oklch(60% 0.1250 3.14159rad); + } +} + + @media (prefers-color-scheme: dark) { + color-12: oklch(60% 0.1250 45); + color-13: oklch(60% 0.1250 45deg); + color-14: oklch(60% 0.1250 0.125turn); + color-15: oklch(60% 0.1250 50grad); + color-16: oklch(60% 0.1250 0.785398rad); + color-17: oklch(60% 0.1250 0.785398unknown); + } +} diff --git a/plugins/postcss-gamut-mapping/test/examples/example.css b/plugins/postcss-gamut-mapping/test/examples/example.css new file mode 100644 index 000000000..322f3e5aa --- /dev/null +++ b/plugins/postcss-gamut-mapping/test/examples/example.css @@ -0,0 +1,4 @@ +p { + background-color: oklch(80% 0.05 0.39 / 0.5); + color: oklch(20% 0.234 0.39 / 0.5); +} diff --git a/plugins/postcss-gamut-mapping/test/examples/example.expect.css b/plugins/postcss-gamut-mapping/test/examples/example.expect.css new file mode 100644 index 000000000..256dc3fc1 --- /dev/null +++ b/plugins/postcss-gamut-mapping/test/examples/example.expect.css @@ -0,0 +1,10 @@ +p { + background-color: oklch(80% 0.05 0.39 / 0.5); + color: rgba(50, 0, 20, 0.5); +} + +@media (color-gamut: rec2020) { +p { + color: oklch(20% 0.234 0.39 / 0.5); +} +} diff --git a/plugins/postcss-progressive-color-gamut/tsconfig.json b/plugins/postcss-gamut-mapping/tsconfig.json similarity index 100% rename from plugins/postcss-progressive-color-gamut/tsconfig.json rename to plugins/postcss-gamut-mapping/tsconfig.json diff --git a/plugins/postcss-progressive-color-gamut/.tape.mjs b/plugins/postcss-progressive-color-gamut/.tape.mjs deleted file mode 100644 index 850ab116c..000000000 --- a/plugins/postcss-progressive-color-gamut/.tape.mjs +++ /dev/null @@ -1,27 +0,0 @@ -import { postcssTape } from '@csstools/postcss-tape'; -import plugin from '@csstools/postcss-progressive-color-gamut'; - -postcssTape(plugin)({ - basic: { - message: "supports basic usage", - }, - 'basic:color': { - message: "supports { color: '' }", - options: { - color: 'purple' - } - }, - document: { - postcssSyntaxHTML: true, - message: "supports document usage", - }, - 'examples/example': { - message: 'minimal example', - }, - 'examples/example:preserve-true': { - message: 'minimal example', - options: { - preserve: true - } - }, -}); diff --git a/plugins/postcss-progressive-color-gamut/CHANGELOG.md b/plugins/postcss-progressive-color-gamut/CHANGELOG.md deleted file mode 100644 index 86b037dc4..000000000 --- a/plugins/postcss-progressive-color-gamut/CHANGELOG.md +++ /dev/null @@ -1,5 +0,0 @@ -# Changes to PostCSS Progressive Color Gamut - -### Unreleased (major) - -- Initial version diff --git a/plugins/postcss-progressive-color-gamut/README.md b/plugins/postcss-progressive-color-gamut/README.md deleted file mode 100644 index a9a984325..000000000 --- a/plugins/postcss-progressive-color-gamut/README.md +++ /dev/null @@ -1,96 +0,0 @@ -# PostCSS Progressive Color Gamut [][PostCSS] - -[][npm-url] [][css-url] [][cli-url] [][discord] - -[PostCSS Progressive Color Gamut] lets you easily create new plugins following some [CSS Specification]. - -```pcss -.foo { - color: red; -} - -.baz { - color: green; -} - -/* becomes */ - -.foo { - color: blue; -} - -.baz { - color: green; -} -``` - -## Usage - -Add [PostCSS Progressive Color Gamut] to your project: - -```bash -npm install postcss @csstools/postcss-progressive-color-gamut --save-dev -``` - -Use it as a [PostCSS] plugin: - -```js -const postcss = require('postcss'); -const postcssBasePlugin = require('@csstools/postcss-progressive-color-gamut'); - -postcss([ - postcssBasePlugin(/* pluginOptions */) -]).process(YOUR_CSS /*, processOptions */); -``` - -[PostCSS Progressive Color Gamut] runs in all Node environments, with special -instructions for: - -- [Node](INSTALL.md#node) -- [PostCSS CLI](INSTALL.md#postcss-cli) -- [PostCSS Load Config](INSTALL.md#postcss-load-config) -- [Webpack](INSTALL.md#webpack) -- [Next.js](INSTALL.md#nextjs) -- [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 -postcssBasePlugin({ preserve: true }) -``` - -```pcss -.foo { - color: red; -} - -.baz { - color: green; -} - -/* becomes */ - -.foo { - color: blue; - color: red; -} - -.baz { - color: green; -} -``` - -[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test -[css-url]: https://cssdb.org/#TODO -[discord]: https://discord.gg/bUadyRwkJS -[npm-url]: https://www.npmjs.com/package/@csstools/postcss-progressive-color-gamut - -[PostCSS]: https://github.com/postcss/postcss -[PostCSS Progressive Color Gamut]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-color-gamut -[CSS Specification]: #TODO diff --git a/plugins/postcss-progressive-color-gamut/dist/index.cjs b/plugins/postcss-progressive-color-gamut/dist/index.cjs deleted file mode 100644 index fe4f8e59a..000000000 --- a/plugins/postcss-progressive-color-gamut/dist/index.cjs +++ /dev/null @@ -1 +0,0 @@ -"use strict";const creator=e=>{const r=Object.assign({color:null,preserve:!1},e);return{postcssPlugin:"postcss-progressive-color-gamut",Declaration(e){if("red"===e.value){let o="blue";if(r.color&&(o=r.color),o===e.value)return;if(e.cloneBefore({prop:"color",value:o}),r.preserve)return;e.remove()}}}};creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-progressive-color-gamut/dist/index.d.ts b/plugins/postcss-progressive-color-gamut/dist/index.d.ts deleted file mode 100644 index ceec75627..000000000 --- a/plugins/postcss-progressive-color-gamut/dist/index.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { PluginCreator } from 'postcss'; -/** postcss-progressive-color-gamut plugin options */ -export type pluginOptions = { - /** Preserve the original notation. default: false */ - preserve?: boolean; - /** Replacement color */ - color?: string; -}; -declare const creator: PluginCreator; -export default creator; diff --git a/plugins/postcss-progressive-color-gamut/dist/index.mjs b/plugins/postcss-progressive-color-gamut/dist/index.mjs deleted file mode 100644 index 6d56b9e37..000000000 --- a/plugins/postcss-progressive-color-gamut/dist/index.mjs +++ /dev/null @@ -1 +0,0 @@ -const creator=e=>{const r=Object.assign({color:null,preserve:!1},e);return{postcssPlugin:"postcss-progressive-color-gamut",Declaration(e){if("red"===e.value){let o="blue";if(r.color&&(o=r.color),o===e.value)return;if(e.cloneBefore({prop:"color",value:o}),r.preserve)return;e.remove()}}}};creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-progressive-color-gamut/src/index.ts b/plugins/postcss-progressive-color-gamut/src/index.ts deleted file mode 100644 index 5bd3a3d26..000000000 --- a/plugins/postcss-progressive-color-gamut/src/index.ts +++ /dev/null @@ -1,57 +0,0 @@ -import type { PluginCreator } from 'postcss'; - -/** postcss-progressive-color-gamut plugin options */ -export type pluginOptions = { - /** Preserve the original notation. default: false */ - preserve?: boolean, - /** Replacement color */ - color?: string, -}; - -const creator: PluginCreator = (opts?: pluginOptions) => { - const options: pluginOptions = Object.assign( - // Default options - { - color: null, - preserve: false, - }, - // Provided options - opts, - ); - - return { - postcssPlugin: 'postcss-progressive-color-gamut', - Declaration(decl) { - if (decl.value === 'red') { - // Determine the new value. - let newValue = 'blue'; - if (options.color) { - newValue = options.color; - } - - // Check if it is different from the current value. - if (newValue === decl.value) { - return; - } - - // Insert the new value before the current value. - decl.cloneBefore({ - prop: 'color', - value: newValue, - }); - - // If the current value is preserved we are done and return here. - if (options.preserve) { - return; - } - - // If the current value is not preserved we remove it. - decl.remove(); - } - }, - }; -}; - -creator.postcss = true; - -export default creator; diff --git a/plugins/postcss-progressive-color-gamut/test/basic.color.expect.css b/plugins/postcss-progressive-color-gamut/test/basic.color.expect.css deleted file mode 100644 index 041b1dabf..000000000 --- a/plugins/postcss-progressive-color-gamut/test/basic.color.expect.css +++ /dev/null @@ -1,7 +0,0 @@ -.foo { - color: purple; -} - -.baz { - color: green; -} diff --git a/plugins/postcss-progressive-color-gamut/test/basic.css b/plugins/postcss-progressive-color-gamut/test/basic.css deleted file mode 100644 index 181f83a54..000000000 --- a/plugins/postcss-progressive-color-gamut/test/basic.css +++ /dev/null @@ -1,7 +0,0 @@ -.foo { - color: red; -} - -.baz { - color: green; -} diff --git a/plugins/postcss-progressive-color-gamut/test/basic.expect.css b/plugins/postcss-progressive-color-gamut/test/basic.expect.css deleted file mode 100644 index 9d738d5ac..000000000 --- a/plugins/postcss-progressive-color-gamut/test/basic.expect.css +++ /dev/null @@ -1,7 +0,0 @@ -.foo { - color: blue; -} - -.baz { - color: green; -} diff --git a/plugins/postcss-progressive-color-gamut/test/document.expect.html b/plugins/postcss-progressive-color-gamut/test/document.expect.html deleted file mode 100644 index 65a369d89..000000000 --- a/plugins/postcss-progressive-color-gamut/test/document.expect.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - -

- - diff --git a/plugins/postcss-progressive-color-gamut/test/document.html b/plugins/postcss-progressive-color-gamut/test/document.html deleted file mode 100644 index 87d683cc9..000000000 --- a/plugins/postcss-progressive-color-gamut/test/document.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - -

- - diff --git a/plugins/postcss-progressive-color-gamut/test/examples/example.css b/plugins/postcss-progressive-color-gamut/test/examples/example.css deleted file mode 100644 index 181f83a54..000000000 --- a/plugins/postcss-progressive-color-gamut/test/examples/example.css +++ /dev/null @@ -1,7 +0,0 @@ -.foo { - color: red; -} - -.baz { - color: green; -} diff --git a/plugins/postcss-progressive-color-gamut/test/examples/example.expect.css b/plugins/postcss-progressive-color-gamut/test/examples/example.expect.css deleted file mode 100644 index 9d738d5ac..000000000 --- a/plugins/postcss-progressive-color-gamut/test/examples/example.expect.css +++ /dev/null @@ -1,7 +0,0 @@ -.foo { - color: blue; -} - -.baz { - color: green; -} diff --git a/plugins/postcss-progressive-color-gamut/test/examples/example.preserve-true.expect.css b/plugins/postcss-progressive-color-gamut/test/examples/example.preserve-true.expect.css deleted file mode 100644 index 8b020470a..000000000 --- a/plugins/postcss-progressive-color-gamut/test/examples/example.preserve-true.expect.css +++ /dev/null @@ -1,8 +0,0 @@ -.foo { - color: blue; - color: red; -} - -.baz { - color: green; -} diff --git a/plugins/postcss-progressive-custom-properties/CHANGELOG.md b/plugins/postcss-progressive-custom-properties/CHANGELOG.md index b051d7df7..f2fba56d4 100644 --- a/plugins/postcss-progressive-custom-properties/CHANGELOG.md +++ b/plugins/postcss-progressive-custom-properties/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to PostCSS Progressive Custom Properties +### Unreleased (patch) + +- Add support for css nesting + ### 3.0.1 _September 18, 2023_ diff --git a/plugins/postcss-progressive-custom-properties/dist/conditions-from-values.d.ts b/plugins/postcss-progressive-custom-properties/dist/conditions-from-values.d.ts index ba14169d4..250b5e914 100644 --- a/plugins/postcss-progressive-custom-properties/dist/conditions-from-values.d.ts +++ b/plugins/postcss-progressive-custom-properties/dist/conditions-from-values.d.ts @@ -1,4 +1,3 @@ export declare function conditionsFromValue(value: string, mustContainVar?: boolean): { support: Array; - media: Array; }; diff --git a/plugins/postcss-progressive-custom-properties/dist/index.cjs b/plugins/postcss-progressive-custom-properties/dist/index.cjs index 4fc820861..fc1d26cb2 100644 --- a/plugins/postcss-progressive-custom-properties/dist/index.cjs +++ b/plugins/postcss-progressive-custom-properties/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("postcss-value-parser"),a=require("@csstools/css-color-parser"),r=require("@csstools/css-parser-algorithms"),p=require("@csstools/css-tokenizer");const t=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const a=[],r=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===r||"linear-gradient"===r||"radial-gradient"===r||"repeating-conic-gradient"===r||"repeating-linear-gradient"===r||"repeating-radial-gradient"===r)){let r=0,p=!1,i=!1;e:for(let o=0;oa.includes(e.sniff)));let l=!1;try{e(a).walk((a=>{"function"===a.type&&o.test(a.value)&&(l=!0);try{const r=e.unit(a.value);!1!==r&&(a.dimension=r)}catch{}for(let e=0;e0&&p.push("(top: var(--f))"),{support:Array.from(new Set(p)).sort(),media:Array.from(new Set(t)).sort()})}function colorGamutConditions(t){const i=r.parseComponentValue(p.tokenize({css:e.stringify(t)}));if(!i)return!1;const o=a.color(i);return!!o&&(!a.colorDataFitsRGB_Gamut(o)&&(a.colorDataFitsDisplayP3_Gamut(o)?"(color-gamut: display-p3)":"(color-gamut: rec2020)"))}const s=/var\(/i,l=/^initial$/i,y=/^\s*$/,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",OnceExit:(e,{postcss:a})=>{e.walkRules((e=>{const r=[],p=new Set,t={support:void 0,media:void 0};let i;e.each((o=>{if("decl"!==o.type)return;if(o.variable){if(!p.has(o.prop))return void p.add(o.prop)}else{const e=o.prop.toLowerCase();if(!p.has(e))return void p.add(e)}if(!o.variable&&!s.test(o.value))return;if(l.test(o.value))return;if(y.test(o.value))return;const d=!o.variable,c=conditionsFromValue(o.value,d);let n,u;if(c.support.length&&(n=c.support.join(" and ")),c.media.length&&(u=c.media.join(" and ")),!u&&!n)return;if(t.support===n&&t.media===u||(i=void 0),i)return i.append(o.clone()),void o.remove();const b=[];if(n&&b.push(a.atRule({name:"supports",params:n,source:e.source,raws:{before:"\n\n",after:"\n"}})),u&&b.push(a.atRule({name:"media",params:u,source:e.source,raws:{before:"\n\n",after:"\n"}})),!b.length)return;for(let e=0;e{e.after(a)}))}))}});creator.postcss=!0,module.exports=creator; +"use strict";var e=require("postcss-value-parser");const a=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const r=[],p=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===p||"linear-gradient"===p||"radial-gradient"===p||"repeating-conic-gradient"===p||"repeating-linear-gradient"===p||"repeating-radial-gradient"===p)){let p=0,t=!1,i=!1;e:for(let o=0;oa.includes(e.sniff)));let s=!1;try{e(a).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{const r=e.unit(a.value);!1!==r&&(a.dimension=r)}catch{}for(let e=0;e0&&i.push("(top: var(--f))"),{support:Array.from(new Set(i)).sort()})}const t=/var\(/i,i=/^initial$/i,o=/^\s*$/,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",prepare(){const e=new WeakMap;return{OnceExit:(a,{postcss:r})=>{a.walkDecls((a=>{if(!a.parent)return;const p=e.get(a.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{support:void 0},lastConditionalRule:void 0};if(e.set(a.parent,p),a.variable){if(!p.propNames.has(a.prop))return void p.propNames.add(a.prop)}else{const e=a.prop.toLowerCase();if(!p.propNames.has(e))return void p.propNames.add(e)}if(!a.variable&&!t.test(a.value))return;if(i.test(a.value))return;if(o.test(a.value))return;const s=!a.variable,l=conditionsFromValue(a.value,s).support.join(" and ");if(!l)return;if(p.lastConditionParams.support!==l&&(p.lastConditionalRule=void 0),p.lastConditionalRule)return p.lastConditionalRule.append(a.clone()),void a.remove();const y=[];if(l&&y.push(r.atRule({name:"supports",params:l,source:a.parent.source,raws:{before:"\n\n",after:"\n"}})),!y.length)return;for(let e=0;e{const r=e.get(a);r&&0!==r.conditionalRules.length&&r.conditionalRules.reverse().forEach((e=>{a.after(e)}))}))}}}});creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-progressive-custom-properties/dist/index.mjs b/plugins/postcss-progressive-custom-properties/dist/index.mjs index 92b8a001e..21d6fe9ba 100644 --- a/plugins/postcss-progressive-custom-properties/dist/index.mjs +++ b/plugins/postcss-progressive-custom-properties/dist/index.mjs @@ -1 +1 @@ -import e from"postcss-value-parser";import{color as a,colorDataFitsRGB_Gamut as r,colorDataFitsDisplayP3_Gamut as p}from"@csstools/css-color-parser";import{parseComponentValue as t}from"@csstools/css-parser-algorithms";import{tokenize as i}from"@csstools/css-tokenizer";const o=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const a=[],r=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===r||"linear-gradient"===r||"radial-gradient"===r||"repeating-conic-gradient"===r||"repeating-linear-gradient"===r||"repeating-radial-gradient"===r)){let r=0,p=!1,t=!1;e:for(let i=0;ia.includes(e.sniff)));let o=!1;try{e(a).walk((a=>{"function"===a.type&&y.test(a.value)&&(o=!0);try{const r=e.unit(a.value);!1!==r&&(a.dimension=r)}catch{}for(let e=0;e0&&p.push("(top: var(--f))"),{support:Array.from(new Set(p)).sort(),media:Array.from(new Set(t)).sort()})}function colorGamutConditions(o){const s=t(i({css:e.stringify(o)}));if(!s)return!1;const y=a(s);return!!y&&(!r(y)&&(p(y)?"(color-gamut: display-p3)":"(color-gamut: rec2020)"))}const l=/var\(/i,d=/^initial$/i,c=/^\s*$/,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",OnceExit:(e,{postcss:a})=>{e.walkRules((e=>{const r=[],p=new Set,t={support:void 0,media:void 0};let i;e.each((o=>{if("decl"!==o.type)return;if(o.variable){if(!p.has(o.prop))return void p.add(o.prop)}else{const e=o.prop.toLowerCase();if(!p.has(e))return void p.add(e)}if(!o.variable&&!l.test(o.value))return;if(d.test(o.value))return;if(c.test(o.value))return;const s=!o.variable,y=conditionsFromValue(o.value,s);let n,u;if(y.support.length&&(n=y.support.join(" and ")),y.media.length&&(u=y.media.join(" and ")),!u&&!n)return;if(t.support===n&&t.media===u||(i=void 0),i)return i.append(o.clone()),void o.remove();const b=[];if(n&&b.push(a.atRule({name:"supports",params:n,source:e.source,raws:{before:"\n\n",after:"\n"}})),u&&b.push(a.atRule({name:"media",params:u,source:e.source,raws:{before:"\n\n",after:"\n"}})),!b.length)return;for(let e=0;e{e.after(a)}))}))}});creator.postcss=!0;export{creator as default}; +import e from"postcss-value-parser";const a=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const r=[],p=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===p||"linear-gradient"===p||"radial-gradient"===p||"repeating-conic-gradient"===p||"repeating-linear-gradient"===p||"repeating-radial-gradient"===p)){let p=0,t=!1,i=!1;e:for(let o=0;oa.includes(e.sniff)));let s=!1;try{e(a).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{const r=e.unit(a.value);!1!==r&&(a.dimension=r)}catch{}for(let e=0;e0&&i.push("(top: var(--f))"),{support:Array.from(new Set(i)).sort()})}const t=/var\(/i,i=/^initial$/i,o=/^\s*$/,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",prepare(){const e=new WeakMap;return{OnceExit:(a,{postcss:r})=>{a.walkDecls((a=>{if(!a.parent)return;const p=e.get(a.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{support:void 0},lastConditionalRule:void 0};if(e.set(a.parent,p),a.variable){if(!p.propNames.has(a.prop))return void p.propNames.add(a.prop)}else{const e=a.prop.toLowerCase();if(!p.propNames.has(e))return void p.propNames.add(e)}if(!a.variable&&!t.test(a.value))return;if(i.test(a.value))return;if(o.test(a.value))return;const s=!a.variable,l=conditionsFromValue(a.value,s).support.join(" and ");if(!l)return;if(p.lastConditionParams.support!==l&&(p.lastConditionalRule=void 0),p.lastConditionalRule)return p.lastConditionalRule.append(a.clone()),void a.remove();const y=[];if(l&&y.push(r.atRule({name:"supports",params:l,source:a.parent.source,raws:{before:"\n\n",after:"\n"}})),!y.length)return;for(let e=0;e{const r=e.get(a);r&&0!==r.conditionalRules.length&&r.conditionalRules.reverse().forEach((e=>{a.after(e)}))}))}}}});creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-progressive-custom-properties/package.json b/plugins/postcss-progressive-custom-properties/package.json index e4f0edf64..ce5a59e31 100644 --- a/plugins/postcss-progressive-custom-properties/package.json +++ b/plugins/postcss-progressive-custom-properties/package.json @@ -35,9 +35,6 @@ "dist" ], "dependencies": { - "@csstools/css-color-parser": "^1.2.3", - "@csstools/css-parser-algorithms": "2.3.1", - "@csstools/css-tokenizer": "^2.2.0", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { diff --git a/plugins/postcss-progressive-custom-properties/src/conditions-from-values.ts b/plugins/postcss-progressive-custom-properties/src/conditions-from-values.ts index d0b676803..27c7b1a66 100644 --- a/plugins/postcss-progressive-custom-properties/src/conditions-from-values.ts +++ b/plugins/postcss-progressive-custom-properties/src/conditions-from-values.ts @@ -1,16 +1,12 @@ import valueParser from 'postcss-value-parser'; -import { color, colorDataFitsRGB_Gamut, colorDataFitsDisplayP3_Gamut } from '@csstools/css-color-parser'; import { doublePositionGradients } from './custom/double-position-gradients'; import { matchers } from './matchers'; import { matches } from './match'; -import { parseComponentValue } from '@csstools/css-parser-algorithms'; -import { tokenize } from '@csstools/css-tokenizer'; const varFunctionName = /^var$/i; -export function conditionsFromValue(value: string, mustContainVar = false): { support: Array, media: Array } { +export function conditionsFromValue(value: string, mustContainVar = false): { support: Array } { const supportConditions: Array = []; - const mediaConditions: Array = []; const relevantMatchers = matchers.filter((matcher) => { return value.includes(matcher.sniff); @@ -41,13 +37,6 @@ export function conditionsFromValue(value: string, mustContainVar = false): { su // Matchers are ordered from most specific to least. // Only one needs to match. if (matches(matcherAST, node)) { - if (propertyValueMatcher.property === 'color') { - const condition = colorGamutConditions(node); - if (condition) { - mediaConditions.push(condition); - } - } - supportConditions.push(`(${propertyValueMatcher.property}: ${propertyValueMatcher.supports})`); return; } @@ -64,7 +53,6 @@ export function conditionsFromValue(value: string, mustContainVar = false): { su if (mustContainVar && !hasVar) { return { support: [], - media: [], }; } @@ -75,34 +63,5 @@ export function conditionsFromValue(value: string, mustContainVar = false): { su return { support: Array.from(new Set(supportConditions)).sort(), - media: Array.from(new Set(mediaConditions)).sort(), }; } - -function colorGamutConditions(node: valueParser.Node) { - const componentValue = parseComponentValue( - tokenize({ css: valueParser.stringify(node) }), - ); - - if (!componentValue) { - return false; - } - - const colorData = color( - componentValue, - ); - - if (!colorData) { - return false; - } - - if (colorDataFitsRGB_Gamut(colorData)) { - return false; - } - - if (colorDataFitsDisplayP3_Gamut(colorData)) { - return '(color-gamut: display-p3)'; - } - - return '(color-gamut: rec2020)'; -} diff --git a/plugins/postcss-progressive-custom-properties/src/index.ts b/plugins/postcss-progressive-custom-properties/src/index.ts index 026ecdc8c..8ed5db590 100644 --- a/plugins/postcss-progressive-custom-properties/src/index.ts +++ b/plugins/postcss-progressive-custom-properties/src/index.ts @@ -1,161 +1,153 @@ -import { type AtRule, type PluginCreator, type Rule } from 'postcss'; +import { type Node, type AtRule, type PluginCreator, type Container } from 'postcss'; import { conditionsFromValue } from './conditions-from-values'; const HAS_VARIABLE_FUNCTION = /var\(/i; const IS_INITIAL = /^initial$/i; const EMPTY_OR_WHITESPACE = /^\s*$/; +type State = { + conditionalRules: Array, + propNames: Set, + lastConditionParams: { + support: string | undefined, + }, + lastConditionalRule: Container | undefined, +} + const creator: PluginCreator = () => { return { postcssPlugin: 'postcss-progressive-custom-properties', - OnceExit: (root, { postcss }) => { - root.walkRules((rule) => { - const atSupportsRules: Array = []; - const propNames = new Set(); - - const lastConditionParams: { - support: string | undefined, - media: string | undefined, - } = { - support: undefined, - media: undefined, - }; - let lastConditionalRule: Rule | undefined = undefined; - - rule.each((decl) => { - if (decl.type !== 'decl') { - return; - } - - // The first encountered property is the fallback for the oldest targets. - if (decl.variable) { - // custom properties are case-sensitive - if (!propNames.has(decl.prop)) { - propNames.add(decl.prop); - return; - } - } else { - // regular properties are case-insensitive - const lowerCaseProp = decl.prop.toLowerCase(); - if (!propNames.has(lowerCaseProp)) { - propNames.add(lowerCaseProp); + prepare() { + const states = new WeakMap(); + + return { + OnceExit: (root, { postcss }) => { + root.walkDecls((decl) => { + if (!decl.parent) { return; } - } - if (!(decl.variable || HAS_VARIABLE_FUNCTION.test(decl.value))) { - return; - } - - if (IS_INITIAL.test(decl.value)) { - // https://www.w3.org/TR/css-variables-1/#guaranteed-invalid - return; - } + const state = states.get(decl.parent) || { + conditionalRules: [], + propNames: new Set(), + lastConditionParams: { + support: undefined, + }, + lastConditionalRule: undefined, + }; + + states.set(decl.parent, state); + + // The first encountered property is the fallback for the oldest targets. + if (decl.variable) { + // custom properties are case-sensitive + if (!state.propNames.has(decl.prop)) { + state.propNames.add(decl.prop); + return; + } + } else { + // regular properties are case-insensitive + const lowerCaseProp = decl.prop.toLowerCase(); + if (!state.propNames.has(lowerCaseProp)) { + state.propNames.add(lowerCaseProp); + return; + } + } - if (EMPTY_OR_WHITESPACE.test(decl.value)) { // empty string value - // https://www.w3.org/TR/css-variables-1/#guaranteed-invalid - return; - } + if (!(decl.variable || HAS_VARIABLE_FUNCTION.test(decl.value))) { + return; + } - // if the property itself isn't a custom property, the value must contain a var() function - const mustContainVar = !decl.variable; + if (IS_INITIAL.test(decl.value)) { + // https://www.w3.org/TR/css-variables-1/#guaranteed-invalid + return; + } - const conditions = conditionsFromValue(decl.value, mustContainVar); + if (EMPTY_OR_WHITESPACE.test(decl.value)) { // empty string value + // https://www.w3.org/TR/css-variables-1/#guaranteed-invalid + return; + } - let supportParams: string | undefined = undefined; - let mediaParams: string | undefined = undefined; + // if the property itself isn't a custom property, the value must contain a var() function + const mustContainVar = !decl.variable; - if (conditions.support.length) { - supportParams = conditions.support.join(' and '); - } + const conditions = conditionsFromValue(decl.value, mustContainVar); + const supportParams = conditions.support.join(' and '); + if (!supportParams) { + return; + } - if (conditions.media.length) { - mediaParams = conditions.media.join(' and '); - } + if (state.lastConditionParams.support !== supportParams) { + state.lastConditionalRule = undefined; + } - if (!mediaParams && !supportParams) { - return; - } + if (state.lastConditionalRule) { + state.lastConditionalRule.append(decl.clone()); + decl.remove(); + return; + } - if ( - (lastConditionParams.support !== supportParams) || - (lastConditionParams.media !== mediaParams) - ) { - lastConditionalRule = undefined; - } + const atRules = []; + + if (supportParams) { + atRules.push(postcss.atRule({ + name: 'supports', + params: supportParams, + source: decl.parent.source, + raws: { + before: '\n\n', + after: '\n', + }, + })); + } - if (lastConditionalRule) { - lastConditionalRule.append(decl.clone()); - decl.remove(); - return; - } - - const atRules = []; - - if (supportParams) { - atRules.push(postcss.atRule({ - name: 'supports', - params: supportParams, - source: rule.source, - raws: { - before: '\n\n', - after: '\n', - }, - })); - } - - if (mediaParams) { - atRules.push(postcss.atRule({ - name: 'media', - params: mediaParams, - source: rule.source, - raws: { - before: '\n\n', - after: '\n', - }, - })); - } + if (!atRules.length) { + return; + } - if (!atRules.length) { - return; - } + for (let i = 0; i < (atRules.length - 1); i++) { + const x = atRules[i]; + const y = atRules[i + 1]; - for (let i = 0; i < (atRules.length - 1); i++) { - const x = atRules[i]; - const y = atRules[i + 1]; + x.append(y); + } - x.append(y); - } + const outerAtRule = atRules[0]; + const innerAtRule = atRules[atRules.length - 1]; - const outerAtRule = atRules[0]; - const innerAtRule = atRules[atRules.length - 1]; + const parentClone = decl.parent.clone(); + parentClone.removeAll(); - const parentClone = rule.clone(); - parentClone.removeAll(); + parentClone.raws.before = '\n'; - parentClone.raws.before = '\n'; + parentClone.append(decl.clone()); + decl.remove(); - parentClone.append(decl.clone()); - decl.remove(); + state.lastConditionParams.support = supportParams; + state.lastConditionalRule = parentClone; - lastConditionParams.support = supportParams; - lastConditionParams.media = mediaParams; - lastConditionalRule = parentClone; + innerAtRule.append(parentClone); + state.conditionalRules.push(outerAtRule); + }); - innerAtRule.append(parentClone); - atSupportsRules.push(outerAtRule); - }); + root.walk((node) => { + const state = states.get(node); + if (!state) { + return; + } - if (atSupportsRules.length === 0) { - return; - } + if (state.conditionalRules.length === 0) { + return; + } - // rule.after reverses the at rule order. - // reversing the call order gives in the correct order overall. - atSupportsRules.reverse().forEach((atSupports) => { - rule.after(atSupports); - }); - }); + // rule.after reverses the at rule order. + // reversing the call order gives in the correct order overall. + state.conditionalRules.reverse().forEach((atSupports) => { + node.after(atSupports); + }); + }); + }, + }; }, }; }; diff --git a/plugins/postcss-progressive-custom-properties/test/basic.css b/plugins/postcss-progressive-custom-properties/test/basic.css index a5d5d83bb..7688d5993 100644 --- a/plugins/postcss-progressive-custom-properties/test/basic.css +++ b/plugins/postcss-progressive-custom-properties/test/basic.css @@ -225,3 +225,11 @@ color: rgba(87, 107, 149, 1); color: rgb(87 107 149 / notvar(--opacity)); } + +/* CSS Nesting */ +:root { + @media screen { + --prop-8: 1px solid red; + --prop-8: 1px solid oklch(40% 0.234 0.39 / var(--opacity-50)); + } +} diff --git a/plugins/postcss-progressive-custom-properties/test/basic.expect.css b/plugins/postcss-progressive-custom-properties/test/basic.expect.css index 9c97e6b5d..fbd00baaf 100644 --- a/plugins/postcss-progressive-custom-properties/test/basic.expect.css +++ b/plugins/postcss-progressive-custom-properties/test/basic.expect.css @@ -395,3 +395,16 @@ color: rgba(87, 107, 149, 1); color: rgb(87 107 149 / notvar(--opacity)); } + +/* CSS Nesting */ +:root { + @media screen { + --prop-8: 1px solid red; + } + +@supports (color: oklab(0% 0 0)) and (top: var(--f)) { +@media screen { + --prop-8: 1px solid oklch(40% 0.234 0.39 / var(--opacity-50)); + } +} +} diff --git a/plugins/postcss-slow-plugins/test/basic.expect.css b/plugins/postcss-slow-plugins/test/basic.expect.css index 364178f61..43366884c 100644 --- a/plugins/postcss-slow-plugins/test/basic.expect.css +++ b/plugins/postcss-slow-plugins/test/basic.expect.css @@ -334,16 +334,10 @@ color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); - - color-7: color(display-p3 0.19244 0.58461 0.51559); color-8: rgb(0, 149, 131); - color-8: color(display-p3 0.19244 0.58461 0.51559); color-9: rgb(0, 149, 131); - color-9: color(display-p3 0.19244 0.58461 0.51559); color-10: rgb(0, 149, 131); - color-10: color(display-p3 0.19244 0.58461 0.51559); color-11: rgb(0, 149, 131); - color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); color-13: rgb(188, 101, 59); @@ -353,6 +347,17 @@ color-17: oklch(60% 0.1250 0.785398unknown); } +@media (color-gamut: p3) { +.oklch { + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); +} +} + .ic-unit { --value-2ic: initial; text-indent: 2em; @@ -461,20 +466,23 @@ color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); color-4: rgba(122, 0, 182, 0.65); - color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-5: rgba(149, 0, 122, 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } +@media (color-gamut: p3) { +.color-mix { + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); +} +} + .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } @supports (color: color(display-p3 0 0 0)) { @@ -489,6 +497,13 @@ } } +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -498,10 +513,15 @@ color-6: rgb(179, 35, 35); color-7: rgb(163, 57, 39); color-8: rgb(141, 0, 0); - color-8: color(display-p3 0.50566 0.0781 0); color-9: rgb(130, 31, 0); +} + +@media (color-gamut: p3) { +.test-css-color-5-interop { + color-8: color(display-p3 0.50566 0.0781 0); color-9: color(display-p3 0.48896 0.1211 0); } +} .test-property-with-var { --opacity: 1; diff --git a/rollup/configs/externals.mjs b/rollup/configs/externals.mjs index 166b12bab..7f19d26c4 100644 --- a/rollup/configs/externals.mjs +++ b/rollup/configs/externals.mjs @@ -22,6 +22,7 @@ export const externalsForCLI = [ '@csstools/postcss-color-mix-function', '@csstools/postcss-exponential-functions', '@csstools/postcss-font-format-keywords', + '@csstools/postcss-gamut-mapping', '@csstools/postcss-global-data', '@csstools/postcss-gradients-interpolation-method', '@csstools/postcss-hwb-function', @@ -111,6 +112,7 @@ export const externalsForPlugin = [ '@csstools/postcss-color-mix-function', '@csstools/postcss-exponential-functions', '@csstools/postcss-font-format-keywords', + '@csstools/postcss-gamut-mapping', '@csstools/postcss-gradients-interpolation-method', '@csstools/postcss-hwb-function', '@csstools/postcss-ic-unit', From 5f514d3c12b899b37b83ee46a91cebf81313bcb9 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 8 Oct 2023 18:56:20 +0200 Subject: [PATCH 04/15] docs --- plugin-packs/postcss-preset-env/FEATURES.md | 1 + plugins/postcss-color-function/README.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/plugin-packs/postcss-preset-env/FEATURES.md b/plugin-packs/postcss-preset-env/FEATURES.md index 668ea5490..0c1742ba8 100644 --- a/plugin-packs/postcss-preset-env/FEATURES.md +++ b/plugin-packs/postcss-preset-env/FEATURES.md @@ -26,6 +26,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project. | `focus-within-pseudo-class` | `:focus-within` Focus Container Pseudo-Class | [example](https://preset-env.cssdb.org/features/#focus-within-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within#readme) | | `font-format-keywords` | Font `format()` Keywords | [example](https://preset-env.cssdb.org/features/#font-format-keywords) | [docs](https://github.com/valtlai/postcss-font-format-keywords#readme) | | `font-variant-property` | `font-variant` Property | [example](https://preset-env.cssdb.org/features/#font-variant-property) | [docs](https://github.com/postcss/postcss-font-variant#readme) | +| `gamut-mapping` | | | | | `gap-properties` | Gap Properties | [example](https://preset-env.cssdb.org/features/#gap-properties) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties#readme) | | `gradients-interpolation-method` | Gradients Interpolation Method | [example](https://preset-env.cssdb.org/features/#gradients-interpolation-method) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method#readme) | | `has-pseudo-class` | `:has()` Relational Pseudo-Class | [example](https://preset-env.cssdb.org/features/#has-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo#readme) | diff --git a/plugins/postcss-color-function/README.md b/plugins/postcss-color-function/README.md index b385928f5..44168b62c 100644 --- a/plugins/postcss-color-function/README.md +++ b/plugins/postcss-color-function/README.md @@ -90,7 +90,7 @@ postcssColorFunction({ preserve: true }) --a-color: rgb(164, 49, 43); } -@supports (color: color(srgb 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { :root { --a-color: color(srgb 0.64331 0.19245 0.16771); } From 36c410f15a1d4f8037f109651331fe361c128a63 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 8 Oct 2023 18:57:38 +0200 Subject: [PATCH 05/15] patch notes --- plugin-packs/postcss-preset-env/CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md index c074b9671..1a409160d 100644 --- a/plugin-packs/postcss-preset-env/CHANGELOG.md +++ b/plugin-packs/postcss-preset-env/CHANGELOG.md @@ -1,7 +1,8 @@ # Changes to PostCSS Preset Env -### Unreleased (patch) +### Unreleased (minor) +- Added `@csstools/postcss-gamut-mapping` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gamut-mapping#readme) for usage details. - Updated [`cssdb`](https://github.com/csstools/cssdb) to [`7.7.3`](https://github.com/csstools/cssdb/blob/main/CHANGELOG.md#773-october-05-2023) (patch) - Updated [`@csstools/postcss-logical-viewport-units`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units) to [`2.0.3`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units/CHANGELOG.md#203) (patch) - Updated [`@csstools/postcss-exponential-functions`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-exponential-functions) to [`1.0.1`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-exponential-functions/CHANGELOG.md#101) (patch) From 0f6cdb084a511124d9a0b29d170617212fa93ec5 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 8 Oct 2023 19:00:10 +0200 Subject: [PATCH 06/15] more patch notes --- plugins/postcss-progressive-custom-properties/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/postcss-progressive-custom-properties/CHANGELOG.md b/plugins/postcss-progressive-custom-properties/CHANGELOG.md index f2fba56d4..b1c69d1b5 100644 --- a/plugins/postcss-progressive-custom-properties/CHANGELOG.md +++ b/plugins/postcss-progressive-custom-properties/CHANGELOG.md @@ -3,6 +3,7 @@ ### Unreleased (patch) - Add support for css nesting +- Improve grouping of `@supports` rules ### 3.0.1 From 557e77c61628cac7bf981a2aba06204dc3aa175e Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 8 Oct 2023 19:21:44 +0200 Subject: [PATCH 07/15] increase test coverage --- packages/css-color-parser/dist/index.cjs | 2 +- packages/css-color-parser/dist/index.mjs | 2 +- packages/css-color-parser/src/color-data.ts | 14 +- plugins/postcss-gamut-mapping/test/basic.css | 100 ++++++++++++ .../test/basic.expect.css | 144 ++++++++++++++++++ 5 files changed, 258 insertions(+), 4 deletions(-) diff --git a/packages/css-color-parser/dist/index.cjs b/packages/css-color-parser/dist/index.cjs index d1eefb1a6..8cd9b2be4 100644 --- a/packages/css-color-parser/dist/index.cjs +++ b/packages/css-color-parser/dist/index.cjs @@ -1 +1 @@ -"use strict";var e,o,n=require("@csstools/css-tokenizer"),a=require("@csstools/color-helpers"),t=require("@csstools/css-parser-algorithms"),r=require("@csstools/css-calc");function colorData_to_XYZ_D50(e){switch(e.colorNotation){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:case exports.ColorNotation.sRGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Linear_sRGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Display_P3:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Rec2020:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.A98_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.ProPhoto_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HSL:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HWB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Lab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.LCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D50:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D65:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}exports.ColorNotation=void 0,(e=exports.ColorNotation||(exports.ColorNotation={})).A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_sRGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.sRGB="srgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65",exports.SyntaxFlag=void 0,(o=exports.SyntaxFlag||(exports.SyntaxFlag={})).ColorKeyword="color-keyword",o.HasAlpha="has-alpha",o.HasDimensionValues="has-dimension-values",o.HasNoneKeywords="has-none-keywords",o.HasNumberValues="has-number-values",o.HasPercentageAlpha="has-percentage-alpha",o.HasPercentageValues="has-percentage-values",o.HasVariableAlpha="has-variable-alpha",o.Hex="hex",o.LegacyHSL="legacy-hsl",o.LegacyRGB="legacy-rgb",o.NamedColor="named-color",o.RelativeColorSyntax="relative-color-syntax",o.ColorMix="color-mix";const s=new Set([exports.ColorNotation.A98_RGB,exports.ColorNotation.Display_P3,exports.ColorNotation.HEX,exports.ColorNotation.Linear_sRGB,exports.ColorNotation.ProPhoto_RGB,exports.ColorNotation.RGB,exports.ColorNotation.sRGB,exports.ColorNotation.Rec2020,exports.ColorNotation.XYZ_D50,exports.ColorNotation.XYZ_D65]);function colorDataTo(e,o){const n={...e};if(e.colorNotation!==o){const e=colorData_to_XYZ_D50(n);switch(o){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:n.colorNotation=exports.ColorNotation.RGB,n.channels=a.xyz.XYZ_D50_to_sRGB(e.channels);break;case exports.ColorNotation.sRGB:n.colorNotation=exports.ColorNotation.sRGB,n.channels=a.xyz.XYZ_D50_to_sRGB(e.channels);break;case exports.ColorNotation.Linear_sRGB:n.colorNotation=exports.ColorNotation.Linear_sRGB,n.channels=a.xyz.XYZ_D50_to_lin_sRGB(e.channels);break;case exports.ColorNotation.Display_P3:n.colorNotation=exports.ColorNotation.Display_P3,n.channels=a.xyz.XYZ_D50_to_P3(e.channels);break;case exports.ColorNotation.Rec2020:n.colorNotation=exports.ColorNotation.Rec2020,n.channels=a.xyz.XYZ_D50_to_rec_2020(e.channels);break;case exports.ColorNotation.ProPhoto_RGB:n.colorNotation=exports.ColorNotation.ProPhoto_RGB,n.channels=a.xyz.XYZ_D50_to_ProPhoto(e.channels);break;case exports.ColorNotation.A98_RGB:n.colorNotation=exports.ColorNotation.A98_RGB,n.channels=a.xyz.XYZ_D50_to_a98_RGB(e.channels);break;case exports.ColorNotation.HSL:n.colorNotation=exports.ColorNotation.HSL,n.channels=a.xyz.XYZ_D50_to_HSL(e.channels);break;case exports.ColorNotation.HWB:n.colorNotation=exports.ColorNotation.HWB,n.channels=a.xyz.XYZ_D50_to_HWB(e.channels);break;case exports.ColorNotation.Lab:n.colorNotation=exports.ColorNotation.Lab,n.channels=a.xyz.XYZ_D50_to_Lab(e.channels);break;case exports.ColorNotation.LCH:n.colorNotation=exports.ColorNotation.LCH,n.channels=a.xyz.XYZ_D50_to_LCH(e.channels);break;case exports.ColorNotation.OKLCH:n.colorNotation=exports.ColorNotation.OKLCH,n.channels=a.xyz.XYZ_D50_to_OKLCH(e.channels);break;case exports.ColorNotation.OKLab:n.colorNotation=exports.ColorNotation.OKLab,n.channels=a.xyz.XYZ_D50_to_OKLab(e.channels);break;case exports.ColorNotation.XYZ_D50:n.colorNotation=exports.ColorNotation.XYZ_D50,n.channels=a.xyz.XYZ_D50_to_XYZ_D50(e.channels);break;case exports.ColorNotation.XYZ_D65:n.colorNotation=exports.ColorNotation.XYZ_D65,n.channels=a.xyz.XYZ_D50_to_XYZ_D65(e.channels);break;default:throw new Error("Unsupported color notation")}}else n.channels=e.channels.map((e=>Number.isNaN(e)?0:e));if(o===e.colorNotation)n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[0,1,2]);else if(s.has(o)&&s.has(e.colorNotation))n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[0,1,2]);else switch(o){case exports.ColorNotation.HSL:switch(e.colorNotation){case exports.ColorNotation.HWB:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[0]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:n.channels=carryForwardMissingComponents(e.channels,[2],n.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[2,1,0])}break;case exports.ColorNotation.HWB:switch(e.colorNotation){case exports.ColorNotation.HSL:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[2])}break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:switch(e.colorNotation){case exports.ColorNotation.HSL:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[0,1,2]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[0])}break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:switch(e.colorNotation){case exports.ColorNotation.HSL:n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[2,1,0]);break;case exports.ColorNotation.HWB:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[0,1,2])}}return n.channels=convertPowerlessComponentsToMissingComponents(n.channels,o),n}function convertPowerlessComponentsToMissingComponents(e,o){const n=[...e];switch(o){case exports.ColorNotation.HSL:reducePrecision(n[1],4)<=0&&(n[0]=NaN);break;case exports.ColorNotation.HWB:Math.max(0,reducePrecision(n[1],4))+Math.max(0,reducePrecision(n[2],4))>=100&&(n[0]=NaN);break;case exports.ColorNotation.LCH:reducePrecision(n[1],4)<=0&&(n[2]=NaN);break;case exports.ColorNotation.OKLCH:reducePrecision(n[1],6)<=0&&(n[2]=NaN)}return n}function convertPowerlessComponentsToZeroValuesForDisplay(e,o){const n=[...e];switch(o){case exports.ColorNotation.HSL:(reducePrecision(n[2])<=0||reducePrecision(n[2])>=100)&&(n[0]=NaN,n[1]=NaN),reducePrecision(n[1])<=0&&(n[0]=NaN);break;case exports.ColorNotation.HWB:Math.max(0,reducePrecision(n[1]))+Math.max(0,reducePrecision(n[2]))>=100&&(n[0]=NaN);break;case exports.ColorNotation.Lab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case exports.ColorNotation.LCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case exports.ColorNotation.OKLab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN);break;case exports.ColorNotation.OKLCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN)}return n}function carryForwardMissingComponents(e,o,n,a){const t=[...n];for(const n of o)Number.isNaN(e[o[n]])&&(t[a[n]]=NaN);return t}function normalizeRelativeColorDataChannels(e){const o=new Map;switch(e.colorNotation){case exports.ColorNotation.RGB:case exports.ColorNotation.HEX:o.set("r",dummyNumberToken(255*e.channels[0])),o.set("g",dummyNumberToken(255*e.channels[1])),o.set("b",dummyNumberToken(255*e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.HSL:o.set("h",dummyNumberToken(e.channels[0])),o.set("s",dummyNumberToken(e.channels[1])),o.set("l",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.HWB:o.set("h",dummyNumberToken(e.channels[0])),o.set("w",dummyNumberToken(e.channels[1])),o.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:o.set("l",dummyNumberToken(e.channels[0])),o.set("a",dummyNumberToken(e.channels[1])),o.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:o.set("l",dummyNumberToken(e.channels[0])),o.set("c",dummyNumberToken(e.channels[1])),o.set("h",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.sRGB:case exports.ColorNotation.A98_RGB:case exports.ColorNotation.Display_P3:case exports.ColorNotation.Rec2020:case exports.ColorNotation.Linear_sRGB:case exports.ColorNotation.ProPhoto_RGB:o.set("r",dummyNumberToken(e.channels[0])),o.set("g",dummyNumberToken(e.channels[1])),o.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.XYZ_D50:case exports.ColorNotation.XYZ_D65:o.set("x",dummyNumberToken(e.channels[0])),o.set("y",dummyNumberToken(e.channels[1])),o.set("z",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha))}return o}function noneToZeroInRelativeColorDataChannels(e){const o=new Map(e);for(const[n,a]of e)Number.isNaN(a[4].value)&&o.set(n,dummyNumberToken(0));return o}function dummyNumberToken(e){return[n.TokenType.Number,e.toString(),-1,-1,{value:e,type:n.NumberType.Number}]}function reducePrecision(e,o=7){if(Number.isNaN(e))return 0;const n=Math.pow(10,o);return Math.round(e*n)/n}function normalize(e,o,n,a){return Math.min(Math.max(e/o,n),a)}const l=/[A-Z]/g;function toLowerCaseAZ(e){return e.replace(l,(e=>String.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(e[0]===n.TokenType.Percentage){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=normalize(e[4].value,100,-1/0,1/0);return 3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=normalize(e[4].value,1,-1/0,1/0);return 3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}const i=new Set(["srgb","srgb-linear","display-p3","a98-rgb","prophoto-rgb","rec2020","xyz","xyz-d50","xyz-d65"]);function color$1(e,o){const a=[],s=[],l=[],u=[];let c,p,N=!1,m=!1;const h={colorNotation:exports.ColorNotation.sRGB,channels:[0,0,0],alpha:1,syntaxFlags:new Set([])};let y=a;for(let x=0;x=0){i=u.value[4].value;continue}}return!1}if(!l)return!1;a.push({color:l,percentage:i}),l=!1,i=!1}}if(l&&a.push({color:l,percentage:i}),2!==a.length)return!1;let u=a[0].percentage,c=a[1].percentage;return(!1===u||!(u<0||u>100))&&((!1===c||!(c<0||c>100))&&(!1===u&&!1===c?(u=50,c=50):!1!==u&&!1===c?c=100-u:!1===u&&!1!==c&&(u=100-c),(0!==u||0!==c)&&(!1!==u&&!1!==c&&(u+c>100&&(u=u/(u+c)*100,c=c/(u+c)*100),u+c<100&&(s=(u+c)/100,u=u/(u+c)*100,c=c/(u+c)*100),{a:{color:a[0].color,percentage:u},b:{color:a[1].color,percentage:c},alphaMultiplier:s}))))}function colorMixRectangular(e,o){if(!o)return!1;const n=o.a.color,a=o.b.color,t=o.a.percentage/100;let r=n.channels,s=a.channels,l=exports.ColorNotation.RGB,i=n.alpha;if("number"!=typeof i)return!1;let u=a.alpha;if("number"!=typeof u)return!1;switch(i=Number.isNaN(i)?u:i,u=Number.isNaN(u)?i:u,e){case"srgb":l=exports.ColorNotation.RGB;break;case"srgb-linear":l=exports.ColorNotation.Linear_sRGB;break;case"lab":l=exports.ColorNotation.Lab;break;case"oklab":l=exports.ColorNotation.OKLab;break;case"xyz-d50":l=exports.ColorNotation.XYZ_D50;break;case"xyz":case"xyz-d65":l=exports.ColorNotation.XYZ_D65}r=colorDataTo(n,l).channels,s=colorDataTo(a,l).channels,r[0]=fillInMissingComponent(r[0],s[0]),s[0]=fillInMissingComponent(s[0],r[0]),r[1]=fillInMissingComponent(r[1],s[1]),s[1]=fillInMissingComponent(s[1],r[1]),r[2]=fillInMissingComponent(r[2],s[2]),s[2]=fillInMissingComponent(s[2],r[2]),r[0]=premultiply(r[0],i),r[1]=premultiply(r[1],i),r[2]=premultiply(r[2],i),s[0]=premultiply(s[0],u),s[1]=premultiply(s[1],u),s[2]=premultiply(s[2],u);const c=interpolate(i,u,t);return{colorNotation:l,channels:[un_premultiply(interpolate(r[0],s[0],t),c),un_premultiply(interpolate(r[1],s[1],t),c),un_premultiply(interpolate(r[2],s[2],t),c)],alpha:c*o.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function colorMixPolar(e,o,n){if(!n)return!1;const a=n.a.color,t=n.b.color,r=n.a.percentage/100;let s=a.channels,l=t.channels,i=0,u=0,c=0,p=0,N=0,m=0,h=exports.ColorNotation.RGB,y=a.alpha;if("number"!=typeof y)return!1;let x=t.alpha;if("number"!=typeof x)return!1;switch(y=Number.isNaN(y)?x:y,x=Number.isNaN(x)?y:x,e){case"hsl":h=exports.ColorNotation.HSL;break;case"hwb":h=exports.ColorNotation.HWB;break;case"lch":h=exports.ColorNotation.LCH;break;case"oklch":h=exports.ColorNotation.OKLCH}switch(s=colorDataTo(a,h).channels,l=colorDataTo(t,h).channels,e){case"hsl":case"hwb":i=s[0],u=l[0],c=s[1],p=l[1],N=s[2],m=l[2];break;case"lch":case"oklch":c=s[0],p=l[0],N=s[1],m=l[1],i=s[2],u=l[2]}i=fillInMissingComponent(i,u),Number.isNaN(i)&&(i=0),u=fillInMissingComponent(u,i),Number.isNaN(u)&&(u=0),c=fillInMissingComponent(c,p),p=fillInMissingComponent(p,c),N=fillInMissingComponent(N,m),m=fillInMissingComponent(m,N);const T=u-i;switch(o){case"shorter":T>180?i+=360:T<-180&&(u+=360);break;case"longer":-180<180&&(T>0?i+=360:u+=360);break;case"increasing":T<0&&(u+=360);break;case"decreasing":T>0&&(i+=360);break;default:throw new Error("Unknown hue interpolation method")}c=premultiply(c,y),N=premultiply(N,y),p=premultiply(p,x),m=premultiply(m,x);let b=[0,0,0];const C=interpolate(y,x,r);switch(e){case"hsl":case"hwb":b=[interpolate(i,u,r),un_premultiply(interpolate(c,p,r),C),un_premultiply(interpolate(N,m,r),C)];break;case"lch":case"oklch":b=[un_premultiply(interpolate(c,p,r),C),un_premultiply(interpolate(N,m,r),C),interpolate(i,u,r)]}return{colorNotation:h,channels:b,alpha:C*n.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function fillInMissingComponent(e,o){return Number.isNaN(e)?o:e}function interpolate(e,o,n){return e*n+o*(1-n)}function premultiply(e,o){return Number.isNaN(o)?e:Number.isNaN(e)?NaN:e*o}function un_premultiply(e,o){return 0===o||Number.isNaN(o)?e:Number.isNaN(e)?NaN:e/o}function hex(e){const o=toLowerCaseAZ(e[4].value);if(o.match(/[^a-f0-9]/))return!1;const n={colorNotation:exports.ColorNotation.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([exports.SyntaxFlag.Hex])},a=o.length;if(3===a){const e=o[0],a=o[1],t=o[2];return n.channels=[parseInt(e+e,16)/255,parseInt(a+a,16)/255,parseInt(t+t,16)/255],n}if(6===a){const e=o[0]+o[1],a=o[2]+o[3],t=o[4]+o[5];return n.channels=[parseInt(e,16)/255,parseInt(a,16)/255,parseInt(t,16)/255],n}if(4===a){const e=o[0],a=o[1],t=o[2],r=o[3];return n.channels=[parseInt(e+e,16)/255,parseInt(a+a,16)/255,parseInt(t+t,16)/255],n.alpha=parseInt(r+r,16)/255,n.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),n}if(8===a){const e=o[0]+o[1],a=o[2]+o[3],t=o[4]+o[5],r=o[6]+o[7];return n.channels=[parseInt(e,16)/255,parseInt(a,16)/255,parseInt(t,16)/255],n.alpha=parseInt(r,16)/255,n.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),n}return!1}function normalizeHue(e){if(e[0]===n.TokenType.Number)return e[4].value=e[4].value%360,e[1]=e[4].value.toString(),e;if(e[0]===n.TokenType.Dimension){let o=e[4].value;switch(toLowerCaseAZ(e[4].unit)){case"deg":break;case"rad":o=180*e[4].value/Math.PI;break;case"grad":o=.9*e[4].value;break;case"turn":o=360*e[4].value;break;default:return!1}return o%=360,[n.TokenType.Number,o.toString(),e[2],e[3],{value:o,type:n.NumberType.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(e,o,a){if(0===o){const o=normalizeHue(e);return!1!==o&&(e[0]===n.TokenType.Dimension&&a.syntaxFlags.add(exports.SyntaxFlag.HasDimensionValues),o)}if(e[0]===n.TokenType.Percentage){3===o?a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageAlpha):a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=normalize(e[4].value,1,0,100);return 3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){if(3!==o)return!1;let a=normalize(e[4].value,1,0,100);return 3===o&&(a=normalize(e[4].value,1,0,1)),[n.TokenType.Number,a.toString(),e[2],e[3],{value:a,type:n.NumberType.Number}]}return!1}function normalize_modern_HSL_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(0===o){const o=normalizeHue(e);return!1!==o&&(e[0]===n.TokenType.Dimension&&a.syntaxFlags.add(exports.SyntaxFlag.HasDimensionValues),o)}if(e[0]===n.TokenType.Percentage){3===o?a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageAlpha):a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=e[4].value;return 3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=e[4].value;return 3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function threeChannelLegacySyntax(e,o,a,s){const l=[],i=[],u=[],c=[],p={colorNotation:a,channels:[0,0,0],alpha:1,syntaxFlags:new Set(s)};let N=l;for(let o=0;ot.isTokenNode(e)&&e.value[0]===n.TokenType.Comma))){const o=hslCommaSeparated(e);if(!1!==o)return o}{const n=hslSpaceSeparated(e,o);if(!1!==n)return n}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,exports.ColorNotation.HSL,[exports.SyntaxFlag.LegacyHSL])}function hslSpaceSeparated(e,o){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,exports.ColorNotation.HSL,[],o)}function normalize_HWB_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(0===o){const o=normalizeHue(e);return!1!==o&&(e[0]===n.TokenType.Dimension&&a.syntaxFlags.add(exports.SyntaxFlag.HasDimensionValues),o)}if(e[0]===n.TokenType.Percentage){3===o?a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageAlpha):a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=e[4].value;return 3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=e[4].value;return 3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function normalize_Lab_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(e[0]===n.TokenType.Percentage){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=normalize(e[4].value,1,0,100);return 1===o||2===o?t=normalize(e[4].value,.8,-1/0,1/0):3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=normalize(e[4].value,1,0,100);return 1===o||2===o?t=normalize(e[4].value,1,-1/0,1/0):3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function lab(e,o){return threeChannelSpaceSeparated(e,normalize_Lab_ChannelValues,exports.ColorNotation.Lab,[],o)}function normalize_LCH_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(2===o){const o=normalizeHue(e);return!1!==o&&(e[0]===n.TokenType.Dimension&&a.syntaxFlags.add(exports.SyntaxFlag.HasDimensionValues),o)}if(e[0]===n.TokenType.Percentage){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=normalize(e[4].value,1,0,100);return 1===o?t=normalize(e[4].value,100/150,0,1/0):3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=normalize(e[4].value,1,0,100);return 1===o?t=normalize(e[4].value,1,0,1/0):3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function lch(e,o){return threeChannelSpaceSeparated(e,normalize_LCH_ChannelValues,exports.ColorNotation.LCH,[],o)}const N=new Map;for(const[e,o]of Object.entries(a.namedColors))N.set(e,o);function namedColor(e){const o=N.get(toLowerCaseAZ(e));return!!o&&{colorNotation:exports.ColorNotation.RGB,channels:[o[0]/255,o[1]/255,o[2]/255],alpha:1,syntaxFlags:new Set([exports.SyntaxFlag.ColorKeyword,exports.SyntaxFlag.NamedColor])}}function normalize_OKLab_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(e[0]===n.TokenType.Percentage){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=normalize(e[4].value,100,0,1);return 1===o||2===o?t=normalize(e[4].value,250,-1/0,1/0):3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=normalize(e[4].value,1,0,1);return 1===o||2===o?t=normalize(e[4].value,1,-1/0,1/0):3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function oklab(e,o){return threeChannelSpaceSeparated(e,normalize_OKLab_ChannelValues,exports.ColorNotation.OKLab,[],o)}function normalize_OKLCH_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(2===o){const o=normalizeHue(e);return!1!==o&&(e[0]===n.TokenType.Dimension&&a.syntaxFlags.add(exports.SyntaxFlag.HasDimensionValues),o)}if(e[0]===n.TokenType.Percentage){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=normalize(e[4].value,100,0,1);return 1===o?t=normalize(e[4].value,250,0,1/0):3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=normalize(e[4].value,1,0,1);return 1===o?t=normalize(e[4].value,1,0,1/0):3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function oklch(e,o){return threeChannelSpaceSeparated(e,normalize_OKLCH_ChannelValues,exports.ColorNotation.OKLCH,[],o)}function normalize_legacy_sRGB_ChannelValues(e,o,a){if(e[0]===n.TokenType.Percentage){3===o?a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageAlpha):a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);const t=normalize(e[4].value,100,0,1);return[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=normalize(e[4].value,255,0,1);return 3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function normalize_modern_sRGB_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(e[0]===n.TokenType.Percentage){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=normalize(e[4].value,100,-1/0,1/0);return 3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=normalize(e[4].value,255,-1/0,1/0);return 3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function rgb(e,o){if(e.value.some((e=>t.isTokenNode(e)&&e.value[0]===n.TokenType.Comma))){const o=rgbCommaSeparated(e);if(!1!==o)return(!o.syntaxFlags.has(exports.SyntaxFlag.HasNumberValues)||!o.syntaxFlags.has(exports.SyntaxFlag.HasPercentageValues))&&o}else{const n=rgbSpaceSeparated(e,o);if(!1!==n)return n}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,exports.ColorNotation.RGB,[exports.SyntaxFlag.LegacyRGB])}function rgbSpaceSeparated(e,o){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,exports.ColorNotation.RGB,[],o)}function toPrecision(e,o=7){e=+e,o=+o;const n=(Math.floor(e)+"").length;if(o>n)return+e.toFixed(o-n);{const a=10**(n-o);return Math.round(e/a)*a}}function XYZ_D50_to_P3_Gamut(e){const o=a.xyz.XYZ_D50_to_P3(e);if(a.utils.inGamut(o))return a.utils.clip(o);let n=e.slice();return n=a.conversions.D50_to_D65(n),n=a.conversions.XYZ_to_OKLab(n),n=a.conversions.OKLab_to_OKLCH(n),n[0]<1e-6&&(n=[0,0,0]),n[0]>.999999&&(n=[1,0,0]),a.calculations.mapGamut(n,(e=>(e=a.conversions.OKLCH_to_OKLab(e),e=a.conversions.OKLab_to_XYZ(e),e=a.conversions.XYZ_to_lin_P3(e),a.conversions.gam_P3(e))),(e=>(e=a.conversions.lin_P3(e),e=a.conversions.lin_P3_to_XYZ(e),e=a.conversions.XYZ_to_OKLab(e),a.conversions.OKLab_to_OKLCH(e))))}function serializeWithAlpha(e,o,a,r){const s=[n.TokenType.CloseParen,")",-1,-1,void 0];if("number"==typeof e.alpha){const l=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===toPrecision(l,4)?new t.FunctionNode(o,s,r):new t.FunctionNode(o,s,[...r,new t.WhitespaceNode([a]),new t.TokenNode([n.TokenType.Delim,"/",-1,-1,{value:"/"}]),new t.WhitespaceNode([a]),new t.TokenNode([n.TokenType.Number,toPrecision(l,4).toString(),-1,-1,{value:e.alpha,type:n.NumberType.Integer}])])}return new t.FunctionNode(o,s,[...r,new t.WhitespaceNode([a]),new t.TokenNode([n.TokenType.Delim,"/",-1,-1,{value:"/"}]),new t.WhitespaceNode([a]),e.alpha])}function XYZ_D50_to_sRGB_Gamut(e){const o=a.xyz.XYZ_D50_to_sRGB(e);if(a.utils.inGamut(o))return a.utils.clip(o);let n=e.slice();return n=a.conversions.D50_to_D65(n),n=a.conversions.XYZ_to_OKLab(n),n=a.conversions.OKLab_to_OKLCH(n),n[0]<1e-6&&(n=[0,0,0]),n[0]>.999999&&(n=[1,0,0]),a.calculations.mapGamut(n,(e=>(e=a.conversions.OKLCH_to_OKLab(e),e=a.conversions.OKLab_to_XYZ(e),e=a.conversions.XYZ_to_lin_sRGB(e),a.conversions.gam_sRGB(e))),(e=>(e=a.conversions.lin_sRGB(e),e=a.conversions.lin_sRGB_to_XYZ(e),e=a.conversions.XYZ_to_OKLab(e),a.conversions.OKLab_to_OKLCH(e))))}exports.color=function color(e){if(t.isFunctionNode(e)){switch(toLowerCaseAZ(e.getName())){case"rgb":case"rgba":return rgb(e,color);case"hsl":case"hsla":return hsl(e,color);case"hwb":return o=color,threeChannelSpaceSeparated(e,normalize_HWB_ChannelValues,exports.ColorNotation.HWB,[],o);case"lab":return lab(e,color);case"lch":return lch(e,color);case"oklab":return oklab(e,color);case"oklch":return oklch(e,color);case"color":return color$1(e,color);case"color-mix":return colorMix(e,color)}}var o;if(t.isTokenNode(e)){if(e.value[0]===n.TokenType.Hash)return hex(e.value);if(e.value[0]===n.TokenType.Ident){const o=namedColor(e.value[4].value);return!1!==o?o:"transparent"===toLowerCaseAZ(e.value[4].value)&&{colorNotation:exports.ColorNotation.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([exports.SyntaxFlag.ColorKeyword])}}}return!1},exports.colorDataFitsDisplayP3_Gamut=function colorDataFitsDisplayP3_Gamut(e){const o=JSON.parse(JSON.stringify(e));return o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation),!colorDataTo(o,exports.ColorNotation.Display_P3).channels.find((e=>e<-1e-5||e>1.00001))},exports.colorDataFitsRGB_Gamut=function colorDataFitsRGB_Gamut(e){const o=JSON.parse(JSON.stringify(e));return o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation),!colorDataTo(o,exports.ColorNotation.RGB).channels.find((e=>e<-1e-5||e>1.00001))},exports.colorDataTo=colorDataTo,exports.serializeOKLCH=function serializeOKLCH(e){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let o=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation!==exports.ColorNotation.OKLCH&&(o=a.xyz.XYZ_D50_to_OKLCH(colorData_to_XYZ_D50(e).channels));const r=toPrecision(o[0],6),s=toPrecision(o[1],6),l=toPrecision(o[2],6),i=[n.TokenType.Function,"oklch(",-1,-1,{value:"oklch"}],u=[n.TokenType.Whitespace," ",-1,-1,void 0];return serializeWithAlpha(e,i,u,[new t.TokenNode([n.TokenType.Number,r.toString(),-1,-1,{value:o[0],type:n.NumberType.Number}]),new t.WhitespaceNode([u]),new t.TokenNode([n.TokenType.Number,s.toString(),-1,-1,{value:o[1],type:n.NumberType.Number}]),new t.WhitespaceNode([u]),new t.TokenNode([n.TokenType.Number,l.toString(),-1,-1,{value:o[2],type:n.NumberType.Number}])])},exports.serializeP3=function serializeP3(e,o=!0){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation!==exports.ColorNotation.Display_P3&&(r=o?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(e).channels):a.xyz.XYZ_D50_to_P3(colorData_to_XYZ_D50(e).channels));const s=toPrecision(r[0],6),l=toPrecision(r[1],6),i=toPrecision(r[2],6),u=[n.TokenType.Function,"color(",-1,-1,{value:"color"}],c=[n.TokenType.Whitespace," ",-1,-1,void 0];return serializeWithAlpha(e,u,c,[new t.TokenNode([n.TokenType.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new t.WhitespaceNode([c]),new t.TokenNode([n.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:n.NumberType.Number}]),new t.WhitespaceNode([c]),new t.TokenNode([n.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:n.NumberType.Number}]),new t.WhitespaceNode([c]),new t.TokenNode([n.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:n.NumberType.Number}])])},exports.serializeRGB=function serializeRGB(e,o=!0){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));r=o?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(e).channels):a.xyz.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(e).channels);const s=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[0])))),l=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[1])))),i=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[2])))),u=[n.TokenType.CloseParen,")",-1,-1,void 0],c=[n.TokenType.Whitespace," ",-1,-1,void 0],p=[n.TokenType.Comma,",",-1,-1,void 0],N=[new t.TokenNode([n.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:n.NumberType.Integer}]),new t.TokenNode(p),new t.WhitespaceNode([c]),new t.TokenNode([n.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:n.NumberType.Integer}]),new t.TokenNode(p),new t.WhitespaceNode([c]),new t.TokenNode([n.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:n.NumberType.Integer}])];if("number"==typeof e.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===toPrecision(o,4)?new t.FunctionNode([n.TokenType.Function,"rgb(",-1,-1,{value:"rgb"}],u,N):new t.FunctionNode([n.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],u,[...N,new t.TokenNode(p),new t.WhitespaceNode([c]),new t.TokenNode([n.TokenType.Number,toPrecision(o,4).toString(),-1,-1,{value:e.alpha,type:n.NumberType.Number}])])}return new t.FunctionNode([n.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],u,[...N,new t.TokenNode(p),new t.WhitespaceNode([c]),e.alpha])}; +"use strict";var e,o,n=require("@csstools/css-tokenizer"),a=require("@csstools/color-helpers"),t=require("@csstools/css-parser-algorithms"),r=require("@csstools/css-calc");function colorData_to_XYZ_D50(e){switch(e.colorNotation){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:case exports.ColorNotation.sRGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Linear_sRGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Display_P3:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Rec2020:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.A98_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.ProPhoto_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HSL:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HWB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Lab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.LCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D50:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D65:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:a.xyz.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}exports.ColorNotation=void 0,(e=exports.ColorNotation||(exports.ColorNotation={})).A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_sRGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.sRGB="srgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65",exports.SyntaxFlag=void 0,(o=exports.SyntaxFlag||(exports.SyntaxFlag={})).ColorKeyword="color-keyword",o.HasAlpha="has-alpha",o.HasDimensionValues="has-dimension-values",o.HasNoneKeywords="has-none-keywords",o.HasNumberValues="has-number-values",o.HasPercentageAlpha="has-percentage-alpha",o.HasPercentageValues="has-percentage-values",o.HasVariableAlpha="has-variable-alpha",o.Hex="hex",o.LegacyHSL="legacy-hsl",o.LegacyRGB="legacy-rgb",o.NamedColor="named-color",o.RelativeColorSyntax="relative-color-syntax",o.ColorMix="color-mix";const s=new Set([exports.ColorNotation.A98_RGB,exports.ColorNotation.Display_P3,exports.ColorNotation.HEX,exports.ColorNotation.Linear_sRGB,exports.ColorNotation.ProPhoto_RGB,exports.ColorNotation.RGB,exports.ColorNotation.sRGB,exports.ColorNotation.Rec2020,exports.ColorNotation.XYZ_D50,exports.ColorNotation.XYZ_D65]);function colorDataTo(e,o){const n={...e};if(e.colorNotation!==o){const e=colorData_to_XYZ_D50(n);switch(o){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:n.colorNotation=exports.ColorNotation.RGB,n.channels=a.xyz.XYZ_D50_to_sRGB(e.channels);break;case exports.ColorNotation.sRGB:n.colorNotation=exports.ColorNotation.sRGB,n.channels=a.xyz.XYZ_D50_to_sRGB(e.channels);break;case exports.ColorNotation.Linear_sRGB:n.colorNotation=exports.ColorNotation.Linear_sRGB,n.channels=a.xyz.XYZ_D50_to_lin_sRGB(e.channels);break;case exports.ColorNotation.Display_P3:n.colorNotation=exports.ColorNotation.Display_P3,n.channels=a.xyz.XYZ_D50_to_P3(e.channels);break;case exports.ColorNotation.Rec2020:n.colorNotation=exports.ColorNotation.Rec2020,n.channels=a.xyz.XYZ_D50_to_rec_2020(e.channels);break;case exports.ColorNotation.ProPhoto_RGB:n.colorNotation=exports.ColorNotation.ProPhoto_RGB,n.channels=a.xyz.XYZ_D50_to_ProPhoto(e.channels);break;case exports.ColorNotation.A98_RGB:n.colorNotation=exports.ColorNotation.A98_RGB,n.channels=a.xyz.XYZ_D50_to_a98_RGB(e.channels);break;case exports.ColorNotation.HSL:n.colorNotation=exports.ColorNotation.HSL,n.channels=a.xyz.XYZ_D50_to_HSL(e.channels);break;case exports.ColorNotation.HWB:n.colorNotation=exports.ColorNotation.HWB,n.channels=a.xyz.XYZ_D50_to_HWB(e.channels);break;case exports.ColorNotation.Lab:n.colorNotation=exports.ColorNotation.Lab,n.channels=a.xyz.XYZ_D50_to_Lab(e.channels);break;case exports.ColorNotation.LCH:n.colorNotation=exports.ColorNotation.LCH,n.channels=a.xyz.XYZ_D50_to_LCH(e.channels);break;case exports.ColorNotation.OKLCH:n.colorNotation=exports.ColorNotation.OKLCH,n.channels=a.xyz.XYZ_D50_to_OKLCH(e.channels);break;case exports.ColorNotation.OKLab:n.colorNotation=exports.ColorNotation.OKLab,n.channels=a.xyz.XYZ_D50_to_OKLab(e.channels);break;case exports.ColorNotation.XYZ_D50:n.colorNotation=exports.ColorNotation.XYZ_D50,n.channels=a.xyz.XYZ_D50_to_XYZ_D50(e.channels);break;case exports.ColorNotation.XYZ_D65:n.colorNotation=exports.ColorNotation.XYZ_D65,n.channels=a.xyz.XYZ_D50_to_XYZ_D65(e.channels);break;default:throw new Error("Unsupported color notation")}}else n.channels=e.channels.map((e=>Number.isNaN(e)?0:e));if(o===e.colorNotation)n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[0,1,2]);else if(s.has(o)&&s.has(e.colorNotation))n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[0,1,2]);else switch(o){case exports.ColorNotation.HSL:switch(e.colorNotation){case exports.ColorNotation.HWB:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[0]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:n.channels=carryForwardMissingComponents(e.channels,[2],n.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[2,1,0])}break;case exports.ColorNotation.HWB:switch(e.colorNotation){case exports.ColorNotation.HSL:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[2])}break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:switch(e.colorNotation){case exports.ColorNotation.HSL:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[0,1,2]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[0])}break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:switch(e.colorNotation){case exports.ColorNotation.HSL:n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[2,1,0]);break;case exports.ColorNotation.HWB:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[0,1,2])}}return n.channels=convertPowerlessComponentsToMissingComponents(n.channels,o),n}function convertPowerlessComponentsToMissingComponents(e,o){const n=[...e];switch(o){case exports.ColorNotation.HSL:reducePrecision(n[1],4)<=0&&(n[0]=NaN);break;case exports.ColorNotation.HWB:Math.max(0,reducePrecision(n[1],4))+Math.max(0,reducePrecision(n[2],4))>=100&&(n[0]=NaN);break;case exports.ColorNotation.LCH:reducePrecision(n[1],4)<=0&&(n[2]=NaN);break;case exports.ColorNotation.OKLCH:reducePrecision(n[1],6)<=0&&(n[2]=NaN)}return n}function convertPowerlessComponentsToZeroValuesForDisplay(e,o){const n=[...e];switch(o){case exports.ColorNotation.HSL:(reducePrecision(n[2])<=0||reducePrecision(n[2])>=100)&&(n[0]=NaN,n[1]=NaN),reducePrecision(n[1])<=0&&(n[0]=NaN);break;case exports.ColorNotation.HWB:Math.max(0,reducePrecision(n[1]))+Math.max(0,reducePrecision(n[2]))>=100&&(n[0]=NaN);break;case exports.ColorNotation.Lab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case exports.ColorNotation.LCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case exports.ColorNotation.OKLab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN);break;case exports.ColorNotation.OKLCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN)}return n}function carryForwardMissingComponents(e,o,n,a){const t=[...n];for(const n of o)Number.isNaN(e[o[n]])&&(t[a[n]]=NaN);return t}function normalizeRelativeColorDataChannels(e){const o=new Map;switch(e.colorNotation){case exports.ColorNotation.RGB:case exports.ColorNotation.HEX:o.set("r",dummyNumberToken(255*e.channels[0])),o.set("g",dummyNumberToken(255*e.channels[1])),o.set("b",dummyNumberToken(255*e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.HSL:o.set("h",dummyNumberToken(e.channels[0])),o.set("s",dummyNumberToken(e.channels[1])),o.set("l",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.HWB:o.set("h",dummyNumberToken(e.channels[0])),o.set("w",dummyNumberToken(e.channels[1])),o.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:o.set("l",dummyNumberToken(e.channels[0])),o.set("a",dummyNumberToken(e.channels[1])),o.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:o.set("l",dummyNumberToken(e.channels[0])),o.set("c",dummyNumberToken(e.channels[1])),o.set("h",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.sRGB:case exports.ColorNotation.A98_RGB:case exports.ColorNotation.Display_P3:case exports.ColorNotation.Rec2020:case exports.ColorNotation.Linear_sRGB:case exports.ColorNotation.ProPhoto_RGB:o.set("r",dummyNumberToken(e.channels[0])),o.set("g",dummyNumberToken(e.channels[1])),o.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha));break;case exports.ColorNotation.XYZ_D50:case exports.ColorNotation.XYZ_D65:o.set("x",dummyNumberToken(e.channels[0])),o.set("y",dummyNumberToken(e.channels[1])),o.set("z",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&o.set("alpha",dummyNumberToken(e.alpha))}return o}function noneToZeroInRelativeColorDataChannels(e){const o=new Map(e);for(const[n,a]of e)Number.isNaN(a[4].value)&&o.set(n,dummyNumberToken(0));return o}function dummyNumberToken(e){return[n.TokenType.Number,e.toString(),-1,-1,{value:e,type:n.NumberType.Number}]}function reducePrecision(e,o=7){if(Number.isNaN(e))return 0;const n=Math.pow(10,o);return Math.round(e*n)/n}function normalize(e,o,n,a){return Math.min(Math.max(e/o,n),a)}const l=/[A-Z]/g;function toLowerCaseAZ(e){return e.replace(l,(e=>String.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(e[0]===n.TokenType.Percentage){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=normalize(e[4].value,100,-1/0,1/0);return 3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=normalize(e[4].value,1,-1/0,1/0);return 3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}const i=new Set(["srgb","srgb-linear","display-p3","a98-rgb","prophoto-rgb","rec2020","xyz","xyz-d50","xyz-d65"]);function color$1(e,o){const a=[],s=[],l=[],u=[];let c,p,N=!1,m=!1;const h={colorNotation:exports.ColorNotation.sRGB,channels:[0,0,0],alpha:1,syntaxFlags:new Set([])};let y=a;for(let x=0;x=0){i=u.value[4].value;continue}}return!1}if(!l)return!1;a.push({color:l,percentage:i}),l=!1,i=!1}}if(l&&a.push({color:l,percentage:i}),2!==a.length)return!1;let u=a[0].percentage,c=a[1].percentage;return(!1===u||!(u<0||u>100))&&((!1===c||!(c<0||c>100))&&(!1===u&&!1===c?(u=50,c=50):!1!==u&&!1===c?c=100-u:!1===u&&!1!==c&&(u=100-c),(0!==u||0!==c)&&(!1!==u&&!1!==c&&(u+c>100&&(u=u/(u+c)*100,c=c/(u+c)*100),u+c<100&&(s=(u+c)/100,u=u/(u+c)*100,c=c/(u+c)*100),{a:{color:a[0].color,percentage:u},b:{color:a[1].color,percentage:c},alphaMultiplier:s}))))}function colorMixRectangular(e,o){if(!o)return!1;const n=o.a.color,a=o.b.color,t=o.a.percentage/100;let r=n.channels,s=a.channels,l=exports.ColorNotation.RGB,i=n.alpha;if("number"!=typeof i)return!1;let u=a.alpha;if("number"!=typeof u)return!1;switch(i=Number.isNaN(i)?u:i,u=Number.isNaN(u)?i:u,e){case"srgb":l=exports.ColorNotation.RGB;break;case"srgb-linear":l=exports.ColorNotation.Linear_sRGB;break;case"lab":l=exports.ColorNotation.Lab;break;case"oklab":l=exports.ColorNotation.OKLab;break;case"xyz-d50":l=exports.ColorNotation.XYZ_D50;break;case"xyz":case"xyz-d65":l=exports.ColorNotation.XYZ_D65}r=colorDataTo(n,l).channels,s=colorDataTo(a,l).channels,r[0]=fillInMissingComponent(r[0],s[0]),s[0]=fillInMissingComponent(s[0],r[0]),r[1]=fillInMissingComponent(r[1],s[1]),s[1]=fillInMissingComponent(s[1],r[1]),r[2]=fillInMissingComponent(r[2],s[2]),s[2]=fillInMissingComponent(s[2],r[2]),r[0]=premultiply(r[0],i),r[1]=premultiply(r[1],i),r[2]=premultiply(r[2],i),s[0]=premultiply(s[0],u),s[1]=premultiply(s[1],u),s[2]=premultiply(s[2],u);const c=interpolate(i,u,t);return{colorNotation:l,channels:[un_premultiply(interpolate(r[0],s[0],t),c),un_premultiply(interpolate(r[1],s[1],t),c),un_premultiply(interpolate(r[2],s[2],t),c)],alpha:c*o.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function colorMixPolar(e,o,n){if(!n)return!1;const a=n.a.color,t=n.b.color,r=n.a.percentage/100;let s=a.channels,l=t.channels,i=0,u=0,c=0,p=0,N=0,m=0,h=exports.ColorNotation.RGB,y=a.alpha;if("number"!=typeof y)return!1;let x=t.alpha;if("number"!=typeof x)return!1;switch(y=Number.isNaN(y)?x:y,x=Number.isNaN(x)?y:x,e){case"hsl":h=exports.ColorNotation.HSL;break;case"hwb":h=exports.ColorNotation.HWB;break;case"lch":h=exports.ColorNotation.LCH;break;case"oklch":h=exports.ColorNotation.OKLCH}switch(s=colorDataTo(a,h).channels,l=colorDataTo(t,h).channels,e){case"hsl":case"hwb":i=s[0],u=l[0],c=s[1],p=l[1],N=s[2],m=l[2];break;case"lch":case"oklch":c=s[0],p=l[0],N=s[1],m=l[1],i=s[2],u=l[2]}i=fillInMissingComponent(i,u),Number.isNaN(i)&&(i=0),u=fillInMissingComponent(u,i),Number.isNaN(u)&&(u=0),c=fillInMissingComponent(c,p),p=fillInMissingComponent(p,c),N=fillInMissingComponent(N,m),m=fillInMissingComponent(m,N);const T=u-i;switch(o){case"shorter":T>180?i+=360:T<-180&&(u+=360);break;case"longer":-180<180&&(T>0?i+=360:u+=360);break;case"increasing":T<0&&(u+=360);break;case"decreasing":T>0&&(i+=360);break;default:throw new Error("Unknown hue interpolation method")}c=premultiply(c,y),N=premultiply(N,y),p=premultiply(p,x),m=premultiply(m,x);let b=[0,0,0];const C=interpolate(y,x,r);switch(e){case"hsl":case"hwb":b=[interpolate(i,u,r),un_premultiply(interpolate(c,p,r),C),un_premultiply(interpolate(N,m,r),C)];break;case"lch":case"oklch":b=[un_premultiply(interpolate(c,p,r),C),un_premultiply(interpolate(N,m,r),C),interpolate(i,u,r)]}return{colorNotation:h,channels:b,alpha:C*n.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function fillInMissingComponent(e,o){return Number.isNaN(e)?o:e}function interpolate(e,o,n){return e*n+o*(1-n)}function premultiply(e,o){return Number.isNaN(o)?e:Number.isNaN(e)?NaN:e*o}function un_premultiply(e,o){return 0===o||Number.isNaN(o)?e:Number.isNaN(e)?NaN:e/o}function hex(e){const o=toLowerCaseAZ(e[4].value);if(o.match(/[^a-f0-9]/))return!1;const n={colorNotation:exports.ColorNotation.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([exports.SyntaxFlag.Hex])},a=o.length;if(3===a){const e=o[0],a=o[1],t=o[2];return n.channels=[parseInt(e+e,16)/255,parseInt(a+a,16)/255,parseInt(t+t,16)/255],n}if(6===a){const e=o[0]+o[1],a=o[2]+o[3],t=o[4]+o[5];return n.channels=[parseInt(e,16)/255,parseInt(a,16)/255,parseInt(t,16)/255],n}if(4===a){const e=o[0],a=o[1],t=o[2],r=o[3];return n.channels=[parseInt(e+e,16)/255,parseInt(a+a,16)/255,parseInt(t+t,16)/255],n.alpha=parseInt(r+r,16)/255,n.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),n}if(8===a){const e=o[0]+o[1],a=o[2]+o[3],t=o[4]+o[5],r=o[6]+o[7];return n.channels=[parseInt(e,16)/255,parseInt(a,16)/255,parseInt(t,16)/255],n.alpha=parseInt(r,16)/255,n.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),n}return!1}function normalizeHue(e){if(e[0]===n.TokenType.Number)return e[4].value=e[4].value%360,e[1]=e[4].value.toString(),e;if(e[0]===n.TokenType.Dimension){let o=e[4].value;switch(toLowerCaseAZ(e[4].unit)){case"deg":break;case"rad":o=180*e[4].value/Math.PI;break;case"grad":o=.9*e[4].value;break;case"turn":o=360*e[4].value;break;default:return!1}return o%=360,[n.TokenType.Number,o.toString(),e[2],e[3],{value:o,type:n.NumberType.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(e,o,a){if(0===o){const o=normalizeHue(e);return!1!==o&&(e[0]===n.TokenType.Dimension&&a.syntaxFlags.add(exports.SyntaxFlag.HasDimensionValues),o)}if(e[0]===n.TokenType.Percentage){3===o?a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageAlpha):a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=normalize(e[4].value,1,0,100);return 3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){if(3!==o)return!1;let a=normalize(e[4].value,1,0,100);return 3===o&&(a=normalize(e[4].value,1,0,1)),[n.TokenType.Number,a.toString(),e[2],e[3],{value:a,type:n.NumberType.Number}]}return!1}function normalize_modern_HSL_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(0===o){const o=normalizeHue(e);return!1!==o&&(e[0]===n.TokenType.Dimension&&a.syntaxFlags.add(exports.SyntaxFlag.HasDimensionValues),o)}if(e[0]===n.TokenType.Percentage){3===o?a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageAlpha):a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=e[4].value;return 3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=e[4].value;return 3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function threeChannelLegacySyntax(e,o,a,s){const l=[],i=[],u=[],c=[],p={colorNotation:a,channels:[0,0,0],alpha:1,syntaxFlags:new Set(s)};let N=l;for(let o=0;ot.isTokenNode(e)&&e.value[0]===n.TokenType.Comma))){const o=hslCommaSeparated(e);if(!1!==o)return o}{const n=hslSpaceSeparated(e,o);if(!1!==n)return n}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,exports.ColorNotation.HSL,[exports.SyntaxFlag.LegacyHSL])}function hslSpaceSeparated(e,o){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,exports.ColorNotation.HSL,[],o)}function normalize_HWB_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(0===o){const o=normalizeHue(e);return!1!==o&&(e[0]===n.TokenType.Dimension&&a.syntaxFlags.add(exports.SyntaxFlag.HasDimensionValues),o)}if(e[0]===n.TokenType.Percentage){3===o?a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageAlpha):a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=e[4].value;return 3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=e[4].value;return 3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function normalize_Lab_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(e[0]===n.TokenType.Percentage){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=normalize(e[4].value,1,0,100);return 1===o||2===o?t=normalize(e[4].value,.8,-1/0,1/0):3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=normalize(e[4].value,1,0,100);return 1===o||2===o?t=normalize(e[4].value,1,-1/0,1/0):3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function lab(e,o){return threeChannelSpaceSeparated(e,normalize_Lab_ChannelValues,exports.ColorNotation.Lab,[],o)}function normalize_LCH_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(2===o){const o=normalizeHue(e);return!1!==o&&(e[0]===n.TokenType.Dimension&&a.syntaxFlags.add(exports.SyntaxFlag.HasDimensionValues),o)}if(e[0]===n.TokenType.Percentage){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=normalize(e[4].value,1,0,100);return 1===o?t=normalize(e[4].value,100/150,0,1/0):3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=normalize(e[4].value,1,0,100);return 1===o?t=normalize(e[4].value,1,0,1/0):3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function lch(e,o){return threeChannelSpaceSeparated(e,normalize_LCH_ChannelValues,exports.ColorNotation.LCH,[],o)}const N=new Map;for(const[e,o]of Object.entries(a.namedColors))N.set(e,o);function namedColor(e){const o=N.get(toLowerCaseAZ(e));return!!o&&{colorNotation:exports.ColorNotation.RGB,channels:[o[0]/255,o[1]/255,o[2]/255],alpha:1,syntaxFlags:new Set([exports.SyntaxFlag.ColorKeyword,exports.SyntaxFlag.NamedColor])}}function normalize_OKLab_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(e[0]===n.TokenType.Percentage){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=normalize(e[4].value,100,0,1);return 1===o||2===o?t=normalize(e[4].value,250,-1/0,1/0):3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=normalize(e[4].value,1,0,1);return 1===o||2===o?t=normalize(e[4].value,1,-1/0,1/0):3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function oklab(e,o){return threeChannelSpaceSeparated(e,normalize_OKLab_ChannelValues,exports.ColorNotation.OKLab,[],o)}function normalize_OKLCH_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(2===o){const o=normalizeHue(e);return!1!==o&&(e[0]===n.TokenType.Dimension&&a.syntaxFlags.add(exports.SyntaxFlag.HasDimensionValues),o)}if(e[0]===n.TokenType.Percentage){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=normalize(e[4].value,100,0,1);return 1===o?t=normalize(e[4].value,250,0,1/0):3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=normalize(e[4].value,1,0,1);return 1===o?t=normalize(e[4].value,1,0,1/0):3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function oklch(e,o){return threeChannelSpaceSeparated(e,normalize_OKLCH_ChannelValues,exports.ColorNotation.OKLCH,[],o)}function normalize_legacy_sRGB_ChannelValues(e,o,a){if(e[0]===n.TokenType.Percentage){3===o?a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageAlpha):a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);const t=normalize(e[4].value,100,0,1);return[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=normalize(e[4].value,255,0,1);return 3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function normalize_modern_sRGB_ChannelValues(e,o,a){if(e[0]===n.TokenType.Ident&&"none"===toLowerCaseAZ(e[4].value))return a.syntaxFlags.add(exports.SyntaxFlag.HasNoneKeywords),[n.TokenType.Number,"none",e[2],e[3],{value:NaN,type:n.NumberType.Number}];if(e[0]===n.TokenType.Percentage){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasPercentageValues);let t=normalize(e[4].value,100,-1/0,1/0);return 3===o&&(t=normalize(e[4].value,100,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}if(e[0]===n.TokenType.Number){3!==o&&a.syntaxFlags.add(exports.SyntaxFlag.HasNumberValues);let t=normalize(e[4].value,255,-1/0,1/0);return 3===o&&(t=normalize(e[4].value,1,0,1)),[n.TokenType.Number,t.toString(),e[2],e[3],{value:t,type:n.NumberType.Number}]}return!1}function rgb(e,o){if(e.value.some((e=>t.isTokenNode(e)&&e.value[0]===n.TokenType.Comma))){const o=rgbCommaSeparated(e);if(!1!==o)return(!o.syntaxFlags.has(exports.SyntaxFlag.HasNumberValues)||!o.syntaxFlags.has(exports.SyntaxFlag.HasPercentageValues))&&o}else{const n=rgbSpaceSeparated(e,o);if(!1!==n)return n}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,exports.ColorNotation.RGB,[exports.SyntaxFlag.LegacyRGB])}function rgbSpaceSeparated(e,o){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,exports.ColorNotation.RGB,[],o)}function toPrecision(e,o=7){e=+e,o=+o;const n=(Math.floor(e)+"").length;if(o>n)return+e.toFixed(o-n);{const a=10**(n-o);return Math.round(e/a)*a}}function XYZ_D50_to_P3_Gamut(e){const o=a.xyz.XYZ_D50_to_P3(e);if(a.utils.inGamut(o))return a.utils.clip(o);let n=e.slice();return n=a.conversions.D50_to_D65(n),n=a.conversions.XYZ_to_OKLab(n),n=a.conversions.OKLab_to_OKLCH(n),n[0]<1e-6&&(n=[0,0,0]),n[0]>.999999&&(n=[1,0,0]),a.calculations.mapGamut(n,(e=>(e=a.conversions.OKLCH_to_OKLab(e),e=a.conversions.OKLab_to_XYZ(e),e=a.conversions.XYZ_to_lin_P3(e),a.conversions.gam_P3(e))),(e=>(e=a.conversions.lin_P3(e),e=a.conversions.lin_P3_to_XYZ(e),e=a.conversions.XYZ_to_OKLab(e),a.conversions.OKLab_to_OKLCH(e))))}function serializeWithAlpha(e,o,a,r){const s=[n.TokenType.CloseParen,")",-1,-1,void 0];if("number"==typeof e.alpha){const l=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===toPrecision(l,4)?new t.FunctionNode(o,s,r):new t.FunctionNode(o,s,[...r,new t.WhitespaceNode([a]),new t.TokenNode([n.TokenType.Delim,"/",-1,-1,{value:"/"}]),new t.WhitespaceNode([a]),new t.TokenNode([n.TokenType.Number,toPrecision(l,4).toString(),-1,-1,{value:e.alpha,type:n.NumberType.Integer}])])}return new t.FunctionNode(o,s,[...r,new t.WhitespaceNode([a]),new t.TokenNode([n.TokenType.Delim,"/",-1,-1,{value:"/"}]),new t.WhitespaceNode([a]),e.alpha])}function XYZ_D50_to_sRGB_Gamut(e){const o=a.xyz.XYZ_D50_to_sRGB(e);if(a.utils.inGamut(o))return a.utils.clip(o);let n=e.slice();return n=a.conversions.D50_to_D65(n),n=a.conversions.XYZ_to_OKLab(n),n=a.conversions.OKLab_to_OKLCH(n),n[0]<1e-6&&(n=[0,0,0]),n[0]>.999999&&(n=[1,0,0]),a.calculations.mapGamut(n,(e=>(e=a.conversions.OKLCH_to_OKLab(e),e=a.conversions.OKLab_to_XYZ(e),e=a.conversions.XYZ_to_lin_sRGB(e),a.conversions.gam_sRGB(e))),(e=>(e=a.conversions.lin_sRGB(e),e=a.conversions.lin_sRGB_to_XYZ(e),e=a.conversions.XYZ_to_OKLab(e),a.conversions.OKLab_to_OKLCH(e))))}exports.color=function color(e){if(t.isFunctionNode(e)){switch(toLowerCaseAZ(e.getName())){case"rgb":case"rgba":return rgb(e,color);case"hsl":case"hsla":return hsl(e,color);case"hwb":return o=color,threeChannelSpaceSeparated(e,normalize_HWB_ChannelValues,exports.ColorNotation.HWB,[],o);case"lab":return lab(e,color);case"lch":return lch(e,color);case"oklab":return oklab(e,color);case"oklch":return oklch(e,color);case"color":return color$1(e,color);case"color-mix":return colorMix(e,color)}}var o;if(t.isTokenNode(e)){if(e.value[0]===n.TokenType.Hash)return hex(e.value);if(e.value[0]===n.TokenType.Ident){const o=namedColor(e.value[4].value);return!1!==o?o:"transparent"===toLowerCaseAZ(e.value[4].value)&&{colorNotation:exports.ColorNotation.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([exports.SyntaxFlag.ColorKeyword])}}}return!1},exports.colorDataFitsDisplayP3_Gamut=function colorDataFitsDisplayP3_Gamut(e){const o={...e,channels:[...e.channels]};return o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation),!colorDataTo(o,exports.ColorNotation.Display_P3).channels.find((e=>e<-1e-5||e>1.00001))},exports.colorDataFitsRGB_Gamut=function colorDataFitsRGB_Gamut(e){const o={...e,channels:[...e.channels]};return o.channels=convertPowerlessComponentsToZeroValuesForDisplay(o.channels,o.colorNotation),!colorDataTo(o,exports.ColorNotation.RGB).channels.find((e=>e<-1e-5||e>1.00001))},exports.colorDataTo=colorDataTo,exports.serializeOKLCH=function serializeOKLCH(e){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let o=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation!==exports.ColorNotation.OKLCH&&(o=a.xyz.XYZ_D50_to_OKLCH(colorData_to_XYZ_D50(e).channels));const r=toPrecision(o[0],6),s=toPrecision(o[1],6),l=toPrecision(o[2],6),i=[n.TokenType.Function,"oklch(",-1,-1,{value:"oklch"}],u=[n.TokenType.Whitespace," ",-1,-1,void 0];return serializeWithAlpha(e,i,u,[new t.TokenNode([n.TokenType.Number,r.toString(),-1,-1,{value:o[0],type:n.NumberType.Number}]),new t.WhitespaceNode([u]),new t.TokenNode([n.TokenType.Number,s.toString(),-1,-1,{value:o[1],type:n.NumberType.Number}]),new t.WhitespaceNode([u]),new t.TokenNode([n.TokenType.Number,l.toString(),-1,-1,{value:o[2],type:n.NumberType.Number}])])},exports.serializeP3=function serializeP3(e,o=!0){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation!==exports.ColorNotation.Display_P3&&(r=o?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(e).channels):a.xyz.XYZ_D50_to_P3(colorData_to_XYZ_D50(e).channels));const s=toPrecision(r[0],6),l=toPrecision(r[1],6),i=toPrecision(r[2],6),u=[n.TokenType.Function,"color(",-1,-1,{value:"color"}],c=[n.TokenType.Whitespace," ",-1,-1,void 0];return serializeWithAlpha(e,u,c,[new t.TokenNode([n.TokenType.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new t.WhitespaceNode([c]),new t.TokenNode([n.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:n.NumberType.Number}]),new t.WhitespaceNode([c]),new t.TokenNode([n.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:n.NumberType.Number}]),new t.WhitespaceNode([c]),new t.TokenNode([n.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:n.NumberType.Number}])])},exports.serializeRGB=function serializeRGB(e,o=!0){e.channels=convertPowerlessComponentsToZeroValuesForDisplay(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));r=o?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(e).channels):a.xyz.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(e).channels);const s=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[0])))),l=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[1])))),i=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[2])))),u=[n.TokenType.CloseParen,")",-1,-1,void 0],c=[n.TokenType.Whitespace," ",-1,-1,void 0],p=[n.TokenType.Comma,",",-1,-1,void 0],N=[new t.TokenNode([n.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:n.NumberType.Integer}]),new t.TokenNode(p),new t.WhitespaceNode([c]),new t.TokenNode([n.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:n.NumberType.Integer}]),new t.TokenNode(p),new t.WhitespaceNode([c]),new t.TokenNode([n.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:n.NumberType.Integer}])];if("number"==typeof e.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===toPrecision(o,4)?new t.FunctionNode([n.TokenType.Function,"rgb(",-1,-1,{value:"rgb"}],u,N):new t.FunctionNode([n.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],u,[...N,new t.TokenNode(p),new t.WhitespaceNode([c]),new t.TokenNode([n.TokenType.Number,toPrecision(o,4).toString(),-1,-1,{value:e.alpha,type:n.NumberType.Number}])])}return new t.FunctionNode([n.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],u,[...N,new t.TokenNode(p),new t.WhitespaceNode([c]),e.alpha])}; diff --git a/packages/css-color-parser/dist/index.mjs b/packages/css-color-parser/dist/index.mjs index 9470fcaf8..950bcf133 100644 --- a/packages/css-color-parser/dist/index.mjs +++ b/packages/css-color-parser/dist/index.mjs @@ -1 +1 @@ -import{TokenType as e,NumberType as a}from"@csstools/css-tokenizer";import{xyz as n,namedColors as r,utils as o,conversions as t,calculations as l}from"@csstools/color-helpers";import{isWhitespaceNode as s,isCommentNode as u,isTokenNode as i,isFunctionNode as c,TokenNode as m,FunctionNode as h,WhitespaceNode as N}from"@csstools/css-parser-algorithms";import{mathFunctionNames as p,calcFromComponentValues as b}from"@csstools/css-calc";var _,g;function colorData_to_XYZ_D50(e){switch(e.colorNotation){case _.HEX:case _.RGB:case _.sRGB:return{...e,colorNotation:_.XYZ_D50,channels:n.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Linear_sRGB:return{...e,colorNotation:_.XYZ_D50,channels:n.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Display_P3:return{...e,colorNotation:_.XYZ_D50,channels:n.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Rec2020:return{...e,colorNotation:_.XYZ_D50,channels:n.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.A98_RGB:return{...e,colorNotation:_.XYZ_D50,channels:n.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.ProPhoto_RGB:return{...e,colorNotation:_.XYZ_D50,channels:n.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.HSL:return{...e,colorNotation:_.XYZ_D50,channels:n.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.HWB:return{...e,colorNotation:_.XYZ_D50,channels:n.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Lab:return{...e,colorNotation:_.XYZ_D50,channels:n.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.OKLab:return{...e,colorNotation:_.XYZ_D50,channels:n.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.LCH:return{...e,colorNotation:_.XYZ_D50,channels:n.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.OKLCH:return{...e,colorNotation:_.XYZ_D50,channels:n.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.XYZ_D50:return{...e,colorNotation:_.XYZ_D50,channels:n.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.XYZ_D65:return{...e,colorNotation:_.XYZ_D50,channels:n.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}!function(e){e.A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_sRGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.sRGB="srgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65"}(_||(_={})),function(e){e.ColorKeyword="color-keyword",e.HasAlpha="has-alpha",e.HasDimensionValues="has-dimension-values",e.HasNoneKeywords="has-none-keywords",e.HasNumberValues="has-number-values",e.HasPercentageAlpha="has-percentage-alpha",e.HasPercentageValues="has-percentage-values",e.HasVariableAlpha="has-variable-alpha",e.Hex="hex",e.LegacyHSL="legacy-hsl",e.LegacyRGB="legacy-rgb",e.NamedColor="named-color",e.RelativeColorSyntax="relative-color-syntax",e.ColorMix="color-mix"}(g||(g={}));const f=new Set([_.A98_RGB,_.Display_P3,_.HEX,_.Linear_sRGB,_.ProPhoto_RGB,_.RGB,_.sRGB,_.Rec2020,_.XYZ_D50,_.XYZ_D65]);function colorDataTo(e,a){const r={...e};if(e.colorNotation!==a){const e=colorData_to_XYZ_D50(r);switch(a){case _.HEX:case _.RGB:r.colorNotation=_.RGB,r.channels=n.XYZ_D50_to_sRGB(e.channels);break;case _.sRGB:r.colorNotation=_.sRGB,r.channels=n.XYZ_D50_to_sRGB(e.channels);break;case _.Linear_sRGB:r.colorNotation=_.Linear_sRGB,r.channels=n.XYZ_D50_to_lin_sRGB(e.channels);break;case _.Display_P3:r.colorNotation=_.Display_P3,r.channels=n.XYZ_D50_to_P3(e.channels);break;case _.Rec2020:r.colorNotation=_.Rec2020,r.channels=n.XYZ_D50_to_rec_2020(e.channels);break;case _.ProPhoto_RGB:r.colorNotation=_.ProPhoto_RGB,r.channels=n.XYZ_D50_to_ProPhoto(e.channels);break;case _.A98_RGB:r.colorNotation=_.A98_RGB,r.channels=n.XYZ_D50_to_a98_RGB(e.channels);break;case _.HSL:r.colorNotation=_.HSL,r.channels=n.XYZ_D50_to_HSL(e.channels);break;case _.HWB:r.colorNotation=_.HWB,r.channels=n.XYZ_D50_to_HWB(e.channels);break;case _.Lab:r.colorNotation=_.Lab,r.channels=n.XYZ_D50_to_Lab(e.channels);break;case _.LCH:r.colorNotation=_.LCH,r.channels=n.XYZ_D50_to_LCH(e.channels);break;case _.OKLCH:r.colorNotation=_.OKLCH,r.channels=n.XYZ_D50_to_OKLCH(e.channels);break;case _.OKLab:r.colorNotation=_.OKLab,r.channels=n.XYZ_D50_to_OKLab(e.channels);break;case _.XYZ_D50:r.colorNotation=_.XYZ_D50,r.channels=n.XYZ_D50_to_XYZ_D50(e.channels);break;case _.XYZ_D65:r.colorNotation=_.XYZ_D65,r.channels=n.XYZ_D50_to_XYZ_D65(e.channels);break;default:throw new Error("Unsupported color notation")}}else r.channels=e.channels.map((e=>Number.isNaN(e)?0:e));if(a===e.colorNotation)r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);else if(f.has(a)&&f.has(e.colorNotation))r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);else switch(a){case _.HSL:switch(e.colorNotation){case _.HWB:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case _.Lab:case _.OKLab:r.channels=carryForwardMissingComponents(e.channels,[2],r.channels,[0]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[2,1,0])}break;case _.HWB:switch(e.colorNotation){case _.HSL:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2])}break;case _.Lab:case _.OKLab:switch(e.colorNotation){case _.HSL:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2]);break;case _.Lab:case _.OKLab:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0])}break;case _.LCH:case _.OKLCH:switch(e.colorNotation){case _.HSL:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[2,1,0]);break;case _.HWB:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2]);break;case _.Lab:case _.OKLab:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2])}}return r.channels=convertPowerlessComponentsToMissingComponents(r.channels,a),r}function convertPowerlessComponentsToMissingComponents(e,a){const n=[...e];switch(a){case _.HSL:reducePrecision(n[1],4)<=0&&(n[0]=NaN);break;case _.HWB:Math.max(0,reducePrecision(n[1],4))+Math.max(0,reducePrecision(n[2],4))>=100&&(n[0]=NaN);break;case _.LCH:reducePrecision(n[1],4)<=0&&(n[2]=NaN);break;case _.OKLCH:reducePrecision(n[1],6)<=0&&(n[2]=NaN)}return n}function convertPowerlessComponentsToZeroValuesForDisplay(e,a){const n=[...e];switch(a){case _.HSL:(reducePrecision(n[2])<=0||reducePrecision(n[2])>=100)&&(n[0]=NaN,n[1]=NaN),reducePrecision(n[1])<=0&&(n[0]=NaN);break;case _.HWB:Math.max(0,reducePrecision(n[1]))+Math.max(0,reducePrecision(n[2]))>=100&&(n[0]=NaN);break;case _.Lab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case _.LCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case _.OKLab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN);break;case _.OKLCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN)}return n}function carryForwardMissingComponents(e,a,n,r){const o=[...n];for(const n of a)Number.isNaN(e[a[n]])&&(o[r[n]]=NaN);return o}function normalizeRelativeColorDataChannels(e){const a=new Map;switch(e.colorNotation){case _.RGB:case _.HEX:a.set("r",dummyNumberToken(255*e.channels[0])),a.set("g",dummyNumberToken(255*e.channels[1])),a.set("b",dummyNumberToken(255*e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.HSL:a.set("h",dummyNumberToken(e.channels[0])),a.set("s",dummyNumberToken(e.channels[1])),a.set("l",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.HWB:a.set("h",dummyNumberToken(e.channels[0])),a.set("w",dummyNumberToken(e.channels[1])),a.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.Lab:case _.OKLab:a.set("l",dummyNumberToken(e.channels[0])),a.set("a",dummyNumberToken(e.channels[1])),a.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.LCH:case _.OKLCH:a.set("l",dummyNumberToken(e.channels[0])),a.set("c",dummyNumberToken(e.channels[1])),a.set("h",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.sRGB:case _.A98_RGB:case _.Display_P3:case _.Rec2020:case _.Linear_sRGB:case _.ProPhoto_RGB:a.set("r",dummyNumberToken(e.channels[0])),a.set("g",dummyNumberToken(e.channels[1])),a.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.XYZ_D50:case _.XYZ_D65:a.set("x",dummyNumberToken(e.channels[0])),a.set("y",dummyNumberToken(e.channels[1])),a.set("z",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha))}return a}function noneToZeroInRelativeColorDataChannels(e){const a=new Map(e);for(const[n,r]of e)Number.isNaN(r[4].value)&&a.set(n,dummyNumberToken(0));return a}function dummyNumberToken(n){return[e.Number,n.toString(),-1,-1,{value:n,type:a.Number}]}function reducePrecision(e,a=7){if(Number.isNaN(e))return 0;const n=Math.pow(10,a);return Math.round(e*n)/n}function colorDataFitsRGB_Gamut(e){const a=JSON.parse(JSON.stringify(e));a.channels=convertPowerlessComponentsToZeroValuesForDisplay(a.channels,a.colorNotation);return!colorDataTo(a,_.RGB).channels.find((e=>e<-1e-5||e>1.00001))}function colorDataFitsDisplayP3_Gamut(e){const a=JSON.parse(JSON.stringify(e));a.channels=convertPowerlessComponentsToZeroValuesForDisplay(a.channels,a.colorNotation);return!colorDataTo(a,_.Display_P3).channels.find((e=>e<-1e-5||e>1.00001))}function normalize(e,a,n,r){return Math.min(Math.max(e/a,n),r)}const v=/[A-Z]/g;function toLowerCaseAZ(e){return e.replace(v,(e=>String.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(n[0]===e.Percentage){3!==r&&o.syntaxFlags.add(g.HasPercentageValues);let t=normalize(n[4].value,100,-1/0,1/0);return 3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=normalize(n[4].value,1,-1/0,1/0);return 3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}const d=new Set(["srgb","srgb-linear","display-p3","a98-rgb","prophoto-rgb","rec2020","xyz","xyz-d50","xyz-d65"]);function color$1(a,n){const r=[],o=[],t=[],l=[];let h,N,f=!1,v=!1;const y={colorNotation:_.sRGB,channels:[0,0,0],alpha:1,syntaxFlags:new Set([])};let C=r;for(let _=0;_=0){l=m.value[4].value;continue}}return!1}if(!t)return!1;r.push({color:t,percentage:l}),t=!1,l=!1}}if(t&&r.push({color:t,percentage:l}),2!==r.length)return!1;let m=r[0].percentage,h=r[1].percentage;return(!1===m||!(m<0||m>100))&&((!1===h||!(h<0||h>100))&&(!1===m&&!1===h?(m=50,h=50):!1!==m&&!1===h?h=100-m:!1===m&&!1!==h&&(m=100-h),(0!==m||0!==h)&&(!1!==m&&!1!==h&&(m+h>100&&(m=m/(m+h)*100,h=h/(m+h)*100),m+h<100&&(o=(m+h)/100,m=m/(m+h)*100,h=h/(m+h)*100),{a:{color:r[0].color,percentage:m},b:{color:r[1].color,percentage:h},alphaMultiplier:o}))))}function colorMixRectangular(e,a){if(!a)return!1;const n=a.a.color,r=a.b.color,o=a.a.percentage/100;let t=n.channels,l=r.channels,s=_.RGB,u=n.alpha;if("number"!=typeof u)return!1;let i=r.alpha;if("number"!=typeof i)return!1;switch(u=Number.isNaN(u)?i:u,i=Number.isNaN(i)?u:i,e){case"srgb":s=_.RGB;break;case"srgb-linear":s=_.Linear_sRGB;break;case"lab":s=_.Lab;break;case"oklab":s=_.OKLab;break;case"xyz-d50":s=_.XYZ_D50;break;case"xyz":case"xyz-d65":s=_.XYZ_D65}t=colorDataTo(n,s).channels,l=colorDataTo(r,s).channels,t[0]=fillInMissingComponent(t[0],l[0]),l[0]=fillInMissingComponent(l[0],t[0]),t[1]=fillInMissingComponent(t[1],l[1]),l[1]=fillInMissingComponent(l[1],t[1]),t[2]=fillInMissingComponent(t[2],l[2]),l[2]=fillInMissingComponent(l[2],t[2]),t[0]=premultiply(t[0],u),t[1]=premultiply(t[1],u),t[2]=premultiply(t[2],u),l[0]=premultiply(l[0],i),l[1]=premultiply(l[1],i),l[2]=premultiply(l[2],i);const c=interpolate(u,i,o);return{colorNotation:s,channels:[un_premultiply(interpolate(t[0],l[0],o),c),un_premultiply(interpolate(t[1],l[1],o),c),un_premultiply(interpolate(t[2],l[2],o),c)],alpha:c*a.alphaMultiplier,syntaxFlags:new Set([g.ColorMix])}}function colorMixPolar(e,a,n){if(!n)return!1;const r=n.a.color,o=n.b.color,t=n.a.percentage/100;let l=r.channels,s=o.channels,u=0,i=0,c=0,m=0,h=0,N=0,p=_.RGB,b=r.alpha;if("number"!=typeof b)return!1;let f=o.alpha;if("number"!=typeof f)return!1;switch(b=Number.isNaN(b)?f:b,f=Number.isNaN(f)?b:f,e){case"hsl":p=_.HSL;break;case"hwb":p=_.HWB;break;case"lch":p=_.LCH;break;case"oklch":p=_.OKLCH}switch(l=colorDataTo(r,p).channels,s=colorDataTo(o,p).channels,e){case"hsl":case"hwb":u=l[0],i=s[0],c=l[1],m=s[1],h=l[2],N=s[2];break;case"lch":case"oklch":c=l[0],m=s[0],h=l[1],N=s[1],u=l[2],i=s[2]}u=fillInMissingComponent(u,i),Number.isNaN(u)&&(u=0),i=fillInMissingComponent(i,u),Number.isNaN(i)&&(i=0),c=fillInMissingComponent(c,m),m=fillInMissingComponent(m,c),h=fillInMissingComponent(h,N),N=fillInMissingComponent(N,h);const v=i-u;switch(a){case"shorter":v>180?u+=360:v<-180&&(i+=360);break;case"longer":-180<180&&(v>0?u+=360:i+=360);break;case"increasing":v<0&&(i+=360);break;case"decreasing":v>0&&(u+=360);break;default:throw new Error("Unknown hue interpolation method")}c=premultiply(c,b),h=premultiply(h,b),m=premultiply(m,f),N=premultiply(N,f);let d=[0,0,0];const y=interpolate(b,f,t);switch(e){case"hsl":case"hwb":d=[interpolate(u,i,t),un_premultiply(interpolate(c,m,t),y),un_premultiply(interpolate(h,N,t),y)];break;case"lch":case"oklch":d=[un_premultiply(interpolate(c,m,t),y),un_premultiply(interpolate(h,N,t),y),interpolate(u,i,t)]}return{colorNotation:p,channels:d,alpha:y*n.alphaMultiplier,syntaxFlags:new Set([g.ColorMix])}}function fillInMissingComponent(e,a){return Number.isNaN(e)?a:e}function interpolate(e,a,n){return e*n+a*(1-n)}function premultiply(e,a){return Number.isNaN(a)?e:Number.isNaN(e)?NaN:e*a}function un_premultiply(e,a){return 0===a||Number.isNaN(a)?e:Number.isNaN(e)?NaN:e/a}function hex(e){const a=toLowerCaseAZ(e[4].value);if(a.match(/[^a-f0-9]/))return!1;const n={colorNotation:_.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([g.Hex])},r=a.length;if(3===r){const e=a[0],r=a[1],o=a[2];return n.channels=[parseInt(e+e,16)/255,parseInt(r+r,16)/255,parseInt(o+o,16)/255],n}if(6===r){const e=a[0]+a[1],r=a[2]+a[3],o=a[4]+a[5];return n.channels=[parseInt(e,16)/255,parseInt(r,16)/255,parseInt(o,16)/255],n}if(4===r){const e=a[0],r=a[1],o=a[2],t=a[3];return n.channels=[parseInt(e+e,16)/255,parseInt(r+r,16)/255,parseInt(o+o,16)/255],n.alpha=parseInt(t+t,16)/255,n.syntaxFlags.add(g.HasAlpha),n}if(8===r){const e=a[0]+a[1],r=a[2]+a[3],o=a[4]+a[5],t=a[6]+a[7];return n.channels=[parseInt(e,16)/255,parseInt(r,16)/255,parseInt(o,16)/255],n.alpha=parseInt(t,16)/255,n.syntaxFlags.add(g.HasAlpha),n}return!1}function normalizeHue(n){if(n[0]===e.Number)return n[4].value=n[4].value%360,n[1]=n[4].value.toString(),n;if(n[0]===e.Dimension){let r=n[4].value;switch(toLowerCaseAZ(n[4].unit)){case"deg":break;case"rad":r=180*n[4].value/Math.PI;break;case"grad":r=.9*n[4].value;break;case"turn":r=360*n[4].value;break;default:return!1}return r%=360,[e.Number,r.toString(),n[2],n[3],{value:r,type:a.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(n,r,o){if(0===r){const a=normalizeHue(n);return!1!==a&&(n[0]===e.Dimension&&o.syntaxFlags.add(g.HasDimensionValues),a)}if(n[0]===e.Percentage){3===r?o.syntaxFlags.add(g.HasPercentageAlpha):o.syntaxFlags.add(g.HasPercentageValues);let t=normalize(n[4].value,1,0,100);return 3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){if(3!==r)return!1;let o=normalize(n[4].value,1,0,100);return 3===r&&(o=normalize(n[4].value,1,0,1)),[e.Number,o.toString(),n[2],n[3],{value:o,type:a.Number}]}return!1}function normalize_modern_HSL_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(0===r){const a=normalizeHue(n);return!1!==a&&(n[0]===e.Dimension&&o.syntaxFlags.add(g.HasDimensionValues),a)}if(n[0]===e.Percentage){3===r?o.syntaxFlags.add(g.HasPercentageAlpha):o.syntaxFlags.add(g.HasPercentageValues);let t=n[4].value;return 3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=n[4].value;return 3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function threeChannelLegacySyntax(a,n,r,o){const t=[],l=[],m=[],h=[],N={colorNotation:r,channels:[0,0,0],alpha:1,syntaxFlags:new Set(o)};let _=t;for(let n=0;ni(a)&&a.value[0]===e.Comma))){const e=hslCommaSeparated(a);if(!1!==e)return e}{const e=hslSpaceSeparated(a,n);if(!1!==e)return e}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,_.HSL,[g.LegacyHSL])}function hslSpaceSeparated(e,a){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,_.HSL,[],a)}function normalize_HWB_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(0===r){const a=normalizeHue(n);return!1!==a&&(n[0]===e.Dimension&&o.syntaxFlags.add(g.HasDimensionValues),a)}if(n[0]===e.Percentage){3===r?o.syntaxFlags.add(g.HasPercentageAlpha):o.syntaxFlags.add(g.HasPercentageValues);let t=n[4].value;return 3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=n[4].value;return 3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function normalize_Lab_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(n[0]===e.Percentage){3!==r&&o.syntaxFlags.add(g.HasPercentageValues);let t=normalize(n[4].value,1,0,100);return 1===r||2===r?t=normalize(n[4].value,.8,-1/0,1/0):3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=normalize(n[4].value,1,0,100);return 1===r||2===r?t=normalize(n[4].value,1,-1/0,1/0):3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function lab(e,a){return threeChannelSpaceSeparated(e,normalize_Lab_ChannelValues,_.Lab,[],a)}function normalize_LCH_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(2===r){const a=normalizeHue(n);return!1!==a&&(n[0]===e.Dimension&&o.syntaxFlags.add(g.HasDimensionValues),a)}if(n[0]===e.Percentage){3!==r&&o.syntaxFlags.add(g.HasPercentageValues);let t=normalize(n[4].value,1,0,100);return 1===r?t=normalize(n[4].value,100/150,0,1/0):3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=normalize(n[4].value,1,0,100);return 1===r?t=normalize(n[4].value,1,0,1/0):3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function lch(e,a){return threeChannelSpaceSeparated(e,normalize_LCH_ChannelValues,_.LCH,[],a)}const L=new Map;for(const[e,a]of Object.entries(r))L.set(e,a);function namedColor(e){const a=L.get(toLowerCaseAZ(e));return!!a&&{colorNotation:_.RGB,channels:[a[0]/255,a[1]/255,a[2]/255],alpha:1,syntaxFlags:new Set([g.ColorKeyword,g.NamedColor])}}function normalize_OKLab_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(n[0]===e.Percentage){3!==r&&o.syntaxFlags.add(g.HasPercentageValues);let t=normalize(n[4].value,100,0,1);return 1===r||2===r?t=normalize(n[4].value,250,-1/0,1/0):3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=normalize(n[4].value,1,0,1);return 1===r||2===r?t=normalize(n[4].value,1,-1/0,1/0):3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function oklab(e,a){return threeChannelSpaceSeparated(e,normalize_OKLab_ChannelValues,_.OKLab,[],a)}function normalize_OKLCH_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(2===r){const a=normalizeHue(n);return!1!==a&&(n[0]===e.Dimension&&o.syntaxFlags.add(g.HasDimensionValues),a)}if(n[0]===e.Percentage){3!==r&&o.syntaxFlags.add(g.HasPercentageValues);let t=normalize(n[4].value,100,0,1);return 1===r?t=normalize(n[4].value,250,0,1/0):3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=normalize(n[4].value,1,0,1);return 1===r?t=normalize(n[4].value,1,0,1/0):3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function oklch(e,a){return threeChannelSpaceSeparated(e,normalize_OKLCH_ChannelValues,_.OKLCH,[],a)}function normalize_legacy_sRGB_ChannelValues(n,r,o){if(n[0]===e.Percentage){3===r?o.syntaxFlags.add(g.HasPercentageAlpha):o.syntaxFlags.add(g.HasPercentageValues);const t=normalize(n[4].value,100,0,1);return[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=normalize(n[4].value,255,0,1);return 3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function normalize_modern_sRGB_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(n[0]===e.Percentage){3!==r&&o.syntaxFlags.add(g.HasPercentageValues);let t=normalize(n[4].value,100,-1/0,1/0);return 3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=normalize(n[4].value,255,-1/0,1/0);return 3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function rgb(a,n){if(a.value.some((a=>i(a)&&a.value[0]===e.Comma))){const e=rgbCommaSeparated(a);if(!1!==e)return(!e.syntaxFlags.has(g.HasNumberValues)||!e.syntaxFlags.has(g.HasPercentageValues))&&e}else{const e=rgbSpaceSeparated(a,n);if(!1!==e)return e}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,_.RGB,[g.LegacyRGB])}function rgbSpaceSeparated(e,a){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,_.RGB,[],a)}function toPrecision(e,a=7){e=+e,a=+a;const n=(Math.floor(e)+"").length;if(a>n)return+e.toFixed(a-n);{const r=10**(n-a);return Math.round(e/r)*r}}function XYZ_D50_to_P3_Gamut(e){const a=n.XYZ_D50_to_P3(e);if(o.inGamut(a))return o.clip(a);let r=e.slice();return r=t.D50_to_D65(r),r=t.XYZ_to_OKLab(r),r=t.OKLab_to_OKLCH(r),r[0]<1e-6&&(r=[0,0,0]),r[0]>.999999&&(r=[1,0,0]),l.mapGamut(r,(e=>(e=t.OKLCH_to_OKLab(e),e=t.OKLab_to_XYZ(e),e=t.XYZ_to_lin_P3(e),t.gam_P3(e))),(e=>(e=t.lin_P3(e),e=t.lin_P3_to_XYZ(e),e=t.XYZ_to_OKLab(e),t.OKLab_to_OKLCH(e))))}function serializeWithAlpha(n,r,o,t){const l=[e.CloseParen,")",-1,-1,void 0];if("number"==typeof n.alpha){const s=Math.min(1,Math.max(0,toPrecision(Number.isNaN(n.alpha)?0:n.alpha)));return 1===toPrecision(s,4)?new h(r,l,t):new h(r,l,[...t,new N([o]),new m([e.Delim,"/",-1,-1,{value:"/"}]),new N([o]),new m([e.Number,toPrecision(s,4).toString(),-1,-1,{value:n.alpha,type:a.Integer}])])}return new h(r,l,[...t,new N([o]),new m([e.Delim,"/",-1,-1,{value:"/"}]),new N([o]),n.alpha])}function serializeP3(r,o=!0){r.channels=convertPowerlessComponentsToZeroValuesForDisplay(r.channels,r.colorNotation);let t=r.channels.map((e=>Number.isNaN(e)?0:e));r.colorNotation!==_.Display_P3&&(t=o?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(r).channels):n.XYZ_D50_to_P3(colorData_to_XYZ_D50(r).channels));const l=toPrecision(t[0],6),s=toPrecision(t[1],6),u=toPrecision(t[2],6),i=[e.Function,"color(",-1,-1,{value:"color"}],c=[e.Whitespace," ",-1,-1,void 0];return serializeWithAlpha(r,i,c,[new m([e.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new N([c]),new m([e.Number,l.toString(),-1,-1,{value:t[0],type:a.Number}]),new N([c]),new m([e.Number,s.toString(),-1,-1,{value:t[1],type:a.Number}]),new N([c]),new m([e.Number,u.toString(),-1,-1,{value:t[2],type:a.Number}])])}function XYZ_D50_to_sRGB_Gamut(e){const a=n.XYZ_D50_to_sRGB(e);if(o.inGamut(a))return o.clip(a);let r=e.slice();return r=t.D50_to_D65(r),r=t.XYZ_to_OKLab(r),r=t.OKLab_to_OKLCH(r),r[0]<1e-6&&(r=[0,0,0]),r[0]>.999999&&(r=[1,0,0]),l.mapGamut(r,(e=>(e=t.OKLCH_to_OKLab(e),e=t.OKLab_to_XYZ(e),e=t.XYZ_to_lin_sRGB(e),t.gam_sRGB(e))),(e=>(e=t.lin_sRGB(e),e=t.lin_sRGB_to_XYZ(e),e=t.XYZ_to_OKLab(e),t.OKLab_to_OKLCH(e))))}function serializeRGB(r,o=!0){r.channels=convertPowerlessComponentsToZeroValuesForDisplay(r.channels,r.colorNotation);let t=r.channels.map((e=>Number.isNaN(e)?0:e));t=o?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(r).channels):n.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(r).channels);const l=Math.min(255,Math.max(0,Math.round(255*toPrecision(t[0])))),s=Math.min(255,Math.max(0,Math.round(255*toPrecision(t[1])))),u=Math.min(255,Math.max(0,Math.round(255*toPrecision(t[2])))),i=[e.CloseParen,")",-1,-1,void 0],c=[e.Whitespace," ",-1,-1,void 0],p=[e.Comma,",",-1,-1,void 0],b=[new m([e.Number,l.toString(),-1,-1,{value:t[0],type:a.Integer}]),new m(p),new N([c]),new m([e.Number,s.toString(),-1,-1,{value:t[1],type:a.Integer}]),new m(p),new N([c]),new m([e.Number,u.toString(),-1,-1,{value:t[2],type:a.Integer}])];if("number"==typeof r.alpha){const n=Math.min(1,Math.max(0,toPrecision(Number.isNaN(r.alpha)?0:r.alpha)));return 1===toPrecision(n,4)?new h([e.Function,"rgb(",-1,-1,{value:"rgb"}],i,b):new h([e.Function,"rgba(",-1,-1,{value:"rgba"}],i,[...b,new m(p),new N([c]),new m([e.Number,toPrecision(n,4).toString(),-1,-1,{value:r.alpha,type:a.Number}])])}return new h([e.Function,"rgba(",-1,-1,{value:"rgba"}],i,[...b,new m(p),new N([c]),r.alpha])}function serializeOKLCH(r){r.channels=convertPowerlessComponentsToZeroValuesForDisplay(r.channels,r.colorNotation);let o=r.channels.map((e=>Number.isNaN(e)?0:e));r.colorNotation!==_.OKLCH&&(o=n.XYZ_D50_to_OKLCH(colorData_to_XYZ_D50(r).channels));const t=toPrecision(o[0],6),l=toPrecision(o[1],6),s=toPrecision(o[2],6),u=[e.Function,"oklch(",-1,-1,{value:"oklch"}],i=[e.Whitespace," ",-1,-1,void 0];return serializeWithAlpha(r,u,i,[new m([e.Number,t.toString(),-1,-1,{value:o[0],type:a.Number}]),new N([i]),new m([e.Number,l.toString(),-1,-1,{value:o[1],type:a.Number}]),new N([i]),new m([e.Number,s.toString(),-1,-1,{value:o[2],type:a.Number}])])}function color(a){if(c(a)){switch(toLowerCaseAZ(a.getName())){case"rgb":case"rgba":return rgb(a,color);case"hsl":case"hsla":return hsl(a,color);case"hwb":return n=color,threeChannelSpaceSeparated(a,normalize_HWB_ChannelValues,_.HWB,[],n);case"lab":return lab(a,color);case"lch":return lch(a,color);case"oklab":return oklab(a,color);case"oklch":return oklch(a,color);case"color":return color$1(a,color);case"color-mix":return colorMix(a,color)}}var n;if(i(a)){if(a.value[0]===e.Hash)return hex(a.value);if(a.value[0]===e.Ident){const e=namedColor(a.value[4].value);return!1!==e?e:"transparent"===toLowerCaseAZ(a.value[4].value)&&{colorNotation:_.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([g.ColorKeyword])}}}return!1}export{_ as ColorNotation,g as SyntaxFlag,color,colorDataFitsDisplayP3_Gamut,colorDataFitsRGB_Gamut,colorDataTo,serializeOKLCH,serializeP3,serializeRGB}; +import{TokenType as e,NumberType as a}from"@csstools/css-tokenizer";import{xyz as n,namedColors as r,utils as o,conversions as t,calculations as l}from"@csstools/color-helpers";import{isWhitespaceNode as s,isCommentNode as u,isTokenNode as i,isFunctionNode as c,TokenNode as m,FunctionNode as h,WhitespaceNode as N}from"@csstools/css-parser-algorithms";import{mathFunctionNames as p,calcFromComponentValues as b}from"@csstools/css-calc";var _,g;function colorData_to_XYZ_D50(e){switch(e.colorNotation){case _.HEX:case _.RGB:case _.sRGB:return{...e,colorNotation:_.XYZ_D50,channels:n.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Linear_sRGB:return{...e,colorNotation:_.XYZ_D50,channels:n.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Display_P3:return{...e,colorNotation:_.XYZ_D50,channels:n.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Rec2020:return{...e,colorNotation:_.XYZ_D50,channels:n.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.A98_RGB:return{...e,colorNotation:_.XYZ_D50,channels:n.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.ProPhoto_RGB:return{...e,colorNotation:_.XYZ_D50,channels:n.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.HSL:return{...e,colorNotation:_.XYZ_D50,channels:n.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.HWB:return{...e,colorNotation:_.XYZ_D50,channels:n.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Lab:return{...e,colorNotation:_.XYZ_D50,channels:n.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.OKLab:return{...e,colorNotation:_.XYZ_D50,channels:n.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.LCH:return{...e,colorNotation:_.XYZ_D50,channels:n.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.OKLCH:return{...e,colorNotation:_.XYZ_D50,channels:n.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.XYZ_D50:return{...e,colorNotation:_.XYZ_D50,channels:n.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.XYZ_D65:return{...e,colorNotation:_.XYZ_D50,channels:n.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}!function(e){e.A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_sRGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.sRGB="srgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65"}(_||(_={})),function(e){e.ColorKeyword="color-keyword",e.HasAlpha="has-alpha",e.HasDimensionValues="has-dimension-values",e.HasNoneKeywords="has-none-keywords",e.HasNumberValues="has-number-values",e.HasPercentageAlpha="has-percentage-alpha",e.HasPercentageValues="has-percentage-values",e.HasVariableAlpha="has-variable-alpha",e.Hex="hex",e.LegacyHSL="legacy-hsl",e.LegacyRGB="legacy-rgb",e.NamedColor="named-color",e.RelativeColorSyntax="relative-color-syntax",e.ColorMix="color-mix"}(g||(g={}));const f=new Set([_.A98_RGB,_.Display_P3,_.HEX,_.Linear_sRGB,_.ProPhoto_RGB,_.RGB,_.sRGB,_.Rec2020,_.XYZ_D50,_.XYZ_D65]);function colorDataTo(e,a){const r={...e};if(e.colorNotation!==a){const e=colorData_to_XYZ_D50(r);switch(a){case _.HEX:case _.RGB:r.colorNotation=_.RGB,r.channels=n.XYZ_D50_to_sRGB(e.channels);break;case _.sRGB:r.colorNotation=_.sRGB,r.channels=n.XYZ_D50_to_sRGB(e.channels);break;case _.Linear_sRGB:r.colorNotation=_.Linear_sRGB,r.channels=n.XYZ_D50_to_lin_sRGB(e.channels);break;case _.Display_P3:r.colorNotation=_.Display_P3,r.channels=n.XYZ_D50_to_P3(e.channels);break;case _.Rec2020:r.colorNotation=_.Rec2020,r.channels=n.XYZ_D50_to_rec_2020(e.channels);break;case _.ProPhoto_RGB:r.colorNotation=_.ProPhoto_RGB,r.channels=n.XYZ_D50_to_ProPhoto(e.channels);break;case _.A98_RGB:r.colorNotation=_.A98_RGB,r.channels=n.XYZ_D50_to_a98_RGB(e.channels);break;case _.HSL:r.colorNotation=_.HSL,r.channels=n.XYZ_D50_to_HSL(e.channels);break;case _.HWB:r.colorNotation=_.HWB,r.channels=n.XYZ_D50_to_HWB(e.channels);break;case _.Lab:r.colorNotation=_.Lab,r.channels=n.XYZ_D50_to_Lab(e.channels);break;case _.LCH:r.colorNotation=_.LCH,r.channels=n.XYZ_D50_to_LCH(e.channels);break;case _.OKLCH:r.colorNotation=_.OKLCH,r.channels=n.XYZ_D50_to_OKLCH(e.channels);break;case _.OKLab:r.colorNotation=_.OKLab,r.channels=n.XYZ_D50_to_OKLab(e.channels);break;case _.XYZ_D50:r.colorNotation=_.XYZ_D50,r.channels=n.XYZ_D50_to_XYZ_D50(e.channels);break;case _.XYZ_D65:r.colorNotation=_.XYZ_D65,r.channels=n.XYZ_D50_to_XYZ_D65(e.channels);break;default:throw new Error("Unsupported color notation")}}else r.channels=e.channels.map((e=>Number.isNaN(e)?0:e));if(a===e.colorNotation)r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);else if(f.has(a)&&f.has(e.colorNotation))r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);else switch(a){case _.HSL:switch(e.colorNotation){case _.HWB:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case _.Lab:case _.OKLab:r.channels=carryForwardMissingComponents(e.channels,[2],r.channels,[0]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[2,1,0])}break;case _.HWB:switch(e.colorNotation){case _.HSL:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2])}break;case _.Lab:case _.OKLab:switch(e.colorNotation){case _.HSL:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2]);break;case _.Lab:case _.OKLab:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0])}break;case _.LCH:case _.OKLCH:switch(e.colorNotation){case _.HSL:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[2,1,0]);break;case _.HWB:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2]);break;case _.Lab:case _.OKLab:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2])}}return r.channels=convertPowerlessComponentsToMissingComponents(r.channels,a),r}function convertPowerlessComponentsToMissingComponents(e,a){const n=[...e];switch(a){case _.HSL:reducePrecision(n[1],4)<=0&&(n[0]=NaN);break;case _.HWB:Math.max(0,reducePrecision(n[1],4))+Math.max(0,reducePrecision(n[2],4))>=100&&(n[0]=NaN);break;case _.LCH:reducePrecision(n[1],4)<=0&&(n[2]=NaN);break;case _.OKLCH:reducePrecision(n[1],6)<=0&&(n[2]=NaN)}return n}function convertPowerlessComponentsToZeroValuesForDisplay(e,a){const n=[...e];switch(a){case _.HSL:(reducePrecision(n[2])<=0||reducePrecision(n[2])>=100)&&(n[0]=NaN,n[1]=NaN),reducePrecision(n[1])<=0&&(n[0]=NaN);break;case _.HWB:Math.max(0,reducePrecision(n[1]))+Math.max(0,reducePrecision(n[2]))>=100&&(n[0]=NaN);break;case _.Lab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case _.LCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case _.OKLab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN);break;case _.OKLCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN)}return n}function carryForwardMissingComponents(e,a,n,r){const o=[...n];for(const n of a)Number.isNaN(e[a[n]])&&(o[r[n]]=NaN);return o}function normalizeRelativeColorDataChannels(e){const a=new Map;switch(e.colorNotation){case _.RGB:case _.HEX:a.set("r",dummyNumberToken(255*e.channels[0])),a.set("g",dummyNumberToken(255*e.channels[1])),a.set("b",dummyNumberToken(255*e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.HSL:a.set("h",dummyNumberToken(e.channels[0])),a.set("s",dummyNumberToken(e.channels[1])),a.set("l",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.HWB:a.set("h",dummyNumberToken(e.channels[0])),a.set("w",dummyNumberToken(e.channels[1])),a.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.Lab:case _.OKLab:a.set("l",dummyNumberToken(e.channels[0])),a.set("a",dummyNumberToken(e.channels[1])),a.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.LCH:case _.OKLCH:a.set("l",dummyNumberToken(e.channels[0])),a.set("c",dummyNumberToken(e.channels[1])),a.set("h",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.sRGB:case _.A98_RGB:case _.Display_P3:case _.Rec2020:case _.Linear_sRGB:case _.ProPhoto_RGB:a.set("r",dummyNumberToken(e.channels[0])),a.set("g",dummyNumberToken(e.channels[1])),a.set("b",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha));break;case _.XYZ_D50:case _.XYZ_D65:a.set("x",dummyNumberToken(e.channels[0])),a.set("y",dummyNumberToken(e.channels[1])),a.set("z",dummyNumberToken(e.channels[2])),"number"==typeof e.alpha&&a.set("alpha",dummyNumberToken(e.alpha))}return a}function noneToZeroInRelativeColorDataChannels(e){const a=new Map(e);for(const[n,r]of e)Number.isNaN(r[4].value)&&a.set(n,dummyNumberToken(0));return a}function dummyNumberToken(n){return[e.Number,n.toString(),-1,-1,{value:n,type:a.Number}]}function reducePrecision(e,a=7){if(Number.isNaN(e))return 0;const n=Math.pow(10,a);return Math.round(e*n)/n}function colorDataFitsRGB_Gamut(e){const a={...e,channels:[...e.channels]};a.channels=convertPowerlessComponentsToZeroValuesForDisplay(a.channels,a.colorNotation);return!colorDataTo(a,_.RGB).channels.find((e=>e<-1e-5||e>1.00001))}function colorDataFitsDisplayP3_Gamut(e){const a={...e,channels:[...e.channels]};a.channels=convertPowerlessComponentsToZeroValuesForDisplay(a.channels,a.colorNotation);return!colorDataTo(a,_.Display_P3).channels.find((e=>e<-1e-5||e>1.00001))}function normalize(e,a,n,r){return Math.min(Math.max(e/a,n),r)}const v=/[A-Z]/g;function toLowerCaseAZ(e){return e.replace(v,(e=>String.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(n[0]===e.Percentage){3!==r&&o.syntaxFlags.add(g.HasPercentageValues);let t=normalize(n[4].value,100,-1/0,1/0);return 3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=normalize(n[4].value,1,-1/0,1/0);return 3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}const d=new Set(["srgb","srgb-linear","display-p3","a98-rgb","prophoto-rgb","rec2020","xyz","xyz-d50","xyz-d65"]);function color$1(a,n){const r=[],o=[],t=[],l=[];let h,N,f=!1,v=!1;const y={colorNotation:_.sRGB,channels:[0,0,0],alpha:1,syntaxFlags:new Set([])};let C=r;for(let _=0;_=0){l=m.value[4].value;continue}}return!1}if(!t)return!1;r.push({color:t,percentage:l}),t=!1,l=!1}}if(t&&r.push({color:t,percentage:l}),2!==r.length)return!1;let m=r[0].percentage,h=r[1].percentage;return(!1===m||!(m<0||m>100))&&((!1===h||!(h<0||h>100))&&(!1===m&&!1===h?(m=50,h=50):!1!==m&&!1===h?h=100-m:!1===m&&!1!==h&&(m=100-h),(0!==m||0!==h)&&(!1!==m&&!1!==h&&(m+h>100&&(m=m/(m+h)*100,h=h/(m+h)*100),m+h<100&&(o=(m+h)/100,m=m/(m+h)*100,h=h/(m+h)*100),{a:{color:r[0].color,percentage:m},b:{color:r[1].color,percentage:h},alphaMultiplier:o}))))}function colorMixRectangular(e,a){if(!a)return!1;const n=a.a.color,r=a.b.color,o=a.a.percentage/100;let t=n.channels,l=r.channels,s=_.RGB,u=n.alpha;if("number"!=typeof u)return!1;let i=r.alpha;if("number"!=typeof i)return!1;switch(u=Number.isNaN(u)?i:u,i=Number.isNaN(i)?u:i,e){case"srgb":s=_.RGB;break;case"srgb-linear":s=_.Linear_sRGB;break;case"lab":s=_.Lab;break;case"oklab":s=_.OKLab;break;case"xyz-d50":s=_.XYZ_D50;break;case"xyz":case"xyz-d65":s=_.XYZ_D65}t=colorDataTo(n,s).channels,l=colorDataTo(r,s).channels,t[0]=fillInMissingComponent(t[0],l[0]),l[0]=fillInMissingComponent(l[0],t[0]),t[1]=fillInMissingComponent(t[1],l[1]),l[1]=fillInMissingComponent(l[1],t[1]),t[2]=fillInMissingComponent(t[2],l[2]),l[2]=fillInMissingComponent(l[2],t[2]),t[0]=premultiply(t[0],u),t[1]=premultiply(t[1],u),t[2]=premultiply(t[2],u),l[0]=premultiply(l[0],i),l[1]=premultiply(l[1],i),l[2]=premultiply(l[2],i);const c=interpolate(u,i,o);return{colorNotation:s,channels:[un_premultiply(interpolate(t[0],l[0],o),c),un_premultiply(interpolate(t[1],l[1],o),c),un_premultiply(interpolate(t[2],l[2],o),c)],alpha:c*a.alphaMultiplier,syntaxFlags:new Set([g.ColorMix])}}function colorMixPolar(e,a,n){if(!n)return!1;const r=n.a.color,o=n.b.color,t=n.a.percentage/100;let l=r.channels,s=o.channels,u=0,i=0,c=0,m=0,h=0,N=0,p=_.RGB,b=r.alpha;if("number"!=typeof b)return!1;let f=o.alpha;if("number"!=typeof f)return!1;switch(b=Number.isNaN(b)?f:b,f=Number.isNaN(f)?b:f,e){case"hsl":p=_.HSL;break;case"hwb":p=_.HWB;break;case"lch":p=_.LCH;break;case"oklch":p=_.OKLCH}switch(l=colorDataTo(r,p).channels,s=colorDataTo(o,p).channels,e){case"hsl":case"hwb":u=l[0],i=s[0],c=l[1],m=s[1],h=l[2],N=s[2];break;case"lch":case"oklch":c=l[0],m=s[0],h=l[1],N=s[1],u=l[2],i=s[2]}u=fillInMissingComponent(u,i),Number.isNaN(u)&&(u=0),i=fillInMissingComponent(i,u),Number.isNaN(i)&&(i=0),c=fillInMissingComponent(c,m),m=fillInMissingComponent(m,c),h=fillInMissingComponent(h,N),N=fillInMissingComponent(N,h);const v=i-u;switch(a){case"shorter":v>180?u+=360:v<-180&&(i+=360);break;case"longer":-180<180&&(v>0?u+=360:i+=360);break;case"increasing":v<0&&(i+=360);break;case"decreasing":v>0&&(u+=360);break;default:throw new Error("Unknown hue interpolation method")}c=premultiply(c,b),h=premultiply(h,b),m=premultiply(m,f),N=premultiply(N,f);let d=[0,0,0];const y=interpolate(b,f,t);switch(e){case"hsl":case"hwb":d=[interpolate(u,i,t),un_premultiply(interpolate(c,m,t),y),un_premultiply(interpolate(h,N,t),y)];break;case"lch":case"oklch":d=[un_premultiply(interpolate(c,m,t),y),un_premultiply(interpolate(h,N,t),y),interpolate(u,i,t)]}return{colorNotation:p,channels:d,alpha:y*n.alphaMultiplier,syntaxFlags:new Set([g.ColorMix])}}function fillInMissingComponent(e,a){return Number.isNaN(e)?a:e}function interpolate(e,a,n){return e*n+a*(1-n)}function premultiply(e,a){return Number.isNaN(a)?e:Number.isNaN(e)?NaN:e*a}function un_premultiply(e,a){return 0===a||Number.isNaN(a)?e:Number.isNaN(e)?NaN:e/a}function hex(e){const a=toLowerCaseAZ(e[4].value);if(a.match(/[^a-f0-9]/))return!1;const n={colorNotation:_.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([g.Hex])},r=a.length;if(3===r){const e=a[0],r=a[1],o=a[2];return n.channels=[parseInt(e+e,16)/255,parseInt(r+r,16)/255,parseInt(o+o,16)/255],n}if(6===r){const e=a[0]+a[1],r=a[2]+a[3],o=a[4]+a[5];return n.channels=[parseInt(e,16)/255,parseInt(r,16)/255,parseInt(o,16)/255],n}if(4===r){const e=a[0],r=a[1],o=a[2],t=a[3];return n.channels=[parseInt(e+e,16)/255,parseInt(r+r,16)/255,parseInt(o+o,16)/255],n.alpha=parseInt(t+t,16)/255,n.syntaxFlags.add(g.HasAlpha),n}if(8===r){const e=a[0]+a[1],r=a[2]+a[3],o=a[4]+a[5],t=a[6]+a[7];return n.channels=[parseInt(e,16)/255,parseInt(r,16)/255,parseInt(o,16)/255],n.alpha=parseInt(t,16)/255,n.syntaxFlags.add(g.HasAlpha),n}return!1}function normalizeHue(n){if(n[0]===e.Number)return n[4].value=n[4].value%360,n[1]=n[4].value.toString(),n;if(n[0]===e.Dimension){let r=n[4].value;switch(toLowerCaseAZ(n[4].unit)){case"deg":break;case"rad":r=180*n[4].value/Math.PI;break;case"grad":r=.9*n[4].value;break;case"turn":r=360*n[4].value;break;default:return!1}return r%=360,[e.Number,r.toString(),n[2],n[3],{value:r,type:a.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(n,r,o){if(0===r){const a=normalizeHue(n);return!1!==a&&(n[0]===e.Dimension&&o.syntaxFlags.add(g.HasDimensionValues),a)}if(n[0]===e.Percentage){3===r?o.syntaxFlags.add(g.HasPercentageAlpha):o.syntaxFlags.add(g.HasPercentageValues);let t=normalize(n[4].value,1,0,100);return 3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){if(3!==r)return!1;let o=normalize(n[4].value,1,0,100);return 3===r&&(o=normalize(n[4].value,1,0,1)),[e.Number,o.toString(),n[2],n[3],{value:o,type:a.Number}]}return!1}function normalize_modern_HSL_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(0===r){const a=normalizeHue(n);return!1!==a&&(n[0]===e.Dimension&&o.syntaxFlags.add(g.HasDimensionValues),a)}if(n[0]===e.Percentage){3===r?o.syntaxFlags.add(g.HasPercentageAlpha):o.syntaxFlags.add(g.HasPercentageValues);let t=n[4].value;return 3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=n[4].value;return 3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function threeChannelLegacySyntax(a,n,r,o){const t=[],l=[],m=[],h=[],N={colorNotation:r,channels:[0,0,0],alpha:1,syntaxFlags:new Set(o)};let _=t;for(let n=0;ni(a)&&a.value[0]===e.Comma))){const e=hslCommaSeparated(a);if(!1!==e)return e}{const e=hslSpaceSeparated(a,n);if(!1!==e)return e}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,_.HSL,[g.LegacyHSL])}function hslSpaceSeparated(e,a){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,_.HSL,[],a)}function normalize_HWB_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(0===r){const a=normalizeHue(n);return!1!==a&&(n[0]===e.Dimension&&o.syntaxFlags.add(g.HasDimensionValues),a)}if(n[0]===e.Percentage){3===r?o.syntaxFlags.add(g.HasPercentageAlpha):o.syntaxFlags.add(g.HasPercentageValues);let t=n[4].value;return 3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=n[4].value;return 3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function normalize_Lab_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(n[0]===e.Percentage){3!==r&&o.syntaxFlags.add(g.HasPercentageValues);let t=normalize(n[4].value,1,0,100);return 1===r||2===r?t=normalize(n[4].value,.8,-1/0,1/0):3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=normalize(n[4].value,1,0,100);return 1===r||2===r?t=normalize(n[4].value,1,-1/0,1/0):3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function lab(e,a){return threeChannelSpaceSeparated(e,normalize_Lab_ChannelValues,_.Lab,[],a)}function normalize_LCH_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(2===r){const a=normalizeHue(n);return!1!==a&&(n[0]===e.Dimension&&o.syntaxFlags.add(g.HasDimensionValues),a)}if(n[0]===e.Percentage){3!==r&&o.syntaxFlags.add(g.HasPercentageValues);let t=normalize(n[4].value,1,0,100);return 1===r?t=normalize(n[4].value,100/150,0,1/0):3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=normalize(n[4].value,1,0,100);return 1===r?t=normalize(n[4].value,1,0,1/0):3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function lch(e,a){return threeChannelSpaceSeparated(e,normalize_LCH_ChannelValues,_.LCH,[],a)}const L=new Map;for(const[e,a]of Object.entries(r))L.set(e,a);function namedColor(e){const a=L.get(toLowerCaseAZ(e));return!!a&&{colorNotation:_.RGB,channels:[a[0]/255,a[1]/255,a[2]/255],alpha:1,syntaxFlags:new Set([g.ColorKeyword,g.NamedColor])}}function normalize_OKLab_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(n[0]===e.Percentage){3!==r&&o.syntaxFlags.add(g.HasPercentageValues);let t=normalize(n[4].value,100,0,1);return 1===r||2===r?t=normalize(n[4].value,250,-1/0,1/0):3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=normalize(n[4].value,1,0,1);return 1===r||2===r?t=normalize(n[4].value,1,-1/0,1/0):3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function oklab(e,a){return threeChannelSpaceSeparated(e,normalize_OKLab_ChannelValues,_.OKLab,[],a)}function normalize_OKLCH_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(2===r){const a=normalizeHue(n);return!1!==a&&(n[0]===e.Dimension&&o.syntaxFlags.add(g.HasDimensionValues),a)}if(n[0]===e.Percentage){3!==r&&o.syntaxFlags.add(g.HasPercentageValues);let t=normalize(n[4].value,100,0,1);return 1===r?t=normalize(n[4].value,250,0,1/0):3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=normalize(n[4].value,1,0,1);return 1===r?t=normalize(n[4].value,1,0,1/0):3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function oklch(e,a){return threeChannelSpaceSeparated(e,normalize_OKLCH_ChannelValues,_.OKLCH,[],a)}function normalize_legacy_sRGB_ChannelValues(n,r,o){if(n[0]===e.Percentage){3===r?o.syntaxFlags.add(g.HasPercentageAlpha):o.syntaxFlags.add(g.HasPercentageValues);const t=normalize(n[4].value,100,0,1);return[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=normalize(n[4].value,255,0,1);return 3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function normalize_modern_sRGB_ChannelValues(n,r,o){if(n[0]===e.Ident&&"none"===toLowerCaseAZ(n[4].value))return o.syntaxFlags.add(g.HasNoneKeywords),[e.Number,"none",n[2],n[3],{value:NaN,type:a.Number}];if(n[0]===e.Percentage){3!==r&&o.syntaxFlags.add(g.HasPercentageValues);let t=normalize(n[4].value,100,-1/0,1/0);return 3===r&&(t=normalize(n[4].value,100,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}if(n[0]===e.Number){3!==r&&o.syntaxFlags.add(g.HasNumberValues);let t=normalize(n[4].value,255,-1/0,1/0);return 3===r&&(t=normalize(n[4].value,1,0,1)),[e.Number,t.toString(),n[2],n[3],{value:t,type:a.Number}]}return!1}function rgb(a,n){if(a.value.some((a=>i(a)&&a.value[0]===e.Comma))){const e=rgbCommaSeparated(a);if(!1!==e)return(!e.syntaxFlags.has(g.HasNumberValues)||!e.syntaxFlags.has(g.HasPercentageValues))&&e}else{const e=rgbSpaceSeparated(a,n);if(!1!==e)return e}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,_.RGB,[g.LegacyRGB])}function rgbSpaceSeparated(e,a){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,_.RGB,[],a)}function toPrecision(e,a=7){e=+e,a=+a;const n=(Math.floor(e)+"").length;if(a>n)return+e.toFixed(a-n);{const r=10**(n-a);return Math.round(e/r)*r}}function XYZ_D50_to_P3_Gamut(e){const a=n.XYZ_D50_to_P3(e);if(o.inGamut(a))return o.clip(a);let r=e.slice();return r=t.D50_to_D65(r),r=t.XYZ_to_OKLab(r),r=t.OKLab_to_OKLCH(r),r[0]<1e-6&&(r=[0,0,0]),r[0]>.999999&&(r=[1,0,0]),l.mapGamut(r,(e=>(e=t.OKLCH_to_OKLab(e),e=t.OKLab_to_XYZ(e),e=t.XYZ_to_lin_P3(e),t.gam_P3(e))),(e=>(e=t.lin_P3(e),e=t.lin_P3_to_XYZ(e),e=t.XYZ_to_OKLab(e),t.OKLab_to_OKLCH(e))))}function serializeWithAlpha(n,r,o,t){const l=[e.CloseParen,")",-1,-1,void 0];if("number"==typeof n.alpha){const s=Math.min(1,Math.max(0,toPrecision(Number.isNaN(n.alpha)?0:n.alpha)));return 1===toPrecision(s,4)?new h(r,l,t):new h(r,l,[...t,new N([o]),new m([e.Delim,"/",-1,-1,{value:"/"}]),new N([o]),new m([e.Number,toPrecision(s,4).toString(),-1,-1,{value:n.alpha,type:a.Integer}])])}return new h(r,l,[...t,new N([o]),new m([e.Delim,"/",-1,-1,{value:"/"}]),new N([o]),n.alpha])}function serializeP3(r,o=!0){r.channels=convertPowerlessComponentsToZeroValuesForDisplay(r.channels,r.colorNotation);let t=r.channels.map((e=>Number.isNaN(e)?0:e));r.colorNotation!==_.Display_P3&&(t=o?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(r).channels):n.XYZ_D50_to_P3(colorData_to_XYZ_D50(r).channels));const l=toPrecision(t[0],6),s=toPrecision(t[1],6),u=toPrecision(t[2],6),i=[e.Function,"color(",-1,-1,{value:"color"}],c=[e.Whitespace," ",-1,-1,void 0];return serializeWithAlpha(r,i,c,[new m([e.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new N([c]),new m([e.Number,l.toString(),-1,-1,{value:t[0],type:a.Number}]),new N([c]),new m([e.Number,s.toString(),-1,-1,{value:t[1],type:a.Number}]),new N([c]),new m([e.Number,u.toString(),-1,-1,{value:t[2],type:a.Number}])])}function XYZ_D50_to_sRGB_Gamut(e){const a=n.XYZ_D50_to_sRGB(e);if(o.inGamut(a))return o.clip(a);let r=e.slice();return r=t.D50_to_D65(r),r=t.XYZ_to_OKLab(r),r=t.OKLab_to_OKLCH(r),r[0]<1e-6&&(r=[0,0,0]),r[0]>.999999&&(r=[1,0,0]),l.mapGamut(r,(e=>(e=t.OKLCH_to_OKLab(e),e=t.OKLab_to_XYZ(e),e=t.XYZ_to_lin_sRGB(e),t.gam_sRGB(e))),(e=>(e=t.lin_sRGB(e),e=t.lin_sRGB_to_XYZ(e),e=t.XYZ_to_OKLab(e),t.OKLab_to_OKLCH(e))))}function serializeRGB(r,o=!0){r.channels=convertPowerlessComponentsToZeroValuesForDisplay(r.channels,r.colorNotation);let t=r.channels.map((e=>Number.isNaN(e)?0:e));t=o?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(r).channels):n.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(r).channels);const l=Math.min(255,Math.max(0,Math.round(255*toPrecision(t[0])))),s=Math.min(255,Math.max(0,Math.round(255*toPrecision(t[1])))),u=Math.min(255,Math.max(0,Math.round(255*toPrecision(t[2])))),i=[e.CloseParen,")",-1,-1,void 0],c=[e.Whitespace," ",-1,-1,void 0],p=[e.Comma,",",-1,-1,void 0],b=[new m([e.Number,l.toString(),-1,-1,{value:t[0],type:a.Integer}]),new m(p),new N([c]),new m([e.Number,s.toString(),-1,-1,{value:t[1],type:a.Integer}]),new m(p),new N([c]),new m([e.Number,u.toString(),-1,-1,{value:t[2],type:a.Integer}])];if("number"==typeof r.alpha){const n=Math.min(1,Math.max(0,toPrecision(Number.isNaN(r.alpha)?0:r.alpha)));return 1===toPrecision(n,4)?new h([e.Function,"rgb(",-1,-1,{value:"rgb"}],i,b):new h([e.Function,"rgba(",-1,-1,{value:"rgba"}],i,[...b,new m(p),new N([c]),new m([e.Number,toPrecision(n,4).toString(),-1,-1,{value:r.alpha,type:a.Number}])])}return new h([e.Function,"rgba(",-1,-1,{value:"rgba"}],i,[...b,new m(p),new N([c]),r.alpha])}function serializeOKLCH(r){r.channels=convertPowerlessComponentsToZeroValuesForDisplay(r.channels,r.colorNotation);let o=r.channels.map((e=>Number.isNaN(e)?0:e));r.colorNotation!==_.OKLCH&&(o=n.XYZ_D50_to_OKLCH(colorData_to_XYZ_D50(r).channels));const t=toPrecision(o[0],6),l=toPrecision(o[1],6),s=toPrecision(o[2],6),u=[e.Function,"oklch(",-1,-1,{value:"oklch"}],i=[e.Whitespace," ",-1,-1,void 0];return serializeWithAlpha(r,u,i,[new m([e.Number,t.toString(),-1,-1,{value:o[0],type:a.Number}]),new N([i]),new m([e.Number,l.toString(),-1,-1,{value:o[1],type:a.Number}]),new N([i]),new m([e.Number,s.toString(),-1,-1,{value:o[2],type:a.Number}])])}function color(a){if(c(a)){switch(toLowerCaseAZ(a.getName())){case"rgb":case"rgba":return rgb(a,color);case"hsl":case"hsla":return hsl(a,color);case"hwb":return n=color,threeChannelSpaceSeparated(a,normalize_HWB_ChannelValues,_.HWB,[],n);case"lab":return lab(a,color);case"lch":return lch(a,color);case"oklab":return oklab(a,color);case"oklch":return oklch(a,color);case"color":return color$1(a,color);case"color-mix":return colorMix(a,color)}}var n;if(i(a)){if(a.value[0]===e.Hash)return hex(a.value);if(a.value[0]===e.Ident){const e=namedColor(a.value[4].value);return!1!==e?e:"transparent"===toLowerCaseAZ(a.value[4].value)&&{colorNotation:_.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([g.ColorKeyword])}}}return!1}export{_ as ColorNotation,g as SyntaxFlag,color,colorDataFitsDisplayP3_Gamut,colorDataFitsRGB_Gamut,colorDataTo,serializeOKLCH,serializeP3,serializeRGB}; diff --git a/packages/css-color-parser/src/color-data.ts b/packages/css-color-parser/src/color-data.ts index 1181d7584..7badb6736 100644 --- a/packages/css-color-parser/src/color-data.ts +++ b/packages/css-color-parser/src/color-data.ts @@ -513,7 +513,12 @@ function reducePrecision(x: number, precision = 7): number { } export function colorDataFitsRGB_Gamut(x: ColorData): boolean { - const copy = JSON.parse(JSON.stringify(x)) as ColorData; + const copy: ColorData = { + ...x, + channels: [ + ...x.channels, + ], + }; copy.channels = convertPowerlessComponentsToZeroValuesForDisplay(copy.channels, copy.colorNotation); const srgb = colorDataTo(copy, ColorNotation.RGB); @@ -525,7 +530,12 @@ export function colorDataFitsRGB_Gamut(x: ColorData): boolean { } export function colorDataFitsDisplayP3_Gamut(x: ColorData): boolean { - const copy = JSON.parse(JSON.stringify(x)) as ColorData; + const copy: ColorData = { + ...x, + channels: [ + ...x.channels, + ], + }; copy.channels = convertPowerlessComponentsToZeroValuesForDisplay(copy.channels, copy.colorNotation); const displayP3 = colorDataTo(copy, ColorNotation.Display_P3); diff --git a/plugins/postcss-gamut-mapping/test/basic.css b/plugins/postcss-gamut-mapping/test/basic.css index f0e8f08fd..22bf0deee 100644 --- a/plugins/postcss-gamut-mapping/test/basic.css +++ b/plugins/postcss-gamut-mapping/test/basic.css @@ -28,3 +28,103 @@ color-17: oklch(60% 0.1250 0.785398unknown); } } + +.default-1 { + /* In gamut */ + color: color(srgb 1 1 1); +} + +.default-2 { + /* Out rgb of gamut */ + color: color(srgb 0.99 1.0001 0.99); +} + +.default-3 { + /* Out rgb of gamut */ + color: color(display-p3 0.99 1 0.99); +} + +.default-4 { + /* Out p3 of gamut */ + color: color(srgb 0.99 1.001 0.99); +} + +.default-5 { + /* Out p3 of gamut */ + color: color(display-p3 0.99 1.0001 0.99); +} + +/* With fallbacks */ +.with-fallback-1 { + /* In gamut */ + color: white; + color: color(srgb 1 1 1); +} + +.with-fallback-2 { + /* Out rgb of gamut */ + color: white; + color: color(srgb 0.99 1.0001 0.99); +} + +.with-fallback-3 { + /* Out rgb of gamut */ + color: white; + color: color(display-p3 0.99 1 0.99); +} + +.with-fallback-4 { + /* Out p3 of gamut */ + color: white; + color: color(srgb 0.99 1.001 0.99); +} + +.with-fallback-5 { + /* Out p3 of gamut */ + color: white; + color: color(display-p3 0.99 1.0001 0.99); +} + +/* With overrides */ +.with-override-1 { + /* In gamut */ + color: color(srgb 1 1 1); + color: white; +} + +.with-override-2 { + /* Out rgb of gamut */ + color: color(srgb 0.99 1.0001 0.99); + color: white; +} + +.with-override-3 { + /* Out rgb of gamut */ + color: color(display-p3 0.99 1 0.99); + color: white; +} + +.with-override-4 { + /* Out p3 of gamut */ + color: color(srgb 0.99 1.001 0.99); + color: white; +} + +.with-override-5 { + /* Out p3 of gamut */ + color: color(display-p3 0.99 1.0001 0.99); + color: white; +} + +@media (color-gamut: p3) { + .guarded { + color: color(srgb 0.99 1.0001 0.99); + } +} + +@media (color-gamut: p3) { + .guarded-out-of-gamut { + /* This color is out of gamut for p3, but still ignored by the plugin, we assume the author intended this */ + color: color(rec2020 1 1 0.8); + } +} diff --git a/plugins/postcss-gamut-mapping/test/basic.expect.css b/plugins/postcss-gamut-mapping/test/basic.expect.css index f54d5e0eb..a69eef8b0 100644 --- a/plugins/postcss-gamut-mapping/test/basic.expect.css +++ b/plugins/postcss-gamut-mapping/test/basic.expect.css @@ -44,3 +44,147 @@ color-17: oklch(60% 0.1250 0.785398unknown); } } + +.default-1 { + /* In gamut */ + color: color(srgb 1 1 1); +} + +.default-2 { + /* Out rgb of gamut */ + color: rgb(252, 255, 252); +} + +@media (color-gamut: p3) { +.default-2 { + color: color(srgb 0.99 1.0001 0.99); +} +} + +.default-3 { + /* Out rgb of gamut */ + color: rgb(252, 255, 252); +} + +@media (color-gamut: p3) { +.default-3 { + color: color(display-p3 0.99 1 0.99); +} +} + +.default-4 { + /* Out p3 of gamut */ + color: rgb(253, 255, 253); +} + +@media (color-gamut: rec2020) { +.default-4 { + color: color(srgb 0.99 1.001 0.99); +} +} + +.default-5 { + /* Out p3 of gamut */ + color: rgb(252, 255, 252); +} + +@media (color-gamut: rec2020) { +.default-5 { + color: color(display-p3 0.99 1.0001 0.99); +} +} + +/* With fallbacks */ +.with-fallback-1 { + /* In gamut */ + color: white; + color: color(srgb 1 1 1); +} + +.with-fallback-2 { + /* Out rgb of gamut */ + color: white; +} + +@media (color-gamut: p3) { +.with-fallback-2 { + color: color(srgb 0.99 1.0001 0.99); +} +} + +.with-fallback-3 { + /* Out rgb of gamut */ + color: white; +} + +@media (color-gamut: p3) { +.with-fallback-3 { + color: color(display-p3 0.99 1 0.99); +} +} + +.with-fallback-4 { + /* Out p3 of gamut */ + color: white; +} + +@media (color-gamut: rec2020) { +.with-fallback-4 { + color: color(srgb 0.99 1.001 0.99); +} +} + +.with-fallback-5 { + /* Out p3 of gamut */ + color: white; +} + +@media (color-gamut: rec2020) { +.with-fallback-5 { + color: color(display-p3 0.99 1.0001 0.99); +} +} + +/* With overrides */ +.with-override-1 { + /* In gamut */ + color: color(srgb 1 1 1); + color: white; +} + +.with-override-2 { + /* Out rgb of gamut */ + color: color(srgb 0.99 1.0001 0.99); + color: white; +} + +.with-override-3 { + /* Out rgb of gamut */ + color: color(display-p3 0.99 1 0.99); + color: white; +} + +.with-override-4 { + /* Out p3 of gamut */ + color: color(srgb 0.99 1.001 0.99); + color: white; +} + +.with-override-5 { + /* Out p3 of gamut */ + color: color(display-p3 0.99 1.0001 0.99); + color: white; +} + +@media (color-gamut: p3) { + .guarded { + color: color(srgb 0.99 1.0001 0.99); + } +} + +@media (color-gamut: p3) { + .guarded-out-of-gamut { + /* This color is out of gamut for p3, but still ignored by the plugin, we assume the author intended this */ + color: color(rec2020 1 1 0.8); + } +} From bc40e1e3ff7f80d8a671ba32e24f3bceeaf90ca5 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 8 Oct 2023 19:31:15 +0200 Subject: [PATCH 08/15] patch notes --- plugin-packs/postcss-preset-env/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md index 1a409160d..ed8233827 100644 --- a/plugin-packs/postcss-preset-env/CHANGELOG.md +++ b/plugin-packs/postcss-preset-env/CHANGELOG.md @@ -3,7 +3,7 @@ ### Unreleased (minor) - Added `@csstools/postcss-gamut-mapping` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gamut-mapping#readme) for usage details. -- Updated [`cssdb`](https://github.com/csstools/cssdb) to [`7.7.3`](https://github.com/csstools/cssdb/blob/main/CHANGELOG.md#773-october-05-2023) (patch) +- Updated [`cssdb`](https://github.com/csstools/cssdb) to [`7.8.0`](https://github.com/csstools/cssdb/blob/main/CHANGELOG.md#780-october-08-2023) (patch) - Updated [`@csstools/postcss-logical-viewport-units`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units) to [`2.0.3`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units/CHANGELOG.md#203) (patch) - Updated [`@csstools/postcss-exponential-functions`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-exponential-functions) to [`1.0.1`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-exponential-functions/CHANGELOG.md#101) (patch) - Updated [`@csstools/postcss-media-minmax`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax) to [`1.1.0`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax/CHANGELOG.md#110) (minor) From 3d45eef5b6ed06c34b371c8b4c03e94f95701d79 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 8 Oct 2023 19:35:56 +0200 Subject: [PATCH 09/15] extra tests --- plugins/postcss-gamut-mapping/test/basic.css | 10 ++++++++++ .../postcss-gamut-mapping/test/basic.expect.css | 16 ++++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/plugins/postcss-gamut-mapping/test/basic.css b/plugins/postcss-gamut-mapping/test/basic.css index 22bf0deee..d9e429e33 100644 --- a/plugins/postcss-gamut-mapping/test/basic.css +++ b/plugins/postcss-gamut-mapping/test/basic.css @@ -128,3 +128,13 @@ color: color(rec2020 1 1 0.8); } } + +.guarded-by-supports { + color: lime; +} + +@supports (color: color(display-p3 0 1 0)) { + .guarded-by-supports { + color: color(display-p3 0 1 0); + } +} diff --git a/plugins/postcss-gamut-mapping/test/basic.expect.css b/plugins/postcss-gamut-mapping/test/basic.expect.css index a69eef8b0..b3e15a04b 100644 --- a/plugins/postcss-gamut-mapping/test/basic.expect.css +++ b/plugins/postcss-gamut-mapping/test/basic.expect.css @@ -188,3 +188,19 @@ color: color(rec2020 1 1 0.8); } } + +.guarded-by-supports { + color: lime; +} + +@supports (color: color(display-p3 0 1 0)) { + .guarded-by-supports { + color: rgb(0, 249, 66); + } + +@media (color-gamut: p3) { +.guarded-by-supports { + color: color(display-p3 0 1 0); + } +} +} From 78dd26ea4f2f0a47d0fdc4c1cd4c71a2eaad4380 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 8 Oct 2023 19:40:25 +0200 Subject: [PATCH 10/15] keywords --- plugins/postcss-gamut-mapping/package.json | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/plugins/postcss-gamut-mapping/package.json b/plugins/postcss-gamut-mapping/package.json index 756d9a117..d3da42370 100644 --- a/plugins/postcss-gamut-mapping/package.json +++ b/plugins/postcss-gamut-mapping/package.json @@ -71,7 +71,16 @@ }, "bugs": "https://github.com/csstools/postcss-plugins/issues", "keywords": [ - "postcss-plugin" + "color", + "css", + "display-p3", + "gamut mapping", + "p3", + "postcss", + "postcss-plugin", + "rec2020", + "srgb", + "wide gamut" ], "csstools": { "cssdbId": "gamut-mapping", From 37cd913b8a14781fc7a7704d5699b316cb93a677 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 8 Oct 2023 19:42:36 +0200 Subject: [PATCH 11/15] fmt --- plugins/postcss-gamut-mapping/dist/index.cjs | 2 +- plugins/postcss-gamut-mapping/dist/index.mjs | 2 +- plugins/postcss-gamut-mapping/src/index.ts | 32 +++++++++++--------- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/plugins/postcss-gamut-mapping/dist/index.cjs b/plugins/postcss-gamut-mapping/dist/index.cjs index 832691efc..77030d6a5 100644 --- a/plugins/postcss-gamut-mapping/dist/index.cjs +++ b/plugins/postcss-gamut-mapping/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/css-tokenizer"),o=require("@csstools/css-parser-algorithms"),a=require("@csstools/css-color-parser");const t=/\bcolor-gamut\b/i;function hasConditionalAncestor(e){let o=e.parent;for(;o;)if("atrule"===o.type){if("media"===o.name.toLowerCase()&&t.test(o.params))return!0;o=o.parent}else o=o.parent;return!1}function hasOverrideOrFallback(e){var o;const a=e.prop.toLowerCase();let t=!1,r=!1;const s=(null==(o=e.parent)?void 0:o.nodes)??[],n=s.indexOf(e);for(let e=0;e({postcssPlugin:"postcss-gamut-mapping",prepare(){const t=new WeakMap;return{OnceExit:(n,{postcss:l})=>{n.walkDecls((n=>{const i=n.value;if(!r.test(i))return;if(!n.parent||hasConditionalAncestor(n))return;const{hasOverride:c,hasFallback:u}=hasOverrideOrFallback(n);if(c)return;const p=t.get(n.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{media:void 0},lastConditionalRule:void 0};t.set(n.parent,p);let d=!1;const m=o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(e.tokenize({css:i})),(e=>{if(o.isFunctionNode(e)&&s.test(e.getName())){const o=a.color(e);if(!o)return;if(o.syntaxFlags.has(a.SyntaxFlag.HasNoneKeywords))return;if(a.colorDataFitsRGB_Gamut(o))return;return d||a.colorDataFitsDisplayP3_Gamut(o)||(d=!0),a.serializeRGB(o,!0)}})),f=o.stringify(m);if(f===i)return;const h=`(color-gamut: ${d?"rec2020":"p3"})`;if(p.lastConditionParams.media!==h&&(p.lastConditionalRule=void 0),p.lastConditionalRule)return u||n.cloneBefore({value:f}),p.lastConditionalRule.append(n.clone()),void n.remove();u||n.cloneBefore({value:f});const v=l.atRule({name:"media",params:h,source:n.parent.source,raws:{before:"\n\n",after:"\n"}}),C=n.parent.clone();C.removeAll(),C.raws.before="\n",C.append(n.clone()),n.remove(),p.lastConditionParams.media=v.params,p.lastConditionalRule=C,v.append(C),p.conditionalRules.push(v)})),n.walk((e=>{const o=t.get(e);o&&0!==o.conditionalRules.length&&o.conditionalRules.reverse().forEach((o=>{e.after(o)}))}))}}}});creator.postcss=!0,module.exports=creator; +"use strict";var e=require("@csstools/css-tokenizer"),o=require("@csstools/css-parser-algorithms"),a=require("@csstools/css-color-parser");const t=/\bcolor-gamut\b/i;function hasConditionalAncestor(e){let o=e.parent;for(;o;)if("atrule"===o.type){if("media"===o.name.toLowerCase()&&t.test(o.params))return!0;o=o.parent}else o=o.parent;return!1}function hasOverrideOrFallback(e){var o;const a=e.prop.toLowerCase();let t=!1,s=!1;const r=(null==(o=e.parent)?void 0:o.nodes)??[],n=r.indexOf(e);for(let e=0;e({postcssPlugin:"postcss-gamut-mapping",prepare(){const t=new WeakMap;return{OnceExit:(n,{postcss:l})=>{n.walkDecls((n=>{const i=n.value;if(!s.test(i))return;if(!n.parent||hasConditionalAncestor(n))return;const{hasOverride:c,hasFallback:p}=hasOverrideOrFallback(n);if(c)return;const u=t.get(n.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{media:void 0},lastConditionalRule:void 0};t.set(n.parent,u);let d=!1;const m=o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(e.tokenize({css:i})),(e=>{if(!o.isFunctionNode(e)||!r.test(e.getName()))return;const t=a.color(e);return!t||t.syntaxFlags.has(a.SyntaxFlag.HasNoneKeywords)||a.colorDataFitsRGB_Gamut(t)?void 0:(d||a.colorDataFitsDisplayP3_Gamut(t)||(d=!0),a.serializeRGB(t,!0))})),f=o.stringify(m);if(f===i)return;const v=`(color-gamut: ${d?"rec2020":"p3"})`;if(u.lastConditionParams.media!==v&&(u.lastConditionalRule=void 0),u.lastConditionalRule)return p||n.cloneBefore({value:f}),u.lastConditionalRule.append(n.clone()),void n.remove();p||n.cloneBefore({value:f});const h=l.atRule({name:"media",params:v,source:n.parent.source,raws:{before:"\n\n",after:"\n"}}),C=n.parent.clone();C.removeAll(),C.raws.before="\n",C.append(n.clone()),n.remove(),u.lastConditionParams.media=h.params,u.lastConditionalRule=C,h.append(C),u.conditionalRules.push(h)})),n.walk((e=>{const o=t.get(e);o&&0!==o.conditionalRules.length&&o.conditionalRules.reverse().forEach((o=>{e.after(o)}))}))}}}});creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-gamut-mapping/dist/index.mjs b/plugins/postcss-gamut-mapping/dist/index.mjs index 2ad737535..1899c2c47 100644 --- a/plugins/postcss-gamut-mapping/dist/index.mjs +++ b/plugins/postcss-gamut-mapping/dist/index.mjs @@ -1 +1 @@ -import{tokenize as e}from"@csstools/css-tokenizer";import{replaceComponentValues as o,parseCommaSeparatedListOfComponentValues as t,isFunctionNode as a,stringify as r}from"@csstools/css-parser-algorithms";import{color as n,SyntaxFlag as s,colorDataFitsRGB_Gamut as l,colorDataFitsDisplayP3_Gamut as i,serializeRGB as c}from"@csstools/css-color-parser";const p=/\bcolor-gamut\b/i;function hasConditionalAncestor(e){let o=e.parent;for(;o;)if("atrule"===o.type){if("media"===o.name.toLowerCase()&&p.test(o.params))return!0;o=o.parent}else o=o.parent;return!1}function hasOverrideOrFallback(e){var o;const t=e.prop.toLowerCase();let a=!1,r=!1;const n=(null==(o=e.parent)?void 0:o.nodes)??[],s=n.indexOf(e);for(let e=0;e({postcssPlugin:"postcss-gamut-mapping",prepare(){const p=new WeakMap;return{OnceExit:(f,{postcss:m})=>{f.walkDecls((f=>{const h=f.value;if(!u.test(h))return;if(!f.parent||hasConditionalAncestor(f))return;const{hasOverride:v,hasFallback:b}=hasOverrideOrFallback(f);if(v)return;const k=p.get(f.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{media:void 0},lastConditionalRule:void 0};p.set(f.parent,k);let C=!1;const g=o(t(e({css:h})),(e=>{if(a(e)&&d.test(e.getName())){const o=n(e);if(!o)return;if(o.syntaxFlags.has(s.HasNoneKeywords))return;if(l(o))return;return C||i(o)||(C=!0),c(o,!0)}})),w=r(g);if(w===h)return;const R=`(color-gamut: ${C?"rec2020":"p3"})`;if(k.lastConditionParams.media!==R&&(k.lastConditionalRule=void 0),k.lastConditionalRule)return b||f.cloneBefore({value:w}),k.lastConditionalRule.append(f.clone()),void f.remove();b||f.cloneBefore({value:w});const O=m.atRule({name:"media",params:R,source:f.parent.source,raws:{before:"\n\n",after:"\n"}}),F=f.parent.clone();F.removeAll(),F.raws.before="\n",F.append(f.clone()),f.remove(),k.lastConditionParams.media=O.params,k.lastConditionalRule=F,O.append(F),k.conditionalRules.push(O)})),f.walk((e=>{const o=p.get(e);o&&0!==o.conditionalRules.length&&o.conditionalRules.reverse().forEach((o=>{e.after(o)}))}))}}}});creator.postcss=!0;export{creator as default}; +import{tokenize as e}from"@csstools/css-tokenizer";import{replaceComponentValues as o,parseCommaSeparatedListOfComponentValues as t,isFunctionNode as a,stringify as r}from"@csstools/css-parser-algorithms";import{color as n,SyntaxFlag as s,colorDataFitsRGB_Gamut as l,colorDataFitsDisplayP3_Gamut as i,serializeRGB as c}from"@csstools/css-color-parser";const p=/\bcolor-gamut\b/i;function hasConditionalAncestor(e){let o=e.parent;for(;o;)if("atrule"===o.type){if("media"===o.name.toLowerCase()&&p.test(o.params))return!0;o=o.parent}else o=o.parent;return!1}function hasOverrideOrFallback(e){var o;const t=e.prop.toLowerCase();let a=!1,r=!1;const n=(null==(o=e.parent)?void 0:o.nodes)??[],s=n.indexOf(e);for(let e=0;e({postcssPlugin:"postcss-gamut-mapping",prepare(){const p=new WeakMap;return{OnceExit:(m,{postcss:f})=>{m.walkDecls((m=>{const h=m.value;if(!d.test(h))return;if(!m.parent||hasConditionalAncestor(m))return;const{hasOverride:v,hasFallback:b}=hasOverrideOrFallback(m);if(v)return;const k=p.get(m.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{media:void 0},lastConditionalRule:void 0};p.set(m.parent,k);let C=!1;const g=o(t(e({css:h})),(e=>{if(!a(e)||!u.test(e.getName()))return;const o=n(e);return!o||o.syntaxFlags.has(s.HasNoneKeywords)||l(o)?void 0:(C||i(o)||(C=!0),c(o,!0))})),w=r(g);if(w===h)return;const R=`(color-gamut: ${C?"rec2020":"p3"})`;if(k.lastConditionParams.media!==R&&(k.lastConditionalRule=void 0),k.lastConditionalRule)return b||m.cloneBefore({value:w}),k.lastConditionalRule.append(m.clone()),void m.remove();b||m.cloneBefore({value:w});const O=f.atRule({name:"media",params:R,source:m.parent.source,raws:{before:"\n\n",after:"\n"}}),F=m.parent.clone();F.removeAll(),F.raws.before="\n",F.append(m.clone()),m.remove(),k.lastConditionParams.media=O.params,k.lastConditionalRule=F,O.append(F),k.conditionalRules.push(O)})),m.walk((e=>{const o=p.get(e);o&&0!==o.conditionalRules.length&&o.conditionalRules.reverse().forEach((o=>{e.after(o)}))}))}}}});creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-gamut-mapping/src/index.ts b/plugins/postcss-gamut-mapping/src/index.ts index 82de82e36..968284263 100644 --- a/plugins/postcss-gamut-mapping/src/index.ts +++ b/plugins/postcss-gamut-mapping/src/index.ts @@ -60,26 +60,28 @@ const creator: PluginCreator = () => { const replacedRGB = replaceComponentValues( parseCommaSeparatedListOfComponentValues(tokenize({ css: originalValue })), (componentValue) => { - if (isFunctionNode(componentValue) && HAS_WIDE_GAMUT_COLOR_NAME.test(componentValue.getName())) { - const colorData = color(componentValue); - if (!colorData) { - return; - } + if (!isFunctionNode(componentValue) || !HAS_WIDE_GAMUT_COLOR_NAME.test(componentValue.getName())) { + return; + } - if (colorData.syntaxFlags.has(SyntaxFlag.HasNoneKeywords)) { - return; - } + const colorData = color(componentValue); + if (!colorData) { + return; + } - if (colorDataFitsRGB_Gamut(colorData)) { - return; - } + if (colorData.syntaxFlags.has(SyntaxFlag.HasNoneKeywords)) { + return; + } - if (!isRec2020 && !colorDataFitsDisplayP3_Gamut(colorData)) { - isRec2020 = true; - } + if (colorDataFitsRGB_Gamut(colorData)) { + return; + } - return serializeRGB(colorData, true); + if (!isRec2020 && !colorDataFitsDisplayP3_Gamut(colorData)) { + isRec2020 = true; } + + return serializeRGB(colorData, true); }, ); From 9e70da37a6d3fd7b91437791901a2098594c64a5 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 8 Oct 2023 22:49:51 +0200 Subject: [PATCH 12/15] correct order --- .../postcss-preset-env/dist/index.cjs | 2 +- .../postcss-preset-env/dist/index.mjs | 2 +- .../postcss-preset-env/docs/generate.mjs | 25 ++++++----- .../scripts/generate-plugins-data.mjs | 12 +++--- .../scripts/plugins-data.json | 7 ++++ plugin-packs/postcss-preset-env/src/index.ts | 5 --- .../src/lib/format-feature.mjs | 4 +- .../src/lib/ids-by-execution-order.mjs | 1 + .../src/lib/list-features.mjs | 23 +++++++++- .../src/plugins/plugins-by-id.mjs | 2 + .../src/plugins/plugins-data.mjs | 7 ++++ .../test/lib/list-features/client-side.mjs | 12 ++++++ .../src/test/lib/list-features/no-options.mjs | 6 +++ .../src/test/lib/list-features/preserve.mjs | 12 ++++++ .../src/test/lib/list-features/stage-0.mjs | 6 +++ .../list-features/vendor-implementations.mjs | 18 ++++++++ .../test/basic.autoprefixer.expect.css | 22 +++++++--- .../test/basic.autoprefixer.false.expect.css | 22 +++++++--- .../test/basic.ch38.expect.css | 22 +++++++--- .../test/basic.ch88-ff78-saf10.expect.css | 22 +++++++--- .../test/basic.ch88-ff78.expect.css | 22 +++++++--- .../basic.ch88-ff78.no-is-pseudo.expect.css | 22 +++++++--- .../postcss-preset-env/test/basic.css | 4 ++ .../postcss-preset-env/test/basic.expect.css | 22 +++++++--- .../test/basic.ff49.expect.css | 22 +++++++--- .../test/basic.ff66.expect.css | 22 +++++++--- ...ebrew.all-browsers-have-support.expect.css | 10 +++++ .../test/basic.hebrew.expect.css | 22 +++++++--- .../test/basic.ie10.expect.css | 22 +++++++--- .../test/basic.nesting.false.expect.css | 22 +++++++--- ...esting.noIsPseudoSelector.false.expect.css | 4 ++ .../test/basic.nesting.true.expect.css | 4 ++ .../test/basic.op_mini.expect.css | 22 +++++++--- .../test/basic.preserve.false.expect.css | 17 +++++++- .../test/basic.preserve.true.expect.css | 42 ++++++++++++++----- .../test/basic.safari15.expect.css | 28 ++++++++++--- .../test/basic.stage0-ff49.expect.css | 22 +++++++--- .../test/basic.stage0-ff66.expect.css | 22 +++++++--- .../test/basic.stage0.expect.css | 22 +++++++--- .../test/basic.supports-query.expect.css | 22 +++++++--- .../test/basic.vendors-1.expect.css | 4 ++ .../test/basic.vendors-2.expect.css | 4 ++ .../test/basic.vendors-3.expect.css | 4 ++ .../test/basic.expect.css | 18 +++++--- 44 files changed, 506 insertions(+), 151 deletions(-) diff --git a/plugin-packs/postcss-preset-env/dist/index.cjs b/plugin-packs/postcss-preset-env/dist/index.cjs index adadc57a3..4013622eb 100644 --- a/plugin-packs/postcss-preset-env/dist/index.cjs +++ b/plugin-packs/postcss-preset-env/dist/index.cjs @@ -1 +1 @@ -"use strict";var s=require("autoprefixer"),e=require("cssdb"),o=require("@csstools/postcss-progressive-custom-properties"),t=require("browserslist"),i=require("@csstools/postcss-initial"),a=require("postcss-pseudo-class-any-link"),r=require("css-blank-pseudo"),c=require("postcss-page-break"),n=require("@csstools/postcss-cascade-layers"),p=require("postcss-attribute-case-insensitive"),l=require("postcss-clamp"),u=require("@csstools/postcss-color-function"),m=require("postcss-color-functional-notation"),d=require("@csstools/postcss-color-mix-function"),g=require("postcss-custom-media"),f=require("postcss-custom-properties"),b=require("postcss-custom-selectors"),h=require("postcss-dir-pseudo-class"),N=require("@csstools/postcss-normalize-display-values"),v=require("postcss-double-position-gradients"),y=require("@csstools/postcss-exponential-functions"),k=require("@csstools/postcss-logical-float-and-clear"),w=require("postcss-focus-visible"),q=require("postcss-focus-within"),x=require("@csstools/postcss-font-format-keywords"),F=require("postcss-font-variant"),$=require("@csstools/postcss-gamut-mapping"),O=require("postcss-gap-properties"),S=require("@csstools/postcss-gradients-interpolation-method"),P=require("css-has-pseudo"),C=require("postcss-color-hex-alpha"),I=require("@csstools/postcss-hwb-function"),E=require("@csstools/postcss-ic-unit"),L=require("postcss-image-set-function"),U=require("@csstools/postcss-is-pseudo-class"),A=require("postcss-lab-function"),B=require("postcss-logical"),_=require("@csstools/postcss-logical-resize"),j=require("@csstools/postcss-logical-viewport-units"),M=require("@csstools/postcss-media-queries-aspect-ratio-number-values"),z=require("@csstools/postcss-media-minmax"),D=require("@csstools/postcss-nested-calc"),R=require("postcss-nesting"),V=require("postcss-selector-not"),T=require("@csstools/postcss-oklab-function"),H=require("postcss-opacity-percentage"),W=require("postcss-overflow-shorthand"),G=require("postcss-replace-overflow-wrap"),K=require("postcss-place"),Z=require("css-prefers-color-scheme"),Q=require("postcss-color-rebeccapurple"),J=require("@csstools/postcss-relative-color-syntax"),X=require("@csstools/postcss-scope-pseudo-class"),Y=require("@csstools/postcss-stepped-value-functions"),ss=require("@csstools/postcss-text-decoration-shorthand"),es=require("@csstools/postcss-trigonometric-functions"),os=require("@csstools/postcss-unset-value");const ts={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},is=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,e,o){if(e.debug){o.log("Enabling the following feature(s):");const t=[],i=[];!1!==e.autoprefixer&&i.push(" autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(` ${s.id} (injected via options)`):i.push(` ${s.id}`),void 0!==ts[s.id]&&t.push(s.id)})),i.sort(((s,e)=>s.localeCompare(e))),t.sort(((s,e)=>s.localeCompare(e))),i.forEach((s=>o.log(s))),t.length&&(o.log("These feature(s) need a browser library to work:"),t.forEach((s=>o.log(` ${s}: ${ts[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const e={};return e.preserve=s.preserve,e}return!1}function clamp(s,e,o){return Math.max(s,Math.min(e,o))}const as=2,rs=5;function stageFromOptions(s,e){let o=as;if(void 0===s.stage)return e.log(`Using features from Stage ${o} (default)`),o;if(!1===s.stage)o=rs;else{let e=parseInt(s.stage,10);Number.isNaN(e)&&(e=0),o=clamp(0,e,rs)}return o===rs?e.log('Stage has been disabled, features will be handled via the "features" option.'):e.log(`Using features from Stage ${o}`),o}const cs=Symbol("insertBefore"),ns=Symbol("insertAfter"),ps=Symbol("insertOrder"),ls=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?cs:ns,i=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let a=e[o];Array.isArray(a)||(a=[a]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const Ns=["and_chr","and_ff","android","chrome","edge","firefox","ie","ios_saf","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return Ns.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,t,i){switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),s))return i.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(s.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return i.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in t?t.logical:{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s),i=t(o,{ignoreUnknownVersions:!0});return!!e.some((s=>i.some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[cs]||s[ns]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[ls],id:o,stage:rs+1}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:hs.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,a,r){let c,n;return c=getOptionsForBrowsersByFeature(e,t,s,a,r),!0===o[t.id]?i&&(c=Object.assign({},c,i)):c=i?Object.assign({},c,i,o[t.id]):Object.assign({},c,o[t.id]),c.enableProgressiveCustomProperties=!1,"overflow-wrap-property"===t.id&&"preserve"in c&&(c.method=c.preserve?"copy":"replace"),n=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(c):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(c):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:n,pluginOptions:c,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,i){const a=Object(e.features),r="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,c=Object(e.insertBefore),n=Object(e.insertAfter),p=e.browsers?void 0:e.env,l=e.browsers,u=clamp(0,intOrZero(e.minimumVendorImplementations),3);u>0&&i.log(`Using features with ${u} or more vendor implementations`);const m=stageFromOptions(e,i),d=prepareFeaturesList(s,c,n).map((s=>formatPolyfillableFeature(s))).filter((s=>0===u||(!(!s[cs]&&!s[ns])||(u<=s.vendors_implementations||(a[s.id]?(i.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))),g=t(l,{env:p,ignoreUnknownVersions:!0}).filter((s=>Ns.includes(s.split(" ")[0])));return d.filter((s=>{const e=s.stage>=m,o=r||!is.includes(s.id),t=!1===a[s.id],c=a[s.id]?a[s.id]:e&&o;return t?i.log(` ${s.id} has been disabled by options`):e?o||i.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):c?i.log(` ${s.id} does not meet the required stage but has been enabled by options`):i.log(` ${s.id} with stage ${s.stage} has been disabled`),c})).map((t=>formatStagedFeature(s,g,a,t,o,e,i))).filter((s=>{if(s.id in a)return a[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=g.some((s=>e.some((e=>e===s))));return o||i.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var vs=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"@csstools/postcss-exponential-functions",id:"exponential-functions",importName:"postcssExponentialFunctions"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"@csstools/postcss-gamut-mapping",id:"gamut-mapping",importName:"postcssGamutMapping"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-gradients-interpolation-method",id:"gradients-interpolation-method",importName:"postcssGradientsInterpolationMethod"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"@csstools/postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/postcss-media-minmax",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",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return vs.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=vs.map((s=>s.id)),i=vs.map((s=>s.packageName)),a=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const r=[...t.map((e=>[e,levenshteinDistance(s,e)])),...i.map((e=>[a[e],levenshteinDistance(s,e)]))].sort(((s,e)=>s[1]-e[1])).filter((s=>s[1]<10)),c=new Set;for(let s=0;s=3));s++);if(!c.size)return void e.warn(o,`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`);let n='"';n+=Array.from(c).join('", "'),n+='"',e.warn(o,`Unknown feature: "${s}", did you mean one of: ${n}`)}))}function levenshteinDistance(s,e){if(!s.length)return e.length;if(!e.length)return s.length;const o=[];for(let t=0;t<=e.length;t++){o[t]=[t];for(let i=1;i<=s.length;i++)o[t][i]=0===t?i:Math.min(o[t-1][i]+1,o[t][i-1]+1,o[t-1][i-1]+(s[i-1]===e[t-1]?0:1))}return o[e.length][s.length]}const creator=t=>{const i=new Logger,a=Object(t),r=Object.keys(Object(a.features)),c=a.browsers?void 0:a.env,n=a.browsers,p=initializeSharedOptions(a),l=listFeatures(e,a,p,i),u=l.map((s=>s.plugin));!1!==a.autoprefixer&&u.push(s(Object.assign({env:c,overrideBrowserslist:n},a.autoprefixer))),u.push(o()),logFeaturesList(l,a,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(r,s,e),a.debug&&i.dumpLogs(e),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...u,internalPlugin()]}};creator.postcss=!0,module.exports=creator; +"use strict";var s=require("autoprefixer"),e=require("cssdb"),o=require("browserslist"),t=require("@csstools/postcss-initial"),i=require("postcss-pseudo-class-any-link"),r=require("css-blank-pseudo"),a=require("postcss-page-break"),c=require("@csstools/postcss-cascade-layers"),n=require("postcss-attribute-case-insensitive"),p=require("postcss-clamp"),l=require("@csstools/postcss-color-function"),u=require("postcss-color-functional-notation"),m=require("@csstools/postcss-color-mix-function"),d=require("postcss-custom-media"),g=require("postcss-custom-properties"),f=require("postcss-custom-selectors"),b=require("postcss-dir-pseudo-class"),h=require("@csstools/postcss-normalize-display-values"),N=require("postcss-double-position-gradients"),v=require("@csstools/postcss-exponential-functions"),y=require("@csstools/postcss-logical-float-and-clear"),k=require("postcss-focus-visible"),w=require("postcss-focus-within"),q=require("@csstools/postcss-font-format-keywords"),x=require("postcss-font-variant"),F=require("@csstools/postcss-gamut-mapping"),$=require("postcss-gap-properties"),O=require("@csstools/postcss-gradients-interpolation-method"),S=require("css-has-pseudo"),P=require("postcss-color-hex-alpha"),C=require("@csstools/postcss-hwb-function"),I=require("@csstools/postcss-ic-unit"),E=require("postcss-image-set-function"),L=require("@csstools/postcss-is-pseudo-class"),U=require("postcss-lab-function"),A=require("postcss-logical"),B=require("@csstools/postcss-logical-resize"),_=require("@csstools/postcss-logical-viewport-units"),j=require("@csstools/postcss-media-queries-aspect-ratio-number-values"),M=require("@csstools/postcss-media-minmax"),z=require("@csstools/postcss-nested-calc"),D=require("postcss-nesting"),R=require("postcss-selector-not"),V=require("@csstools/postcss-oklab-function"),T=require("postcss-opacity-percentage"),H=require("postcss-overflow-shorthand"),W=require("postcss-replace-overflow-wrap"),G=require("postcss-place"),K=require("css-prefers-color-scheme"),Z=require("@csstools/postcss-progressive-custom-properties"),Q=require("postcss-color-rebeccapurple"),J=require("@csstools/postcss-relative-color-syntax"),X=require("@csstools/postcss-scope-pseudo-class"),Y=require("@csstools/postcss-stepped-value-functions"),ss=require("@csstools/postcss-text-decoration-shorthand"),es=require("@csstools/postcss-trigonometric-functions"),os=require("@csstools/postcss-unset-value");const ts={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},is=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,e,o){if(e.debug){o.log("Enabling the following feature(s):");const t=[],i=[];!1!==e.autoprefixer&&i.push(" autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(` ${s.id} (injected via options)`):i.push(` ${s.id}`),void 0!==ts[s.id]&&t.push(s.id)})),i.sort(((s,e)=>s.localeCompare(e))),t.sort(((s,e)=>s.localeCompare(e))),i.forEach((s=>o.log(s))),t.length&&(o.log("These feature(s) need a browser library to work:"),t.forEach((s=>o.log(` ${s}: ${ts[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const e={};return e.preserve=s.preserve,e}return!1}function clamp(s,e,o){return Math.max(s,Math.min(e,o))}const rs=2,as=5;function stageFromOptions(s,e){let o=rs;if(void 0===s.stage)return e.log(`Using features from Stage ${o} (default)`),o;if(!1===s.stage)o=as;else{let e=parseInt(s.stage,10);Number.isNaN(e)&&(e=0),o=clamp(0,e,as)}return o===as?e.log('Stage has been disabled, features will be handled via the "features" option.'):e.log(`Using features from Stage ${o}`),o}const cs=Symbol("insertBefore"),ns=Symbol("insertAfter"),ps=Symbol("insertOrder"),ls=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?cs:ns,i=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let r=e[o];Array.isArray(r)||(r=[r]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const Ns=["and_chr","and_ff","android","chrome","edge","firefox","ie","ios_saf","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return Ns.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,t,i){switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),s))return i.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(s.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return i.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in t?t.logical:{};default:return{}}}function needsOptionFor(s,e){const t=getUnsupportedBrowsersByFeature(s),i=o(t,{ignoreUnknownVersions:!0});return!!e.some((s=>i.some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[cs]||s[ns]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[ls],id:o,stage:as+1}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:hs.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,r,a){let c,n;return c=getOptionsForBrowsersByFeature(e,t,s,r,a),!0===o[t.id]?i&&(c=Object.assign({},c,i)):c=i?Object.assign({},c,i,o[t.id]):Object.assign({},c,o[t.id]),"progressive-custom-properties"!==t.id&&(c.enableProgressiveCustomProperties=!1),"overflow-wrap-property"===t.id&&"preserve"in c&&(c.method=c.preserve?"copy":"replace"),n=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(c):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(c):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:n,pluginOptions:c,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}const vs=new Set(["progressive-custom-properties"]);function listFeatures(s,e,t,i){const r=Object(e.features),a="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,c=Object(e.insertBefore),n=Object(e.insertAfter),p=e.browsers?void 0:e.env,l=e.browsers,u=clamp(0,intOrZero(e.minimumVendorImplementations),3);u>0&&i.log(`Using features with ${u} or more vendor implementations`);const m=stageFromOptions(e,i),d=prepareFeaturesList([...s,{id:"progressive-custom-properties"}],c,n).map((s=>formatPolyfillableFeature(s))).filter((s=>!!vs.has(s.id)||(0===u||(!(!s[cs]&&!s[ns])||(u<=s.vendors_implementations||(r[s.id]?(i.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1))))))),g=o(l,{env:p,ignoreUnknownVersions:!0}).filter((s=>Ns.includes(s.split(" ")[0])));return d.filter((s=>{if(vs.has(s.id))return!0;const e=s.stage>=m,o=a||!is.includes(s.id),t=!1===r[s.id],c=r[s.id]?r[s.id]:e&&o;return t?i.log(` ${s.id} has been disabled by options`):e?o||i.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):c?i.log(` ${s.id} does not meet the required stage but has been enabled by options`):i.log(` ${s.id} with stage ${s.stage} has been disabled`),c})).map((o=>formatStagedFeature(s,g,r,o,t,e,i))).filter((s=>{if(vs.has(s.id))return!0;if(s.id in r)return r[s.id];const e=o(s.browsers,{ignoreUnknownVersions:!0}),t=g.some((s=>e.some((e=>e===s))));return t||i.log(`${s.id} disabled due to browser support`),t}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var ys=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"@csstools/postcss-exponential-functions",id:"exponential-functions",importName:"postcssExponentialFunctions"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"@csstools/postcss-gamut-mapping",id:"gamut-mapping",importName:"postcssGamutMapping"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-gradients-interpolation-method",id:"gradients-interpolation-method",importName:"postcssGradientsInterpolationMethod"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"@csstools/postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/postcss-media-minmax",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",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"},{packageName:"@csstools/postcss-progressive-custom-properties",id:"progressive-custom-properties",importName:"postcssProgressiveCustomProperties",omitTypedOptions:!0,omitDocs:!0}];function getPackageNamesToIds(){const s={};return ys.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=ys.map((s=>s.id)),i=ys.map((s=>s.packageName)),r=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const a=[...t.map((e=>[e,levenshteinDistance(s,e)])),...i.map((e=>[r[e],levenshteinDistance(s,e)]))].sort(((s,e)=>s[1]-e[1])).filter((s=>s[1]<10)),c=new Set;for(let s=0;s=3));s++);if(!c.size)return void e.warn(o,`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`);let n='"';n+=Array.from(c).join('", "'),n+='"',e.warn(o,`Unknown feature: "${s}", did you mean one of: ${n}`)}))}function levenshteinDistance(s,e){if(!s.length)return e.length;if(!e.length)return s.length;const o=[];for(let t=0;t<=e.length;t++){o[t]=[t];for(let i=1;i<=s.length;i++)o[t][i]=0===t?i:Math.min(o[t-1][i]+1,o[t][i-1]+1,o[t-1][i-1]+(s[i-1]===e[t-1]?0:1))}return o[e.length][s.length]}const creator=o=>{const t=new Logger,i=Object(o),r=Object.keys(Object(i.features)),a=i.browsers?void 0:i.env,c=i.browsers,n=initializeSharedOptions(i),p=listFeatures(e,i,n,t),l=p.map((s=>s.plugin));!1!==i.autoprefixer&&l.push(s(Object.assign({env:a,overrideBrowserslist:c},i.autoprefixer))),logFeaturesList(p,i,t);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(r,s,e),i.debug&&t.dumpLogs(e),t.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0,module.exports=creator; diff --git a/plugin-packs/postcss-preset-env/dist/index.mjs b/plugin-packs/postcss-preset-env/dist/index.mjs index 58ed53a39..c965f81ff 100644 --- a/plugin-packs/postcss-preset-env/dist/index.mjs +++ b/plugin-packs/postcss-preset-env/dist/index.mjs @@ -1 +1 @@ -import s from"autoprefixer";import o from"cssdb";import e from"@csstools/postcss-progressive-custom-properties";import t from"browserslist";import i from"@csstools/postcss-initial";import a from"postcss-pseudo-class-any-link";import r from"css-blank-pseudo";import p from"postcss-page-break";import c from"@csstools/postcss-cascade-layers";import n from"postcss-attribute-case-insensitive";import l from"postcss-clamp";import m from"@csstools/postcss-color-function";import u from"postcss-color-functional-notation";import d from"@csstools/postcss-color-mix-function";import f from"postcss-custom-media";import g from"postcss-custom-properties";import b from"postcss-custom-selectors";import h from"postcss-dir-pseudo-class";import N from"@csstools/postcss-normalize-display-values";import v from"postcss-double-position-gradients";import y from"@csstools/postcss-exponential-functions";import k from"@csstools/postcss-logical-float-and-clear";import w from"postcss-focus-visible";import x from"postcss-focus-within";import F from"@csstools/postcss-font-format-keywords";import $ from"postcss-font-variant";import O from"@csstools/postcss-gamut-mapping";import S from"postcss-gap-properties";import P from"@csstools/postcss-gradients-interpolation-method";import C from"css-has-pseudo";import I from"postcss-color-hex-alpha";import E from"@csstools/postcss-hwb-function";import L from"@csstools/postcss-ic-unit";import U from"postcss-image-set-function";import A from"@csstools/postcss-is-pseudo-class";import B from"postcss-lab-function";import _ from"postcss-logical";import j from"@csstools/postcss-logical-resize";import q from"@csstools/postcss-logical-viewport-units";import M from"@csstools/postcss-media-queries-aspect-ratio-number-values";import z from"@csstools/postcss-media-minmax";import D from"@csstools/postcss-nested-calc";import R from"postcss-nesting";import V from"postcss-selector-not";import T from"@csstools/postcss-oklab-function";import H from"postcss-opacity-percentage";import W from"postcss-overflow-shorthand";import G from"postcss-replace-overflow-wrap";import K from"postcss-place";import Z from"css-prefers-color-scheme";import Q from"postcss-color-rebeccapurple";import J from"@csstools/postcss-relative-color-syntax";import X from"@csstools/postcss-scope-pseudo-class";import Y from"@csstools/postcss-stepped-value-functions";import ss from"@csstools/postcss-text-decoration-shorthand";import os from"@csstools/postcss-trigonometric-functions";import es from"@csstools/postcss-unset-value";const ts={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},is=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,o,e){if(o.debug){e.log("Enabling the following feature(s):");const t=[],i=[];!1!==o.autoprefixer&&i.push(" autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(` ${s.id} (injected via options)`):i.push(` ${s.id}`),void 0!==ts[s.id]&&t.push(s.id)})),i.sort(((s,o)=>s.localeCompare(o))),t.sort(((s,o)=>s.localeCompare(o))),i.forEach((s=>e.log(s))),t.length&&(e.log("These feature(s) need a browser library to work:"),t.forEach((s=>e.log(` ${s}: ${ts[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const o={};return o.preserve=s.preserve,o}return!1}function clamp(s,o,e){return Math.max(s,Math.min(o,e))}const as=2,rs=5;function stageFromOptions(s,o){let e=as;if(void 0===s.stage)return o.log(`Using features from Stage ${e} (default)`),e;if(!1===s.stage)e=rs;else{let o=parseInt(s.stage,10);Number.isNaN(o)&&(o=0),e=clamp(0,o,rs)}return e===rs?o.log('Stage has been disabled, features will be handled via the "features" option.'):o.log(`Using features from Stage ${e}`),e}const ps=Symbol("insertBefore"),cs=Symbol("insertAfter"),ns=Symbol("insertOrder"),ls=Symbol("plugin");function getTransformedInsertions(s,o,e){if("insertBefore"!==e&&"insertAfter"!==e)return[];const t="insertBefore"===e?ps:cs,i=[];for(const e in o){if(!Object.hasOwnProperty.call(o,e))continue;if(!s.find((s=>s.id===e)))continue;let a=o[e];Array.isArray(a)||(a=[a]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,o)=>featureIsLess(s,o)))}const Ns=["and_chr","and_ff","android","chrome","edge","firefox","ie","ios_saf","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const o=[];return Ns.forEach((e=>{if("op_mini"===e&&void 0===s.browser_support[e])return void o.push("op_mini all");const t=s.browser_support[e];"string"==typeof t&&/^[0-9|.]+$/.test(t)?o.push(`${e} < ${s.browser_support[e]}`):o.push(`${e} >= 1`)})),o}function getOptionsForBrowsersByFeature(s,o,e,t,i){switch(o.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(e.find((s=>"is-pseudo-class"===s.id)),s))return i.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(s.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return i.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in t?t.logical:{};default:return{}}}function needsOptionFor(s,o){const e=getUnsupportedBrowsersByFeature(s),i=t(e,{ignoreUnknownVersions:!0});return!!o.some((s=>i.some((o=>o===s))))}function formatPolyfillableFeature(s){const o=getUnsupportedBrowsersByFeature(s);if(s[ps]||s[cs]){let e=s.id;return e=s.insertBefore?`before-${e}`:`after-${e}`,{browsers:o,vendors_implementations:s.vendors_implementations,plugin:s[ls],id:e,stage:rs+1}}return{browsers:o,vendors_implementations:s.vendors_implementations,plugin:hs.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,o,e,t,i,a,r){let p,c;return p=getOptionsForBrowsersByFeature(o,t,s,a,r),!0===e[t.id]?i&&(p=Object.assign({},p,i)):p=i?Object.assign({},p,i,e[t.id]):Object.assign({},p,e[t.id]),p.enableProgressiveCustomProperties=!1,"overflow-wrap-property"===t.id&&"preserve"in p&&(p.method=p.preserve?"copy":"replace"),c=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(p):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(p):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:c,pluginOptions:p,id:t.id}}function intOrZero(s){const o=parseInt(s,10);return Number.isNaN(o)?0:o}function listFeatures(s,o,e,i){const a=Object(o.features),r="enableClientSidePolyfills"in o&&o.enableClientSidePolyfills,p=Object(o.insertBefore),c=Object(o.insertAfter),n=o.browsers?void 0:o.env,l=o.browsers,m=clamp(0,intOrZero(o.minimumVendorImplementations),3);m>0&&i.log(`Using features with ${m} or more vendor implementations`);const u=stageFromOptions(o,i),d=prepareFeaturesList(s,p,c).map((s=>formatPolyfillableFeature(s))).filter((s=>0===m||(!(!s[ps]&&!s[cs])||(m<=s.vendors_implementations||(a[s.id]?(i.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))),f=t(l,{env:n,ignoreUnknownVersions:!0}).filter((s=>Ns.includes(s.split(" ")[0])));return d.filter((s=>{const o=s.stage>=u,e=r||!is.includes(s.id),t=!1===a[s.id],p=a[s.id]?a[s.id]:o&&e;return t?i.log(` ${s.id} has been disabled by options`):o?e||i.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):p?i.log(` ${s.id} does not meet the required stage but has been enabled by options`):i.log(` ${s.id} with stage ${s.stage} has been disabled`),p})).map((t=>formatStagedFeature(s,f,a,t,e,o,i))).filter((s=>{if(s.id in a)return a[s.id];const o=t(s.browsers,{ignoreUnknownVersions:!0}),e=f.some((s=>o.some((o=>o===s))));return e||i.log(`${s.id} disabled due to browser support`),e}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var vs=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"@csstools/postcss-exponential-functions",id:"exponential-functions",importName:"postcssExponentialFunctions"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"@csstools/postcss-gamut-mapping",id:"gamut-mapping",importName:"postcssGamutMapping"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-gradients-interpolation-method",id:"gradients-interpolation-method",importName:"postcssGradientsInterpolationMethod"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"@csstools/postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/postcss-media-minmax",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",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return vs.forEach((o=>{s[o.packageName]=o.id})),s}function pluginIdHelp(s,o,e){const t=vs.map((s=>s.id)),i=vs.map((s=>s.packageName)),a=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const r=[...t.map((o=>[o,levenshteinDistance(s,o)])),...i.map((o=>[a[o],levenshteinDistance(s,o)]))].sort(((s,o)=>s[1]-o[1])).filter((s=>s[1]<10)),p=new Set;for(let s=0;s=3));s++);if(!p.size)return void o.warn(e,`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`);let c='"';c+=Array.from(p).join('", "'),c+='"',o.warn(e,`Unknown feature: "${s}", did you mean one of: ${c}`)}))}function levenshteinDistance(s,o){if(!s.length)return o.length;if(!o.length)return s.length;const e=[];for(let t=0;t<=o.length;t++){e[t]=[t];for(let i=1;i<=s.length;i++)e[t][i]=0===t?i:Math.min(e[t-1][i]+1,e[t][i-1]+1,e[t-1][i-1]+(s[i-1]===o[t-1]?0:1))}return e[o.length][s.length]}const creator=t=>{const i=new Logger,a=Object(t),r=Object.keys(Object(a.features)),p=a.browsers?void 0:a.env,c=a.browsers,n=initializeSharedOptions(a),l=listFeatures(o,a,n,i),m=l.map((s=>s.plugin));!1!==a.autoprefixer&&m.push(s(Object.assign({env:p,overrideBrowserslist:c},a.autoprefixer))),m.push(e()),logFeaturesList(l,a,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:o}){pluginIdHelp(r,s,o),a.debug&&i.dumpLogs(o),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...m,internalPlugin()]}};creator.postcss=!0;export{creator as default}; +import s from"autoprefixer";import o from"cssdb";import e from"browserslist";import t from"@csstools/postcss-initial";import i from"postcss-pseudo-class-any-link";import r from"css-blank-pseudo";import a from"postcss-page-break";import p from"@csstools/postcss-cascade-layers";import c from"postcss-attribute-case-insensitive";import n from"postcss-clamp";import l from"@csstools/postcss-color-function";import m from"postcss-color-functional-notation";import u from"@csstools/postcss-color-mix-function";import d from"postcss-custom-media";import f from"postcss-custom-properties";import g from"postcss-custom-selectors";import b from"postcss-dir-pseudo-class";import h from"@csstools/postcss-normalize-display-values";import N from"postcss-double-position-gradients";import v from"@csstools/postcss-exponential-functions";import y from"@csstools/postcss-logical-float-and-clear";import k from"postcss-focus-visible";import w from"postcss-focus-within";import x from"@csstools/postcss-font-format-keywords";import F from"postcss-font-variant";import $ from"@csstools/postcss-gamut-mapping";import O from"postcss-gap-properties";import S from"@csstools/postcss-gradients-interpolation-method";import P from"css-has-pseudo";import C from"postcss-color-hex-alpha";import I from"@csstools/postcss-hwb-function";import E from"@csstools/postcss-ic-unit";import L from"postcss-image-set-function";import U from"@csstools/postcss-is-pseudo-class";import A from"postcss-lab-function";import B from"postcss-logical";import _ from"@csstools/postcss-logical-resize";import j from"@csstools/postcss-logical-viewport-units";import q from"@csstools/postcss-media-queries-aspect-ratio-number-values";import M from"@csstools/postcss-media-minmax";import z from"@csstools/postcss-nested-calc";import D from"postcss-nesting";import R from"postcss-selector-not";import V from"@csstools/postcss-oklab-function";import T from"postcss-opacity-percentage";import H from"postcss-overflow-shorthand";import W from"postcss-replace-overflow-wrap";import G from"postcss-place";import K from"css-prefers-color-scheme";import Z from"@csstools/postcss-progressive-custom-properties";import Q from"postcss-color-rebeccapurple";import J from"@csstools/postcss-relative-color-syntax";import X from"@csstools/postcss-scope-pseudo-class";import Y from"@csstools/postcss-stepped-value-functions";import ss from"@csstools/postcss-text-decoration-shorthand";import os from"@csstools/postcss-trigonometric-functions";import es from"@csstools/postcss-unset-value";const ts={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},is=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,o,e){if(o.debug){e.log("Enabling the following feature(s):");const t=[],i=[];!1!==o.autoprefixer&&i.push(" autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(` ${s.id} (injected via options)`):i.push(` ${s.id}`),void 0!==ts[s.id]&&t.push(s.id)})),i.sort(((s,o)=>s.localeCompare(o))),t.sort(((s,o)=>s.localeCompare(o))),i.forEach((s=>e.log(s))),t.length&&(e.log("These feature(s) need a browser library to work:"),t.forEach((s=>e.log(` ${s}: ${ts[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const o={};return o.preserve=s.preserve,o}return!1}function clamp(s,o,e){return Math.max(s,Math.min(o,e))}const rs=2,as=5;function stageFromOptions(s,o){let e=rs;if(void 0===s.stage)return o.log(`Using features from Stage ${e} (default)`),e;if(!1===s.stage)e=as;else{let o=parseInt(s.stage,10);Number.isNaN(o)&&(o=0),e=clamp(0,o,as)}return e===as?o.log('Stage has been disabled, features will be handled via the "features" option.'):o.log(`Using features from Stage ${e}`),e}const ps=Symbol("insertBefore"),cs=Symbol("insertAfter"),ns=Symbol("insertOrder"),ls=Symbol("plugin");function getTransformedInsertions(s,o,e){if("insertBefore"!==e&&"insertAfter"!==e)return[];const t="insertBefore"===e?ps:cs,i=[];for(const e in o){if(!Object.hasOwnProperty.call(o,e))continue;if(!s.find((s=>s.id===e)))continue;let r=o[e];Array.isArray(r)||(r=[r]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,o)=>featureIsLess(s,o)))}const Ns=["and_chr","and_ff","android","chrome","edge","firefox","ie","ios_saf","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const o=[];return Ns.forEach((e=>{if("op_mini"===e&&void 0===s.browser_support[e])return void o.push("op_mini all");const t=s.browser_support[e];"string"==typeof t&&/^[0-9|.]+$/.test(t)?o.push(`${e} < ${s.browser_support[e]}`):o.push(`${e} >= 1`)})),o}function getOptionsForBrowsersByFeature(s,o,e,t,i){switch(o.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(e.find((s=>"is-pseudo-class"===s.id)),s))return i.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(s.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return i.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in t?t.logical:{};default:return{}}}function needsOptionFor(s,o){const t=getUnsupportedBrowsersByFeature(s),i=e(t,{ignoreUnknownVersions:!0});return!!o.some((s=>i.some((o=>o===s))))}function formatPolyfillableFeature(s){const o=getUnsupportedBrowsersByFeature(s);if(s[ps]||s[cs]){let e=s.id;return e=s.insertBefore?`before-${e}`:`after-${e}`,{browsers:o,vendors_implementations:s.vendors_implementations,plugin:s[ls],id:e,stage:as+1}}return{browsers:o,vendors_implementations:s.vendors_implementations,plugin:hs.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,o,e,t,i,r,a){let p,c;return p=getOptionsForBrowsersByFeature(o,t,s,r,a),!0===e[t.id]?i&&(p=Object.assign({},p,i)):p=i?Object.assign({},p,i,e[t.id]):Object.assign({},p,e[t.id]),"progressive-custom-properties"!==t.id&&(p.enableProgressiveCustomProperties=!1),"overflow-wrap-property"===t.id&&"preserve"in p&&(p.method=p.preserve?"copy":"replace"),c=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(p):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(p):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:c,pluginOptions:p,id:t.id}}function intOrZero(s){const o=parseInt(s,10);return Number.isNaN(o)?0:o}const vs=new Set(["progressive-custom-properties"]);function listFeatures(s,o,t,i){const r=Object(o.features),a="enableClientSidePolyfills"in o&&o.enableClientSidePolyfills,p=Object(o.insertBefore),c=Object(o.insertAfter),n=o.browsers?void 0:o.env,l=o.browsers,m=clamp(0,intOrZero(o.minimumVendorImplementations),3);m>0&&i.log(`Using features with ${m} or more vendor implementations`);const u=stageFromOptions(o,i),d=prepareFeaturesList([...s,{id:"progressive-custom-properties"}],p,c).map((s=>formatPolyfillableFeature(s))).filter((s=>!!vs.has(s.id)||(0===m||(!(!s[ps]&&!s[cs])||(m<=s.vendors_implementations||(r[s.id]?(i.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1))))))),f=e(l,{env:n,ignoreUnknownVersions:!0}).filter((s=>Ns.includes(s.split(" ")[0])));return d.filter((s=>{if(vs.has(s.id))return!0;const o=s.stage>=u,e=a||!is.includes(s.id),t=!1===r[s.id],p=r[s.id]?r[s.id]:o&&e;return t?i.log(` ${s.id} has been disabled by options`):o?e||i.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):p?i.log(` ${s.id} does not meet the required stage but has been enabled by options`):i.log(` ${s.id} with stage ${s.stage} has been disabled`),p})).map((e=>formatStagedFeature(s,f,r,e,t,o,i))).filter((s=>{if(vs.has(s.id))return!0;if(s.id in r)return r[s.id];const o=e(s.browsers,{ignoreUnknownVersions:!0}),t=f.some((s=>o.some((o=>o===s))));return t||i.log(`${s.id} disabled due to browser support`),t}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var ys=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"@csstools/postcss-exponential-functions",id:"exponential-functions",importName:"postcssExponentialFunctions"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"@csstools/postcss-gamut-mapping",id:"gamut-mapping",importName:"postcssGamutMapping"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-gradients-interpolation-method",id:"gradients-interpolation-method",importName:"postcssGradientsInterpolationMethod"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"@csstools/postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/postcss-media-minmax",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",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"},{packageName:"@csstools/postcss-progressive-custom-properties",id:"progressive-custom-properties",importName:"postcssProgressiveCustomProperties",omitTypedOptions:!0,omitDocs:!0}];function getPackageNamesToIds(){const s={};return ys.forEach((o=>{s[o.packageName]=o.id})),s}function pluginIdHelp(s,o,e){const t=ys.map((s=>s.id)),i=ys.map((s=>s.packageName)),r=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const a=[...t.map((o=>[o,levenshteinDistance(s,o)])),...i.map((o=>[r[o],levenshteinDistance(s,o)]))].sort(((s,o)=>s[1]-o[1])).filter((s=>s[1]<10)),p=new Set;for(let s=0;s=3));s++);if(!p.size)return void o.warn(e,`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`);let c='"';c+=Array.from(p).join('", "'),c+='"',o.warn(e,`Unknown feature: "${s}", did you mean one of: ${c}`)}))}function levenshteinDistance(s,o){if(!s.length)return o.length;if(!o.length)return s.length;const e=[];for(let t=0;t<=o.length;t++){e[t]=[t];for(let i=1;i<=s.length;i++)e[t][i]=0===t?i:Math.min(e[t-1][i]+1,e[t][i-1]+1,e[t-1][i-1]+(s[i-1]===o[t-1]?0:1))}return e[o.length][s.length]}const creator=e=>{const t=new Logger,i=Object(e),r=Object.keys(Object(i.features)),a=i.browsers?void 0:i.env,p=i.browsers,c=initializeSharedOptions(i),n=listFeatures(o,i,c,t),l=n.map((s=>s.plugin));!1!==i.autoprefixer&&l.push(s(Object.assign({env:a,overrideBrowserslist:p},i.autoprefixer))),logFeaturesList(n,i,t);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:o}){pluginIdHelp(r,s,o),i.debug&&t.dumpLogs(o),t.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0;export{creator as default}; diff --git a/plugin-packs/postcss-preset-env/docs/generate.mjs b/plugin-packs/postcss-preset-env/docs/generate.mjs index bcf2ab93f..1bb9a684c 100644 --- a/plugin-packs/postcss-preset-env/docs/generate.mjs +++ b/plugin-packs/postcss-preset-env/docs/generate.mjs @@ -1,17 +1,20 @@ -import { getFeaturesIds } from '../src/plugins/plugins-map.mjs'; import cssdb from 'cssdb'; -import { promises as fsp } from 'fs'; +import fs from 'fs/promises'; let featuresTable = ''; featuresTable = featuresTable + '| ID | Feature | example | docs |\n'; featuresTable = featuresTable + '|:--- |:--- |:--- |:--- |\n'; -const ids = getFeaturesIds(); -ids.sort(); +const pluginsData = await fs.readFile('./scripts/plugins-data.json', 'utf8').then(JSON.parse); +pluginsData.sort((a, b) => a.id.localeCompare(b.id)); -for (const id of ids) { - const cssdbFeature = cssdb.find(feature => feature.id === id); +for (const pluginData of pluginsData) { + if (pluginData.omitDocs) { + continue; + } + + const cssdbFeature = cssdb.find(feature => feature.id === pluginData.id); const polyfills = cssdbFeature?.polyfills || []; const cssdbPlugins = polyfills?.filter(polyfill => polyfill.type === 'PostCSS Plugin'); @@ -28,19 +31,19 @@ for (const id of ids) { }); if (cssdbFeature && cssdbPlugins.length > 0) { - featuresTable = featuresTable + `| \`${id}\` `; + featuresTable = featuresTable + `| \`${pluginData.id}\` `; featuresTable = featuresTable + `| ${cssdbFeature.title} `; - featuresTable = featuresTable + `| [example](https://preset-env.cssdb.org/features/#${id}) `; + featuresTable = featuresTable + `| [example](https://preset-env.cssdb.org/features/#${pluginData.id}) `; featuresTable = featuresTable + `| [docs](${cssdbPlugins[0].link}#readme) |\n`; } else { - featuresTable = featuresTable + `| \`${id}\` `; + featuresTable = featuresTable + `| \`${pluginData.id}\` `; featuresTable = featuresTable + '| '; featuresTable = featuresTable + '| '; featuresTable = featuresTable + '| |\n'; } } -let featuresDoc = (await fsp.readFile('./docs/FEATURES.md', 'utf8')).toString(); +let featuresDoc = (await fs.readFile('./docs/FEATURES.md', 'utf8')).toString(); featuresDoc = featuresDoc.replaceAll('', featuresTable); -fsp.writeFile('FEATURES.md', featuresDoc, 'utf8'); +fs.writeFile('FEATURES.md', featuresDoc, 'utf8'); 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 93ca7c215..9ffb2e3a2 100644 --- a/plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs +++ b/plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs @@ -1,8 +1,8 @@ -import { readFile, writeFile } from 'fs/promises'; +import fs from 'fs/promises'; import { existsSync } from 'fs'; import path from 'path'; -const pluginsData = await readFile('./scripts/plugins-data.json', 'utf8').then(JSON.parse); +const pluginsData = await fs.readFile('./scripts/plugins-data.json', 'utf8').then(JSON.parse); const esmPlugins = `export default ${JSON.stringify(pluginsData, null, 2)}\n`; @@ -31,7 +31,7 @@ export const pluginsById = new Map( } function generatePluginOptions(data) { - const plugins = data.slice(0).sort((a, b) => a.id.localeCompare(b.id)); + const plugins = data.slice().filter((x) => !x.omitTypedOptions).sort((a, b) => a.id.localeCompare(b.id)); let result = ''; for (let i = 0; i < plugins.length; i++) { @@ -58,7 +58,7 @@ function generatePluginOptions(data) { } 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)), + fs.writeFile('./src/plugins/plugins-data.mjs', esmPlugins), + fs.writeFile('./src/plugins/plugins-by-id.mjs', generatePluginsByID(pluginsData)), + fs.writeFile('./src/plugins/plugins-options.ts', generatePluginOptions(pluginsData)), ]); diff --git a/plugin-packs/postcss-preset-env/scripts/plugins-data.json b/plugin-packs/postcss-preset-env/scripts/plugins-data.json index 0853e6984..2af45e384 100644 --- a/plugin-packs/postcss-preset-env/scripts/plugins-data.json +++ b/plugin-packs/postcss-preset-env/scripts/plugins-data.json @@ -269,5 +269,12 @@ "packageName": "@csstools/postcss-text-decoration-shorthand", "id": "text-decoration-shorthand", "importName": "postcssTextDecorationShorthand" + }, + { + "packageName": "@csstools/postcss-progressive-custom-properties", + "id": "progressive-custom-properties", + "importName": "postcssProgressiveCustomProperties", + "omitTypedOptions": true, + "omitDocs": true } ] diff --git a/plugin-packs/postcss-preset-env/src/index.ts b/plugin-packs/postcss-preset-env/src/index.ts index 7b5f59f00..a23b65703 100644 --- a/plugin-packs/postcss-preset-env/src/index.ts +++ b/plugin-packs/postcss-preset-env/src/index.ts @@ -1,7 +1,6 @@ import autoprefixer from 'autoprefixer'; import cssdb from 'cssdb'; import logFeaturesList from './log/features-list.mjs'; -import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties'; import { initializeSharedOptions } from './lib/shared-options.mjs'; import { listFeatures } from './lib/list-features.mjs'; import { newLogger } from './log/helper.mjs'; @@ -29,10 +28,6 @@ const creator: PluginCreator = (opts?: pluginOptions) => { ); } - plugins.push( - postcssProgressiveCustomProperties(), - ); - logFeaturesList(features, options, logger); const internalPlugin = () => { 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 be89aa859..68e290813 100644 --- a/plugin-packs/postcss-preset-env/src/lib/format-feature.mjs +++ b/plugin-packs/postcss-preset-env/src/lib/format-feature.mjs @@ -52,7 +52,9 @@ export function formatStagedFeature(cssdbList, supportedBrowsers, features, feat } // postcss-preset-env : option overrides - pluginOption.enableProgressiveCustomProperties = false; + if (feature.id !== 'progressive-custom-properties') { + pluginOption.enableProgressiveCustomProperties = false; + } // https://github.com/MattDiMu/postcss-replace-overflow-wrap/blob/ec9914e0b9473a75a5d1fe32ea4311555eb81b71/index.js#L10 if (feature.id === 'overflow-wrap-property' && 'preserve' in pluginOption) { 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 257e28d17..41fdc39a3 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 @@ -61,5 +61,6 @@ export default [ 'cascade-layers', + 'progressive-custom-properties', 'gamut-mapping', ]; diff --git a/plugin-packs/postcss-preset-env/src/lib/list-features.mjs b/plugin-packs/postcss-preset-env/src/lib/list-features.mjs index 937a5754c..1097e543a 100644 --- a/plugin-packs/postcss-preset-env/src/lib/list-features.mjs +++ b/plugin-packs/postcss-preset-env/src/lib/list-features.mjs @@ -8,6 +8,10 @@ import { intOrZero } from '../util/int-or-zero.mjs'; import { insertAfterKey, insertBeforeKey } from '../own-keys/keys.mjs'; import { browsersWithSupportStats } from './browsers-with-supports-stats.mjs'; +const alwaysEnabled = new Set([ + 'progressive-custom-properties', +]); + export function listFeatures(cssdbList, options, sharedOptions, logger) { // initialize options const features = Object(options.features); @@ -31,12 +35,21 @@ export function listFeatures(cssdbList, options, sharedOptions, logger) { const stage = stageFromOptions(options, logger); // polyfillable features (those with an available postcss plugin) - const polyfillableFeatures = prepareFeaturesList(cssdbList, insertBefore, insertAfter).map((feature) => { + const polyfillableFeatures = prepareFeaturesList([ + ...cssdbList, + { + id: 'progressive-custom-properties', + }, + ], insertBefore, insertAfter).map((feature) => { return formatPolyfillableFeature(feature); }); // vendor implemented features (those implemented by at least N vendors) const vendorImplementedFeatures = polyfillableFeatures.filter((feature) => { + if (alwaysEnabled.has(feature.id)) { + return true; + } + if (minimumVendorImplementations === 0) { return true; } @@ -66,6 +79,10 @@ export function listFeatures(cssdbList, options, sharedOptions, logger) { // staged features (those at or above the selected stage) const stagedFeatures = vendorImplementedFeatures.filter((feature) => { + if (alwaysEnabled.has(feature.id)) { + return true; + } + // TODO : this filter needs to be split up. const isAllowedStage = feature.stage >= stage; const isAllowedByType = enableClientSidePolyfills || !featuresWithClientSide.includes(feature.id); @@ -93,6 +110,10 @@ export function listFeatures(cssdbList, options, sharedOptions, logger) { // - features with `true` or with options // - required for the browsers const supportedFeatures = stagedFeatures.filter((feature) => { + if (alwaysEnabled.has(feature.id)) { + return true; + } + if (feature.id in features) { return features[feature.id]; } 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 4d7a5155a..d820399a3 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 @@ -44,6 +44,7 @@ import postcssOverflowShorthand from 'postcss-overflow-shorthand'; import postcssReplaceOverflowWrap from 'postcss-replace-overflow-wrap'; import postcssPlace from 'postcss-place'; import postcssPrefersColorScheme from 'css-prefers-color-scheme'; +import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties'; import postcssColorRebeccapurple from 'postcss-color-rebeccapurple'; import postcssRelativeColorSyntax from '@csstools/postcss-relative-color-syntax'; import postcssScopePseudoClass from '@csstools/postcss-scope-pseudo-class'; @@ -102,6 +103,7 @@ export const pluginsById = new Map( ['overflow-wrap-property', postcssReplaceOverflowWrap], ['place-properties', postcssPlace], ['prefers-color-scheme-query', postcssPrefersColorScheme], + ['progressive-custom-properties', postcssProgressiveCustomProperties], ['rebeccapurple-color', postcssColorRebeccapurple], ['relative-color-syntax', postcssRelativeColorSyntax], ['scope-pseudo-class', postcssScopePseudoClass], 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 e64f3674f..dfd9e64e8 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs @@ -270,4 +270,11 @@ export default [ 'id': 'text-decoration-shorthand', 'importName': 'postcssTextDecorationShorthand', }, + { + 'packageName': '@csstools/postcss-progressive-custom-properties', + 'id': 'progressive-custom-properties', + 'importName': 'postcssProgressiveCustomProperties', + 'omitTypedOptions': true, + 'omitDocs': true, + }, ]; diff --git a/plugin-packs/postcss-preset-env/src/test/lib/list-features/client-side.mjs b/plugin-packs/postcss-preset-env/src/test/lib/list-features/client-side.mjs index b9c1c5b1e..721b9c473 100644 --- a/plugin-packs/postcss-preset-env/src/test/lib/list-features/client-side.mjs +++ b/plugin-packs/postcss-preset-env/src/test/lib/list-features/client-side.mjs @@ -28,6 +28,12 @@ assert.deepStrictEqual( vendors_implementations: 3, id: 'any-link-pseudo-class', }, + { + browsers: ['> 0%'], + vendors_implementations: undefined, + pluginOptions: {}, + id: 'progressive-custom-properties', + }, ], ); @@ -76,6 +82,12 @@ assert.deepStrictEqual( pluginOptions: { enableProgressiveCustomProperties: false }, id: 'blank-pseudo-class', }, + { + browsers: ['> 0%'], + vendors_implementations: undefined, + pluginOptions: {}, + id: 'progressive-custom-properties', + }, ], ); diff --git a/plugin-packs/postcss-preset-env/src/test/lib/list-features/no-options.mjs b/plugin-packs/postcss-preset-env/src/test/lib/list-features/no-options.mjs index 4d3d87a2a..fb68f8362 100644 --- a/plugin-packs/postcss-preset-env/src/test/lib/list-features/no-options.mjs +++ b/plugin-packs/postcss-preset-env/src/test/lib/list-features/no-options.mjs @@ -28,6 +28,12 @@ assert.deepStrictEqual( }, id: 'any-link-pseudo-class', }, + { + browsers: ['> 0%'], + vendors_implementations: undefined, + pluginOptions: {}, + id: 'progressive-custom-properties', + }, ], ); diff --git a/plugin-packs/postcss-preset-env/src/test/lib/list-features/preserve.mjs b/plugin-packs/postcss-preset-env/src/test/lib/list-features/preserve.mjs index a577c9ece..0304d71d2 100644 --- a/plugin-packs/postcss-preset-env/src/test/lib/list-features/preserve.mjs +++ b/plugin-packs/postcss-preset-env/src/test/lib/list-features/preserve.mjs @@ -27,6 +27,12 @@ assert.deepStrictEqual( }, id: 'any-link-pseudo-class', }, + { + browsers: ['> 0%'], + vendors_implementations: undefined, + pluginOptions: { preserve: true }, + id: 'progressive-custom-properties', + }, ], ); @@ -63,6 +69,12 @@ assert.deepStrictEqual( }, id: 'any-link-pseudo-class', }, + { + browsers: ['> 0%'], + vendors_implementations: undefined, + pluginOptions: { preserve: false }, + id: 'progressive-custom-properties', + }, ], ); diff --git a/plugin-packs/postcss-preset-env/src/test/lib/list-features/stage-0.mjs b/plugin-packs/postcss-preset-env/src/test/lib/list-features/stage-0.mjs index 82881f336..15dcd616f 100644 --- a/plugin-packs/postcss-preset-env/src/test/lib/list-features/stage-0.mjs +++ b/plugin-packs/postcss-preset-env/src/test/lib/list-features/stage-0.mjs @@ -26,6 +26,12 @@ assert.deepStrictEqual( }, id: 'any-link-pseudo-class', }, + { + browsers: ['> 0%'], + vendors_implementations: undefined, + pluginOptions: {}, + id: 'progressive-custom-properties', + }, ], ); diff --git a/plugin-packs/postcss-preset-env/src/test/lib/list-features/vendor-implementations.mjs b/plugin-packs/postcss-preset-env/src/test/lib/list-features/vendor-implementations.mjs index 2e00afd61..4bf628586 100644 --- a/plugin-packs/postcss-preset-env/src/test/lib/list-features/vendor-implementations.mjs +++ b/plugin-packs/postcss-preset-env/src/test/lib/list-features/vendor-implementations.mjs @@ -26,6 +26,12 @@ assert.deepStrictEqual( }, id: 'any-link-pseudo-class', }, + { + browsers: ['> 0%'], + vendors_implementations: undefined, + pluginOptions: {}, + id: 'progressive-custom-properties', + }, ], ); @@ -74,6 +80,12 @@ assert.deepStrictEqual( }, id: 'any-link-pseudo-class', }, + { + browsers: ['> 0%'], + vendors_implementations: undefined, + pluginOptions: {}, + id: 'progressive-custom-properties', + }, ], ); @@ -136,6 +148,12 @@ assert.deepStrictEqual( pluginOptions: { enableProgressiveCustomProperties: false }, id: 'blank-pseudo-class', }, + { + browsers: ['> 0%'], + vendors_implementations: undefined, + pluginOptions: {}, + id: 'progressive-custom-properties', + }, ], ); 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 3f4d1576d..d0eb34edd 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -591,22 +591,28 @@ background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -638,3 +644,7 @@ .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 3f4d1576d..d0eb34edd 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 @@ -591,22 +591,28 @@ background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -638,3 +644,7 @@ .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 770970d52..5e4faa42e 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -503,22 +503,28 @@ background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -550,3 +556,7 @@ .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 e63a6165d..3926597c6 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 @@ -501,22 +501,28 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -547,3 +553,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 9c26c7caf..f6969cbea 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 @@ -495,22 +495,28 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -541,3 +547,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 9c26c7caf..f6969cbea 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 @@ -495,22 +495,28 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -541,3 +547,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.css b/plugin-packs/postcss-preset-env/test/basic.css index 7bc2b4819..24e14033e 100644 --- a/plugin-packs/postcss-preset-env/test/basic.css +++ b/plugin-packs/postcss-preset-env/test/basic.css @@ -474,3 +474,7 @@ .exponential-functions { width: calc(1px * pow(2, 3)); } + +.out-of-gamut { + --color: color(display-p3 0 1 0); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index 12a5dca36..1e6188536 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -610,22 +610,28 @@ background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -657,3 +663,7 @@ .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 8f4f9630e..ee3767ee1 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -504,22 +504,28 @@ background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -550,3 +556,7 @@ .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 608a3f645..fb062a6f9 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -499,22 +499,28 @@ background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -545,3 +551,7 @@ .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css index 3cb2e63d6..bf9237a31 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css @@ -514,3 +514,13 @@ .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} + +@media (color-gamut: p3) { +.out-of-gamut { + --color: color(display-p3 0 1 0); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css index 23c172188..80af52127 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css @@ -606,22 +606,28 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -653,3 +659,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 488e01a9d..cf769d7e1 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -627,22 +627,28 @@ background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -674,3 +680,7 @@ .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 dad612169..6fdfec580 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 @@ -608,22 +608,28 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -655,3 +661,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.noIsPseudoSelector.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.noIsPseudoSelector.false.expect.css index ceebeb596..953b1df5d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.noIsPseudoSelector.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.noIsPseudoSelector.false.expect.css @@ -478,3 +478,7 @@ .exponential-functions { width: calc(1px * pow(2, 3)); } + +.out-of-gamut { + --color: color(display-p3 0 1 0); +} 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 6a7fd56d9..a459c47c9 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 @@ -478,3 +478,7 @@ .exponential-functions { width: calc(1px * pow(2, 3)); } + +.out-of-gamut { + --color: color(display-p3 0 1 0); +} 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 cf6145fe8..2863d45e5 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 @@ -588,22 +588,28 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -635,3 +641,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css index 86dce0d88..f0f16dd0b 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css @@ -725,7 +725,6 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe @media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); background-image: -webkit-radial-gradient(50% 115%, farthest-corner circle, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); @@ -735,6 +734,18 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@supports (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); +} + +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} + .test-css-color-5-interop { color-1: rgb(196, 129, 72); color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); @@ -762,3 +773,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 c3bdace7e..54818ee34 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 @@ -991,26 +991,32 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: -webkit-radial-gradient(50% 115% in oklch, farthest-corner circle, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); + + background-image: -moz-radial-gradient(50% 115% in oklch, farthest-corner circle, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: -webkit-radial-gradient(50% 115% in oklch, farthest-corner circle, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); - - background-image: -moz-radial-gradient(50% 115% in oklch, farthest-corner circle, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -1061,3 +1067,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe width: -moz-calc(1px * pow(2, 3)); width: calc(1px * pow(2, 3)); } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} + +@supports (color: color(display-p3 0 0 0)) { +.out-of-gamut { + --color: rgb(0, 249, 66); +} + +@media (color-gamut: p3) { +.out-of-gamut { + --color: color(display-p3 0 1 0); +} +} +} 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 c9e2614cf..d12bedebc 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -480,22 +480,28 @@ background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -526,3 +532,13 @@ .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} + +@media (color-gamut: p3) { +.out-of-gamut { + --color: color(display-p3 0 1 0); +} +} 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 92aa90758..80f4f7ba4 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 @@ -500,22 +500,28 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -546,3 +552,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 3326b5805..e6d16d772 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 @@ -495,22 +495,28 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -541,3 +547,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 d67ddf76e..00a1bca35 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -606,22 +606,28 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -653,3 +659,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css b/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css index de085d22e..e93cf86e0 100644 --- a/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css @@ -497,22 +497,28 @@ background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } @@ -543,3 +549,7 @@ .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 20104dea6..f4172f13a 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 @@ -641,3 +641,7 @@ .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 d25e476a5..773d5b40c 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 @@ -643,3 +643,7 @@ .exponential-functions { width: 8px; } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} 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 90e483132..157a5c060 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 @@ -623,3 +623,7 @@ .exponential-functions { width: calc(1px * pow(2, 3)); } + +.out-of-gamut { + --color: rgb(0, 249, 66); +} diff --git a/plugins/postcss-slow-plugins/test/basic.expect.css b/plugins/postcss-slow-plugins/test/basic.expect.css index 43366884c..6a5987af0 100644 --- a/plugins/postcss-slow-plugins/test/basic.expect.css +++ b/plugins/postcss-slow-plugins/test/basic.expect.css @@ -485,22 +485,28 @@ background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@media (color-gamut: rec2020) { .gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @media (color-gamut: rec2020) { .gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} +} - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } From 09cdaed41880b13dd3729c74c2b639ae8e8dd94b Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 8 Oct 2023 23:18:06 +0200 Subject: [PATCH 13/15] better example --- plugins/postcss-gamut-mapping/README.md | 8 ++++++++ plugins/postcss-gamut-mapping/test/examples/example.css | 1 + .../test/examples/example.expect.css | 7 +++++++ 3 files changed, 16 insertions(+) diff --git a/plugins/postcss-gamut-mapping/README.md b/plugins/postcss-gamut-mapping/README.md index 9b98466bf..6f04b5a83 100644 --- a/plugins/postcss-gamut-mapping/README.md +++ b/plugins/postcss-gamut-mapping/README.md @@ -12,6 +12,7 @@ npm install @csstools/postcss-gamut-mapping --save-dev p { background-color: oklch(80% 0.05 0.39 / 0.5); color: oklch(20% 0.234 0.39 / 0.5); + border-color: color(display-p3 0 1 0); } /* becomes */ @@ -19,6 +20,7 @@ p { p { background-color: oklch(80% 0.05 0.39 / 0.5); color: rgba(50, 0, 20, 0.5); + border-color: rgb(0, 249, 66); } @media (color-gamut: rec2020) { @@ -26,6 +28,12 @@ p { color: oklch(20% 0.234 0.39 / 0.5); } } + +@media (color-gamut: p3) { +p { + border-color: color(display-p3 0 1 0); +} +} ``` ## Usage diff --git a/plugins/postcss-gamut-mapping/test/examples/example.css b/plugins/postcss-gamut-mapping/test/examples/example.css index 322f3e5aa..050149e15 100644 --- a/plugins/postcss-gamut-mapping/test/examples/example.css +++ b/plugins/postcss-gamut-mapping/test/examples/example.css @@ -1,4 +1,5 @@ p { background-color: oklch(80% 0.05 0.39 / 0.5); color: oklch(20% 0.234 0.39 / 0.5); + border-color: color(display-p3 0 1 0); } diff --git a/plugins/postcss-gamut-mapping/test/examples/example.expect.css b/plugins/postcss-gamut-mapping/test/examples/example.expect.css index 256dc3fc1..49cd58612 100644 --- a/plugins/postcss-gamut-mapping/test/examples/example.expect.css +++ b/plugins/postcss-gamut-mapping/test/examples/example.expect.css @@ -1,6 +1,7 @@ p { background-color: oklch(80% 0.05 0.39 / 0.5); color: rgba(50, 0, 20, 0.5); + border-color: rgb(0, 249, 66); } @media (color-gamut: rec2020) { @@ -8,3 +9,9 @@ p { color: oklch(20% 0.234 0.39 / 0.5); } } + +@media (color-gamut: p3) { +p { + border-color: color(display-p3 0 1 0); +} +} From 1646931baba7f6121f0dd39b4df4bd5b9d378fdc Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Mon, 9 Oct 2023 18:33:25 +0200 Subject: [PATCH 14/15] remove useless condition --- .../test/basic.preserve.true.expect.css | 4 ++-- .../layers-basic.preserve.true.expect.css | 2 +- .../test/basic.preserve-true.expect.css | 4 ++-- .../test/basic.with-cloned-rules.expect.css | 4 ++-- .../test/variables.preserve-true.expect.css | 5 ----- .../test/basic.preserve-true.expect.css | 8 +++---- .../test/basic.with-cloned-rules.expect.css | 8 +++---- .../generated-value-cases.preserve.expect.css | 12 +++++----- .../test/variables.preserve-true.expect.css | 4 ++-- .../generated-value-cases.preserve.expect.css | 6 ++--- .../test/basic.expect.css | 2 +- .../test/basic.with-cloned-rules.expect.css | 2 +- .../test/basic.preserve-true.expect.css | 2 +- .../test/basic.with-cloned-rules.expect.css | 2 +- ....display-p3-false.preserve-true.expect.css | 4 ++-- .../test/basic.preserve-true.expect.css | 4 ++-- .../test/basic.with-cloned-rules.expect.css | 4 ++-- .../test/basic.expect.css | 4 ++-- ....preserve-true.display-p3-false.expect.css | 4 ++-- .../test/basic.preserve-true.expect.css | 8 +++---- .../test/variables.expect.css | 5 ----- ....preserve-true.display-p3-false.expect.css | 5 ----- .../test/variables.preserve-true.expect.css | 4 ++-- .../CHANGELOG.md | 1 + .../dist/index.cjs | 2 +- .../dist/index.mjs | 2 +- .../src/conditions-from-values.ts | 5 ----- .../test/basic.expect.css | 22 +++++-------------- 28 files changed, 55 insertions(+), 84 deletions(-) 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 54818ee34..c4f095a43 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 @@ -787,7 +787,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe padding: 2 ic; } -@supports (font-size: 1ic) and (top: var(--f)) { +@supports (font-size: 1ic) { .ic-unit { left: var(--non-existing, 2ic); } @@ -1055,7 +1055,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color: rgba(87 107 149 / 1); } -@supports (color: rgba(0 0 0 / 0)) and (top: var(--f)) { +@supports (color: rgba(0 0 0 / 0)) { .test-property-with-var { color: rgba(87 107 149 / var(--opacity)); } 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 4bdcae800..b1d342753 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 @@ -787,7 +787,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n padding: 2 ic; } -@supports (font-size: 1ic) and (top: var(--f)){ +@supports (font-size: 1ic){ .ic-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { left: var(--non-existing, 2ic); } diff --git a/plugins/postcss-color-function/test/basic.preserve-true.expect.css b/plugins/postcss-color-function/test/basic.preserve-true.expect.css index e114f7ccb..436f984d4 100644 --- a/plugins/postcss-color-function/test/basic.preserve-true.expect.css +++ b/plugins/postcss-color-function/test/basic.preserve-true.expect.css @@ -15,7 +15,7 @@ color-4: rgba(255, 255, 255, VAR(--ALPHA)); } -@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) { +@supports (color: color(display-p3 0 0 0)) { .test-case { color-4: color(Display-P3 1 1 1 / VAR(--ALPHA)); } @@ -135,7 +135,7 @@ color-5: color(display-p3 0.02472 0.01150 0.00574 /); } -@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) { +@supports (color: color(display-p3 0 0 0)) { .test-alpha { color-4: color(display-p3 0.02472 0.01150 0.00574 / var(--foo)); } diff --git a/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css b/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css index 28f5138c9..49042f670 100644 --- a/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css +++ b/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css @@ -15,7 +15,7 @@ color-4: rgba(255, 255, 255, VAR(--ALPHA)); } -@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) { +@supports (color: color(display-p3 0 0 0)) { .test-case { color-4: color(Display-P3 1 1 1 / VAR(--ALPHA)); } @@ -135,7 +135,7 @@ color-5: color(display-p3 0.02472 0.01150 0.00574 /); } -@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) { +@supports (color: color(display-p3 0 0 0)) { .test-alpha { color-4: color(display-p3 0.02472 0.01150 0.00574 / var(--foo)); } diff --git a/plugins/postcss-color-function/test/variables.preserve-true.expect.css b/plugins/postcss-color-function/test/variables.preserve-true.expect.css index bfd50c18a..9cfee1207 100644 --- a/plugins/postcss-color-function/test/variables.preserve-true.expect.css +++ b/plugins/postcss-color-function/test/variables.preserve-true.expect.css @@ -13,11 +13,6 @@ :root { --one: color(srgb 0.64331 0.19245 0.16771); --one-a50: color(srgb 0.64331 0.19245 0.16771 / 50); -} -} - -@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) { -:root { --one-a50-var: color(srgb 0.64331 0.19245 0.16771 / var(--opacity-50)); } } diff --git a/plugins/postcss-color-functional-notation/test/basic.preserve-true.expect.css b/plugins/postcss-color-functional-notation/test/basic.preserve-true.expect.css index 1443e7c4d..3d9675080 100644 --- a/plugins/postcss-color-functional-notation/test/basic.preserve-true.expect.css +++ b/plugins/postcss-color-functional-notation/test/basic.preserve-true.expect.css @@ -14,7 +14,7 @@ color-7: rgb(178 34 34 / calc(1 / 2)); } -@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { +@supports (color: rgb(0 0 0 / 0)) { .test-rgb { color-6: rgb(178 34 34 / var(--alpha-50)); } @@ -32,7 +32,7 @@ color-5: rgba(178 34 34 / CaLC(1 / 2)); } -@supports (color: rgba(0 0 0 / 0)) and (top: var(--f)) { +@supports (color: rgba(0 0 0 / 0)) { .test-rgba { color-4: rgba(178 34 34 / VaR(--alpha-50)); } @@ -77,7 +77,7 @@ color-13: hsl(3.14159rad 100% 50 / calc(1 / 2)); } -@supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) { +@supports (color: hsl(0 0% 0% / 0)) { .test-hsl { color-12: hsl(3.14159rad 100% 50 / var(--alpha-50)); } @@ -99,7 +99,7 @@ color-7: hsla(120 100% 50% / calc(1 / 2)); } -@supports (color: hsla(0 0% 0% / 0)) and (top: var(--f)) { +@supports (color: hsla(0 0% 0% / 0)) { .test-hsla { color-6: hsla(120 100% 50% / var(--alpha-50)); } diff --git a/plugins/postcss-color-functional-notation/test/basic.with-cloned-rules.expect.css b/plugins/postcss-color-functional-notation/test/basic.with-cloned-rules.expect.css index 272d92f88..f59fe006c 100644 --- a/plugins/postcss-color-functional-notation/test/basic.with-cloned-rules.expect.css +++ b/plugins/postcss-color-functional-notation/test/basic.with-cloned-rules.expect.css @@ -14,7 +14,7 @@ color-7: rgb(178 34 34 / calc(1 / 2)); } -@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { +@supports (color: rgb(0 0 0 / 0)) { .test-rgb { color-6: rgb(178 34 34 / var(--alpha-50)); } @@ -32,7 +32,7 @@ color-5: rgba(178 34 34 / CaLC(1 / 2)); } -@supports (color: rgba(0 0 0 / 0)) and (top: var(--f)) { +@supports (color: rgba(0 0 0 / 0)) { .test-rgba { color-4: rgba(178 34 34 / VaR(--alpha-50)); } @@ -77,7 +77,7 @@ color-13: hsl(3.14159rad 100% 50 / calc(1 / 2)); } -@supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) { +@supports (color: hsl(0 0% 0% / 0)) { .test-hsl { color-12: hsl(3.14159rad 100% 50 / var(--alpha-50)); } @@ -99,7 +99,7 @@ color-7: hsla(120 100% 50% / calc(1 / 2)); } -@supports (color: hsla(0 0% 0% / 0)) and (top: var(--f)) { +@supports (color: hsla(0 0% 0% / 0)) { .test-hsla { color-6: hsla(120 100% 50% / var(--alpha-50)); } diff --git a/plugins/postcss-color-functional-notation/test/generated-value-cases.preserve.expect.css b/plugins/postcss-color-functional-notation/test/generated-value-cases.preserve.expect.css index 81ff16b00..cfc0725bf 100644 --- a/plugins/postcss-color-functional-notation/test/generated-value-cases.preserve.expect.css +++ b/plugins/postcss-color-functional-notation/test/generated-value-cases.preserve.expect.css @@ -7,7 +7,7 @@ order: var(1, rgba(178, 34, 34, 1)); } -@supports (color: rgba(0 0 0 / 0)) and (top: var(--f)) { +@supports (color: rgba(0 0 0 / 0)) { .order-1 { order: var(1, rgba(178 34 34 / 1)); } @@ -17,7 +17,7 @@ order: var(rgba(178, 34, 34, 1), 1); } -@supports (color: rgba(0 0 0 / 0)) and (top: var(--f)) { +@supports (color: rgba(0 0 0 / 0)) { .order-2 { order: var(rgba(178 34 34 / 1), 1); } @@ -27,7 +27,7 @@ order: var(rgba(178, 34, 34, 1), rgba(178, 34, 34, 1)); } -@supports (color: rgba(0 0 0 / 0)) and (top: var(--f)) { +@supports (color: rgba(0 0 0 / 0)) { .order-3 { order: var(rgba(178 34 34 / 1), rgba(178 34 34 / 1)); } @@ -94,7 +94,7 @@ order: var(1, hsla(120, 100%, 50%, 1)); } -@supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) { +@supports (color: hsl(0 0% 0% / 0)) { .order-1 { order: var(1, hsl(120 100% 50% / 1)); } @@ -104,7 +104,7 @@ order: var(hsla(120, 100%, 50%, 1), 1); } -@supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) { +@supports (color: hsl(0 0% 0% / 0)) { .order-2 { order: var(hsl(120 100% 50% / 1), 1); } @@ -114,7 +114,7 @@ order: var(hsla(120, 100%, 50%, 1), hsla(120, 100%, 50%, 1)); } -@supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) { +@supports (color: hsl(0 0% 0% / 0)) { .order-3 { order: var(hsl(120 100% 50% / 1), hsl(120 100% 50% / 1)); } diff --git a/plugins/postcss-color-functional-notation/test/variables.preserve-true.expect.css b/plugins/postcss-color-functional-notation/test/variables.preserve-true.expect.css index d21465074..b10483ade 100644 --- a/plugins/postcss-color-functional-notation/test/variables.preserve-true.expect.css +++ b/plugins/postcss-color-functional-notation/test/variables.preserve-true.expect.css @@ -17,13 +17,13 @@ } } -@supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) { +@supports (color: hsl(0 0% 0% / 0)) { :root { --firebrick-a50-var: hsl(40 68.8% 34.5% / var(--opacity-50)); } } -@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { +@supports (color: rgb(0 0 0 / 0)) { :root { --firebrick-rgb-a50-var: rgb(40% 68.8 34.5 / var(--opacity-50)); } diff --git a/plugins/postcss-double-position-gradients/test/generated-value-cases.preserve.expect.css b/plugins/postcss-double-position-gradients/test/generated-value-cases.preserve.expect.css index 5edfd56ad..75b243de4 100644 --- a/plugins/postcss-double-position-gradients/test/generated-value-cases.preserve.expect.css +++ b/plugins/postcss-double-position-gradients/test/generated-value-cases.preserve.expect.css @@ -7,7 +7,7 @@ order: var(1, linear-gradient(90deg, black 25%,black 50%, blue 50%, blue 75%)); } -@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) and (top: var(--f)) { +@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) { .order-1 { order: var(1, linear-gradient(90deg, black 25% 50%, blue 50% 75%)); } @@ -17,7 +17,7 @@ order: var(linear-gradient(90deg, black 25%,black 50%, blue 50%, blue 75%), 1); } -@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) and (top: var(--f)) { +@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) { .order-2 { order: var(linear-gradient(90deg, black 25% 50%, blue 50% 75%), 1); } @@ -27,7 +27,7 @@ order: var(linear-gradient(90deg, black 25%,black 50%, blue 50%, blue 75%), linear-gradient(90deg, black 25%,black 50%, blue 50%, blue 75%)); } -@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) and (top: var(--f)) { +@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) { .order-3 { order: var(linear-gradient(90deg, black 25% 50%, blue 50% 75%), linear-gradient(90deg, black 25% 50%, blue 50% 75%)); } diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.expect.css index 3421568fb..aba2e3e94 100644 --- a/plugins/postcss-gradients-interpolation-method/test/basic.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/basic.expect.css @@ -3,7 +3,7 @@ background-image: linear-gradient(90deg, rgb(0, 0, 0) 20%, rgb(0, 0, 0) var(--perc-50), rgb(0, 0, 3), rgb(0, 0, 22), rgb(0, 0, 46), rgb(0, 0, 72), rgb(0, 0, 99), rgb(0, 0, 128), rgb(0, 0, 158), rgb(0, 0, 190), rgb(0, 0, 222), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (top: var(--f)) { +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { .test-1 { background-image: linear-gradient(in oklch 90deg, black 20% var(--perc-50),blue 70% 75%); } diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css index 56d8fef90..4c41fcf0f 100644 --- a/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css @@ -3,7 +3,7 @@ background-image: linear-gradient(90deg, rgb(0, 0, 0) 20%, rgb(0, 0, 0) var(--perc-50), rgb(0, 0, 3), rgb(0, 0, 22), rgb(0, 0, 46), rgb(0, 0, 72), rgb(0, 0, 99), rgb(0, 0, 128), rgb(0, 0, 158), rgb(0, 0, 190), rgb(0, 0, 222), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (top: var(--f)) { +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { .test-1 { background-image: linear-gradient(in oklch 90deg, black 20% var(--perc-50),blue 70% 75%); } diff --git a/plugins/postcss-ic-unit/test/basic.preserve-true.expect.css b/plugins/postcss-ic-unit/test/basic.preserve-true.expect.css index 4e453b47d..38befee2d 100644 --- a/plugins/postcss-ic-unit/test/basic.preserve-true.expect.css +++ b/plugins/postcss-ic-unit/test/basic.preserve-true.expect.css @@ -12,7 +12,7 @@ padding: 2 ic; } -@supports (font-size: 1ic) and (top: var(--f)) { +@supports (font-size: 1ic) { .ic-unit { left: var(--non-existing, 2ic); } diff --git a/plugins/postcss-ic-unit/test/basic.with-cloned-rules.expect.css b/plugins/postcss-ic-unit/test/basic.with-cloned-rules.expect.css index 1b9ef10db..79a43c425 100644 --- a/plugins/postcss-ic-unit/test/basic.with-cloned-rules.expect.css +++ b/plugins/postcss-ic-unit/test/basic.with-cloned-rules.expect.css @@ -12,7 +12,7 @@ padding: 2 ic; } -@supports (font-size: 1ic) and (top: var(--f)) { +@supports (font-size: 1ic) { .ic-unit { left: var(--non-existing, 2ic); } diff --git a/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css b/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css index fe81147fb..0f471631b 100644 --- a/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css +++ b/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css @@ -109,7 +109,7 @@ color-6: lab(1% 1 1 / calc(20% * 3)); } -@supports (color: lab(0% 0 0)) and (top: var(--f)) { +@supports (color: lab(0% 0 0)) { .test-alpha-lab { color-4: lab(1% 1 1 / var(--foo)); } @@ -128,7 +128,7 @@ color-6: lch(1% 1 1 / calc(20% * 3)); } -@supports (color: lab(0% 0 0)) and (top: var(--f)) { +@supports (color: lab(0% 0 0)) { .test-alpha-lch { color-4: lch(1% 1 1 / var(--foo)); } diff --git a/plugins/postcss-lab-function/test/basic.preserve-true.expect.css b/plugins/postcss-lab-function/test/basic.preserve-true.expect.css index 89d10f0c0..e9e96b665 100644 --- a/plugins/postcss-lab-function/test/basic.preserve-true.expect.css +++ b/plugins/postcss-lab-function/test/basic.preserve-true.expect.css @@ -120,7 +120,7 @@ color-6: lab(1% 1 1 / calc(20% * 3)); } -@supports (color: lab(0% 0 0)) and (top: var(--f)) { +@supports (color: lab(0% 0 0)) { .test-alpha-lab { color-4: lab(1% 1 1 / var(--foo)); } @@ -139,7 +139,7 @@ color-6: lch(1% 1 1 / calc(20% * 3)); } -@supports (color: lab(0% 0 0)) and (top: var(--f)) { +@supports (color: lab(0% 0 0)) { .test-alpha-lch { color-4: lch(1% 1 1 / var(--foo)); } diff --git a/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css b/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css index e09895c7a..0890e4c60 100644 --- a/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css +++ b/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css @@ -120,7 +120,7 @@ color-6: lab(1% 1 1 / calc(20% * 3)); } -@supports (color: lab(0% 0 0)) and (top: var(--f)) { +@supports (color: lab(0% 0 0)) { .test-alpha-lab { color-4: lab(1% 1 1 / var(--foo)); } @@ -139,7 +139,7 @@ color-6: lch(1% 1 1 / calc(20% * 3)); } -@supports (color: lab(0% 0 0)) and (top: var(--f)) { +@supports (color: lab(0% 0 0)) { .test-alpha-lch { color-4: lch(1% 1 1 / var(--foo)); } diff --git a/plugins/postcss-oklab-function/test/basic.expect.css b/plugins/postcss-oklab-function/test/basic.expect.css index 5401c9f95..f32f5f530 100644 --- a/plugins/postcss-oklab-function/test/basic.expect.css +++ b/plugins/postcss-oklab-function/test/basic.expect.css @@ -86,7 +86,7 @@ color-5: oklab(1% 0.01 0.01 /); } -@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) { +@supports (color: color(display-p3 0 0 0)) { .test-alpha-oklab { color-4: color(display-p3 0.00015 0 0 / var(--foo)); } @@ -103,7 +103,7 @@ color-5: oklch(1% 0.01 0.01 /); } -@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) { +@supports (color: color(display-p3 0 0 0)) { .test-alpha-oklch { color-4: color(display-p3 0.00009 0 0.00001 / var(--foo)); } diff --git a/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css b/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css index bcf29b29d..dd361745c 100644 --- a/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css +++ b/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css @@ -115,7 +115,7 @@ color-5: oklab(1% 0.01 0.01 /); } -@supports (color: oklab(0% 0 0)) and (top: var(--f)) { +@supports (color: oklab(0% 0 0)) { .test-alpha-oklab { color-4: oklab(1% 0.01 0.01 / var(--foo)); } @@ -132,7 +132,7 @@ color-5: oklch(1% 0.01 0.01 /); } -@supports (color: oklab(0% 0 0)) and (top: var(--f)) { +@supports (color: oklab(0% 0 0)) { .test-alpha-oklch { color-4: oklch(1% 0.01 0.01 / var(--foo)); } diff --git a/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css b/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css index 5d43373d0..e0d4a298f 100644 --- a/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css +++ b/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css @@ -130,13 +130,13 @@ color-5: oklab(1% 0.01 0.01 /); } -@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) { +@supports (color: color(display-p3 0 0 0)) { .test-alpha-oklab { color-4: color(display-p3 0.00015 0 0 / var(--foo)); } } -@supports (color: oklab(0% 0 0)) and (top: var(--f)) { +@supports (color: oklab(0% 0 0)) { .test-alpha-oklab { color-4: oklab(1% 0.01 0.01 / var(--foo)); } @@ -156,13 +156,13 @@ color-5: oklch(1% 0.01 0.01 /); } -@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) { +@supports (color: color(display-p3 0 0 0)) { .test-alpha-oklch { color-4: color(display-p3 0.00009 0 0.00001 / var(--foo)); } } -@supports (color: oklab(0% 0 0)) and (top: var(--f)) { +@supports (color: oklab(0% 0 0)) { .test-alpha-oklch { color-4: oklch(1% 0.01 0.01 / var(--foo)); } diff --git a/plugins/postcss-oklab-function/test/variables.expect.css b/plugins/postcss-oklab-function/test/variables.expect.css index ad42a61d5..f6cc70185 100644 --- a/plugins/postcss-oklab-function/test/variables.expect.css +++ b/plugins/postcss-oklab-function/test/variables.expect.css @@ -13,11 +13,6 @@ :root { --firebrick: color(display-p3 0.51193 0 0.22329); --firebrick-a50: color(display-p3 0.51567 0 0.25999 / 0.5); -} -} - -@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) { -:root { --firebrick-a50-var: color(display-p3 0.51567 0 0.25999 / var(--opacity-50)); } } diff --git a/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css b/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css index 568cdf98a..fb7643558 100644 --- a/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css +++ b/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css @@ -13,11 +13,6 @@ :root { --firebrick: oklab(40% 0.4 0.039); --firebrick-a50: oklch(40% 0.4 0.039 / 50%); -} -} - -@supports (color: oklab(0% 0 0)) and (top: var(--f)) { -:root { --firebrick-a50-var: oklch(40% 0.4 0.039 / var(--opacity-50)); } } diff --git a/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css b/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css index e2b0751dc..a52ecb38e 100644 --- a/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css +++ b/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css @@ -33,13 +33,13 @@ } } -@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) { +@supports (color: color(display-p3 0 0 0)) { :root { --firebrick-a50-var: color(display-p3 0.51567 0 0.25999 / var(--opacity-50)); } } -@supports (color: oklab(0% 0 0)) and (top: var(--f)) { +@supports (color: oklab(0% 0 0)) { :root { --firebrick-a50-var: oklch(40% 0.4 0.039 / var(--opacity-50)); } diff --git a/plugins/postcss-progressive-custom-properties/CHANGELOG.md b/plugins/postcss-progressive-custom-properties/CHANGELOG.md index b1c69d1b5..05d354f1e 100644 --- a/plugins/postcss-progressive-custom-properties/CHANGELOG.md +++ b/plugins/postcss-progressive-custom-properties/CHANGELOG.md @@ -4,6 +4,7 @@ - Add support for css nesting - Improve grouping of `@supports` rules +- Reduce the size of the generated `@supports` rules for values that contain `var()` ### 3.0.1 diff --git a/plugins/postcss-progressive-custom-properties/dist/index.cjs b/plugins/postcss-progressive-custom-properties/dist/index.cjs index fc1d26cb2..35a105198 100644 --- a/plugins/postcss-progressive-custom-properties/dist/index.cjs +++ b/plugins/postcss-progressive-custom-properties/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("postcss-value-parser");const a=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const r=[],p=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===p||"linear-gradient"===p||"radial-gradient"===p||"repeating-conic-gradient"===p||"repeating-linear-gradient"===p||"repeating-radial-gradient"===p)){let p=0,t=!1,i=!1;e:for(let o=0;oa.includes(e.sniff)));let s=!1;try{e(a).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{const r=e.unit(a.value);!1!==r&&(a.dimension=r)}catch{}for(let e=0;e0&&i.push("(top: var(--f))"),{support:Array.from(new Set(i)).sort()})}const t=/var\(/i,i=/^initial$/i,o=/^\s*$/,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",prepare(){const e=new WeakMap;return{OnceExit:(a,{postcss:r})=>{a.walkDecls((a=>{if(!a.parent)return;const p=e.get(a.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{support:void 0},lastConditionalRule:void 0};if(e.set(a.parent,p),a.variable){if(!p.propNames.has(a.prop))return void p.propNames.add(a.prop)}else{const e=a.prop.toLowerCase();if(!p.propNames.has(e))return void p.propNames.add(e)}if(!a.variable&&!t.test(a.value))return;if(i.test(a.value))return;if(o.test(a.value))return;const s=!a.variable,l=conditionsFromValue(a.value,s).support.join(" and ");if(!l)return;if(p.lastConditionParams.support!==l&&(p.lastConditionalRule=void 0),p.lastConditionalRule)return p.lastConditionalRule.append(a.clone()),void a.remove();const y=[];if(l&&y.push(r.atRule({name:"supports",params:l,source:a.parent.source,raws:{before:"\n\n",after:"\n"}})),!y.length)return;for(let e=0;e{const r=e.get(a);r&&0!==r.conditionalRules.length&&r.conditionalRules.reverse().forEach((e=>{a.after(e)}))}))}}}});creator.postcss=!0,module.exports=creator; +"use strict";var e=require("postcss-value-parser");const a=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const r=[],p=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===p||"linear-gradient"===p||"radial-gradient"===p||"repeating-conic-gradient"===p||"repeating-linear-gradient"===p||"repeating-radial-gradient"===p)){let p=0,t=!1,i=!1;e:for(let o=0;oa.includes(e.sniff)));let s=!1;try{e(a).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{const r=e.unit(a.value);!1!==r&&(a.dimension=r)}catch{}for(let e=0;e({postcssPlugin:"postcss-progressive-custom-properties",prepare(){const e=new WeakMap;return{OnceExit:(a,{postcss:r})=>{a.walkDecls((a=>{if(!a.parent)return;const p=e.get(a.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{support:void 0},lastConditionalRule:void 0};if(e.set(a.parent,p),a.variable){if(!p.propNames.has(a.prop))return void p.propNames.add(a.prop)}else{const e=a.prop.toLowerCase();if(!p.propNames.has(e))return void p.propNames.add(e)}if(!a.variable&&!t.test(a.value))return;if(i.test(a.value))return;if(o.test(a.value))return;const s=!a.variable,l=conditionsFromValue(a.value,s).support.join(" and ");if(!l)return;if(p.lastConditionParams.support!==l&&(p.lastConditionalRule=void 0),p.lastConditionalRule)return p.lastConditionalRule.append(a.clone()),void a.remove();const y=[];if(l&&y.push(r.atRule({name:"supports",params:l,source:a.parent.source,raws:{before:"\n\n",after:"\n"}})),!y.length)return;for(let e=0;e{const r=e.get(a);r&&0!==r.conditionalRules.length&&r.conditionalRules.reverse().forEach((e=>{a.after(e)}))}))}}}});creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-progressive-custom-properties/dist/index.mjs b/plugins/postcss-progressive-custom-properties/dist/index.mjs index 21d6fe9ba..19ceb72e1 100644 --- a/plugins/postcss-progressive-custom-properties/dist/index.mjs +++ b/plugins/postcss-progressive-custom-properties/dist/index.mjs @@ -1 +1 @@ -import e from"postcss-value-parser";const a=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const r=[],p=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===p||"linear-gradient"===p||"radial-gradient"===p||"repeating-conic-gradient"===p||"repeating-linear-gradient"===p||"repeating-radial-gradient"===p)){let p=0,t=!1,i=!1;e:for(let o=0;oa.includes(e.sniff)));let s=!1;try{e(a).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{const r=e.unit(a.value);!1!==r&&(a.dimension=r)}catch{}for(let e=0;e0&&i.push("(top: var(--f))"),{support:Array.from(new Set(i)).sort()})}const t=/var\(/i,i=/^initial$/i,o=/^\s*$/,creator=()=>({postcssPlugin:"postcss-progressive-custom-properties",prepare(){const e=new WeakMap;return{OnceExit:(a,{postcss:r})=>{a.walkDecls((a=>{if(!a.parent)return;const p=e.get(a.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{support:void 0},lastConditionalRule:void 0};if(e.set(a.parent,p),a.variable){if(!p.propNames.has(a.prop))return void p.propNames.add(a.prop)}else{const e=a.prop.toLowerCase();if(!p.propNames.has(e))return void p.propNames.add(e)}if(!a.variable&&!t.test(a.value))return;if(i.test(a.value))return;if(o.test(a.value))return;const s=!a.variable,l=conditionsFromValue(a.value,s).support.join(" and ");if(!l)return;if(p.lastConditionParams.support!==l&&(p.lastConditionalRule=void 0),p.lastConditionalRule)return p.lastConditionalRule.append(a.clone()),void a.remove();const y=[];if(l&&y.push(r.atRule({name:"supports",params:l,source:a.parent.source,raws:{before:"\n\n",after:"\n"}})),!y.length)return;for(let e=0;e{const r=e.get(a);r&&0!==r.conditionalRules.length&&r.conditionalRules.reverse().forEach((e=>{a.after(e)}))}))}}}});creator.postcss=!0;export{creator as default}; +import e from"postcss-value-parser";const a=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const r=[],p=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===p||"linear-gradient"===p||"radial-gradient"===p||"repeating-conic-gradient"===p||"repeating-linear-gradient"===p||"repeating-radial-gradient"===p)){let p=0,t=!1,i=!1;e:for(let o=0;oa.includes(e.sniff)));let s=!1;try{e(a).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{const r=e.unit(a.value);!1!==r&&(a.dimension=r)}catch{}for(let e=0;e({postcssPlugin:"postcss-progressive-custom-properties",prepare(){const e=new WeakMap;return{OnceExit:(a,{postcss:r})=>{a.walkDecls((a=>{if(!a.parent)return;const p=e.get(a.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{support:void 0},lastConditionalRule:void 0};if(e.set(a.parent,p),a.variable){if(!p.propNames.has(a.prop))return void p.propNames.add(a.prop)}else{const e=a.prop.toLowerCase();if(!p.propNames.has(e))return void p.propNames.add(e)}if(!a.variable&&!t.test(a.value))return;if(i.test(a.value))return;if(o.test(a.value))return;const s=!a.variable,l=conditionsFromValue(a.value,s).support.join(" and ");if(!l)return;if(p.lastConditionParams.support!==l&&(p.lastConditionalRule=void 0),p.lastConditionalRule)return p.lastConditionalRule.append(a.clone()),void a.remove();const y=[];if(l&&y.push(r.atRule({name:"supports",params:l,source:a.parent.source,raws:{before:"\n\n",after:"\n"}})),!y.length)return;for(let e=0;e{const r=e.get(a);r&&0!==r.conditionalRules.length&&r.conditionalRules.reverse().forEach((e=>{a.after(e)}))}))}}}});creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-progressive-custom-properties/src/conditions-from-values.ts b/plugins/postcss-progressive-custom-properties/src/conditions-from-values.ts index 27c7b1a66..301cf934d 100644 --- a/plugins/postcss-progressive-custom-properties/src/conditions-from-values.ts +++ b/plugins/postcss-progressive-custom-properties/src/conditions-from-values.ts @@ -56,11 +56,6 @@ export function conditionsFromValue(value: string, mustContainVar = false): { su }; } - if (hasVar && supportConditions.length > 0) { - // Only where there are other conditions and a `var()` is present. - supportConditions.push('(top: var(--f))'); - } - return { support: Array.from(new Set(supportConditions)).sort(), }; diff --git a/plugins/postcss-progressive-custom-properties/test/basic.expect.css b/plugins/postcss-progressive-custom-properties/test/basic.expect.css index fbd00baaf..6f5a8e4bc 100644 --- a/plugins/postcss-progressive-custom-properties/test/basic.expect.css +++ b/plugins/postcss-progressive-custom-properties/test/basic.expect.css @@ -24,7 +24,7 @@ --prop-9: red; } -@supports (color: oklab(0% 0 0)) and (top: var(--f)) { +@supports (color: oklab(0% 0 0)) { :root { --prop-1: oklch(40% 0.234 0.39 / var(--opacity-50)); } @@ -81,7 +81,7 @@ } } -@supports (color: oklab(0% 0 0)) and (top: var(--f)) { +@supports (color: oklab(0% 0 0)) { :root { --prop-8: 1px solid oklch(40% 0.234 0.39 / var(--opacity-50)); } @@ -145,18 +145,8 @@ :root { --color-1: color(srgb 0.64331 0.19245 0.16771); --color-2: color(srgb 0.64331 0.19245 0.16771 / 50); -} -} - -@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) { -:root { --color-3: color(srgb 0.64331 0.19245 0.16771 / var(--opacity-50)); --color-4: color(srgb 0.64331 var(--point-5) 0.16771 / var(--opacity-50)); -} -} - -@supports (color: color(display-p3 0 0 0)) { -:root { --color-5: color(srgb 0.64331 0.19245 0.16771 / calc(1 / 2)); } } @@ -356,7 +346,7 @@ color: rgba(87, 107, 149, 1); } -@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { +@supports (color: rgb(0 0 0 / 0)) { .property-with-var--1 { color: rgb(87 107 149 / var(--opacity)); } @@ -367,7 +357,7 @@ color: rgba(87, 107, 149, var(--opacity)); } -@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { +@supports (color: rgb(0 0 0 / 0)) { .property-with-var--1-1 { color: rgb(87 107 149 / var(--opacity)); } @@ -378,7 +368,7 @@ color: rgba(87, 107, 149, 1); } -@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { +@supports (color: rgb(0 0 0 / 0)) { .property-with-var--2 { color: rgb(87 107 149 / calc(var(--opacity) / 2)); } @@ -402,7 +392,7 @@ --prop-8: 1px solid red; } -@supports (color: oklab(0% 0 0)) and (top: var(--f)) { +@supports (color: oklab(0% 0 0)) { @media screen { --prop-8: 1px solid oklch(40% 0.234 0.39 / var(--opacity-50)); } From 1e3febcf007058aaba75d77987a62792f34f1cfd Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Mon, 9 Oct 2023 18:51:23 +0200 Subject: [PATCH 15/15] add more explainer --- plugins/postcss-gamut-mapping/README.md | 8 ++++++++ plugins/postcss-gamut-mapping/docs/README.md | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/plugins/postcss-gamut-mapping/README.md b/plugins/postcss-gamut-mapping/README.md index 6f04b5a83..a5edb31cc 100644 --- a/plugins/postcss-gamut-mapping/README.md +++ b/plugins/postcss-gamut-mapping/README.md @@ -8,6 +8,14 @@ npm install @csstools/postcss-gamut-mapping --save-dev [PostCSS Gamut Mapping] lets you use wide gamut colors with gamut mapping for specific displays following the [CSS Color 4 Specification]. +When out of gamut colors are naively clipped the result can be radically different. +A saturated and bright color will be much darker after clipping. + +To correctly adjust colors for a narrow gamut display, the colors must be mapped. +This is done by lowering the `chroma` in `oklch` until the color is in gamut. + +Using the `@media (color-gamut)` media feature makes it possible to only use the wide gamut colors on displays that support them. + ```pcss p { background-color: oklch(80% 0.05 0.39 / 0.5); diff --git a/plugins/postcss-gamut-mapping/docs/README.md b/plugins/postcss-gamut-mapping/docs/README.md index f7f2dec54..7bffd4cc7 100644 --- a/plugins/postcss-gamut-mapping/docs/README.md +++ b/plugins/postcss-gamut-mapping/docs/README.md @@ -18,6 +18,14 @@ [] lets you use wide gamut colors with gamut mapping for specific displays following the [CSS Color 4 Specification]. +When out of gamut colors are naively clipped the result can be radically different. +A saturated and bright color will be much darker after clipping. + +To correctly adjust colors for a narrow gamut display, the colors must be mapped. +This is done by lowering the `chroma` in `oklch` until the color is in gamut. + +Using the `@media (color-gamut)` media feature makes it possible to only use the wide gamut colors on displays that support them. + ```pcss