diff options
Diffstat (limited to 'node_modules/@csstools/postcss-gamut-mapping')
9 files changed, 218 insertions, 0 deletions
diff --git a/node_modules/@csstools/postcss-gamut-mapping/CHANGELOG.md b/node_modules/@csstools/postcss-gamut-mapping/CHANGELOG.md new file mode 100644 index 00000000..646591c8 --- /dev/null +++ b/node_modules/@csstools/postcss-gamut-mapping/CHANGELOG.md @@ -0,0 +1,8 @@ +# Changes to PostCSS gamut-mapping + +### 1.0.0 + +_October 9, 2023_ + +- Initial version +- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.4.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#140) (minor) diff --git a/node_modules/@csstools/postcss-gamut-mapping/LICENSE.md b/node_modules/@csstools/postcss-gamut-mapping/LICENSE.md new file mode 100644 index 00000000..e8ae93b9 --- /dev/null +++ b/node_modules/@csstools/postcss-gamut-mapping/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/node_modules/@csstools/postcss-gamut-mapping/README.md b/node_modules/@csstools/postcss-gamut-mapping/README.md new file mode 100644 index 00000000..a5edb31c --- /dev/null +++ b/node_modules/@csstools/postcss-gamut-mapping/README.md @@ -0,0 +1,84 @@ +# PostCSS Gamut Mapping [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS] + +[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-gamut-mapping.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/gamut-mapping.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][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]. + +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); + color: oklch(20% 0.234 0.39 / 0.5); + border-color: color(display-p3 0 1 0); +} + +/* becomes */ + +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) { +p { + color: oklch(20% 0.234 0.39 / 0.5); +} +} + +@media (color-gamut: p3) { +p { + border-color: color(display-p3 0 1 0); +} +} +``` + +## 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/node_modules/@csstools/postcss-gamut-mapping/dist/has-conditional-ancestor.d.ts b/node_modules/@csstools/postcss-gamut-mapping/dist/has-conditional-ancestor.d.ts new file mode 100644 index 00000000..7c086270 --- /dev/null +++ b/node_modules/@csstools/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/node_modules/@csstools/postcss-gamut-mapping/dist/has-override-decl.d.ts b/node_modules/@csstools/postcss-gamut-mapping/dist/has-override-decl.d.ts new file mode 100644 index 00000000..e98c4f8a --- /dev/null +++ b/node_modules/@csstools/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/node_modules/@csstools/postcss-gamut-mapping/dist/index.cjs b/node_modules/@csstools/postcss-gamut-mapping/dist/index.cjs new file mode 100644 index 00000000..77030d6a --- /dev/null +++ b/node_modules/@csstools/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,s=!1;const r=(null==(o=e.parent)?void 0:o.nodes)??[],n=r.indexOf(e);for(let e=0;e<r.length;e++){if(e===n)continue;const o=r[e];if("decl"===o.type&&o.prop.toLowerCase()===a){if(!(e<n)){t=!0;break}s=!0,e=n}}return{hasOverride:t,hasFallback:s}}const s=/\b(?:color|lab|lch|oklab|oklch)\(/i,r=/^(?:color|lab|lch|oklab|oklch)$/i,creator=()=>({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/node_modules/@csstools/postcss-gamut-mapping/dist/index.d.ts b/node_modules/@csstools/postcss-gamut-mapping/dist/index.d.ts new file mode 100644 index 00000000..cf42343c --- /dev/null +++ b/node_modules/@csstools/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<pluginOptions>; +export default creator; diff --git a/node_modules/@csstools/postcss-gamut-mapping/dist/index.mjs b/node_modules/@csstools/postcss-gamut-mapping/dist/index.mjs new file mode 100644 index 00000000..1899c2c4 --- /dev/null +++ b/node_modules/@csstools/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<n.length;e++){if(e===s)continue;const o=n[e];if("decl"===o.type&&o.prop.toLowerCase()===t){if(!(e<s)){a=!0;break}r=!0,e=s}}return{hasOverride:a,hasFallback:r}}const d=/\b(?:color|lab|lch|oklab|oklch)\(/i,u=/^(?:color|lab|lch|oklab|oklch)$/i,creator=()=>({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/node_modules/@csstools/postcss-gamut-mapping/package.json b/node_modules/@csstools/postcss-gamut-mapping/package.json new file mode 100644 index 00000000..45255518 --- /dev/null +++ b/node_modules/@csstools/postcss-gamut-mapping/package.json @@ -0,0 +1,94 @@ +{ + "name": "@csstools/postcss-gamut-mapping", + "description": "Gamut map css colors to fit display specific gamuts", + "version": "1.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" + ], + "dependencies": { + "@csstools/css-color-parser": "^1.4.0", + "@csstools/css-parser-algorithms": "2.3.2", + "@csstools/css-tokenizer": "^2.2.1" + }, + "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" + }, + "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-gamut-mapping" + }, + "bugs": "https://github.com/csstools/postcss-plugins/issues", + "keywords": [ + "color", + "css", + "display-p3", + "gamut mapping", + "p3", + "postcss", + "postcss-plugin", + "rec2020", + "srgb", + "wide gamut" + ], + "csstools": { + "cssdbId": "gamut-mapping", + "exportName": "postcssGamutMapping", + "humanReadableName": "PostCSS Gamut Mapping", + "specUrl": "https://www.w3.org/TR/css-color-4/#gamut-mapping" + }, + "volta": { + "extends": "../../package.json" + } +} |