Generate CSS autocompletions from webref

@nchevobbe pointed out on slack that our CSS autocomplete in the play editor lacks some values:

In this case inline-size / size for container-type.

The autocomplete comes from https://code.haverbeke.berlin/codemirror/lang-css/src/branch/main/src/complete.ts, which is an outdated hard-coded list of values.

We already parse https://github.com/w3c/webref (albeit in rari) to get a valid list of values for each css property, e.g: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/container-type#formal_syntax

Perhaps we should generate our own autocompletions using webref to get the most up-to-date data - and data consistent with what we display on MDN.

It feels like there's a few feasible ways of doing this, which need further investigation for tradeoffs:

• Create a webref -> autocomplete conversion script, and effectively re-implement https://github.com/codemirror/lang-css/blob/main/src/complete.ts with webref-sourced values
• Provide an autocomplete source which loads webref at runtime, and imports the necessary parts
• Create JSON artefacts while generating our formal syntax for each page, and load them async for autocomplete

The defineCSSCompletionSource from codemirror/lang-css may be useful instead of having to define our own completion logic.

Bonus points for:

• Implementing as a library we can publish
  • Or even contributing upstream, so everyone benefits with no work on their part
• Making it possible to tree-shake the existing codemirror/lang-css completions out to save some bytes

Start by reading CodeMirror's lang-css src/complete.ts and the defineCSSCompletionSource entry point, then inspect how rari parses webref. Compare the feasible conversion, runtime-loading, and generated-artefact approaches. Done means the play editor exposes current webref-backed CSS values such as inline-size and size for container-type, consistently with MDN.