Stylus used in a vue/htmlmixed CM mode resolves to unknown Brackets language

[opl-]

Description

Defining a Brackets language for Vue components using the vue mode for CodeMirror results in the language being resolved to an unknown language for the Brackets code hinter when using Stylus in the style tag. This breaks potential Stylus code hint providers.

From what I understand, the issue seems to be with the Brackets language for Stylus being defined as if Stylus was a variation of the CSS mode (a MIME mode) in CodeMirror, when in reality it is completely separate. This results in the CodeMirror mode that Brackets tries to resolve being stylus, while due to this part of LanguageManager the Stylus Brackets language is mapped to the text/x-styl CodeMirror mode.

I managed to find two possible solutions:

• Adding a mapping from text/x-styl to stylus here in LanguageManager like this:

var stylus = getLanguage("stylus");
_setLanguageForMode("stylus", stylus);

• Changing the mode for Stylus in language/languages.json from ["stylus", "text/x-styl"] to "stylus"

CodeMirror defines the Vue component mode here using the htmlmixed mode with a tags option.

Steps to Reproduce

1. Define a language using the vue mode for CodeMirror by running the code below

LanguageManager.defineLanguage('vue', {
    name: 'Vue Component',
    mode: 'vue',
    fileExtensions: ['vue'],
    blockComment: ['<!--', '-->']
});

2. Create a .vue file with a <style lang="stylus"> tag

<style lang="stylus">
.example {
    font-size: 20px;
}
</style>

3. Type anything in the style tag
4. An error should appear in the console

Expected behavior: The code hints should work (though Brackets currently doesn't show any code hints for Stylus files).

Actual behavior: An error is logged.

Versions

Windows 7 64 bit, Brackets 1.10.0

[petetnt]

👍 Nice work @opl-, PRs very welcome

[petetnt]

Note to self: The option 1. can also be used to overriding JavaScript mode with jsx mode.