fix(css-syntax): explicitly order specs (#11101)

* fix(css-syntax): explicitly order specs

Right now we rely on somewhat predictable ordering from readdir in
webref/css. Let's make this explicit for now.

* lint

kumascript/src/lib/css-syntax.ts

@@ -560,21 +560,38 @@ export async function getCSSSyntax(
 let parsedWebRefCache: null | Promise<WebRefObjectData> = null;
 async function getParsedWebRef(): Promise<WebRefObjectData> {
   if (!parsedWebRefCache) {
-    parsedWebRefCache = getRawWebRefData().then((rawItems) =>
-      Object.fromEntries(
-        Object.entries(rawItems).map(
-          ([name, { spec, properties, atrules, values }]) => [
-            name,
-            {
-              spec,
-              properties: byName(properties),
-              atrules: byName(atrules),
-              values: byName(values),
-            },
-          ]
-        )
-      )
-    );
+    parsedWebRefCache = getRawWebRefData().then((rawItems) => {
+      const sortedRawItems = [...Object.entries(rawItems)];
+      sortedRawItems.sort(([a], [b]) => {
+        if (a === b) {
+          return 0;
+        }
+        if (/-\d+$/.test(a) && a.replace(/-\d+$/, "") === b) {
+          return -1;
+        }
+        if (/-\d+$/.test(b) && b.replace(/-\d+$/, "") === a) {
+          return 1;
+        }
+        if (a < b) {
+          return -1;
+        }
+        if (a > b) {
+          return 1;
+        }
+        return 0;
+      });
+      return Object.fromEntries(
+        sortedRawItems.map(([name, { spec, properties, atrules, values }]) => [
+          name,
+          {
+            spec,
+            properties: byName(properties),
+            atrules: byName(atrules),
+            values: byName(values),
+          },
+        ])
+      );
+    });
   }
 
   return parsedWebRefCache;