LESS preprocessor

closes #373

edit/codemirror-default.js

@@ -126,17 +126,30 @@
   });
 
   const MODE = {
+    less: {
+      family: 'css',
+      value: 'text/x-less',
+      isActive: cm =>
+        cm.doc.mode &&
+        cm.doc.mode.name === 'css' &&
+        cm.doc.mode.helperType === 'less',
+    },
     stylus: 'stylus',
     uso: 'css'
   };
 
   CodeMirror.defineExtension('setPreprocessor', function (preprocessor, force = false) {
     const mode = MODE[preprocessor] || 'css';
-    if ((this.doc.mode || {}).name === mode && !force) {
+    const isActive = mode.isActive || (
+      cm => cm.doc.mode === mode ||
+            cm.doc.mode && (cm.doc.mode.name + (cm.doc.mode.helperType || '') === mode)
+    );
+    if (!force && isActive(this)) {
       return Promise.resolve();
     }
-    if (mode === 'css') {
+    if ((mode.family || mode) === 'css') {
-      this.setOption('mode', mode);
+      // css.js is always loaded via html
+      this.setOption('mode', mode.value || mode);
       return Promise.resolve();
     }
     return loadScript(`/vendor/codemirror/mode/${mode}/${mode}.js`).then(() => {

edit/lint.js

@@ -32,7 +32,7 @@ var linterConfig = {
     // some dirty hacks to override editor.linter getting from prefs
     const linter = prefs.get('editor.linter');
     const mode = linter && editors[0] && editors[0].doc.mode;
-    return mode && mode !== 'css' && mode.name !== 'css' ? 'stylelint' : linter;
+    return mode && ((mode.name || mode) !== 'css' || mode.helperType) ? 'stylelint' : linter;
   },
 
   getCurrent(linter = linterConfig.getName()) {

edit/source-editor.js

@@ -330,7 +330,9 @@ function createSourceEditor(style) {
 
   function getModeName() {
     const mode = cm.doc.mode;
-    return mode && mode.name || mode;
+    if (!mode) return '';
+    return (mode.name || mode || '') +
+           (mode.helperType || '');
   }
 
   return {

js/usercss.js

@@ -62,6 +62,18 @@ var usercss = (() => {
         ));
       }
     },
+    less: {
+      preprocess(source, vars) {
+        window.less = window.less || {
+          logLevel: 0,
+          useFileCache: false,
+        };
+        const varDefs = Object.keys(vars).map(key => `@${key}:${vars[key].value};\n`).join('');
+        return loadScript('/vendor/less/less.min.js')
+          .then(() => window.less.render(varDefs + source))
+          .then(({css}) => css);
+      }
+    },
     uso: {
       preprocess(source, vars) {
         const pool = new Map();