Snippets and Expansions not working in alternate style languages (SCSS, Sass, Less)

[shshaw]

Related to #14: I have the new syntax setup in place. Snippets work correctly, but the snippet autocompletions are not showing up for Sass and SCSS. CSS still shows them fine.

Sass:
https://user-images.githubusercontent.com/777155/233471378-15fb816b-5caf-4134-b67c-871e7b37dd9b.mov

Regular CSS:

I haven't tested the other languages, but I'll provide more details if I do.

Worth noting that I'm using the just released https://github.com/codemirror/lang-sass package via the latest version of https://github.com/codemirror/language-data

[shshaw]

Updating this to say that snippets and expansions don't seem to be working in SCSS, Sass and LESS anymore, not just the preview.

I'm setting the syntax based on the EmmetKnownSyntax so it should be resolving to the correct internal value.

[sergeche]

That’s a bit weird one: you should explicitly provide emmetCompletionSource extension as autocomplete option of SASS lang. Your config may look like this:

import { sass, sassLanguage } from '@codemirror/lang-sass';
import { emmetCompletionSource, EmmetKnownSyntax.scss } from '@emmetio/codemirror6-plugin';

new EditorView({
    doc: text,
    extensions: [
        basicSetup,
        sass(),
        sassLanguage.data.of({
            // configure Emmet as completion provider for SASS lang
            autocomplete: emmetCompletionSource
        }),
        Prec.high(abbreviationTracker({
            // don’t forget to explicitly specify current syntax to Emmet
            syntax: EmmetKnownSyntax.scss,
            config: {
                stylesheet: {
                    snippets: {
                        my: 'padding: 10px;'
                    }
                }
            }
        })),
    ]
});

[sergeche]

Here’s minimal setup for JSX (tested it in index.html of current repo):

import { EditorView, basicSetup } from 'codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { Prec } from '@codemirror/state';

import { abbreviationTracker, EmmetKnownSyntax } from './plugin';

const text = `function () {\n\t\n}`;

new EditorView({
    doc: text,
    extensions: [
        basicSetup,
        javascript(),
        Prec.high(abbreviationTracker({
            syntax: EmmetKnownSyntax.jsx,
            autocompleteTab: ['stylesheet'],
            config: {
                markup: {
                    snippets: {
                        'foo': 'ul.foo>li.bar+li.baz'
                    }
                },
                stylesheet: {
                    options: {
                        'stylesheet.strictMatch': true
                    }
                },
            }
        })),
    ],
    parent: document.querySelector<HTMLDivElement>('#app')!
});

And it works as follows (note that in JSX mode you must precede abbreviations with <):

Another note: preview is displayed for complex abbreviations only (e.g. the one that exapnds into multiple elements). It displays underline to indicate that abbreviation was matched and tracked, e.g. pressing Tab will expand it