Add linter select option

_locales/bg/messages.json

@@ -665,8 +665,8 @@
 		"description": "Go to Options UI"
 	},
 	"issuesHelp": {
-		"message": "Проблеми, намерени от <a href='https://stylelint.io/user-guide/rules/' target='_blank'>stylelint</a> при следните правила:",
+		"message": "Проблеми, намерени от $link$ при следните правила:",
-		"description": "Help popup message for the stylelint issues block on the style edit page"
+		"description": "Help popup message for the selected linter issues block on the style edit page"
 	},
 	"optionsCustomizeBadge": {
 		"message": "Значка на иконката на лентата",

_locales/cs/messages.json

@@ -653,8 +653,8 @@
 		"description": "Go to Options UI"
 	},
 	"issuesHelp": {
-		"message": "Problémy nalezené aplikací <a href='https://stylelint.io/user-guide/rules/' target='_blank'>stylelint</a> s těmito povolenými pravidly:",
+		"message": "Problémy nalezené aplikací $link$ s těmito povolenými pravidly:",
-		"description": "Help popup message for the stylelint issues block on the style edit page"
+		"description": "Help popup message for the selected linter issues block on the style edit page"
 	},
 	"optionsCustomizeBadge": {
 		"message": "Ikona tlačítka na panelu",

_locales/de/messages.json

@@ -633,8 +633,8 @@
 		"description": "Go to Options UI"
 	},
 	"issuesHelp": {
-		"message": "Die von <a href='https://stylelint.io/user-guide/rules/' target='_blank'>stylelint</a> gefunden Fehler haben die folgenden Einstellungen:",
+		"message": "Die von $link$ gefunden Fehler haben die folgenden Einstellungen:",
-		"description": "Help popup message for the stylelint issues block on the style edit page"
+		"description": "Help popup message for the selected linter issues block on the style edit page"
 	},
 	"optionsCustomizeBadge": {
 		"message": "Badge auf dem Toolbar-Icon",

_locales/en/messages.json

@@ -135,6 +135,10 @@
     "message": "Double-click to maximize/restore the height",
     "description": "Tooltip for the resize grip in style editor"
   },
