Feature: Ignore partial support

[ncoden]

In my use of doiuse for Foundation, I have a lot of properties that are partially supported.

The most common are:

• rem and transition by IE9/10
• box-shadow and background-image options by Android Browser 2.3/3

Currently, there is so much partial support errors that the most important errors can be easily forgotten.

I don't need to have a full support of these old browsers, so the errors that must be shown are only the unsupported properties for these browsers, and the unsupported or partially supported properties for the newer browsers. I think it would be very useful to be able to ignore all partial support errors, or for a specific list of browsers.

For example, with gulp:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var doiuse = require('doiuse');

var COMPATIBILITY = [
  'last 2 versions',
  'ie >= 9',
  'Android >= 2.3',
  'ios >= 7'
];

var FULL_COMPATIBILITY = [
  'last 2 versions',
  'ie >= 10',
  'Android >= 4.0',
  'ios >= 7'
];

gulp.task('doiuse', function() {
  return gulp.src(['_build/assets/css/foundation.css'])
    .pipe(postcss([doiuse({
      browsers: COMPATIBILITY,
      partialSupport: true,
      partialSupportBrowsers: FULL_COMPATIBILITY,
      onFeatureUsage: function (usageInfo) {
        console.log(usageInfo.message)
      }
    })]))
});

Options:

• browsers (default: {}): list of browsers used to search for unsupported features.
• partialSupport (default: true): check for partially supported features.
• partialSupportBrowsers (default: browsers): list of browsers used to search for partially supported features.

What do you think ?

[anandthakker]

@ncoden Hmm. If I'm not mistaken, this is something you could already do by looking at usageInfo.featureData.missing and usageInfo.featureData.partial in your onFeatureUsage function. Is that workable for you?

[Nemo64]

I there a concrete use case for this? I think of the css-gradients warning (that I actually caused but meh...) but I wouldn't remove iOS and Safari to my partial support list. In that case I'd much rather ignore css-gradients in those specific browsers because I either know the risk or have the appropriate postcss plugin installed.

[kristerkari]

I there a concrete use case for this?

Yes there is. The stylelint plugin stylelint-no-unsupported-browser-features would need a new option that would ignore partially supported features.

In my project I'm only interested in knowing which properties are not supported at all in the browsers that I have defined in my browserslist. I want to ignore the partially supported features because in most cases those are features that work just fine, but might have some limitations.

With the way that doiuse currently works, you would have to first run doiuse to get a list of partially supported features, and then run doiuse again to ignore those partially supported features.

What would be needed is some flag in the result that tells if the feature is partially supported, instead of having that info in the onFeatureUsage callback.

[Nemo64]

only interested in knowing which properties are not supported at all in the browsers

And that is the difficult part. The css features aren't specific enough to tell you that. If you use css-grids (which is partially supported in IE 11) you might not notice that it is completely broken. And if you say that "you should know" than why use doiuse at all?

[kristerkari]

And if you say that "you should know" than why use doiuse at all?

As I said I'm only interested in seeing which CSS features are not supported at all. I use MDN or caniuse.com if I want to see which browser limitations certain CSS features have. I don't want that to be part of my CSS linter.

[eduardomoroni]

I ran into similar issue, partial support is optional but full support is mandatory. I am using an ESLint to do the check on the pipeline.

https://gitlab.com/ismay/stylelint-no-unsupported-browser-features/issues/87 for reference