diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 44c9ce87..027bb64d 100644
--- a/_locales/en/messages.json
+++ b/_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"
diff --git a/edit/source-editor.js b/edit/source-editor.js
index 1bf33a25..b14dc448 100644
--- a/edit/source-editor.js
+++ b/edit/source-editor.js
@@ -55,27 +55,31 @@ function createSourceEditor(style) {
 
   // 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');
+  initLinterSwitch();
 
-      if (mode !== 'css' && linterConfig.getName(lint) === 'csslint') {
-        updateLinter({linter: 'stylelint'});
-        linterEl.value = 'stylelint';
+  function initLinterSwitch() {
+    const linterEl = $('#editor.linter');
+    cm.on('optionChange', (cm, option) => {
+      if (option !== 'mode') {
+        return;
+      }
+      updateLinter();
+      update();
+    });
+    linterEl.addEventListener('change', update);
+
+    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) {