• Stars
    star
    1,244
  • Rank 37,776 (Top 0.8 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 10 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸ’£ Lint CSS for browser support against caniuse database.

Build Status Release Notes

doiuse

Lint CSS for browser support against Can I use database.

Install

npm install -g doiuse

Usage Examples

Command Line

doiuse --browsers "ie >= 9, > 1%, last 2 versions" main.css
# or
cat 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

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').

Gulp (CommonJS)

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)
    }
  })
]))

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

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.

As a postcss plugin

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: '<input source>: line <l>, col <c> - 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.

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 [email protected]. Please see https://github.com/postcss/autoprefixer-core.

More Repositories

1

euclid

✏️ Euclidean geometry in javascript
JavaScript
98
star
2

gjv

πŸ” View geojson
JavaScript
75
star
3

doiuse.com

Lint CSS for browser support against caniuse.com database.
JavaScript
34
star
4

angular-multirange-slider

A multi-range slider directive for AngularJS
JavaScript
26
star
5

atom-node-debug

DEPRECATED - please consider https://github.com/kiddkai/atom-node-debugger
CoffeeScript
18
star
6

euclid-parser

Parse geometry proof language for diagram-building instructions.
JavaScript
10
star
7

here-spot

Here, Spot! Quickly spin up an AWS spot instance from the command line.
JavaScript
9
star
8

mdast-util-inject

Mdast utility to inject some markdown content into some other markdown at a certain heading
JavaScript
9
star
9

mapbox-gl-datadriven

A stopgap to mimic data-driven styles in mapbox-gl-js; hopefully obsolete very soon!
JavaScript
9
star
10

prerender-mathjax

Node server / Koa middleware to prerender math on the server using MathJax-node.
JavaScript
7
star
11

baltimore-neighborhood-vitalsigns

Playing around with BNIA data for Hack Baltimore.
CoffeeScript
6
star
12

mapbox-gl-architecture

Visualize module relationships in Mapbox GL JS
HTML
6
star
13

geojson-polygon-aggregate

Aggregate properties of GeoJSON polygons, grouped by another set of polygons
JavaScript
6
star
14

css-tokenize

tokenize stream of css
JavaScript
5
star
15

dot-density

Input population regions (geojson polygons), output dot-density (geojson points)
JavaScript
5
star
16

talks

HTML
4
star
17

simple-wedding-page

A simple, responsive page for our wedding, using AngularJS and Firebase to receive RSVP info.
CSS
4
star
18

mbinfo

MBTiles utility
JavaScript
3
star
19

geojson-clip-polygon

A small wrapper around turf-intersect to safely clip one geojson polygon to another
JavaScript
3
star
20

dotfiles

Time to start keeping track of my dotfiles.
Lua
2
star
21

css-rule-stream

transform stream to cut css into rule-sized chunks
JavaScript
2
star
22

debugger-api

An API for attaching to and interacting with the V8 debugger.
JavaScript
2
star
23

npm-data-exploration

Exploring and analyzing npm registry data using dat and iPython Notebooks.
JavaScript
2
star
24

cached-vector-tile

JavaScript
2
star
25

find-us

JavaScript
1
star
26

convexed

Experimenting with an implementation of a "Approximate Convex Decomposition" algorithm
JavaScript
1
star
27

html-outline

streaming transform html to a plaintext DOM outline.
JavaScript
1
star
28

yawpcow

Yet Another Web Programming Course On the Web
CoffeeScript
1
star
29

3d-graphing

TypeScript
1
star
30

geojson-derived-properties

Add derived geometric properties to geojson features.
JavaScript
1
star
31

learnsat

try out some machine learning with landsat
Python
1
star
32

style-stream

Transform stream that reads HTML and writes all (inline and referenced) CSS used in it.
JavaScript
1
star