doiuse
Lint CSS for browser support against caniuse database.
NOTE: This is a very, very initial release. Feedback or contributions
are quite welcome!
TL;DR
var postcss = require('postcss');
var doiuse = require('doiuse');
postcss(doiuse({
browsers:['ie >= 6', '> 1%'],
onUnsupportedFeatureUse: function(usageInfo) {
var versions = usageInfo.featureData.missing;
var browsers = [];
for(browser in versions) {
browsers.push(
browser + ' (' + Object.keys(versions[browser]).join(',') + ')'
);
}
var loc = usageInfo.usage.source;
console.log(
loc.id + ' line ' + loc.start.line + " : " +
usageInfo.feature + ' not supported by ' + browsers.join(',')
);
}
})).process("a { background-size: cover; }")
How it works
In particular, the approach to detecting features usage is currently quite naive.
Refer to the data in /src/data/features.coffee.
- If a feature in that dataset only specifies
properties
, we just use those
properties for substring matches against the properties used in the input CSS. - If a feature also specifies
values
, then we also require that the associated
value matches one of those values (again, with a substring match).
TODO:
API Details:
postcss(doiuse(opts)).process(css)
, where opts
is:
{
browsers: ['ie >= 8', '> 1%']
onUnsupportedFeatureUse: function(usageInfo) { }
}
And usageInfo
looks like this:
{
feature: 'css-gradients',
featureData:{
missing: {
ie: { '8': 'n' }
},
caniuseData: {
},
usage:
}
Called once for each usage of each css feature not supported by the selected
browsers.
License
MIT
NOTE: The files in test/cases are from autoprefixer-core, Copyright 2013 Andrey Sitnik andrey@sitnik.ru. Please see https://github.com/postcss/autoprefixer-core.