+  "cm_linter": {
+    "message": "CSS Linter",
+    "description": "Select the linter to check for CSS issues"
+  },
   "dysfunctional": {
     "message": "Stylus cannot function because Firefox is either in private mode or is applying its website cookies policy to IndexedDB storage used by Stylus, which erroneously marks the secure moz-extension:// origin as insecure even though WebExtensions aren't websites and Stylus doesn't use cookies.\n\n1. Open Firefox options\n2. Go to 'Privacy & Security'\n3. Set 'History' mode to 'Use custom settings'\n4. Click 'Exceptions'\n5. Paste our manifest URL and click 'Allow'\n6. Click 'Save settings'\n7. Uncheck 'Always use private browsing mode'\n\nThe actual manifest URL is shown below.\nYou can also find it on about:debugging page.",
     "description": "Displayed in Firefox when its settings make Stylus dysfunctional"
@@ -342,8 +346,13 @@
     "description": "Label for the stylelint issues block on the style edit page"
   },
   "issuesHelp": {
-    "message": "The issues found by <a href='https://stylelint.io/user-guide/rules/' target='_blank'>stylelint</a> with these rules enabled:",
+    "message": "The issues found by $link$ with these rules enabled:",
-    "description": "Help popup message for the stylelint issues block on the style edit page"
+    "description": "Help popup message for the selected linter issues block on the style edit page",
+    "placeholders": {
+      "link": {
+        "content": "$1"
+      }
+    }
   },
   "manageFilters": {
     "message": "Filters",

_locales/es/messages.json

@@ -657,8 +657,8 @@
 		"description": "Go to Options UI"
 	},
 	"issuesHelp": {
-		"message": "Problemas encontrados por <a href='https://stylelint.io/user-guide/rules/' target='_blank'>stylelint</a> con estas reglas aplicadas:",
+		"message": "Problemas encontrados por $link$ con estas reglas aplicadas:",
-		"description": "Help popup message for the stylelint issues block on the style edit page"
+		"description": "Help popup message for the selected linter issues block on the style edit page"
 	},
 	"optionsCustomizeBadge": {
 		"message": "Distintivo en el icono de barra de herramientas",

_locales/et/messages.json

@@ -653,8 +653,8 @@
 		"description": "Go to Options UI"
 	},
 	"issuesHelp": {
-		"message": "<a href='https://stylelint.io/user-guide/rules/' target='_blank'>stylelint</a> poolt leitud vead nende lubatud reeglitega:",
+		"message": "$link$ poolt leitud vead nende lubatud reeglitega:",
-		"description": "Help popup message for the stylelint issues block on the style edit page"
+		"description": "Help popup message for the selected linter issues block on the style edit page"
 	},
 	"optionsCustomizeBadge": {
 		"message": "Number tööriistaribaikoonil",

_locales/ja/messages.json

@@ -649,8 +649,8 @@
 		"description": "Go to Options UI"
 	},
 	"issuesHelp": {
-		"message": "これらのルールを有効にして <a href='https://stylelint.io/user-guide/rules/' target='_blank'>stylelint</a> で見つかった問題:",
+		"message": "これらのルールを有効にして $link$ で見つかった問題:",
-		"description": "Help popup message for the stylelint issues block on the style edit page"
+		"description": "Help popup message for the selected linter issues block on the style edit page"
 	},
 	"optionsCustomizeBadge": {
 		"message": "ツールバーアイコンのバッジ",

_locales/nl/messages.json

@@ -345,8 +345,8 @@
 		"description": "Label for the button to check all styles for updates"
 	},
 	"issuesHelp": {
-		"message": "De door stylelint gevonden problemen, <a href='https://stylelint.io/user-guide/rules/' target='_blank'>stylelint</a>, met deze ingeschakelde regels:",
+		"message": "De door stylelint gevonden problemen, $link$, met deze ingeschakelde regels:",
-		"description": "Help popup message for the stylelint issues block on the style edit page"
+		"description": "Help popup message for the selected linter issues block on the style edit page"
 	},
 	"confirmNo": {
 		"message": "Nee",

_locales/pl/messages.json

@@ -657,8 +657,8 @@
 		"description": "Go to Options UI"
 	},
 	"issuesHelp": {
-		"message": "Problemy znalezione przez <a href='https://stylelint.io/user-guide/rules/' target='_blank'>stylelint</a> z tymi włączonymi regułami:",
+		"message": "Problemy znalezione przez $link$ z tymi włączonymi regułami:",
-		"description": "Help popup message for the stylelint issues block on the style edit page"
+		"description": "Help popup message for the selected linter issues block on the style edit page"
 	},
 	"optionsCustomizeBadge": {
 		"message": "Emblemat na ikonie paska narzędzi",

_locales/ru/messages.json

@@ -657,8 +657,8 @@
 		"description": "Go to Options UI"
 	},
 	"issuesHelp": {
-		"message": "Проблемы и предупреждения по версии <a href='https://stylelint.io/user-guide/rules/' target='_blank'>stylelint</a> с данными включенными правилами:",
+		"message": "Проблемы и предупреждения по версии $link$ с данными включенными правилами:",
-		"description": "Help popup message for the stylelint issues block on the style edit page"
+		"description": "Help popup message for the selected linter issues block on the style edit page"
 	},
 	"optionsCustomizeBadge": {
 		"message": "Бейдж на пиктограмме в тулбаре",

_locales/sr/messages.json

@@ -357,8 +357,8 @@
 		"description": "Label for the button to check all styles for updates"
 	},
 	"issuesHelp": {
-		"message": "Проблем пронађен од стране <a href='https://stylelint.io/user-guide/rules/' target='_blank'>stylelint</a> са овим омогућеним правилима:",
+		"message": "Проблем пронађен од стране $link$ са овим омогућеним правилима:",
-		"description": "Help popup message for the stylelint issues block on the style edit page"
+		"description": "Help popup message for the selected linter issues block on the style edit page"
 	},
 	"confirmNo": {
 		"message": "Не",

_locales/zh_CN/messages.json

@@ -657,8 +657,8 @@
 		"description": "Go to Options UI"
 	},
 	"issuesHelp": {
-		"message": "<a href='https://stylelint.io/user-guide/rules/' target='_blank'>stylelint</a> 在已启用的这些规则中找到问题：",
+		"message": "$link$ 在已启用的这些规则中找到问题：",
-		"description": "Help popup message for the stylelint issues block on the style edit page"
+		"description": "Help popup message for the selected linter issues block on the style edit page"
 	},
 	"optionsCustomizeBadge": {
 		"message": "样式计数器",

_locales/zh_TW/messages.json

@@ -661,8 +661,8 @@
 		"description": "Go to Options UI"
 	},
 	"issuesHelp": {
-		"message": "由<a href='https://stylelint.io/user-guide/rules/' target='_blank'>stylelint</a>發現啟用這些規則會產生衝突",
+		"message": "由$link$發現啟用這些規則會產生衝突",
-		"description": "Help popup message for the stylelint issues block on the style edit page"
+		"description": "Help popup message for the selected linter issues block on the style edit page"
 	},
 	"optionsCustomizeBadge": {
 		"message": "在工具列圖示上的徽章",

edit.html

@@ -35,9 +35,12 @@
 
     <link rel="stylesheet" href="vendor/codemirror/addon/lint/lint.css" />
     <script src="vendor/codemirror/addon/lint/lint.js"></script>
+    <script src="vendor-overwrites/codemirror/addon/lint/linter.js"></script>
+    <!-- CSSLint -->
+    <script src="vendor/csslint/csslint-worker.js"></script>
+    <!-- stylelint -->
     <script src="vendor-overwrites/stylelint/stylelint-bundle.min.js"></script>
     <script src="vendor-overwrites/codemirror/addon/lint/stylelint-config.js"></script>
-    <script src="vendor-overwrites/codemirror/addon/lint/stylelint.js"></script>
 
     <link rel="stylesheet" href="vendor/codemirror/addon/hint/show-hint.css" />
     <script src="vendor/codemirror/addon/hint/show-hint.js"></script>
@@ -187,6 +190,12 @@
             <option i18n-text="genericDisabledLabel" value="">
           </select>
         </div>
+        <div class="option aligned">
+          <label id="linter-label" for="editor.linter" i18n-text="cm_linter"></label>
+          <select id="editor.linter">
+            <option value="csslint" selected>CSSLint</option>
+            <option value="stylelint">stylelint</option>
+          </select>
       </section>
       <section id="lint"><h2 i18n-text="issues">: <span id="issue-count"></span><svg id="lint-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2><div></div></section>
     </div>

edit/edit.js

@@ -1,5 +1,5 @@
 /* eslint brace-style: 0, operator-linebreak: 0 */
-/* global CodeMirror parserlib */
+/* global CodeMirror exports parserlib CSSLint */
 'use strict';
 
 let styleId = null;
@@ -348,6 +348,16 @@ function acmeEventListener(event) {
         default:
           value = null;
       }
+      break;
+    case 'linter':
+      if (value !== null && (editors.lastActive || editors[0])) {
+        if (prefs.get(el.id) !== value) {
+          prefs.set(el.id, value || 'csslint');
+        }
+        CodeMirror.signal(editors.lastActive || editors[0], "change");
+        // save();
+      }
+      break;
   }
   CodeMirror.setOption(option, value);
 }
