[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 #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[bot]]

✅ Deploy Preview for sass-lang ready!

Name	Link
🔨 Latest commit	2a46d1a409a62af4acce82eeda7de3a0053947ee
🔍 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!