diff --git a/lib/DoIUse.js b/lib/DoIUse.js index 78db53c..f411755 100644 --- a/lib/DoIUse.js +++ b/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}`); diff --git a/test/postcss-progressive-enhancement.js b/test/postcss-progressive-enhancement.js new file mode 100644 index 0000000..f6ff300 --- /dev/null +++ b/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(); +});