Allow progressive enhancement using repeated CSS properties

Author: marek-saji

lib/DoIUse.js

@@ -88,6 +88,21 @@ export default class DoIUse {
       if (!data) {
         throw new Error('No feature data?');
       }
+
+      if (usage.type === 'decl') {
+        // If there is a previous sibling declaration of the same CSS
+        // property, don’t treat it as an error, because browser will
+        // fall back to use last declaration it understood.
+
+        const previousSiblings = usage.parent.nodes.slice(0, usage.parent.nodes.indexOf(usage));
+        const overwritees = previousSiblings.filter(
+          (node) => node.type === 'decl' && node.prop === usage.prop,
+        );
+        if (overwritees.length > 0) {
+          return;
+        }
+      }
+
       const messages = [];
       if (data.missing) {
         messages.push(`not supported by: ${data.missing}`);

test/postcss-progressive-enhancement.js

@@ -0,0 +1,22 @@
+import { test } from 'tap';
+import postcss from 'postcss';
+
+import DoIUse from '../lib/DoIUse.js';
+
+test('Progressive enhancement using repeated CSS properties', (t) => {
+  const css = `
+    p {
+      background-color: black;
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  `;
+
+  const result = postcss(new DoIUse({
+    browsers: ['ie >= 6'],
+  })).process(css);
+  const warnings = result.warnings();
+
+  t.equal(warnings.length, 0, 'No warnings');
+
+  t.end();
+});