doiuse

Lint CSS for browser support against Can I use database.

Install

1npm install -g doiuse

Usage Examples

Command Line

1doiuse --browsers "ie >= 9, > 1%, last 2 versions" main.css
2# or
3cat main.css | doiuse --browsers "ie >= 9, > 1%, last 2 versions"

Sample output:

/projects/website/main.css:5:3: CSS3 Box-sizing not supported by: IE (8,9,10,11), Chrome (36,37,38), Safari (8,7.1), Opera (24,25), iOS Safari (8,7.1,8.1), Android Browser (4.1,4.4,4.4.4), IE Mobile (10,11)
/projects/website/main.css:6:3: CSS3 Box-sizing not supported by: IE (8,9,10,11), Chrome (36,37,38), Safari (8,7.1), Opera (24,25), iOS Safari (8,7.1,8.1), Android Browser (4.1,4.4,4.4.4), IE Mobile (10,11)
/projects/website/main.css:8:3: CSS user-select: none not supported by: IE (8,9)
/projects/website/main.css:9:3: CSS user-select: none not supported by: IE (8,9)
/projects/website/main.css:10:3: CSS user-select: none not supported by: IE (8,9)
/projects/website/main.css:11:3: CSS user-select: none not supported by: IE (8,9)
/projects/website/main.css:12:3: CSS user-select: none not supported by: IE (8,9)
/projects/website/main.css:13:3: Pointer events not supported by: IE (8,9,10), Firefox (32,33), Chrome (36,37,38), Safari (8,7.1), Opera (24,25), iOS Safari (8,7.1,8.1), Android Browser (4.1,4.4,4.4.4), IE Mobile (10)
/projects/website/main.css:14:3: Pointer events not supported by: IE (8,9,10), Firefox (32,33), Chrome (36,37,38), Safari (8,7.1), Opera (24,25), iOS Safari (8,7.1,8.1), Android Browser (4.1,4.4,4.4.4), IE Mobile (10)
/projects/website/main.css:32:3: CSS3 Transforms not supported by: IE (8)

Use --json to get output as (newline-delimited) JSON objects.

JS

1import postcss from 'postcss';
2import DoIUse from 'doiuse/lib/DoIUse.js';
3
4postcss(new DoIUse({
5  browsers:['ie >= 6', '> 1%'],
6  ignore: ['rem'], // an optional array of features to ignore
7  ignoreFiles: ['**/normalize.css'], // an optional array of file globs to match against original source file path, to ignore
8  onFeatureUsage: (usageInfo) => {
9    console.log(usageInfo.message);
10  }
11})).process("a { background-size: cover; }")

CommonJS syntax is still supported if using var doiuse = require('doiuse').

Gulp (CommonJS)

1var gulp = require('gulp')
2var postcss = require('postcss')
3var doiuse = require('doiuse')
4
5gulp.src(src, { cwd: process.cwd() })
6.pipe(gulp.postcss([
7  doiuse({
8    browsers: [
9      'ie >= 8',
10      '> 1%'
11    ],
12    ignore: ['rem'], // an optional array of features to ignore
13    ignoreFiles: ['**/normalize.css'], // an optional array of file globs to match against original source file path, to ignore
14    onFeatureUsage: function (usageInfo) {
15      console.log(usageInfo.message)
16    }
17  })
18]))

How it works

In particular, the approach to detecting features usage is currently quite naive.

Refer to the data in /data/features.js.

• If a feature in that dataset only specifies properties, we just use those properties for regex/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.

API Details

As a transform stream

1var doiuse = require('doiuse/stream');
2
3process.stdin
4  .pipe(doiuse({ browsers: ['ie >= 8', '> 1%'], ignore: ['rem'] }))
5  .on('data', function (usageInfo) {
6    console.log(JSON.stringify(usageInfo))
7  })

Yields UsageInfo objects as described below.

As a postcss plugin

postcss(new DoIUse(opts)).process(css), where opts is:

1{
2  browsers: ['ie >= 8', '> 1%'], // an autoprefixer-like array of browsers.
3  ignore: ['rem'], // an optional array of features to ignore
4  ignoreFiles: ['**/normalize.css'], // an optional array of file globs to match against original source file path, to ignore
5  onFeatureUsage: function(usageInfo) { } // a callback for usages of features not supported by the selected browsers
6}

And usageInfo looks like this:

1{
2  message: '<input source>: line <l>, col <c> - CSS3 Gradients not supported by: IE (8)',
3  feature: 'css-gradients', // slug identifying a caniuse-db feature
4  featureData: {
5    title: 'CSS Gradients',
6    missing: "IE (8)", // string of browsers missing support for this feature.
7    missingData: {
8      // map of browser -> version -> (lack of)support code
9      ie: { '8': 'n' }
10    },
11    caniuseData: { // data from caniuse-db/features-json/[feature].json }
12  },
13  usage: {} //the postcss node where that feature is being used.
14}

Called once for each usage of each css feature not supported by the selected browsers.

Ignoring file-specific rules

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)

• for following lines in file

Contributing

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.

License

MIT

NOTE: Many of the files in test/cases are from autoprefixer-core, Copyright 2013 Andrey Sitnik andrey@sitnik.ru. Please see https://github.com/postcss/autoprefixer-core.