Merge branch 'master' of https://github.com/Automattic/juice

README.md

@@ -1,5 +1,6 @@
-[![Build Status](https://travis-ci.org/Automattic/juice.png?branch=master)](https://travis-ci.org/Automattic/juice)
-[![Dependency Status](https://david-dm.org/Automattic/juice.png)](https://david-dm.org/Automattic/juice)
+[![Build Status](https://travis-ci.org/Automattic/juice.svg?branch=master)](https://travis-ci.org/Automattic/juice)
+[![Dependency Status](https://david-dm.org/Automattic/juice.svg)](https://david-dm.org/Automattic/juice)
+
 # Juice ![](http://i.imgur.com/jN8Ht.gif)
 
 Given HTML, juice will inline your CSS properties into the `style` attribute.
@@ -31,6 +32,7 @@ result will be:
 
 * [node-email-templates][1] - Node.js module for rendering beautiful emails with [ejs][2] templates and email-friendly inline CSS using [juice][3].
 * [swig-email-templates][4] - Uses [swig][5], which gives you [template inheritance][6], and can generate a [dummy context][7] from a template.
+* [nodejs-api-starter][8] - A project template for building web APIs with Node.js and GraphQL (see [`src/emails`][9]).
 
 [1]: https://github.com/niftylettuce/node-email-templates
 [2]: https://github.com/tj/ejs
@@ -39,6 +41,8 @@ result will be:
 [5]: https://github.com/paularmstrong/swig
 [6]: https://docs.djangoproject.com/en/dev/topics/templates/#template-inheritance
 [7]: https://github.com/andrewrk/swig-dummy-context
+[8]: https://github.com/kriasoft/nodejs-api-starter
+[9]: https://github.com/kriasoft/nodejs-api-starter/tree/master/src/emails
 
 ## Documentation
 

lib/utils.js

@@ -94,7 +94,7 @@ exports.getPreservedText = function(css, options) {
   for (var i = rules.length - 1; i >= 0; i--) {
     if ((options.fontFaces && rules[i].type === 'font-face') ||
         (options.mediaQueries && rules[i].type === 'media')) {
-      preserved.push(
+      preserved.unshift(
         mensch.stringify(
           { stylesheet: { rules: [ rules[i] ] }},
           { comments: false, indentation: '  ' }

test/juice.test.js

@@ -186,3 +186,9 @@ it('test style attributes and important priority', function() {
       juice.inlineContent('<div style="color: red !important;"></div>', 'div { color: black !important; }'),
       '<div style="color: red;"></div>');
 });
+
+it('test that preserved text order is stable', function() {
+  assert.deepEqual(
+      utils.getPreservedText('div { color: red; } @media (min-width: 320px) { div { color: green; } } @media (max-width: 640px) { div { color: blue; } }', { mediaQueries: true }).replace(/\s+/g, ' '),
+      ' @media (min-width: 320px) { div { color: green; } } @media (max-width: 640px) { div { color: blue; } } ');
+});