PostCSS doiuse плагин

Линтит CSS на наличие поддержки браузером селекторов и свойств, использует для поиска базу данных “Сan I Use”.


Установка

pm install -g doiuse
 

Разработка

git clone git@github.com:anandthakker/doiuse.git
cd doiuse
npm install
npm run babel

Последний шаг транспалирует ES6 c ./src в ES5 в ./lib.  Уже происходит, как   pretest шаг для  npm test.

 
 

Примеры doiuse


 

Командная строка

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

пример вывода:

/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)

Используйте --json для получения результата в виде JSON объектов.

 

JS

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

postcss(doiuse({
  browsers:['ie >= 6', '> 1%'],
  ignore: ['rem'], // массив функций, которые будут проигнорированы
  ignoreFiles: ['**/normalize.css'], // массив файлов для сопоставления первоначального пути исходного файла, которые будут проигнорированны
  onFeatureUsage: function(usageInfo) {
    console.log(usageInfo.message);
  }
})).process("a { background-size: cover; }")

Gulp

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'], // массив функций, которые будут проигнорированы
    ignoreFiles: ['**/normalize.css'], // массив файлов для сопоставления первоначального пути исходного файла, которые будут проигнорированны
    onFeatureUsage: function (usageInfo) {
      console.log(usageInfo.message)
    }
  })
]))
 
 

Как это работает


В частности, подход к обнаружению использования особенностей все еще является весьма упрощенным.

  • Если функция в этом наборе данных определяет только свойства, мы просто использовать эти свойства для регулярных выражений / подстрок, соответствующих напротив свойств, используемых во входном CSS.
  • Если функция также определяет значения, то мы также просим, чтобы соответствующее значение соответствовало одному из этих значений.

Подробности API


Как преобразовать поток

var doiuse = require('doiuse/stream');

process.stdin
  .pipe(doiuse({ browsers: ['ie >= 8', '> 1%'], ignore: ['rem'] }))
  .on('data', function (usageInfo) {
    console.log(JSON.stringify(usageInfo))
  })

UsageInfo Объект как описывается выше.

Как PostCSS плагин

postcss(doiuse(opts)).process(css), где pts это:

{
  browsers: ['ie >= 8', '> 1%'], // an autoprefixer-like array of browsers.
  ignore: ['rem'], // массив функций, которые будут проигнорированы
  ignoreFiles: ['**/normalize.css'], // массив файлов для сопоставления первоначального пути исходного файла, которые будут проигнорированны
  onFeatureUsage: function(usageInfo) { } // обратный вызов, для использования функций, которые не поддерживаюся в выбранном браузере.
}

И usageInfo будет иметь вид, как:

{
  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)" // строка из браузеров, не поддерживающие эту функцию.
    missingData: {
      // map of browser -> version -> (lack of)support code
      ie: { '8': 'n' }
    },
    caniuseData: { // данные из caniuse-db/features-json/[feature].json }
  },
  usage: {} // узел postcss, где используется эта функция.
}
Вызывается один раз для каждого использования каждой функции CSS, которые не поддерживаются выбранными
браузерами.

 


Не обращая внимания на правила для определенных типов файлов:

Для отключения некоторых проверок вы можете использовать just-in-place комментарии.

/* doiuse-disable */

Отключение проверки для всех типов функций

/* doiuse-disable feature */

Отключение проверки для определенных функций( может быть разделенный запятой список)

/* doiuse-enable */

Перезапуск проверки всех функций

/* doiuse-enable feature */

Включение проверки для определенных функций( может быть разделенный запятой список)

  • для следующих строк в файле

 

Помощь

doiuse — проект с откртым исходным кодом(OPEN Open Source). Это означает следующее:

Лица, вносящие значительные и ценные вклады дают обязательство-доступ к проекту, чтобы внести свой вклад, как они считают нужным. Этот проект больше похож на открытую вики, чем стандартная проект с открытым исходным кодом.

 

Доверие от мировых лидеров