fix: generate text-wrap-style: auto (#4321)

Fixes #4218

Turned out text-wrap-style got removed but supported alternative
text-wrap: wrap was not generated instead.
Now all should work.

Also removed invalid text-wrap-mode: auto

Author: TrySound

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

@@ -366,6 +366,11 @@ const keywordValues = (() => {
   const result = { ...customData.keywordValues };
 
   for (const property in filteredProperties) {
+    const key = normalizePropertyName(property);
+    // prevent merging with custom keywords
+    if (result[key]) {
+      continue;
+    }
     const keywords = new Set<string>();
     walkSyntax(
       filteredProperties[property as keyof typeof filteredProperties].syntax,
@@ -390,7 +395,6 @@ const keywordValues = (() => {
     }
 
     if (keywords.size !== 0) {
-      const key = normalizePropertyName(property);
       result[key] = [...(result[key] ?? []), ...keywords];
     }
   }

packages/css-data/src/__generated__/keyword-values.ts

@@ -82,8 +82,16 @@ keywordValues.listStyleType = [
   "georgian",
   "trad-chinese-informal",
   "kannada",
+  "none",
+  "initial",
+  "inherit",
+  "unset",
 ];
 
+// removed auto from keywords
+// fixed in webref btw
+keywordValues.textWrapMode = ["wrap", "nowrap", "initial", "inherit", "unset"];
+
 export const customLonghandPropertyNames = [
   "boxShadowOffsetX",
   "boxShadowOffsetY",

packages/css-data/src/custom-data.ts

@@ -272,6 +272,18 @@ test("merge text-wrap-mode and text-wrap-style into text-wrap", () => {
     ["white-space", "normal"],
     ["text-wrap", "pretty"],
   ]);
+  expect(
+    mergeKeywords([
+      ["text-wrap-mode", "wrap"],
+      ["text-wrap-style", "auto"],
+    ])
+  ).toEqual([
+    ["white-space", "normal"],
+    ["text-wrap", "wrap"],
+  ]);
+  expect(mergeKeywords([["text-wrap-style", "auto"]])).toEqual([
+    ["text-wrap", "wrap"],
+  ]);
 });
 
 test("merge text-wrap with vars", () => {

packages/css-engine/src/core/merger.test.ts

@@ -94,6 +94,9 @@ const mergeWhiteSpaceAndTextWrap = (styleMap: StyleMap) => {
   if (collapse === "break-spaces") {
     styleMap.set("white-space", { type: "keyword", value: "break-spaces" });
   }
+  if (style === "auto") {
+    styleMap.set("text-wrap", modeValue ?? { type: "keyword", value: "wrap" });
+  }
   if (style === "balance" || style === "stable" || style === "pretty") {
     styleMap.set("text-wrap", { type: "keyword", value: style });
   }