postcss-color-functional-notation 6.0.3 → 6.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # Changes to PostCSS Color Functional Notation
2
2
 
3
+ ### 6.0.5
4
+
5
+ _February 19, 2024_
6
+
7
+ - Reuse code with `@csstools/utilities`
8
+ - Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.6.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#260) (minor)
9
+ - Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.1.0`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#310) (minor)
10
+ - Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.5.2`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#152) (patch)
11
+
12
+ ### 6.0.4
13
+
14
+ _December 31, 2023_
15
+
16
+ - 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)
17
+ - 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)
18
+ - 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)
19
+
3
20
  ### 6.0.3
4
21
 
5
22
  _December 15, 2023_
@@ -10,17 +27,4 @@ _December 15, 2023_
10
27
  - Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.0.3`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#303) (patch)
11
28
  - Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.5.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#150) (minor)
12
29
 
13
- ### 6.0.2
14
-
15
- _October 9, 2023_
16
-
17
- - 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)
18
-
19
- ### 6.0.1
20
-
21
- _September 18, 2023_
22
-
23
- - Improve performance
24
- - 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)
25
-
26
30
  [Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation/CHANGELOG.md)
package/README.md CHANGED
@@ -1,28 +1,29 @@
1
- # PostCSS Color Functional Notation [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
1
+ # PostCSS Color Functional Notation [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
2
2
 
3
- [<img alt="NPM Version" src="https://img.shields.io/npm/v/postcss-color-functional-notation.svg" height="20">][npm-url]
4
- [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/lab-function.svg" height="20">][css-url]
5
- [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
6
- [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
3
+ [<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]
4
+
5
+ ```bash
6
+ npm install postcss-color-functional-notation --save-dev
7
+ ```
7
8
 
8
9
  [PostCSS Color Functional Notation] lets you use space and slash separated
9
10
  color notation in CSS, following the [CSS Color] specification.
10
11
 
11
12
  ```pcss
12
13
  :root {
13
- --firebrick: rgb(178 34 34);
14
- --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
15
- --firebrick-hsl: hsla(0 68% 42%);
16
- --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
14
+ --firebrick: rgb(178 34 34);
15
+ --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
16
+ --firebrick-hsl: hsla(0 68% 42%);
17
+ --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
17
18
  }
18
19
 
19
20
  /* becomes */
20
21
 
21
22
  :root {
22
- --firebrick: rgb(178, 34, 34);
23
- --firebrick-a50: rgba(178, 34, 34, .5);
24
- --firebrick-hsl: hsl(0, 68%, 42%);
25
- --firebrick-hsl-a50: hsla(0, 68%, 42%, .5);
23
+ --firebrick: rgb(178, 34, 34);
24
+ --firebrick-a50: rgba(179, 34, 34, 0.5);
25
+ --firebrick-hsl: hsl(0, 68%, 42%);
26
+ --firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5);
26
27
  }
27
28
  ```
28
29
 
@@ -31,30 +32,36 @@ color notation in CSS, following the [CSS Color] specification.
31
32
  Add [PostCSS Color Functional Notation] to your project:
32
33
 
33
34
  ```bash
34
- npm install postcss-color-functional-notation --save-dev
35
+ npm install postcss postcss-color-functional-notation --save-dev
35
36
  ```
36
37
 
37
- Use [PostCSS Color Functional Notation] to process your CSS:
38
+ Use it as a [PostCSS] plugin:
38
39
 
39
40
  ```js
40
41
  const postcss = require('postcss');
41
42
  const postcssColorFunctionalNotation = require('postcss-color-functional-notation');
42
43
 
43
44
  postcss([
44
- postcssColorFunctionalNotation(/* pluginOptions */)
45
+ postcssColorFunctionalNotation(/* pluginOptions */)
45
46
  ]).process(YOUR_CSS /*, processOptions */);
