postcss-color-functional-notation - npm Package Compare versions

Comparing version 6.0.3 to 6.0.4

CHANGELOG.md

 # 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
@@ -19,9 +27,2 @@
 
-### 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)

package.json

 {
 	"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 <[e-mail]>",
@@ -41,5 +41,5 @@ "license": "MIT-0",
 	"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"
@@ -46,0 +46,0 @@ },

README.md

@@ -1,8 +0,9 @@
-# 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
@@ -13,6 +14,6 @@ color notation in CSS, following the [CSS Color] specification.
 :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%);
 }
@@ -23,6 +24,6 @@
 :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);
 }
@@ -36,6 +37,6 @@ ```
 ```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:
 
@@ -47,10 +48,16 @@ ```js
 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)
 
@@ -61,3 +68,3 @@ ## Options
 
-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.
@@ -71,6 +78,6 @@
 :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%);
 }
@@ -81,11 +88,21 @@
 :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%);
+}
+}
 ```
@@ -99,3 +116,4 @@
 > [!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).
 
@@ -106,2 +124,26 @@ ```js
 
+```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
@@ -112,7 +154,4 @@ [css-url]: https://cssdb.org/#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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13459

increased by8.36%

Number of lines in readme file

148

increased by35.78%

Dependency changes

• Updated@csstools/css-color-parser@^1.5.1

• Updated@csstools/css-parser-algorithms@^2.5.0

• Updated@csstools/css-tokenizer@^2.2.3