Playground autocomplete #77

jamesnw · 2024-08-08T20:16:12Z

Description

Adds Sass-specific Autocomplete

Related Issue(s)

#78

Steps to test/reproduce

Go to Playground, type in Sass-specific words.

At-rules, like @use, @debug, etc.
Built in module names- @use "sass:math", for instance
Built in module variables only if module is imported- math.$pi
Built in module functions only if module is imported- math.clamp

Miriam check functionality
Stacy check functionality
Jonny review code

netlify · 2024-08-08T20:16:27Z

✅ Deploy Preview for sass-site-oddbird ready!

Name	Link
🔨 Latest commit	`b2937f2`
🔍 Latest deploy log	https://app.netlify.com/sites/sass-site-oddbird/deploys/66da0f36690acb00089d7199
😎 Deploy Preview	https://deploy-preview-77--sass-site-oddbird.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 · 2024-09-03T16:06:14Z

@mirisuzanne and @stacyk - could you try out the Autocomplete here and see if it works well and as expected?

mirisuzanne

At-rules: works great
Built in module names: only works with e.g. "sass:math", not 'sass:math'. Should probably work with single-quotes as well?
Built in variables: works great
Built in functions: works great

jamesnw · 2024-09-04T14:16:33Z

2. Built in module names: only works with e.g. "sass:math", not 'sass:math'. Should probably work with single-quotes as well?

Good catch! Fixed.

jgerigmeyer

@jamesnw Works great! Obviously it would be ideal if we could get some of these values (e.g. at-rules, modules, etc) dynamically from Sass itself. I assume you looked into that and they're not being exposed currently? It might even be worth mentioning that to Natalie to see what she thinks.

jgerigmeyer · 2024-09-04T18:59:30Z

source/assets/js/playground/autocomplete.ts

+const atRuleKeywords = [
+  'use',
+  'forward',
+  'import',
+  'mixin',
+  'include',
+  'function',
+  'extend',
+  'error',
+  'warn',
+  'debug',
+  'at-root',
+  'if',
+  'else',
+  'each',
+  'for',
+  'while',
+];


Do we want to add @media, @supports, and @keyframes here? And maybe also add autocomplete for other CSS at-rules?

I think css at-rules would be good to consider supporting. Hopefully there's a clear enough division between that and auto-completing css properties/values, so this doesn't become a very slippery scope slope.

I think that probably should go upstream into @codemirror/lang-css- that shouldn't be too challenging, I don't think.

We are already getting auto-completion of css properties and values from that package.

Makes sense -- add a comment or file a new issue so we don't lose track?

jgerigmeyer · 2024-09-04T19:11:58Z

source/assets/js/playground/autocomplete.ts

