refactor: upgrade to csstree v3 (#5455)

The new version is aware of modern colors and other new css features.

Author: TrySound

@types/css-tree.d.ts

@@ -1,4 +1,4 @@
-import { generate, walk } from "css-tree";
+import { generate, walk, List, type CssNode } from "css-tree";
 import type { HtmlTags } from "html-tags";
 import {
   camelCaseProperty,
@@ -294,13 +294,14 @@ const substituteVars = (
         enter(node, item, list) {
           if (node.type === "Function" && node.name === "var") {
             const varValue = parseCssVar(node);
-            if (varValue) {
+            if (varValue && item) {
               const newValue = mapper(varValue);
-              list.replace(
+              list?.replace(
                 item,
-                node.children.createItem({
+                List.createItem<CssNode>({
                   type: "Raw",
                   value: toValue(newValue),
+                  loc: null,
                 })
               );
             }

apps/builder/app/shared/style-object-model.ts

@@ -88,7 +88,7 @@
     "change-case": "^5.4.4",
     "colord": "^2.9.3",
     "cookie": "^1.0.1",
-    "css-tree": "^2.3.1",
+    "css-tree": "^3.1.0",
     "debug": "^4.3.7",
     "downshift": "^6.1.7",
     "entrijs": "^0.0.11",

apps/builder/package.json

@@ -36,7 +36,6 @@
     "@storybook/addon-controls": "^8.6.4",
     "@storybook/react": "^8.6.4",
     "@storybook/react-vite": "^8.6.4",
-    "@types/css-tree": "^2.3.1",
     "@types/node": "^22.13.10",
     "@types/react": "^18.2.70",
     "esbuild": "^0.25.3",
@@ -85,8 +84,6 @@
     },
     "patchedDependencies": {
       "@stitches/[email protected]": "patches/@[email protected]",
-      "[email protected]": "patches/[email protected]",
-      "@types/[email protected]": "patches/@[email protected]",
       "@radix-ui/[email protected]": "patches/@[email protected]",
       "@remix-run/dev": "patches/@remix-run__dev.patch"
     }

package.json

@@ -16,7 +16,6 @@
     "css-to-ws": "./bin/css-to-ws.ts"
   },
   "devDependencies": {
-    "@types/css-tree": "^2.3.1",
     "@webstudio-is/tsconfig": "workspace:*",
     "html-tags": "^4.0.0",
     "mdn-data": "2.23.0",
@@ -36,7 +35,7 @@
     "@webstudio-is/css-engine": "workspace:*",
     "change-case": "^5.4.4",
     "colord": "^2.9.3",
-    "css-tree": "^2.3.1",
+    "css-tree": "^3.1.0",
     "openai": "^3.2.1",
     "p-retry": "^6.2.1",
     "warn-once": "^0.1.1"

packages/css-data/package.json

@@ -219,6 +219,7 @@ export const parseCssVar = (node: FunctionNode): undefined | VarValue => {
   const [name, _comma, ...fallback] = node.children;
   const fallbackString = generate({
     type: "Value",
+    loc: null,
     children: new List<CssNode>().fromArray(fallback),
   }).trim();
   if (name.type === "Identifier") {
@@ -380,7 +381,7 @@ const parseLiteral = (
         type: "function",
         args: parseShadow(
           node.children.toArray(),
-          generate({ type: "Value", children: node.children })
+          generate({ type: "Value", loc: null, children: node.children })
         ),
         name: node.name,
       };
@@ -469,6 +470,7 @@ export const parseCssValue = (
       value: splitRepeated(nodes).map((nodes) => {
         const value = generate({
           type: "Value",
+          loc: null,
           children: new List<CssNode>().fromArray(nodes),
         });
         const parsed = parseCssValue(property, value, false) as LayerValueItem;
@@ -506,6 +508,7 @@ export const parseCssValue = (
         }
         return generate({
           type: "Value",
+          loc: null,
           children: new List<CssNode>().fromArray(nodes),
         });
       }),