@csstools/postcss-gradients-interpolation-method - npm Package Compare versions

Comparing version 2.0.1 to 3.0.0

CHANGELOG.md

 # Changes to PostCSS Gradients Interpolation Method
 
+### 3.0.0 3.0.0 (March 25, 2023)
+
+- Handle `color-mix()` internally with `@csstools/css-color-parser`
+
 ### 2.0.1 (January 28, 2023)
@@ -4,0 +8,0 @@

dist/color-stop-list.d.ts

@@ -1,8 +0,9 @@
-import type { Node } from 'postcss-value-parser';
+import type { ColorData } from '@csstools/css-color-parser';
+import type { ComponentValue } from '@csstools/css-parser-algorithms';
+import { TokenNode } from '@csstools/css-parser-algorithms';
 export type ColorStop = {
-    color: string;
-    colorStopLength: string;
-    colorHintBetween: Array<ColorStop>;
-    nodes: Array<Node>;
+    color: ComponentValue;
+    colorData: ColorData;
+    position: ComponentValue;
 };
-export declare function colorStopList(nodes: Array<Node>, interpolationArguments: string): Array<ColorStop> | false;
+export declare function interpolateColorsInColorStopsList(colorStops: Array<ColorStop>, colorSpace: TokenNode, hueInterpolationMethod: TokenNode | null): Array<ComponentValue> | false;

