Consider specificity of CSS selectors

Author: maltsev

lib/helpers.es6

@@ -1,4 +1,5 @@
 import objectAssign from 'object-assign';
+import specificity from 'specificity';
 
 
 export function extendStyle(htmlNode, cssNode) {
@@ -14,6 +15,43 @@ export function extendStyle(htmlNode, cssNode) {
 }
 
 
+export function sortCSSNodesBySpecificity(nodes) {
+    // Sort CSS nodes by specificity (ascending): div - .foo - #bar
+    return nodes.sort((a, b) => {
+        a = getSpecificity(a.selector);
+        b = getSpecificity(b.selector);
+
+        if (a > b) {
+            return 1;
+        } else if (a < b) {
+            return -1;
+        } else {
+            return 0;
+        }
+    });
+}
+
+
+var specificityCache = {};
+function getSpecificity(selector) {
+    if (specificityCache[selector] !== undefined) {
+        return specificityCache[selector];
+    }
+
+    const specificityResult = specificity.calculate(selector)[0];
+    const specificityParts = specificityResult.specificity.split(',').reverse();
+    // Convert "0,1,3,2" to 132 (2*1 + 3*10 + 1*100 + 0*1000)
+    const totalSpecificity = specificityParts.reduce((totalSpecificity, specificity, i) => {
+        specificity = parseInt(specificity, 10);
+        return totalSpecificity + (specificity * Math.pow(10, i));
+    }, 0);
+
+    specificityCache[selector] = totalSpecificity;
+
+    return totalSpecificity;
+}
+
+
 function stringifyCss(css) {
     const styles = Object.keys(css).map(prop => prop + ': ' + css[prop]);
     return styles.join('; ');

lib/inlineCss.es6

@@ -1,18 +1,20 @@
 import postcss from 'postcss';
 import matchHelper from 'posthtml-match-helper';
-import { extendStyle } from './helpers';
+import { extendStyle, sortCSSNodesBySpecificity } from './helpers';
 
 
 export default css => {
     return function inlineCss(tree) {
         var postcssObj = css.then ? css : postcss().process(css);
 
-        return postcssObj.then(result => {
-            return result.root.each(cssNode => {
-                tree.match(matchHelper(cssNode.selector), htmlNode => {
-                    return extendStyle(htmlNode, cssNode);
+        return postcssObj
+            .then(result => sortCSSNodesBySpecificity(result.root.nodes))
+            .then(cssNodes => {
+                cssNodes.forEach(cssNode => {
+                    tree.match(matchHelper(cssNode.selector), htmlNode => {
+                        return extendStyle(htmlNode, cssNode);
+                    });
                 });
             });
-        });
     };
 };

test/helpers.js

@@ -0,0 +1,11 @@
+import expect from 'expect';
+import { sortCSSNodesBySpecificity } from '../lib/helpers';
+
+describe('Helpers', () => {
+    it('sortCSSNodesBySpecificity()', () => {
+        const cssNodes = [{selector: '#foo'}, {selector: '.bar'}, {selector: 'div'}];
+        const sortedCssNodes = [{selector: 'div'}, {selector: '.bar'}, {selector: '#foo'}];
+
+        expect(sortCSSNodesBySpecificity(cssNodes)).toEqual(sortedCssNodes);
+    });
+});

test/plugin.js

@@ -3,8 +3,8 @@ import posthtml from 'posthtml';
 import postcss from 'postcss';
 import inlineCss from '..';
 
-const css = 'div { color: red; padding: 1px }' +
-            '.lead { font-size: 14px; color: blue }';
+const css = '.lead { font-size: 14px; color: blue }' +
+            'div { color: red; padding: 1px }';
 
 const html = '<div style="margin: 0; color: blue">hello</div>' +
              '<div class="lead">world</div>';