Fix: force using stylelint when editor mode is not css

edit/lint.js

@@ -32,6 +32,18 @@ var linterConfig = {
     } : false;
   },
 
+  getName(cmLintOption) {
+    if (!cmLintOption) {
+      return null;
+    }
+    for (const linter of ['csslint', 'stylelint']) {
+      if (cmLintOption.getAnnotations === CodeMirror.lint[linter]) {
+        return linter;
+      }
+    }
+    return null;
+  },
+
   fallbackToDefaults(config, linter = prefs.get('editor.linter')) {
     if (config && Object.keys(config).length) {
       if (linter === 'stylelint') {
@@ -136,12 +148,11 @@ function initLint() {
   prefs.subscribe(['editor.linter'], updateLinter);
 }
 
-function updateLinter({immediately} = {}) {
+function updateLinter({immediately, linter = prefs.get('editor.linter')} = {}) {
   if (!immediately) {
-    debounce(updateLinter, 0, {immediately: true});
+    debounce(updateLinter, 0, {immediately: true, linter});
     return;
   }
-  const linter = prefs.get('editor.linter');
   const GUTTERS_CLASS = 'CodeMirror-lint-markers';
 
   loadLinterAssets(linter).then(updateEditors);

edit/source-editor.js

@@ -1,7 +1,7 @@
 /* global CodeMirror dirtyReporter initLint beautify showKeyMapHelp */
 /* global showToggleStyleHelp goBackToManage updateLintReportIfEnabled */
 /* global hotkeyRerouter setupAutocomplete setupOptionsExpand */
-/* global editors */
+/* global editors linterConfig updateLinter */
 
 'use strict';
 
@@ -40,9 +40,30 @@ function createSourceEditor(style) {
   // draw metas info
   updateMetas();
   initHooks();
-  initLint();
   initAppliesToReport(cm);
 
+  // setup linter
+  initLint();
+  const linterEl = $('#editor.linter');
+  cm.on('optionChange', (cm, option) => {
+    if (option === 'mode' || option === 'lint') {
+      const lint = cm.getOption('lint');
+      const mode = cm.getOption('mode');
+
+      if (mode !== 'css' && linterConfig.getName(lint) === 'csslint') {
+        updateLinter({linter: 'stylelint'});
+        linterEl.value = 'stylelint';
+      }
+    }
+  });
+  linterEl.addEventListener('change', () => {
+    if (cm.getOption('mode') !== 'css' && linterEl.value === 'csslint') {
+      setTimeout(() => {
+        linterEl.value = 'stylelint';
+      });
+    }
+  });
+
   function initAppliesToReport(cm) {
     const APPLIES_TYPE = [
       [t('appliesUrlOption'), 'url'],

js/prefs.js

@@ -43,7 +43,7 @@ var prefs = new function Prefs() {
       indent_conditional: true,
     },
     'editor.lintDelay': 500,        // lint gutter marker update delay, ms
-    'editor.linter': 'stylelint',     // 'csslint' or 'stylelint' or ''
+    'editor.linter': 'csslint',     // 'csslint' or 'stylelint' or ''
     'editor.lintReportDelay': 4500, // lint report update delay, ms
     'editor.matchHighlight': 'token', // token = token/word under cursor even if nothing is selected
                                       // selection = only when something is selected