:bomb: Lint CSS for browser support against caniuse database.
:bomb: Lint CSS for browser support against caniuse database.
Lint CSS for browser support against Can I use database.
npm install -g doiusedoiuse --browsers "ie >= 9, > 1%, last 2 versions" main.css
# or
cat main.css | doiuse --browsers "ie >= 9, > 1%, last 2 versions"Sample output:
…Use --json to get output as (newline-delimited) JSON objects.
import postcss from 'postcss';
import DoIUse from 'doiuse/lib/DoIUse.js';
postcss(new DoIUse({
browsers:['ie >= 6', '> 1%'],
ignore: ['rem'], // an optional array of features to ignore
ignoreFiles: ['**/normalize.css'], // an optional array of file globs to match against original source file path, to ignore
onFeatureUsage: (usageInfo) => {
console.log(usageInfo.message);
}
})).process("a { background-size: cover; }")CommonJS syntax is still supported if using var doiuse = require('doiuse').
var gulp = require('gulp')
var postcss = require('postcss')
var doiuse = require('doiuse')
gulp.src(src, { cwd: process.cwd() })
.pipe(gulp.postcss([
doiuse({
browsers: [
'ie >= 8',
'> 1%'
],
ignore: ['rem'], // an optional array of features to ignore
ignoreFiles: ['**/normalize.css'], // an optional array of file globs to match against original source file path, to ignore
onFeatureUsage: function (usageInfo) {
console.log(usageInfo.message)
}
})
]))In particular, the approach to detecting features usage is currently quite naive.
Refer to the data in /data/features.js.
properties, we just use those
properties for regex/substring matches against the properties used in the input CSS.values, then we also require that the associated
value matches one of those values.var doiuse = require('doiuse/stream');
process.stdin
.pipe(doiuse({ browsers: ['ie >= 8', '> 1%'], ignore: ['rem'] }))
.on('data', function (usageInfo) {
console.log(JSON.stringify(usageInfo))
})Yields UsageInfo objects as described below.
postcss(new DoIUse(opts)).process(css), where opts is:
{
browsers: ['ie >= 8', '> 1%'], // an autoprefixer-like array of browsers.
ignore: ['rem'], // an optional array of features to ignore
ignoreFiles: ['**/normalize.css'], // an optional array of file globs to match against original source file path, to ignore
onFeatureUsage: function(usageInfo) { } // a callback for usages of features not supported by the selected browsers
}And usageInfo looks like this:
{
message: ': line , col - CSS3 Gradients not supported by: IE (8)',
feature: 'css-gradients', // slug identifying a caniuse-db feature
featureData: {
title: 'CSS Gradients',
missing: "IE (8)", // string of browsers missing support for this feature.
missingData: {
// map of browser -> version -> (lack of)support code
ie: { '8': 'n' }
},
caniuseData: { // data from caniuse-db/features-json/[feature].json }
},
usage: {} //the postcss node where that feature is being used.
}Called once for each usage of each css feature not supported by the selected browsers.
For disabling some checks you can use just-in-place comments
/* doiuse-disable */Disables checks of all features
/* doiuse-disable feature */Disables checks of specified feature(s) (can be comma separated list)
/* doiuse-enable */Re-enables checks of all features
/* doiuse-enable feature */Enables checks of specified feature(s) (can be comma separated list)
doiuse is an OPEN Open Source Project.
This means that individuals making significant and valuable contributions are given commit-access to the project to contribute as they see fit. This project is more like an open wiki than a standard guarded open source project.
MIT
NOTE: Many of the files in test/cases are from autoprefixer-core, Copyright 2013 Andrey Sitnik . Please see https://github.com/postcss/autoprefixer-core.
No open issues yet, or sync has not completed.