Fix: disable CSSLint option in stylus mode

_locales/en/messages.json

@@ -456,6 +456,15 @@
     "message": "(Set rule as: 0 = disabled; 1 = warning; 2 = error)",
     "description": "CSSLint rule config values"
   },
+  "linterCSSLintIncompatible": {
+    "message": "CSSLint doesn't support $preprocessorname$ preprocessor",
+    "description": "The label to display when the preprocessor doesn't compatible with CSSLint",
+    "placeholders": {
+      "preprocessorname": {
+        "content": "$1"
+      }
+    }
+  },
   "linterInvalidConfigError": {
     "message": "Not saved due to these invalid configuration settings:",
     "description": "Invalid linter config will show a message followed by a list of invalid entries"

edit/source-editor.js

@@ -55,27 +55,31 @@ function createSourceEditor(style) {
 
   // setup linter
   initLint();
+  initLinterSwitch();
+
+  function initLinterSwitch() {
     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 (option !== 'mode') {
+        return;
+      }
+      updateLinter();
+      update();
+    });
+    linterEl.addEventListener('change', update);
 
-      if (mode !== 'css' && linterConfig.getName(lint) === 'csslint') {
-        updateLinter({linter: 'stylelint'});
-        linterEl.value = 'stylelint';
+    function update() {
+      linterEl.value = linterConfig.getDefault();
+
+      const cssLintOption = linterEl.querySelector('[value="csslint"]');
+      if (cm.getOption('mode') !== 'css') {
+        cssLintOption.disabled = true;
+        cssLintOption.title = t('linterCSSLintIncompatible', cm.getOption('mode'));
+      } else {
+        cssLintOption.disabled = false;
+        cssLintOption.title = '';
       }
     }
-  });
-  linterEl.addEventListener('change', () => {
-    if (cm.getOption('mode') !== 'css' && linterEl.value === 'csslint') {
-      setTimeout(() => {
-        linterEl.value = 'stylelint';
-      });
-    }
-  });
-  if (linterEl.value === 'csslint') {
-    linterEl.value = 'stylelint';
   }
 
   function setupNewStyle(style) {