@@ -1050,7 +1060,7 @@ function getEditorInSight(nearbyElement) {
 
 function updateLintReport(cm, delay) {
   if (delay === 0) {
-    // immediately show pending stylelint messages in onbeforeunload and save
+    // immediately show pending csslint/stylelint messages in onbeforeunload and save
     update(cm);
     return;
   }
@@ -1074,6 +1084,7 @@ function updateLintReport(cm, delay) {
     let changed = false;
     let fixedOldIssues = false;
     scope.forEach(cm => {
+      const linter = prefs.get('editor.linter');
       const scopedState = cm.state.lint || {};
       const oldMarkers = scopedState.markedLast || {};
       const newMarkers = {};
@@ -1082,17 +1093,19 @@ function updateLintReport(cm, delay) {
           const info = mark.__annotation;
           const isActiveLine = info.from.line === cm.getCursor().line;
           const pos = isActiveLine ? 'cursor' : (info.from.line + ',' + info.from.ch);
-          const rule = info.message.substring(info.message.lastIndexOf('('), info.message.length);
+          // stylelint rule added in parentheses at the end
+          const rule = linter === 'stylelint' ?
+            info.message.substring(info.message.lastIndexOf('('), info.message.length) :
+            / at line \d.+$/;
+          // csslint
           let message = escapeHtml(info.message.replace(rule, ''));
-          if (message.length > 100) {
-            message = message.substr(0, 100) + '...';
-          }
           if (isActiveLine || oldMarkers[pos] === message) {
             delete oldMarkers[pos];
           }
           newMarkers[pos] = message;
           return `<tr class="${info.severity}">
-            <td role="severity" class="CodeMirror-lint-marker-${info.severity}" title="Rule: ${rule}">
+            <td role="severity" class="CodeMirror-lint-marker-${info.severity}"
+              ${linter === 'stylelint' ? 'title="Rule: ' + rule + '"' : ''}>
               ${info.severity}
             </td>
             <td role="line">${info.from.line + 1}</td>
@@ -1100,7 +1113,7 @@ function updateLintReport(cm, delay) {
             <td role="col">${info.from.ch + 1}</td>
             <td role="message" title="${message}">${message}</td>
           </tr>`
-        }) + '</tbody>';
+        }).join('') + '</tbody>';
       scopedState.markedLast = newMarkers;
       fixedOldIssues |= scopedState.reportDisplayed && Object.keys(oldMarkers).length > 0;
       if (scopedState.html !== html) {
@@ -1866,17 +1879,25 @@ function showKeyMapHelp() {
 }
 
 function showLintHelp() {
-  let content = t('issuesHelp') + '<ul class="rules">',
+  let list = '<ul class="rules">';
-    rules = [];
+  let content = '';
-  $$('#lint td[role="severity"]').forEach(el => {
+  if (prefs.get('editor.linter') === 'csslint') {
-    const rule = el.title.replace('Rule: (', '').replace(/[()]/g, '').trim();
+    content = t('issuesHelp', '<a href="https://github.com/CSSLint/csslint" target="_blank">CSSLint</a>') + list +
-    if (!rules.includes(rule)) {
+      CSSLint.getRules().map(rule =>
-      content += `<li>
+        '<li><b>' + rule.name + '</b><br>' + rule.desc + '</li>'
-          <a target="_blank" href="https://stylelint.io/user-guide/rules/${rule}/">${rule}</a>
+      ).join('');
-        </li>`;
+  } else {
-      rules.push(rule);
+    let rules = [];
-    }
+    const url = 'https://stylelint.io/user-guide/rules/';
-  });
+    content = t('issuesHelp', `<a href="${url}" target="_blank">stylelint</a>`) + list;
+    $$('#lint td[role="severity"]').forEach(el => {
+      const rule = el.title.replace('Rule: (', '').replace(/[()]/g, '').trim();
+      if (!rules.includes(rule)) {
+        content += `<li><a target="_blank" href="${url}${rule}/">${rule}</a></li>`;
+        rules.push(rule);
+      }
+    });
+  }
   return showHelp(t('issues'), content + '</ul>');
 }
 

js/prefs.js

@@ -42,6 +42,7 @@ var prefs = new function Prefs() {
       indent_conditional: true,
     },
     'editor.lintDelay': 500,        // lint gutter marker update delay, ms
+    'editor.linter': 'csslint',     // Choose csslint or stylelint
     '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

vendor-overwrites/codemirror/addon/lint/css-lint.js

@@ -1,64 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: http://codemirror.net/LICENSE
-
-// Depends on csslint.js from https://github.com/stubbornella/csslint
-
-// declare global: CSSLint
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-"use strict";
-
-CodeMirror.registerHelper("lint", "css", function(text) {
-  var found = [];
-  if (!window.CSSLint) return found;
-
-  /* STYLISH: hack start (part 1) */
-  var rules = CSSLint.getRules();
-  var allowedRules = ["display-property-grouping", "duplicate-properties", "empty-rules", "errors", "known-properties"];
-  CSSLint.clearRules();
-  rules.forEach(function(rule) {
-    if (allowedRules.indexOf(rule.id) >= 0) {
-      CSSLint.addRule(rule);
-    }
-  });
-  /* STYLISH: hack end */
-
-  var results = CSSLint.verify(text), messages = results.messages, message = null;
-  for ( var i = 0; i < messages.length; i++) {
-    message = messages[i];
-
-    /* STYLISH: hack start (part 2) */
-    if (message.type === 'warning') {
-       // @font-face {font-family: 'Ampersand'; unicode-range: U+26;}
-      if (message.message.indexOf('unicode-range') !== -1) {
-        continue;
-      }
-      else if ( // color: hsl(210, 100%, 2.2%); or color: hsla(210, 100%, 2.2%, 0.3);
-        message.message.startsWith('Expected (<color>) but found \'hsl') &&
-        /hsla?\(\s*(-?\d+)%?\s*,\s*(-?\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%(\s*,\s*(-?\d+|-?\d*.\d+))?\s*\)/.test(message.message)
-      ) {
-        continue;
-      }
-      //
-    }
-    /* STYLISH: hack end */
-
-    var startLine = message.line -1, endLine = message.line -1, startCol = message.col -1, endCol = message.col;
-    found.push({
-      from: CodeMirror.Pos(startLine, startCol),
-      to: CodeMirror.Pos(endLine, endCol),
-      message: message.message,
-      severity : message.type
-    });
-  }
-  return found;
-});
-
-});

vendor-overwrites/codemirror/addon/lint/linter.js

@@ -0,0 +1,91 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+// Depends on csslint.js from https://github.com/stubbornella/csslint
+
+// declare global: CSSLint
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
+CodeMirror.registerHelper("lint", "css", function(text) {
+  let found = [];
+  const linter = prefs.get('editor.linter');
+  if (linter === 'csslint' && window.CSSLint) {
+
+    /* STYLISH: hack start (part 1) */
+    var rules = CSSLint.getRules();
+    var allowedRules = ["display-property-grouping", "duplicate-properties", "empty-rules", "errors", "known-properties"];
+    CSSLint.clearRules();
+    rules.forEach(function(rule) {
+      if (allowedRules.indexOf(rule.id) >= 0) {
+        CSSLint.addRule(rule);
+      }
+    });
+    /* STYLISH: hack end */
+
+    var results = CSSLint.verify(text), messages = results.messages, message = null;
+    for ( var i = 0; i < messages.length; i++) {
+      message = messages[i];
+
+      /* STYLISH: hack start (part 2) */
+      if (message.type === 'warning') {
+         // @font-face {font-family: 'Ampersand'; unicode-range: U+26;}
+        if (message.message.indexOf('unicode-range') !== -1) {
+          continue;
+        }
+        else if ( // color: hsl(210, 100%, 2.2%); or color: hsla(210, 100%, 2.2%, 0.3);
+          message.message.startsWith('Expected (<color>) but found \'hsl') &&
+          /hsla?\(\s*(-?\d+)%?\s*,\s*(-?\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%(\s*,\s*(-?\d+|-?\d*.\d+))?\s*\)/.test(message.message)
+        ) {
+          continue;
+        }
+        //
+      }
+      /* STYLISH: hack end */
+
+      var startLine = message.line -1, endLine = message.line -1, startCol = message.col -1, endCol = message.col;
+      found.push({
+        from: CodeMirror.Pos(startLine, startCol),
+        to: CodeMirror.Pos(endLine, endCol),
+        message: message.message,
+        severity : message.type
+      });
+    }
+  } else if (linter === 'stylelint') {
+    const stylelint = require('stylelint').lint;
+    if (stylelint) {
+      return stylelint({
+          code: text,
+          // stylelintConfig stored in stylelint-config.js & loaded by edit.html
+          config: stylelintConfig
+        }).then(output => {
+          const warnings = output.results.length ? output.results[0].warnings : [],
+            len = warnings.length;
+          let i, warning;
+          if (len) {
+            for (i = 0; i < len; i++) {
+              warning = warnings[i];
+              found.push({
+                from: CodeMirror.Pos(warning.line - 1, warning.column - 1),
+                to: CodeMirror.Pos(warning.line - 1, warning.column),
+                message: warning.text,
+                severity : warning.severity
+              });
+            }
+          }
+          return found;
+        });
+    }
+  }
+  return found;
+});
+
+});

vendor-overwrites/codemirror/addon/lint/stylelint.js

@@ -1,49 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: http://codemirror.net/LICENSE
-
-// Depends on stylelint.js from https://github.com/...
-
-// declare global: StyleLint
-
-(function(mod) {
-  if (typeof exports == 'object' && typeof module == 'object') // CommonJS
-    mod(require('../../lib/codemirror'));
-  else if (typeof define == 'function' && define.amd) // AMD
-    define(['../../lib/codemirror'], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-'use strict';
-
-CodeMirror.registerHelper('lint', 'css', text => {
-  let found = [];
-  const stylelint = require('stylelint').lint;
-
-  if (!stylelint) {
-    return found;
-  }
-
-  return stylelint({
-      code: text,
-      // stylelintConfig stored in stylelint-config.js & loaded by edit.html
-      config: stylelintConfig
-    }).then(output => {
-      const warnings = output.results.length ? output.results[0].warnings : [],
-        len = warnings.length;
-      let i, warning;
-      if (len) {
-        for (i = 0; i < len; i++) {
-          warning = warnings[i];
-          found.push({
-            from: CodeMirror.Pos(warning.line - 1, warning.column - 1),
-            to: CodeMirror.Pos(warning.line - 1, warning.column),
-            message: warning.text,
-            severity : warning.severity
-          });
-        }
-      }
-      return found;
-    });
-});
-
-});