nest all css on the server side

SyncerWeb.js

@@ -7,6 +7,8 @@ const express_session = require('express-session');
 const bodyparser = require('body-parser');
 const multer = require('multer');
 
+const css = require('css');
+
 module.exports = SyncerWeb;
 
 function SyncerWeb(syncer, pg, cfg)
@@ -130,6 +132,34 @@ SyncerWeb.prototype.post_sync = function*(req, res)
     return res.send({ status: 'started' });
 }
 
+function rewriteCss(ast)
+{
+    var rules = ast.rules || ast.stylesheet && ast.stylesheet.rules;
+    if (rules)
+    {
+        for (var i = 0; i < rules.length; i++)
+        {
+            if (rules[i].type == 'document')
+            {
+                // prune @document instructions (may spy on current URL)
+                rules.splice(i--, 1);
+            }
+            else
+                rewriteCss(rules[i]);
+        }
+    }
+    else if (ast.type == 'rule')
+    {
+        for (var i = 0; i < ast.selectors.length; i++)
+        {
+            // FIXME: Do not hardcode css selector for frontend here
+            // This will require generating unique substitution string,
+            // so we may also generate 'blocked images' stubs when we do it.
+            ast.selectors[i] = '.message-view .text '+ast.selectors[i];
+        }
+    }
+}
+
 function* getBody(pg, messages, boxId)
 {
     var p = new MailParser({ streamAttachments: false, defaultCharset: 'windows-1251' });
@@ -150,8 +180,15 @@ function* getBody(pg, messages, boxId)
         if (styles)
         {
             obj.html = '<style>\n'+styles+'</style>\n'+obj.html;
+            styles = '';
         }
-        obj.html = htmlawed.sanitize(obj.html||'', { safe: 1, elements: '* +style', keep_bad: 2, comment: 1 });
+        obj.html = htmlawed.sanitize(obj.html||'', { safe: 1, elements: '* +style', keep_bad: 0, comment: 1 });
+        obj.html = obj.html.replace(/<style[^>]*>([\s\S]*)<\/style\s*>/ig, function(m, m1)
+        {
+            var ast = css.parse(m1, { silent: true });
+            rewriteCss(ast);
+            return '<style>'+css.stringify(ast)+'</style>';
+        });
         let upd = { body_text: obj.text||'', body_html: obj.html };
         upd.body_html_text = obj.html.replace(/<style[^>]*>.*<\/style\s*>|<\/?[^>]*>/g, '');
         yield pg.update('messages m', upd).where({ folder_id: boxId, uid: msg[0].uid }).run(gen.ef());

package.json

@@ -20,7 +20,8 @@
     "pg": "latest",
     "pg-bricks": "latest",
     "sql-bricks": "latest",
-    "socket.io": "latest"
+    "socket.io": "latest",
+    "css": "latest"
   },
   "peerDependencies": {
     "sql-bricks": ">=1.4.0"