🤖 Merge PR DefinitelyTyped#73447 [@types/gradient-parser] support HSL, HSLA, CSS variable, calc() expression by @t-hamano

Author: t-hamano

types/gradient-parser/gradient-parser-tests.ts

@@ -321,6 +321,63 @@ ast = [
         ],
     },
 ];
+ast = [
+    {
+        type: "linear-gradient",
+        colorStops: [
+            {
+                type: "hsl",
+                value: ["120", "100%", "50%"],
+            },
+            {
+                type: "hsla",
+                value: ["240", "100%", "50%", "0.5"],
+            },
+        ],
+    },
+];
+ast = [
+    {
+        type: "linear-gradient",
+        colorStops: [
+            {
+                type: "var",
+                value: "var(--red)",
+            },
+            {
+                type: "var",
+                value: "var(--blue)",
+            },
+        ],
+    },
+];
+ast = [
+    {
+        type: "linear-gradient",
+        orientation: {
+            type: "angular",
+            value: "90",
+        },
+        colorStops: [
+            {
+                type: "literal",
+                value: "yellow",
+                length: {
+                    type: "calc",
+                    value: "100% - 50px",
+                },
+            },
+            {
+                type: "literal",
+                value: "green",
+                length: {
+                    type: "calc",
+                    value: "100% - 20px",
+                },
+            },
+        ],
+    },
+];
 ast = [
     {
         type: "radial-gradient",

types/gradient-parser/index.d.ts

@@ -47,30 +47,48 @@ export interface AngularNode {
 export interface LiteralNode {
     type: "literal";
     value: string;
-    length?: PxNode | EmNode | PercentNode | undefined;
+    length?: PxNode | EmNode | PercentNode | CalcNode | undefined;
 }
 
 export interface HexNode {
     type: "hex";
     value: string;
-    length?: PxNode | EmNode | PercentNode | undefined;
+    length?: PxNode | EmNode | PercentNode | CalcNode | undefined;
 }
 
 export interface RgbNode {
     type: "rgb";
     value: [string, string, string];
-    length?: PxNode | EmNode | PercentNode | undefined;
+    length?: PxNode | EmNode | PercentNode | CalcNode | undefined;
 }
 
 export interface RgbaNode {
     type: "rgba";
     value: [string, string, string, string?];
-    length?: PxNode | EmNode | PercentNode | undefined;
+    length?: PxNode | EmNode | PercentNode | CalcNode | undefined;
+}
+
+export interface HslNode {
+    type: "hsl";
+    value: [string, string, string];
+    length?: PxNode | EmNode | PercentNode | CalcNode | undefined;
+}
+
+export interface HslaNode {
+    type: "hsla";
+    value: [string, string, string, string?];
+    length?: PxNode | EmNode | PercentNode | CalcNode | undefined;
+}
+
+export interface VarNode {
+    type: "var";
+    value: string;
+    length?: PxNode | EmNode | PercentNode | CalcNode | undefined;
 }
 
 export interface ShapeNode {
     type: "shape";
-    style?: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode | undefined;
+    style?: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode | CalcNode | undefined;
     value: "ellipse" | "circle";
     at?: PositionNode | undefined;
 }
@@ -88,8 +106,8 @@ export interface PositionKeywordNode {
 export interface PositionNode {
     type: "position";
     value: {
-        x: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode;
-        y: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode;
+        x: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode | CalcNode;
+        y: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode | CalcNode;
     };
 }
 
@@ -114,7 +132,12 @@ export interface PercentNode {
     value: string;
 }
 
-export type ColorStop = LiteralNode | HexNode | RgbNode | RgbaNode;
+export interface CalcNode {
+    type: "calc";
+    value: string;
+}
+
+export type ColorStop = LiteralNode | HexNode | RgbNode | RgbaNode | HslNode | HslaNode | VarNode;
 
 export type GradientNode =
     | LinearGradientNode

types/gradient-parser/package.json

@@ -1,7 +1,7 @@
 {
     "private": true,
     "name": "@types/gradient-parser",
-    "version": "0.1.9999",
+    "version": "1.1.9999",
     "projects": [
         "https://github.com/rafaelcaricio/gradient-parser"
     ],