postcss-color-functional-notation 6.0.3 → 6.0.4
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 +8 -7
- package/README.md +76 -37
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changes to PostCSS Color Functional Notation
|
|
2
2
|
|
|
3
|
+
### 6.0.4
|
|
4
|
+
|
|
5
|
+
_December 31, 2023_
|
|
6
|
+
|
|
7
|
+
- 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)
|
|
8
|
+
- 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)
|
|
9
|
+
- 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)
|
|
10
|
+
|
|
3
11
|
### 6.0.3
|
|
4
12
|
|
|
5
13
|
_December 15, 2023_
|
|
@@ -16,11 +24,4 @@ _October 9, 2023_
|
|
|
16
24
|
|
|
17
25
|
- 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
26
|
|
|
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
27
|
[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">][
|
|
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="
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
49
|
+
[PostCSS Color Functional Notation] runs in all Node environments, with special
|
|
50
|
+
instructions for:
|
|
49
51
|
|
|
50
|
-
|
|
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
|
|
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
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
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
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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.
|
|
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
|
|
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 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;
|
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
|
|
1
|
+
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};
|
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.
|
|
4
|
+
"version": "6.0.4",
|
|
5
5
|
"author": "Jonathan Neal <jonathantneal@hotmail.com>",
|
|
6
6
|
"license": "MIT-0",
|
|
7
7
|
"funding": [
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
"dist"
|
|
39
39
|
],
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@csstools/css-color-parser": "^1.5.
|
|
42
|
-
"@csstools/css-parser-algorithms": "^2.
|
|
43
|
-
"@csstools/css-tokenizer": "^2.2.
|
|
41
|
+
"@csstools/css-color-parser": "^1.5.1",
|
|
42
|
+
"@csstools/css-parser-algorithms": "^2.5.0",
|
|
43
|
+
"@csstools/css-tokenizer": "^2.2.3",
|
|
44
44
|
"@csstools/postcss-progressive-custom-properties": "^3.0.3"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|