feat: support svg properties in style panel (#5332)

Ref #5258

Newer mdn-data contains all stylable svg properties (they finally got
through some documentation and implementation process).

Tweaked all experimental stuff and ditched obsolete properties.

<img width="286" height="538" alt="image"
src="https://github.com/user-attachments/assets/1e579be0-0a12-4013-ab04-09d5e008aeed"
/>

Author: TrySound

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-keyframes.tsx

@@ -67,7 +67,7 @@ const OffsetInput = ({
       intermediateValue={intermediateValue}
       styleSource="default"
       /* same as offset has 0 - 100% */
-      property={"font-stretch"}
+      property={"opacity"}
       value={
         value !== undefined
           ? { type: "unit", value: roundOffset(value), unit: "%" }

apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts.test.ts

@@ -49,7 +49,7 @@ describe("Parse intermediate or invalid value without math evaluation", () => {
   });
 
   test("fallback to % if px is not supported", () => {
-    const result = parseIntermediateOrInvalidValue("font-stretch", {
+    const result = parseIntermediateOrInvalidValue("opacity", {
       type: "intermediate",
       value: "10",
     });

packages/css-data/bin/mdn-data.ts

@@ -235,25 +235,18 @@ const writeToFile = (fileName: string, constant: string, data: unknown) => {
 };
 
 const supportedExperimentalProperties = [
-  "appearance",
-  "aspect-ratio",
+  "field-sizing",
   "text-size-adjust",
-  "-webkit-line-clamp",
-  "background-position-x",
-  "background-position-y",
   "-webkit-tap-highlight-color",
   "-webkit-overflow-scrolling",
-  "transition-behavior",
-  "offset-position",
-  // https://github.com/mdn/data/pull/759
-  // offset-anchor is standard according to mdn.
-  // But the mdn_url is missing from its config which is skipping othe starndard check.
-  "offset-anchor",
 ];
 
 // Properties we don't support in this form.
 const unsupportedProperties = [
   "--*",
+  "-webkit-text-fill-color",
+  "-webkit-text-stroke-color",
+  "-webkit-text-stroke-width",
   // shorthand properties
   "all",
   "font-synthesis",
@@ -262,6 +255,12 @@ const unsupportedProperties = [
   "white-space",
   "text-wrap",
   "background-position",
+  "border-block-style",
+  "border-block-width",
+  "border-block-color",
+  "border-inline-style",
+  "border-inline-width",
+  "border-inline-color",
 ];
 
 type FilteredProperties = { [property: string]: Value };
@@ -334,7 +333,7 @@ const getPropertiesData = (
     const unitGroups = new Set<string>();
     walkSyntax(config.syntax, (node) => {
       if (node.type === "Type") {
-        if (node.name === "integer" || node.name === "number") {
+        if (node.name === "number-token" || node.name === "number") {
           unitGroups.add("number");
           return;
         }
@@ -374,10 +373,6 @@ const pseudoElements = Object.keys(selectors)
 
 const getKeywordValues = (filteredProperties: FilteredProperties) => {
   const result = { ...customData.keywordValues };
-  // Non-standard properties are just missing in mdn data
-  const nonStandardValues = {
-    "background-clip": ["text"],
-  };
   // https://www.w3.org/TR/css-values/#common-keywords
   const commonKeywords = ["initial", "inherit", "unset"];
 
@@ -393,13 +388,6 @@ const getKeywordValues = (filteredProperties: FilteredProperties) => {
       }
     });
 
-    if (property in nonStandardValues) {
-      for (const nonStandartKeyword of nonStandardValues[
-        property as keyof typeof nonStandardValues
-      ]) {
-        keywords.add(nonStandartKeyword);
-      }
-    }
     for (const commonKeyword of commonKeywords) {
       // Delete to add commonKeyword at the end of the set
       keywords.delete(commonKeyword);

packages/css-data/package.json

@@ -19,7 +19,7 @@
     "@types/css-tree": "^2.3.1",
     "@webstudio-is/tsconfig": "workspace:*",
     "html-tags": "^4.0.0",
-    "mdn-data": "2.8.0",
+    "mdn-data": "2.23.0",
     "vitest": "^3.1.2",
     "zod": "^3.24.2"
   },