+
+const builtinModules: ModuleDefinition[] = [
+  {
+    name: 'color',


Is there a reason we're not including the color functions (e.g. adjust, scale, etc) here?

I'm holding out hope there's a way to get this from Sass directly, as this is a long list, and will be changing once the CSS Color 4 changes are made in Sass.

Makes sense -- add a comment so we don't forget?

source/assets/js/playground/autocomplete.ts

…complete

stacyk · 2024-09-05T17:27:51Z

@jamesnw Will this story (or any future stories) include autocompleting CSS properties? For instance, in the SCSS panel, if I type

.foo {
  di

I was expecting to see display as an option but instead I only see html elements

jamesnw · 2024-09-05T17:33:00Z

@jamesnw Will this story (or any future stories) include autocompleting CSS properties? For instance, in the SCSS panel, if I type
.foo {
  di
I was expecting to see display as an option but instead I only see html elements

The issue is the missing ; on the first line is messing with the parser, and it can't determine the context-

stacyk · 2024-09-05T17:41:05Z

@jamesnw I'm not sure the full scope of this story or if it is even unexpected, but I noticed when I type @use and select sass:math but realize a second later I wanted sass:maps, if I delete a few characters from the end it won't give me the same options. After doing a bit more testing I see I can't delete that final quote. Is that the expected user behavior? I thought it should auto complete with sass:* suggestions without that final quote.

stacyk · 2024-09-05T17:42:06Z

@jamesnw Will this story (or any future stories) include autocompleting CSS properties? For instance, in the SCSS panel, if I type
.foo {
  di
I was expecting to see display as an option but instead I only see html elements
The issue is the missing ; on the first line is messing with the parser, and it can't determine the context-

I'm literally LOL

jamesnw · 2024-09-05T17:59:28Z

@jamesnw I'm not sure the full scope of this story or if it is even unexpected, but I noticed when I type @use and select sass:math but realize a second later I wanted sass:maps, if I delete a few characters from the end it won't give me the same options. After doing a bit more testing I see I can't delete that final quote. Is that the expected user behavior? I thought it should auto complete with sass:* suggestions without that final quote.

This is another instance of confusing the parser. Without the end quote, the parser doesn't know it's a StringLiteral, and thinks it's a pseudoclass. I pushed a change that should address it.

stacyk

The update you made for the autocomplete without the final quote works great!

jgerigmeyer

👏

jgerigmeyer · 2024-09-05T19:43:28Z

source/assets/js/playground/editor-setup.ts

@@ -11,7 +11,7 @@ import {
  historyKeymap,
  indentWithTab,
 } from '@codemirror/commands';
-import {css as langCss} from '@codemirror/lang-css';
+import {css as langCss, cssCompletionSource} from '@codemirror/lang-css';


Unused import?

Suggested change

import {css as langCss, cssCompletionSource} from '@codemirror/lang-css';

import {css as langCss} from '@codemirror/lang-css';

jgerigmeyer · 2024-09-05T19:44:12Z

source/assets/js/playground/autocomplete.ts

+const atRuleKeywords = [
+  'use',
+  'forward',
+  'import',
+  'mixin',
+  'include',
+  'function',
+  'extend',
+  'error',
+  'warn',
+  'debug',
+  'at-root',
+  'if',
+  'else',
+  'each',
+  'for',
+  'while',
+];


Makes sense -- add a comment or file a new issue so we don't lose track?

jgerigmeyer · 2024-09-05T19:44:24Z

source/assets/js/playground/autocomplete.ts

+
+const builtinModules: ModuleDefinition[] = [
+  {
+    name: 'color',


Makes sense -- add a comment so we don't forget?

jamesnw · 2024-09-05T20:19:39Z

Moving to sass repo- sass#1166

jamesnw added 2 commits August 5, 2024 07:56

Initial autocomplete

4d72eb7

Add more built in module values

f5dbee6

jamesnw linked an issue Aug 8, 2024 that may be closed by this pull request

Playground- autocomplete #78

Closed

jamesnw assigned mirisuzanne and stacyk Sep 3, 2024

mirisuzanne self-requested a review September 3, 2024 22:18

mirisuzanne approved these changes Sep 3, 2024

View reviewed changes

jamesnw added 2 commits September 4, 2024 10:00

Merge branch 'main' into playground-autocomplete

65f116f

Simplify quotes in module completion

cc11eff

jamesnw assigned jgerigmeyer Sep 4, 2024

jgerigmeyer self-requested a review September 4, 2024 15:34

jgerigmeyer reviewed Sep 5, 2024

View reviewed changes

jgerigmeyer removed their assignment Sep 5, 2024

Merge branch 'main' of github.com:sass/sass-site into playground-auto…

b58c1bb

…complete

Address review

b699ec7

stacyk approved these changes Sep 5, 2024

View reviewed changes

jgerigmeyer approved these changes Sep 5, 2024

View reviewed changes

Add comments

b2937f2

jgerigmeyer approved these changes Sep 5, 2024

View reviewed changes

jamesnw closed this Sep 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Playground autocomplete #77

Playground autocomplete #77

jamesnw commented Aug 8, 2024 •

edited by stacyk

Loading

netlify bot commented Aug 8, 2024 •

edited

Loading

jamesnw commented Sep 3, 2024

mirisuzanne left a comment

jamesnw commented Sep 4, 2024

jgerigmeyer left a comment

jgerigmeyer Sep 4, 2024

mirisuzanne Sep 5, 2024

jamesnw Sep 5, 2024

jgerigmeyer Sep 5, 2024

jgerigmeyer Sep 4, 2024

jamesnw Sep 5, 2024

jgerigmeyer Sep 5, 2024

stacyk commented Sep 5, 2024

jamesnw commented Sep 5, 2024

stacyk commented Sep 5, 2024

stacyk commented Sep 5, 2024

jamesnw commented Sep 5, 2024

stacyk left a comment

jgerigmeyer left a comment

jgerigmeyer Sep 5, 2024 •

edited

Loading

jgerigmeyer Sep 5, 2024

jgerigmeyer Sep 5, 2024

jamesnw commented Sep 5, 2024

	import {css as langCss, cssCompletionSource} from '@codemirror/lang-css';
	import {css as langCss} from '@codemirror/lang-css';

Playground autocomplete #77

Playground autocomplete #77

Conversation

jamesnw commented Aug 8, 2024 • edited by stacyk Loading

Description

Related Issue(s)

Steps to test/reproduce

netlify bot commented Aug 8, 2024 • edited Loading

✅ Deploy Preview for sass-site-oddbird ready!

jamesnw commented Sep 3, 2024

mirisuzanne left a comment

Choose a reason for hiding this comment

jamesnw commented Sep 4, 2024

jgerigmeyer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stacyk commented Sep 5, 2024

jamesnw commented Sep 5, 2024

stacyk commented Sep 5, 2024

stacyk commented Sep 5, 2024

jamesnw commented Sep 5, 2024

stacyk left a comment

Choose a reason for hiding this comment

jgerigmeyer left a comment

Choose a reason for hiding this comment

jgerigmeyer Sep 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jamesnw commented Sep 5, 2024

jamesnw commented Aug 8, 2024 •

edited by stacyk

Loading

netlify bot commented Aug 8, 2024 •

edited

Loading

jgerigmeyer Sep 5, 2024 •

edited

Loading