46
47
  ```
47
48
 
48
- [PostCSS Color Functional Notation] runs in all Node environments, with special instructions for:
49
+ [PostCSS Color Functional Notation] runs in all Node environments, with special
50
+ instructions for:
49
51
 
50
- | [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
51
- | --- | --- | --- | --- | --- |
52
+ - [Node](INSTALL.md#node)
53
+ - [PostCSS CLI](INSTALL.md#postcss-cli)
54
+ - [PostCSS Load Config](INSTALL.md#postcss-load-config)
55
+ - [Webpack](INSTALL.md#webpack)
56
+ - [Next.js](INSTALL.md#nextjs)
57
+ - [Gulp](INSTALL.md#gulp)
58
+ - [Grunt](INSTALL.md#grunt)
52
59
 
53
60
  ## Options
54
61
 
55
62
  ### preserve
56
63
 
57
- The `preserve` option determines whether the original functional color notation
64
+ The `preserve` option determines whether the original notation
58
65
  is preserved. By default, it is not preserved.
59
66
 
60
67
  ```js
@@ -63,23 +70,33 @@ postcssColorFunctionalNotation({ preserve: true })
63
70
 
64
71
  ```pcss
65
72
  :root {
66
- --firebrick: rgb(178 34 34);
67
- --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
68
- --firebrick-hsl: hsla(0 68% 42%);
69
- --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
73
+ --firebrick: rgb(178 34 34);
74
+ --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
75
+ --firebrick-hsl: hsla(0 68% 42%);
76
+ --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
70
77
  }
71
78
 
72
79
  /* becomes */
73
80
 
74
81
  :root {
75
- --firebrick: rgb(178, 34, 34);
76
- --firebrick: rgb(178 34 34);
77
- --firebrick-a50: rgba(178, 34, 34, .5);
78
- --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
79
- --firebrick-hsl: hsl(0, 68%, 42%);
80
- --firebrick-hsl: hsla(0 68% 42%);
81
- --firebrick-hsl-a50: hsla(0, 68%, 42%, .5);
82
- --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
82
+ --firebrick: rgb(178, 34, 34);
83
+ --firebrick-a50: rgba(179, 34, 34, 0.5);
84
+ --firebrick-hsl: hsl(0, 68%, 42%);
85
+ --firebrick-hsl: hsla(0 68% 42%);
86
+ --firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5);
87
+ }
88
+
89
+ @supports (color: rgb(0 0 0 / 0)) {
90
+ :root {
91
+ --firebrick: rgb(178 34 34);
92
+ --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
93
+ }
94
+ }
95
+
96
+ @supports (color: hsl(0 0% 0% / 0)) {
97
+ :root {
98
+ --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
99
+ }
83
100
  }
84
101
  ```
85
102
 
@@ -89,20 +106,42 @@ The `enableProgressiveCustomProperties` option determines whether the original n
89
106
  is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
90
107
 
91
108
  > [!NOTE]
92
- > 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).
109
+ > We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties.
110
+ > See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
93
111
 
94
112
  ```js
95
113
  postcssColorFunctionalNotation({ enableProgressiveCustomProperties: false })
96
114
  ```
97
115
 
