From 4a1b9e4fdbf7ab0a95b49aa2f7bebae34eb51e38 Mon Sep 17 00:00:00 2001
From: Shub <shub1493biswas@gmail.com>
Date: Sat, 12 Mar 2022 20:33:13 +0530
Subject: [PATCH] v1.2.0

- fix: tests
---
 README.md                                     |  3 +++
 package.json                                  |  2 +-
 .../color-provider/color-provider.test.ts     | 23 +++++++++----------
 src/test/parser.test.ts                       |  4 ++--
 src/test/utils.test.ts                        |  9 ++++++--
 5 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 91facb5..6bf3572 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,9 @@ This extension helps to autocomplete globally shared CSS Variables and a lot mor
   * If your project uses **SASS/LESS**, and you are facing issues to setup this extension, please
     read [Customization](./customize-extension.md) Doc.
 * [Theme Support](./theming.md)
+* *CSS Level 4 color spec support is limited*, to keep the bundle size small
+  * Except `color()` api, every other CSS color is supported. Please find
+    details for CSS colors [here in MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
 
 ## Supported Configs:
 
diff --git a/package.json b/package.json
index ad76897..01413e1 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "intellisense"
   ],
   "description": "Intellisense support for CSS Variables",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "publisher": "phoenisx",
   "license": "MIT",
   "homepage": "https://github.com/willofindie/vscode-cssvar",
diff --git a/src/test/color-provider/color-provider.test.ts b/src/test/color-provider/color-provider.test.ts
index b5c6fa1..202315b 100644
--- a/src/test/color-provider/color-provider.test.ts
+++ b/src/test/color-provider/color-provider.test.ts
@@ -1,6 +1,5 @@
 import { EndOfLine, TextDocument } from "vscode";
-import { parseToRgb } from "polished";
-import { RgbaColor } from "polished/lib/types/color";
+import { parseToRgb } from "../../color-parser";
 
 import { CssColorProvider } from "../../color-provider";
 import { CSSVarDeclarations } from "../../main";
@@ -74,8 +73,8 @@ const getDocumentFromText = (text: string) => {
 
 describe("Test Color Provider", () => {
   let provider: CssColorProvider;
-  const red300 = parseToRgb("#fc8181") as RgbaColor;
-  const red500 = parseToRgb("#e53e3e") as RgbaColor;
+  const red300 = parseToRgb("#fc8181");
+  const red500 = parseToRgb("#e53e3e");
 
   beforeAll(() => {
     provider = new CssColorProvider();
@@ -87,10 +86,10 @@ describe("Test Color Provider", () => {
     );
     expect(colorInfos.length).toBe(1);
     expect(colorInfos[0].color).toMatchObject({
-      red: red300.red / 255,
-      green: red300.green / 255,
-      blue: red300.blue / 255,
-      alpha: red300.alpha ?? 1,
+      red: red300!.r,
+      green: red300!.g,
+      blue: red300!.b,
+      alpha: red300!.alpha ?? 1,
     });
     expect(colorInfos[0].range.start.character).toBe(7);
     expect(colorInfos[0].range.end.character).toBe(27);
@@ -101,10 +100,10 @@ describe("Test Color Provider", () => {
     );
     expect(colorInfos.length).toBe(3);
     expect(colorInfos[1].color).toMatchObject({
-      red: red500.red / 255,
-      green: red500.green / 255,
-      blue: red500.blue / 255,
-      alpha: red500.alpha ?? 1,
+      red: red500!.r,
+      green: red500!.g,
+      blue: red500!.b,
+      alpha: red500!.alpha ?? 1,
     });
     expect(colorInfos[1].range).toEqual(
       expect.objectContaining({
diff --git a/src/test/parser.test.ts b/src/test/parser.test.ts
index d17c027..b08f07e 100644
--- a/src/test/parser.test.ts
+++ b/src/test/parser.test.ts
@@ -74,7 +74,7 @@ describe("Test Parser", () => {
       const oldVariable: CSSVarDeclarations = {
         type: "css",
         property: "--red",
-        value: "#f00",
+        value: "rgb(255, 0, 0)",
         theme: "",
       };
       CACHE.cssVars = {
@@ -94,7 +94,7 @@ describe("Test Parser", () => {
         type: "css",
         property: "--red500",
         value: "#f24455",
-        color: "#f24455",
+        color: "rgb(242, 68, 85)",
         theme: "",
         location: expect.objectContaining({
           uri: RENAMED_FILE,
diff --git a/src/test/utils.test.ts b/src/test/utils.test.ts
index 3d39e28..3b644fa 100644
--- a/src/test/utils.test.ts
+++ b/src/test/utils.test.ts
@@ -8,6 +8,7 @@ describe("Utility Function Tests", () => {
     it("should return proper Hex string for unknown Color Names", () => {
       const cssVars: CSSVarDeclarations[] = [
         {
+          type: "css",
           property: "--red500",
           value: "red",
           theme: "",
@@ -15,16 +16,18 @@ describe("Utility Function Tests", () => {
       ];
       const result = getColor(cssVars[0].value, cssVars);
       expect(result.success).toBeTruthy();
-      expect(result.color).toEqual("#f00");
+      expect(result.color).toEqual("rgb(255, 0, 0)");
     });
     it("should return proper Hex string recursively", () => {
       const cssVars: CSSVarDeclarations[] = [
         {
+          type: "css",
           property: "--red500",
           value: "red",
           theme: "",
         },
         {
+          type: "css",
           property: "--bg01",
           value: "var(--red500)",
           theme: "",
@@ -32,16 +35,18 @@ describe("Utility Function Tests", () => {
       ];
       const result = getColor(cssVars[1].value, cssVars);
       expect(result.success).toBeTruthy();
-      expect(result.color).toEqual("#f00");
+      expect(result.color).toEqual("rgb(255, 0, 0)");
     });
     it("should not return color if value is not a color", () => {
       const cssVars: CSSVarDeclarations[] = [
         {
+          type: "css",
           property: "--pad-1",
           value: "16px",
           theme: "",
         },
         {
+          type: "css",
           property: "--spacing-x",
           value: "var(--pad-1)",
           theme: "",