Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/anandthakker/doiuse

:bomb: Lint CSS for browser support against caniuse database.
https://github.com/anandthakker/doiuse

Last synced: 13 days ago
JSON representation

:bomb: Lint CSS for browser support against caniuse database.

Host: GitHub
URL: https://github.com/anandthakker/doiuse
Owner: anandthakker
License: mit
Created: 2014-11-12T15:37:16.000Z (almost 10 years ago)
Default Branch: master
Last Pushed: 2024-10-21T14:17:00.000Z (21 days ago)
Last Synced: 2024-10-21T23:16:15.776Z (21 days ago)
Language: JavaScript
Homepage:
Size: 881 KB
Stars: 1,244
Watchers: 18
Forks: 51
Open Issues: 39
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

        [![Build Status](https://travis-ci.org/anandthakker/doiuse.svg?branch=master)](https://travis-ci.org/anandthakker/doiuse)

[![Release Notes](https://release-notes.com/badges/v2.svg)](https://release-notes.com/@open-source-community/anandthakker-doiuse)

# doiuse

Lint CSS for browser support against [Can I use](http://caniuse.com) database.

## Install

```sh

npm install -g doiuse

```

## Usage Examples

### Command Line

```bash

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

```javascript

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)

```javascript

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](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

```javascript

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:

```javascript

{

  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:

```javascript

{

  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.

### Ignoring file-specific rules

For disabling some checks you can use just-in-place comments

##### `/* doiuse-disable */`

Disables checks of _all [features](#features-list)_

##### `/* doiuse-disable feature */`

Disables checks of _specified [feature(s)](#features-list)_ (can be comma separated list)

##### `/* doiuse-enable */`

Re-enables checks of _all [features](#features-list)_

##### `/* doiuse-enable feature */`

Enables checks of _specified [feature(s)](#features-list)_  (can be comma separated list)

 - for following lines in file

## [Contributing](CONTRIBUTING.md)

doiuse is an [OPEN Open Source](http://openopensource.org/) 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 .  Please see https://github.com/postcss/autoprefixer-core.