dist/index.d.ts

 import type { PluginCreator } from 'postcss';
 /** postcss-gradients-interpolation-method plugin options */
 export type pluginOptions = {
-    /** Preserve the original notation. default: true */
+    /** Preserve the original notation. default: false */
     preserve?: boolean;
@@ -6,0 +6,0 @@ /** Enable "@csstools/postcss-progressive-custom-properties". default: true */

dist/is-gradient.d.ts

@@ -1,2 +0,2 @@
-export declare function includesGradientsFunction(str: string): boolean;
-export declare function isGradientsFunctions(str: string): boolean;
+export declare const gradientFunctionRegex: RegExp;
+export declare const gradientNameRegex: RegExp;

package.json

 {
 	"name": "@csstools/postcss-gradients-interpolation-method",
 	"description": "Use interpolation methods in CSS gradient functions",
-	"version": "2.0.1",
+	"version": "3.0.0",
 	"author": "Jonathan Neal <[e-mail]>",
@@ -32,4 +32,6 @@ "license": "CC0-1.0",
 	"dependencies": {
-		"@csstools/postcss-progressive-custom-properties": "^2.0.0",
-		"postcss-value-parser": "^4.2.0"
+		"@csstools/css-color-parser": "^1.0.0",
+		"@csstools/css-parser-algorithms": "^2.1.0",
+		"@csstools/css-tokenizer": "^2.1.0",
+		"@csstools/postcss-progressive-custom-properties": "^2.0.0"
 	},
@@ -39,13 +41,11 @@ "peerDependencies": {
 	},
+	"devDependencies": {
+		"@csstools/postcss-tape": "*"
+	},
 	"scripts": {
-		"prebuild": "npm run clean",
 		"build": "rollup -c ../../rollup/default.mjs",
-		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"",
 		"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
-		"lint": "npm run lint:eslint && npm run lint:package-json",
-		"lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
-		"lint:package-json": "node ../../.github/bin/format-package-json.mjs",
-		"prepublishOnly": "npm run clean && npm run build && npm run test",
-		"test": "node .tape.mjs && npm run test:exports",
-		"test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
+		"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"
@@ -74,3 +74,3 @@ },
 	"csstools": {
-		"cssdbId": "TODO",
+		"cssdbId": "gradients-interpolation-method",
 		"exportName": "postcssGradientsInterpolationMethod",
@@ -77,0 +77,0 @@ "humanReadableName": "PostCSS Gradients Interpolation Method",

README.md

 # PostCSS Gradients Interpolation Method [<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-gradients-interpolation-method.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/TODO.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/@csstools/postcss-gradients-interpolation-method.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/gradients-interpolation-method.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]
 
@@ -8,8 +8,8 @@ [PostCSS Gradients Interpolation Method] lets you use different interpolation methods in CSS gradient functions following [CSS Specification].
 ```pcss
-.oklch {
-	background: linear-gradient(in oklch 90deg, black 25% , blue 75%);
+.example {
+	background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 
-:root {
-	--background: linear-gradient(in oklch 90deg, black 25%, blue 75%);
+.example {
+	background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
 }
@@ -19,35 +19,39 @@
 
-.oklch {
-	background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%);
-	background: linear-gradient(in oklch 90deg, black 25% , blue 75%);
+.example {
+	background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%);
+	background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 
-:root {
-	--background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%);
+.example {
+	background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
+	background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
 }
-
-@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) {
-:root {
-	--background: linear-gradient(in oklch 90deg, black 25%, blue 75%);
-}
-}
 ```
 
-## Warnings
+## Shortcomings
 
-⚠️ This plugin assumes you have a separate plugin to transform `color-mix()` to something older browsers can understand.
+⚠️ Color stops with only a color or only an interpolation hint are not supported.
 
-⚠️ Color stops with only a color and Interpolation hints are not supported.
-We can not statically check if a certain value is a single color or an interpolation hint.
+For best results you should always provide at least the color and position for each color stop.
+Double position color stops are supported.
 
-These are equivalent in PostCSS :
+```pcss
+.foo {
+	/* Only a color: can't transform */
+	background-image: linear-gradient(in oklch, black 0%, green, blue 100%);
 
+	/* Only an interpolation hint: can't transform */
+	background-image: linear-gradient(in oklch, black 0%, 25%, blue 100%);
+}
+```
+
+⚠️ Variable colors are also not supported.
+We can not mix colors when the color is a variable.
+
 ```pcss
+.foo {
 	--red: red;
-	/* Color stop variable */
-	background-image: linear-gradient(90deg, black, var(--red), blue);
-
-	--perc-10: 10%;
-	/* Interpolation hint */
-	background-image: linear-gradient(90deg, black, var(--perc-10), blue);
+	/* Color stop variable : can't transform */
+	background-image: linear-gradient(in oklch, black 0%, var(--red), blue 100%);
+}
 ```
@@ -97,8 +101,8 @@
 ```pcss
-.oklch {
-	background: linear-gradient(in oklch 90deg, black 25% , blue 75%);
+.example {
+	background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 
-:root {
-	--background: linear-gradient(in oklch 90deg, black 25%, blue 75%);
+.example {
+	background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
 }
@@ -108,16 +112,11 @@
 
-.oklch {
-	background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%);
-	background: linear-gradient(in oklch 90deg, black 25% , blue 75%);
+.example {
+	background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%);
+	background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 
-:root {
-	--background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%);
+.example {
+	background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
+	background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
 }
-
-@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) {
-:root {
-	--background: linear-gradient(in oklch 90deg, black 25%, blue 75%);
-}
-}
 ```
@@ -137,8 +136,8 @@
 ```pcss
-.oklch {
-	background: linear-gradient(in oklch 90deg, black 25% , blue 75%);
+.example {
+	background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 
-:root {
-	--background: linear-gradient(in oklch 90deg, black 25%, blue 75%);
+.example {
+	background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
 }
@@ -148,10 +147,10 @@
 
-.oklch {
-	background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%);
-	background: linear-gradient(in oklch 90deg, black 25% , blue 75%);
+.example {
+	background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%);
+	background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 
-:root {
-	--background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%);
-	--background: linear-gradient(in oklch 90deg, black 25%, blue 75%);
+.example {
+	background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
+	background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
 }
@@ -163,3 +162,3 @@ ```
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
-[css-url]: https://cssdb.org/#TODO
+[css-url]: https://cssdb.org/#gradients-interpolation-method
 [discord]: https://discord.gg/bUadyRwkJS
@@ -166,0 +165,0 @@ [npm-url]: https://www.npmjs.com/package/@csstools/postcss-gradients-interpolation-method

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

28815

increased by3.16%

Number of package files

13

increased by30%

Lines of code

73

increased by35.19%

Worsened metrics

Dependency count

5

increased by66.67%

Dev dependency count

1

increased byInfinity%

Number of lines in readme file

163

decreased by-0.61%

Dependency changes

• + Added@csstools/css-color-parser@^1.0.0

• + Added@csstools/css-parser-algorithms@^2.1.0

• + Added@csstools/css-tokenizer@^2.1.0

• + Added@csstools/color-helpers@4.2.1(transitive)

• + Added@csstools/css-calc@1.2.4(transitive)

• + Added@csstools/css-color-parser@1.6.3(transitive)

• + Added@csstools/css-parser-algorithms@2.7.1(transitive)

• + Added@csstools/css-tokenizer@2.4.1(transitive)

• - Removedpostcss-value-parser@^4.2.0