[Playground] Autocomplete

[jamesnw]

Adds Sass-specific autocomplete to the Playground, specifically-

• At-rules, like @use, @debug, etc. (CSS at rules will be added to the @codemirror/lang-css package in https://github.com/codemirror/lang-css/releases/tag/6.3.0 via Bump @codemirror/lang-css from 6.2.1 to 6.3.0 #1172, not here)
• Built in module imports- @use "sass:math", for instance
• Built in module namespaces only if module is imported- math
• Built in module variables only if module is imported- math.$pi
• Built in module functions only if module is imported- math.clamp

[netlify]

✅ Deploy Preview for sass-lang ready!

Name	Link
🔨 Latest commit	2a46d1a
🔍 Latest deploy log	https://app.netlify.com/sites/sass-lang/deploys/66eacef0b6238d00092d635b
😎 Deploy Preview	https://deploy-preview-1166--sass-lang.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jamesnw]

@nex3 I have a few options for getting the current list of module functions and variables. Essentially, I'm able to generate a list of the values using Sass, #{map.keys(meta.module-functions("math"))};. To extract it from there, because this will be done in Node on build, I can't use DOM methods to get the values, which would have made this simpler. A few other options-

1. Use @debug to emit the value to a custom Logger (requires a Sass compilation (or two) per module, but simple parsing)
2. Use regex to parse the values from CSS. (simplest, but most prone to break) This is the current implementation
3. Parse the CSS using csstree or @csstools/css-parser-algorithms which is already installed as a dependency of stylelint. (Most robust, but potentially overengineered)

Do you have any preference on this, or other ideas? I didn't see a clear way of parsing this from the existing documentation.

[nex3]

Can you pass the result of map.keys() to a custom function? That seems like the best way to get a JS data structure out of Sass.

[jamesnw]

Can you pass the result of map.keys() to a custom function? That seems like the best way to get a JS data structure out of Sass.

That worked well!

[nex3]

Please document members

[nex3]

Would it be cleaner to make this a Record<string, ModuleDefinition> with the module names as keys? Then instead of some Array.prototype.reduce stuff, you could use a simpler mapRecord<I, O>(record: Record<T, I>, mapper: (I) => O): Record<T, O> utility function.

[jamesnw]

Potentially it could be cleaner in the cases where I'm reducing things into Record<ModuleName, CompletionSource>, but the metadata is being used in other ways as well. I'm generally a fan of keeping data in flat arrays of objects, as it tends to be the most versatile.

[nex3]

Probably for a follow-up PR, but it's worth thinking about ways to extract the documentation for variables and functions from source/documentation/modules/*.md so we can include them in these autocompletions.