116
+ ```pcss
117
+ :root {
118
+ --firebrick: rgb(178 34 34);
119
+ --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
120
+ --firebrick-hsl: hsla(0 68% 42%);
121
+ --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
122
+ }
123
+
124
+ /* becomes */
125
+
126
+ :root {
127
+ --firebrick: rgb(178, 34, 34);
128
+ --firebrick: rgb(178 34 34);
129
+ --firebrick-a50: rgba(179, 34, 34, 0.5);
130
+ --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
131
+ --firebrick-hsl: hsl(0, 68%, 42%);
132
+ --firebrick-hsl: hsla(0 68% 42%);
133
+ --firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5);
134
+ --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
135
+ }
136
+ ```
137
+
138
+ _Custom properties do not fallback to the previous declaration_
139
+
98
140
  [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
99
141
  [css-url]: https://cssdb.org/#color-functional-notation
100
142
  [discord]: https://discord.gg/bUadyRwkJS
101
143
  [npm-url]: https://www.npmjs.com/package/postcss-color-functional-notation
102
144
 
103
- [CSS Color]: https://drafts.csswg.org/css-color/#ref-for-funcdef-rgb%E2%91%A1%E2%91%A0
104
- [Gulp PostCSS]: https://github.com/postcss/gulp-postcss
105
- [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
106
145
  [PostCSS]: https://github.com/postcss/postcss
107
- [PostCSS Loader]: https://github.com/postcss/postcss-loader
108
146
  [PostCSS Color Functional Notation]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation
147
+ [CSS Color]: https://www.w3.org/TR/css-color-4/#funcdef-rgb
package/dist/index.cjs CHANGED
@@ -1 +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;
1
+ "use strict";var s=require("@csstools/postcss-progressive-custom-properties"),e=require("@csstools/css-color-parser"),t=require("@csstools/utilities"),o=require("@csstools/css-parser-algorithms"),a=require("@csstools/css-tokenizer");const r=/^(?:rgb|hsl)a?$/i,n=/\b(?:rgb|hsl)a?\(/i,basePlugin=s=>({postcssPlugin:"postcss-color-functional-notation",Declaration:l=>{const i=l.value;if(!n.test(i))return;if(t.hasFallback(l))return;if(t.hasSupportsAtRuleAncestor(l,n))return;const c=o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(a.tokenize({css:i})),(s=>{if(!o.isFunctionNode(s)||!r.test(s.getName()))return;const t=e.color(s);return!t||t.syntaxFlags.has(e.SyntaxFlag.Experimental)||t.syntaxFlags.has(e.SyntaxFlag.HasNoneKeywords)||t.syntaxFlags.has(e.SyntaxFlag.RelativeColorSyntax)||(t.syntaxFlags.has(e.SyntaxFlag.LegacyRGB)||t.syntaxFlags.has(e.SyntaxFlag.LegacyHSL))&&!t.syntaxFlags.has(e.SyntaxFlag.HasPercentageAlpha)?void 0:"hsl"===t.colorNotation?e.serializeHSL(t):e.serializeRGB(t)})),u=o.stringify(c);u!==i&&(l.cloneBefore({value:u}),s?.preserve||l.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;
package/dist/index.mjs CHANGED
@@ -1 +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};
1
+ import s from"@csstools/postcss-progressive-custom-properties";import{color as o,SyntaxFlag as t,serializeHSL as e,serializeRGB as r}from"@csstools/css-color-parser";import{hasFallback as a,hasSupportsAtRuleAncestor as n}from"@csstools/utilities";import{replaceComponentValues as l,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as i,stringify as p}from"@csstools/css-parser-algorithms";import{tokenize as g}from"@csstools/css-tokenizer";const u=/^(?:rgb|hsl)a?$/i,m=/\b(?:rgb|hsl)a?\(/i,basePlugin=s=>({postcssPlugin:"postcss-color-functional-notation",Declaration:f=>{const h=f.value;if(!m.test(h))return;if(a(f))return;if(n(f,m))return;const v=l(c(g({css:h})),(s=>{if(!i(s)||!u.test(s.getName()))return;const a=o(s);return!a||a.syntaxFlags.has(t.Experimental)||a.syntaxFlags.has(t.HasNoneKeywords)||a.syntaxFlags.has(t.RelativeColorSyntax)||(a.syntaxFlags.has(t.LegacyRGB)||a.syntaxFlags.has(t.LegacyHSL))&&!a.syntaxFlags.has(t.HasPercentageAlpha)?void 0:"hsl"===a.colorNotation?e(a):r(a)})),y=p(v);y!==h&&(f.cloneBefore({value:y}),s?.preserve||f.remove())}});basePlugin.postcss=!0;const postcssPlugin=o=>{const t=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},o);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-color-functional-notation",plugins:[s(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0;export{postcssPlugin as default};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "postcss-color-functional-notation",
3
3
  "description": "Use space and slash separated color notation in CSS",
4
- "version": "6.0.3",
4
+ "version": "6.0.5",
5
5
  "author": "Jonathan Neal <jonathantneal@hotmail.com>",
6
6
  "license": "MIT-0",
7
7
  "funding": [
@@ -38,10 +38,11 @@
38
38
  "dist"
39
39
  ],
40
40
  "dependencies": {
41
- "@csstools/css-color-parser": "^1.5.0",
42
- "@csstools/css-parser-algorithms": "^2.4.0",
43
- "@csstools/css-tokenizer": "^2.2.2",
44
- "@csstools/postcss-progressive-custom-properties": "^3.0.3"
41
+ "@csstools/css-color-parser": "^1.5.2",
42
+ "@csstools/css-parser-algorithms": "^2.6.0",
43
+ "@csstools/css-tokenizer": "^2.2.3",
44
+ "@csstools/postcss-progressive-custom-properties": "^3.1.0",
45
+ "@csstools/utilities": "^1.0.0"
45
46
  },
46
47
  "peerDependencies": {
47
48
  "postcss": "^8.4"