Fix stringifying issue

src/helper.js

@@ -44,17 +44,44 @@ export const getClassName = (rule) => {
   return className;
 };
 
+const stringifyDeclarationNode = (node) => {
+  switch (node.type) {
+    case "Url": {
+      return `url(${node.value.value})`;
+    }
+    case "HexColor": {
+      return `#${node.value}`;
+    }
+    case "Dimension": {
+      return `${node.value}${node.unit}`;
+    }
+    case "Percentage": {
+      return `${node.value}%`;
+    }
+    case "Function": {
+      let func = `${node.name}(`
+      for (const child of node.children) {
+        func += stringifyDeclarationNode(child)
+      }
+      return `${func})`
+    }
+
+    default: {
+      if (node.value) {
+        return node.value;
+      } else {
+        return node.name;
+      }
+    }
+  }
+};
+
 export const getDeclaration = (declarationNode) => {
-  let declaration = "";
-  declaration += declarationNode.property;
+  let declaration = `${declarationNode.property}:`;
   for (const valueNode of declarationNode.value.children) {
-    if (valueNode.value) {
-      declaration += `:${valueNode.value}${valueNode.unit};`;
-    } else {
-      declaration += `:${valueNode.name};`;
-    }
+    declaration += stringifyDeclarationNode(valueNode);
   }
-  return declaration;
+  return `${declaration};`;
 };
 
 export const assembleRules = (cache) => {

src/helper.spec.js

@@ -0,0 +1,282 @@
+import { getDeclaration } from "./helper.js";
+
+//  getDeclaration
+describe("when given a declaration with url() as value", () => {
+  const ast = {
+    type: "Declaration",
+    important: false,
+    property: "blackground",
+    value: {
+      type: "Value",
+      children: [
+        {
+          type: "Url",
+          value: {
+            type: "Raw",
+            value: "./background.jpg",
+            start: 52,
+            end: 68,
+          },
+          start: 48,
+          end: 69,
+        },
+      ],
+      start: 47,
+      end: 69,
+    },
+    start: 35,
+    end: 69,
+  };
+  it("should parse it correctly", function () {
+    expect(getDeclaration(ast)).toBe("blackground:url(./background.jpg);");
+  });
+});
+
+describe("when given a declaration with Hex code as value", function () {
+  const ast = {
+    type: "Declaration",
+    important: false,
+    property: "color",
+    value: {
+      type: "Value",
+      children: [
+        {
+          type: "HexColor",
+          value: "ffffff",
+          start: 42,
+          end: 49,
+        },
+      ],
+      start: 41,
+      end: 49,
+    },
+    start: 35,
+    end: 49,
+  };
+  it("should parse it correctly", function () {
+    expect(getDeclaration(ast)).toBe("color:#ffffff;");
+  });
+});
+
+describe("when given a declaration with multiple numbers as value", function () {
+  const ast = {
+    type: "Declaration",
+    important: false,
+    property: "margin",
+    value: {
+      type: "Value",
+      children: [
+        {
+          type: "Dimension",
+          value: "0",
+          unit: "px",
+          start: 43,
+          end: 46,
+        },
+        {
+          type: "WhiteSpace",
+          loc: null,
+          value: " ",
+        },
+        {
+          type: "Dimension",
+          value: "5",
+          unit: "px",
+          start: 47,
+          end: 50,
+        },
+        {
+          type: "WhiteSpace",
+          loc: null,
+          value: " ",
+        },
+        {
+          type: "Dimension",
+          value: "10",
+          unit: "px",
+          start: 51,
+          end: 55,
+        },
+        {
+          type: "WhiteSpace",
+          loc: null,
+          value: " ",
+        },
+        {
+          type: "Dimension",
+          value: "15",
+          unit: "px",
+          start: 56,
+          end: 60,
+        },
+      ],
+      start: 42,
+      end: 60,
+    },
+    start: 35,
+    end: 60,
+  };
+
+  it("should parse it correctly", function () {
+    expect(getDeclaration(ast)).toBe("margin:0px 5px 10px 15px;");
+  });
+});
+
+describe("when given a declaration that uses rgb() as its value", function () {
+  const ast = {
+    type: "Declaration",
+    important: false,
+    property: "box-shadow",
+    value: {
+      type: "Value",
+      children: [
+        {
+          type: "Number",
+          value: "0",
+          start: 47,
+          end: 48,
+        },
+        {
+          type: "WhiteSpace",
+          loc: null,
+          value: " ",
+        },
+        {
+          type: "Number",
+          value: "0",
+          start: 49,
+          end: 50,
+        },
+        {
+          type: "WhiteSpace",
+          loc: null,
+          value: " ",
+        },
+        {
+          type: "Dimension",
+          value: "2",
+          unit: "px",
+          start: 51,
+          end: 54,
+        },
+        {
+          type: "WhiteSpace",
+          loc: null,
+          value: " ",
+        },
+        {
+          type: "Number",
+          value: "0",
+          start: 55,
+          end: 56,
+        },
+        {
+          type: "WhiteSpace",
+          loc: null,
+          value: " ",
+        },
+        {
+          type: "Function",
+          name: "rgb",
+          children: [
+            {
+              type: "Number",
+              value: "47",
+              start: 61,
+              end: 63,
+            },
+            {
+              type: "WhiteSpace",
+              loc: null,
+              value: " ",
+            },
+            {
+              type: "Number",
+              value: "52",
+              start: 64,
+              end: 66,
+            },
+            {
+              type: "WhiteSpace",
+              loc: null,
+              value: " ",
+            },
+            {
+              type: "Number",
+              value: "61",
+              start: 67,
+              end: 69,
+            },
+            {
+              type: "WhiteSpace",
+              loc: null,
+              value: " ",
+            },
+            {
+              type: "Operator",
+              value: "/",
+              start: 70,
+              end: 71,
+            },
+            {
+              type: "WhiteSpace",
+              loc: null,
+              value: " ",
+            },
+            {
+              type: "Percentage",
+              value: "8",
+              start: 72,
+              end: 74,
+            },
+          ],
+          start: 57,
+          end: 75,
+        },
+      ],
+      start: 46,
+      end: 75,
+    },
+    start: 35,
+    end: 75,
+  };
+  it("should parse it correctly", function () {
+    expect(getDeclaration(ast)).toBe(
+      "box-shadow:0 0 2px 0 rgb(47 52 61 / 8%);"
+    );
+  });
+});
+
+describe("when given a declaration that uses var() as its value", function () {
+  const ast = {
+    type: "Declaration",
+    important: false,
+    property: "color",
+    value: {
+      type: "Value",
+      children: [
+        {
+          type: "Function",
+          name: "var",
+          children: [
+            {
+              type: "Identifier",
+              name: "--highlight",
+              start: 46,
+              end: 57,
+            },
+          ],
+          start: 42,
+          end: 58,
+        },
+      ],
+      start: 41,
+      end: 58,
+    },
+    start: 35,
+    end: 58,
+  };
+  it("should parse it correctly", function () {
+    expect(getDeclaration(ast)).toBe("color:var(--highlight);");
+  });
+});

src/tokenizer.js

@@ -11,7 +11,7 @@ const tokenizeRules = (
   let generatedClassList = {};
   for (const declarationNode of rule.block.children) {
     const declaration = getDeclaration(declarationNode);
-
+    //  console.log('check declaration', declaration)
     if (!declarationCache[relatedAtRule]) {
       declarationCache[relatedAtRule] = {};
     }

src/tokenizer.spec.js

@@ -13,12 +13,13 @@ describe("when given a javascript expression as class attribute", function () {
 
   const filename = "index.svelte";
 
+  const classCache = {};
+  const declarationCache = {};
+  const tokenizer = createTokenizer(classCache, declarationCache);
+  const ast = parse(code, { filename });
+  tokenizer.generateToken(ast.css, filename);
+
   it("should fill the class cache correctly", function () {
-    const classCache = {};
-    const declarationCache = {};
-    const tokenizer = createTokenizer(classCache, declarationCache);
-    const ast = parse(code, { filename });
-    tokenizer.generateToken(ast.css, filename);
     expect(classCache).toStrictEqual({
       "index.svelte": { active: { a: true } },
     });