diff --git a/kumascript/src/lib/css-syntax.ts b/kumascript/src/lib/css-syntax.ts
index fc6110aee4ab..d512bb3d0834 100644
--- a/kumascript/src/lib/css-syntax.ts
+++ b/kumascript/src/lib/css-syntax.ts
@@ -96,7 +96,7 @@ export async function getCSSSyntax(
   };
 
   // get the contents of webref
-  const parsedWebRef = (await webRefData.listAll()) as unknown;
+  const parsedWebRef = await getParsedWebRef();
 
   // get all the value syntaxes
   let valuespaces = {};
@@ -215,18 +215,19 @@ export async function getCSSSyntax(
         if (itemName.endsWith("_value")) {
           itemName = itemName.replace("_value", "");
         }
-        itemName = `<${itemName}>`;
         // not all types have an entry in the syntax
         if (valuespaces[itemName]) {
           itemSyntax = valuespaces[itemName].value;
         }
+        itemName = `<${itemName}>`;
         break;
       case "css-function":
-        itemName = `<${itemName}()>`;
+        itemName = `${itemName}()`;
         // not all functions have an entry in the syntax
         if (valuespaces[itemName]) {
           itemSyntax = valuespaces[itemName].value;
         }
+        itemName = `<${itemName}>`;
         break;
       case "css-at-rule":
         itemSyntax = getAtRuleSyntax(itemName);
@@ -289,7 +290,8 @@ export async function getCSSSyntax(
         const span = `<span class="token property">${encoded}</span>`;
         // If the type is not included in the syntax, or is in "typesToLink",
         // link to its dedicated page (don't expand it)
-        if (valuespaces[name]?.value && !typesToLink.includes(name)) {
+        const key = name.replace(/(^<|>$)/g, "");
+        if (valuespaces[key]?.value && !typesToLink.includes(name)) {
           return span;
         } else {
           let slug;
@@ -467,7 +469,7 @@ export async function getCSSSyntax(
       // and then get the types in those syntaxes
       constituentSyntaxes = [];
       for (const constituent of allConstituents.slice(oldConstituentsLength)) {
-        const constituentSyntaxEntry = valuespaces[`<${constituent}>`];
+        const constituentSyntaxEntry = valuespaces[constituent];
 
         if (constituentSyntaxEntry?.value) {
           constituentSyntaxes.push(constituentSyntaxEntry.value);
@@ -495,11 +497,8 @@ export async function getCSSSyntax(
 
     // and write each one out
     for (const type of types) {
-      if (valuespaces[`<${type}>`] && valuespaces[`<${type}>`].value) {
-        output += renderSyntax(
-          `&lt;${type}&gt;`,
-          valuespaces[`<${type}>`].value
-        );
+      if (valuespaces[type] && valuespaces[type].value) {
+        output += renderSyntax(`&lt;${type}&gt;`, valuespaces[type].value);
         output += "<br/>";
       }
     }
@@ -520,3 +519,80 @@ export async function getCSSSyntax(
   }
   return output;
 }
+
+async function getParsedWebRef(): Promise<WebRefObjectData> {
+  const rawItems = await getRawWebRefData();
+
+  return Object.fromEntries(
+    Object.entries(rawItems).map(
+      ([name, { spec, properties, atrules, values }]) => [
+        name,
+        {
+          spec,
+          properties: byName(properties),
+          atrules: byName(atrules),
+          valuespaces: byName(values),
+        },
+      ]
+    )
+  );
+}
+
+function byName<T extends Named>(items: T[]): Record<string, T> {
+  return Object.fromEntries(
+    items.map((item) => [item.name.replace(/(^<|>$)/g, ""), item])
+  );
+}
+
+async function getRawWebRefData(): Promise<WebRefArrayData> {
+  return (await webRefData.listAll()) as WebRefArrayData;
+}
+
+// @webref/css v5 interfaces.
+
+type WebRefObjectData = Record<string, WebRefObjectDataItem>;
+interface WebRefObjectDataItem {
+  spec: WebRefSpecEntry;
+  properties: Record<string, WebRefPropertyEntry>;
+  atrules: Record<string, WebRefAtruleEntry>;
+  valuespaces: Record<string, WebRefValuespaceEntry>;
+}
+
+// @webref/css v6 interfaces.
+
+type WebRefArrayData = Record<string, WebRefArrayDataItem>;
+interface WebRefArrayDataItem {
+  spec: WebRefSpecEntry;
+  properties: (WebRefPropertyEntry & Named)[];
+  atrules: (WebRefAtruleEntry & Named)[];
+  values: (WebRefValuespaceEntry & Named)[];
+}
+
+interface Named {
+  name: string;
+}
+
+// Common interfaces.
+
+interface WebRefSpecEntry {
+  title: string;
+  url: string;
+}
+
+interface WebRefPropertyEntry {
+  value: string;
+  newValues: string;
+}
+
+interface WebRefAtruleEntry {
+  descriptors: {
+    name: string;
+    value: string;
+  }[];
+  value: string;
+}
+
+interface WebRefValuespaceEntry {
+  prose?: string;
+  value?: string;
+}
diff --git a/package.json b/package.json
index 36a66854bc1a..2155a4dd132a 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "@sentry/node": "^7.68.0",
     "@use-it/interval": "^1.0.0",
     "@vscode/ripgrep": "^1.15.5",
-    "@webref/css": "^5.4.4",
+    "@webref/css": "^6.0.0",
     "accept-language-parser": "^1.5.0",
     "async": "^3.2.4",
     "chalk": "^5.3.0",
diff --git a/yarn.lock b/yarn.lock
index 375d9ca30431..a402530c00ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3503,10 +3503,10 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.5.tgz#325db42395cd49fe6c14057f9a900e427df8810e"
   integrity sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==
 
-"@webref/css@^5.4.4":
-  version "5.4.4"
-  resolved "https://registry.yarnpkg.com/@webref/css/-/css-5.4.4.tgz#91cd765acc1cd92587b2099adb5d2f09608a608c"
-  integrity sha512-x+WAreAVNfSaLWBux9y/9QTKMDpiUbcZZKh72JOFVtm7ZQqmi5/m4YlbYNCu+GjCvuMWOtgwiBx7qf7OvWWykA==
+"@webref/css@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@webref/css/-/css-6.0.0.tgz#8b1f5ea55b146cb46845dfdd693f3a4d0132c782"
+  integrity sha512-+2ikDvbHj+V5UIf5j595Ofg6USkev05yTMz6Ec9ysftWiPUNfKGh3cKx7Pox4xcAfnXzThETrgQtJwzZLhrT4Q==
 
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"