@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
@nchevobbe pointed out on slack that our CSS autocomplete in the play editor lacks some values:
In this case
inline-size/sizeforcontainer-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:
The
defineCSSCompletionSourcefromcodemirror/lang-cssmay be useful instead of having to define our own completion logic.Bonus points for:
codemirror/lang-csscompletions out to save some bytes