diff options
Diffstat (limited to 'node_modules/postcss-color-functional-notation')
5 files changed, 90 insertions, 50 deletions
diff --git a/node_modules/postcss-color-functional-notation/CHANGELOG.md b/node_modules/postcss-color-functional-notation/CHANGELOG.md index ec0f6f17..dd1eee69 100644 --- a/node_modules/postcss-color-functional-notation/CHANGELOG.md +++ b/node_modules/postcss-color-functional-notation/CHANGELOG.md @@ -1,5 +1,13 @@ # Changes to PostCSS Color Functional Notation +### 6.0.4 + +_December 31, 2023_ + +- Updated [`@csstools/css-tokenizer`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer) to [`2.2.3`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer/CHANGELOG.md#223) (patch) +- Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.5.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#250) (minor) +- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.5.1`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#151) (patch) + ### 6.0.3 _December 15, 2023_ @@ -16,11 +24,4 @@ _October 9, 2023_ - Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.0.2`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#302) (patch) -### 6.0.1 - -_September 18, 2023_ - -- Improve performance -- Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.0.1`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#301) (patch) - [Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation/CHANGELOG.md) diff --git a/node_modules/postcss-color-functional-notation/README.md b/node_modules/postcss-color-functional-notation/README.md index 7091fb20..6acc35c3 100644 --- a/node_modules/postcss-color-functional-notation/README.md +++ b/node_modules/postcss-color-functional-notation/README.md @@ -1,28 +1,29 @@ -# PostCSS Color Functional Notation [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss] +# PostCSS Color Functional Notation [<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/postcss-color-functional-notation.svg" height="20">][npm-url] -[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/lab-function.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] +[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-color-functional-notation.svg" height="20">][npm-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]<br><br>[<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/color-functional-notation.svg" height="20">][css-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/color-functional-notation.svg" height="20">][css-url] + +```bash +npm install postcss-color-functional-notation --save-dev +``` [PostCSS Color Functional Notation] lets you use space and slash separated color notation in CSS, following the [CSS Color] specification. ```pcss :root { - --firebrick: rgb(178 34 34); - --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); - --firebrick-hsl: hsla(0 68% 42%); - --firebrick-hsl-a50: hsl(0 68% 42% / 50%); + --firebrick: rgb(178 34 34); + --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); + --firebrick-hsl: hsla(0 68% 42%); + --firebrick-hsl-a50: hsl(0 68% 42% / 50%); } /* becomes */ :root { - --firebrick: rgb(178, 34, 34); - --firebrick-a50: rgba(178, 34, 34, .5); - --firebrick-hsl: hsl(0, 68%, 42%); - --firebrick-hsl-a50: hsla(0, 68%, 42%, .5); + --firebrick: rgb(178, 34, 34); + --firebrick-a50: rgba(179, 34, 34, 0.5); + --firebrick-hsl: hsl(0, 68%, 42%); + --firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5); } ``` @@ -31,30 +32,36 @@ color notation in CSS, following the [CSS Color] specification. Add [PostCSS Color Functional Notation] to your project: ```bash -npm install postcss-color-functional-notation --save-dev +npm install postcss postcss-color-functional-notation --save-dev ``` -Use [PostCSS Color Functional Notation] to process your CSS: +Use it as a [PostCSS] plugin: ```js const postcss = require('postcss'); const postcssColorFunctionalNotation = require('postcss-color-functional-notation'); postcss([ - postcssColorFunctionalNotation(/* pluginOptions */) + postcssColorFunctionalNotation(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` -[PostCSS Color Functional Notation] runs in all Node environments, with special instructions for: +[PostCSS Color Functional Notation] runs in all Node environments, with special +instructions for: -| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | -| --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) +- [Webpack](INSTALL.md#webpack) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options ### preserve -The `preserve` option determines whether the original functional color notation +The `preserve` option determines whether the original notation is preserved. By default, it is not preserved. ```js @@ -63,23 +70,33 @@ postcssColorFunctionalNotation({ preserve: true }) ```pcss :root { - --firebrick: rgb(178 34 34); - --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); - --firebrick-hsl: hsla(0 68% 42%); - --firebrick-hsl-a50: hsl(0 68% 42% / 50%); + --firebrick: rgb(178 34 34); + --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); + --firebrick-hsl: hsla(0 68% 42%); + --firebrick-hsl-a50: hsl(0 68% 42% / 50%); } /* becomes */ :root { - --firebrick: rgb(178, 34, 34); - --firebrick: rgb(178 34 34); - --firebrick-a50: rgba(178, 34, 34, .5); - --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); - --firebrick-hsl: hsl(0, 68%, 42%); - --firebrick-hsl: hsla(0 68% 42%); - --firebrick-hsl-a50: hsla(0, 68%, 42%, .5); - --firebrick-hsl-a50: hsl(0 68% 42% / 50%); + --firebrick: rgb(178, 34, 34); + --firebrick-a50: rgba(179, 34, 34, 0.5); + --firebrick-hsl: hsl(0, 68%, 42%); + --firebrick-hsl: hsla(0 68% 42%); + --firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5); +} + +@supports (color: rgb(0 0 0 / 0)) { +:root { + --firebrick: rgb(178 34 34); + --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); +} +} + +@supports (color: hsl(0 0% 0% / 0)) { +:root { + --firebrick-hsl-a50: hsl(0 68% 42% / 50%); +} } ``` @@ -89,20 +106,42 @@ The `enableProgressiveCustomProperties` option determines whether the original n is wrapped with `@supports` when used in Custom Properties. By default, it is enabled. > [!NOTE] -> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme). +> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. +> See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme). ```js postcssColorFunctionalNotation({ enableProgressiveCustomProperties: false }) ``` +```pcss +:root { + --firebrick: rgb(178 34 34); + --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); + --firebrick-hsl: hsla(0 68% 42%); + --firebrick-hsl-a50: hsl(0 68% 42% / 50%); +} + +/* becomes */ + +:root { + --firebrick: rgb(178, 34, 34); + --firebrick: rgb(178 34 34); + --firebrick-a50: rgba(179, 34, 34, 0.5); + --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); + --firebrick-hsl: hsl(0, 68%, 42%); + --firebrick-hsl: hsla(0 68% 42%); + --firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5); + --firebrick-hsl-a50: hsl(0 68% 42% / 50%); +} +``` + +_Custom properties do not fallback to the previous declaration_ + [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test [css-url]: https://cssdb.org/#color-functional-notation [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-color-functional-notation -[CSS Color]: https://drafts.csswg.org/css-color/#ref-for-funcdef-rgb%E2%91%A1%E2%91%A0 -[Gulp PostCSS]: https://github.com/postcss/gulp-postcss -[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss -[PostCSS Loader]: https://github.com/postcss/postcss-loader [PostCSS Color Functional Notation]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation +[CSS Color]: https://www.w3.org/TR/css-color-4/#funcdef-rgb diff --git a/node_modules/postcss-color-functional-notation/dist/index.cjs b/node_modules/postcss-color-functional-notation/dist/index.cjs index 45316a19..34abcae2 100644 --- a/node_modules/postcss-color-functional-notation/dist/index.cjs +++ b/node_modules/postcss-color-functional-notation/dist/index.cjs @@ -1 +1 @@ -"use strict";var s=require("@csstools/postcss-progressive-custom-properties"),e=require("@csstools/css-tokenizer"),t=require("@csstools/css-color-parser"),r=require("@csstools/css-parser-algorithms");function hasFallback(s){const e=s.parent;if(!e)return!1;const t=s.prop.toLowerCase(),r=e.index(s);for(let s=0;s<r;s++){const r=e.nodes[s];if("decl"===r.type&&r.prop.toLowerCase()===t)return!0}return!1}const o=/(?:rgb|hsl)a?\(/i;function hasSupportsAtRuleAncestor(s){let e=s.parent;for(;e;)if("atrule"===e.type){if("supports"===e.name.toLowerCase()&&o.test(e.params))return!0;e=e.parent}else e=e.parent;return!1}const a=/^(?:rgb|hsl)a?$/i,basePlugin=s=>({postcssPlugin:"postcss-color-functional-notation",Declaration:n=>{const l=n.value;if(!o.test(l))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const i=r.replaceComponentValues(r.parseCommaSeparatedListOfComponentValues(e.tokenize({css:l})),(s=>{if(r.isFunctionNode(s)&&a.test(s.getName())){const e=t.color(s);if(!e)return;if(e.syntaxFlags.has(t.SyntaxFlag.Experimental))return;if(e.syntaxFlags.has(t.SyntaxFlag.HasNoneKeywords))return;if(e.syntaxFlags.has(t.SyntaxFlag.RelativeColorSyntax))return;if((e.syntaxFlags.has(t.SyntaxFlag.LegacyRGB)||e.syntaxFlags.has(t.SyntaxFlag.LegacyHSL))&&!e.syntaxFlags.has(t.SyntaxFlag.HasPercentageAlpha))return;return"hsl"===e.colorNotation?t.serializeHSL(e):t.serializeRGB(e)}})),c=r.stringify(i);c!==l&&(n.cloneBefore({value:c}),s?.preserve||n.remove())}});basePlugin.postcss=!0;const postcssPlugin=e=>{const t=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},e);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-color-functional-notation",plugins:[s(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; +"use strict";var s=require("@csstools/postcss-progressive-custom-properties"),e=require("@csstools/css-tokenizer"),t=require("@csstools/css-color-parser"),r=require("@csstools/css-parser-algorithms");function hasFallback(s){const e=s.parent;if(!e)return!1;const t=s.prop.toLowerCase(),r=e.index(s);for(let s=0;s<r;s++){const r=e.nodes[s];if("decl"===r.type&&r.prop.toLowerCase()===t)return!0}return!1}const o=/(?:rgb|hsl)a?\(/i;function hasSupportsAtRuleAncestor(s){let e=s.parent;for(;e;)if("atrule"===e.type){if("supports"===e.name.toLowerCase()&&o.test(e.params))return!0;e=e.parent}else e=e.parent;return!1}const a=/^(?:rgb|hsl)a?$/i,basePlugin=s=>({postcssPlugin:"postcss-color-functional-notation",Declaration:n=>{const l=n.value;if(!o.test(l))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const c=r.replaceComponentValues(r.parseCommaSeparatedListOfComponentValues(e.tokenize({css:l})),(s=>{if(!r.isFunctionNode(s)||!a.test(s.getName()))return;const e=t.color(s);return!e||e.syntaxFlags.has(t.SyntaxFlag.Experimental)||e.syntaxFlags.has(t.SyntaxFlag.HasNoneKeywords)||e.syntaxFlags.has(t.SyntaxFlag.RelativeColorSyntax)||(e.syntaxFlags.has(t.SyntaxFlag.LegacyRGB)||e.syntaxFlags.has(t.SyntaxFlag.LegacyHSL))&&!e.syntaxFlags.has(t.SyntaxFlag.HasPercentageAlpha)?void 0:"hsl"===e.colorNotation?t.serializeHSL(e):t.serializeRGB(e)})),i=r.stringify(c);i!==l&&(n.cloneBefore({value:i}),s?.preserve||n.remove())}});basePlugin.postcss=!0;const postcssPlugin=e=>{const t=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},e);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-color-functional-notation",plugins:[s(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/node_modules/postcss-color-functional-notation/dist/index.mjs b/node_modules/postcss-color-functional-notation/dist/index.mjs index 261f1b9d..432ff6bc 100644 --- a/node_modules/postcss-color-functional-notation/dist/index.mjs +++ b/node_modules/postcss-color-functional-notation/dist/index.mjs @@ -1 +1 @@ -import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as t}from"@csstools/css-tokenizer";import{color as e,SyntaxFlag as r,serializeHSL as o,serializeRGB as a}from"@csstools/css-color-parser";import{replaceComponentValues as n,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as l,stringify as i}from"@csstools/css-parser-algorithms";function hasFallback(s){const t=s.parent;if(!t)return!1;const e=s.prop.toLowerCase(),r=t.index(s);for(let s=0;s<r;s++){const r=t.nodes[s];if("decl"===r.type&&r.prop.toLowerCase()===e)return!0}return!1}const p=/(?:rgb|hsl)a?\(/i;function hasSupportsAtRuleAncestor(s){let t=s.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name.toLowerCase()&&p.test(t.params))return!0;t=t.parent}else t=t.parent;return!1}const u=/^(?:rgb|hsl)a?$/i,basePlugin=s=>({postcssPlugin:"postcss-color-functional-notation",Declaration:f=>{const g=f.value;if(!p.test(g))return;if(hasFallback(f))return;if(hasSupportsAtRuleAncestor(f))return;const m=n(c(t({css:g})),(s=>{if(l(s)&&u.test(s.getName())){const t=e(s);if(!t)return;if(t.syntaxFlags.has(r.Experimental))return;if(t.syntaxFlags.has(r.HasNoneKeywords))return;if(t.syntaxFlags.has(r.RelativeColorSyntax))return;if((t.syntaxFlags.has(r.LegacyRGB)||t.syntaxFlags.has(r.LegacyHSL))&&!t.syntaxFlags.has(r.HasPercentageAlpha))return;return"hsl"===t.colorNotation?o(t):a(t)}})),h=i(m);h!==g&&(f.cloneBefore({value:h}),s?.preserve||f.remove())}});basePlugin.postcss=!0;const postcssPlugin=t=>{const e=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},t);return e.enableProgressiveCustomProperties&&e.preserve?{postcssPlugin:"postcss-color-functional-notation",plugins:[s(),basePlugin(e)]}:basePlugin(e)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; +import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as t}from"@csstools/css-tokenizer";import{color as e,SyntaxFlag as o,serializeHSL as r,serializeRGB as a}from"@csstools/css-color-parser";import{replaceComponentValues as n,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as l,stringify as p}from"@csstools/css-parser-algorithms";function hasFallback(s){const t=s.parent;if(!t)return!1;const e=s.prop.toLowerCase(),o=t.index(s);for(let s=0;s<o;s++){const o=t.nodes[s];if("decl"===o.type&&o.prop.toLowerCase()===e)return!0}return!1}const i=/(?:rgb|hsl)a?\(/i;function hasSupportsAtRuleAncestor(s){let t=s.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name.toLowerCase()&&i.test(t.params))return!0;t=t.parent}else t=t.parent;return!1}const u=/^(?:rgb|hsl)a?$/i,basePlugin=s=>({postcssPlugin:"postcss-color-functional-notation",Declaration:f=>{const g=f.value;if(!i.test(g))return;if(hasFallback(f))return;if(hasSupportsAtRuleAncestor(f))return;const m=n(c(t({css:g})),(s=>{if(!l(s)||!u.test(s.getName()))return;const t=e(s);return!t||t.syntaxFlags.has(o.Experimental)||t.syntaxFlags.has(o.HasNoneKeywords)||t.syntaxFlags.has(o.RelativeColorSyntax)||(t.syntaxFlags.has(o.LegacyRGB)||t.syntaxFlags.has(o.LegacyHSL))&&!t.syntaxFlags.has(o.HasPercentageAlpha)?void 0:"hsl"===t.colorNotation?r(t):a(t)})),h=p(m);h!==g&&(f.cloneBefore({value:h}),s?.preserve||f.remove())}});basePlugin.postcss=!0;const postcssPlugin=t=>{const e=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},t);return e.enableProgressiveCustomProperties&&e.preserve?{postcssPlugin:"postcss-color-functional-notation",plugins:[s(),basePlugin(e)]}:basePlugin(e)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/node_modules/postcss-color-functional-notation/package.json b/node_modules/postcss-color-functional-notation/package.json index ab25e121..d7850e0a 100644 --- a/node_modules/postcss-color-functional-notation/package.json +++ b/node_modules/postcss-color-functional-notation/package.json @@ -1,7 +1,7 @@ { "name": "postcss-color-functional-notation", "description": "Use space and slash separated color notation in CSS", - "version": "6.0.3", + "version": "6.0.4", "author": "Jonathan Neal <jonathantneal@hotmail.com>", "license": "MIT-0", "funding": [ @@ -38,9 +38,9 @@ "dist" ], "dependencies": { - "@csstools/css-color-parser": "^1.5.0", - "@csstools/css-parser-algorithms": "^2.4.0", - "@csstools/css-tokenizer": "^2.2.2", + "@csstools/css-color-parser": "^1.5.1", + "@csstools/css-parser-algorithms": "^2.5.0", + "@csstools/css-tokenizer": "^2.2.3", "@csstools/postcss-progressive-custom-properties": "^3.0.3" }, "peerDependencies": { |