Проверял на одном CSS-файле, результаты выдаёт как и задумывалось автором модуля. Только насколько точны эти результаты? Этот вопрос возник после проверки более коротких стилей.
Вот с таким примером не ясно, оно не подчитывает определения специально(хотя определило, что используется ровно одно @font-face), или это ошибка? И даже функцию local не посчитало, хотя она используется только внутри блока @font-face.
@font-face {
font-family: Ampersand;
src: local("Baskerville"),
local("Goudy Old Style"),
local("Palatino"),
local("Book Antiqua");
unicode-range: U+26;
}
h1 {
font-family: Ampersand, Helvetica, sans-serif;
}
Решил проверить на простом примере...
.seconds-arrow {
animation: move-seconds-arrow 60s infinite linear frames(60);
}
Получилось такое (показана часть результата):
...
"invalidTimingFunctions": {
"frames(60)": 1
}
...
Интересно, отчего она неправильная? Решил проверить некоторые функции и значения, которые принимает animation-timing-function (
https://www.w3.org/TR/css-timing-1/#timing-functions)
.box {
animation-timing-function: frames(5);
animation-timing-function: steps(5, end);
animation-timing-function: steps(5, start);
animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: linear;
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: cubic-bezier(0, .25, 0, .5);
}
Получилось...
...
"timingFunctions": {
"step-start": 1,
"step-end": 1,
"linear": 1,
"ease": 1,
"ease-in": 1,
"ease-out": 1,
"ease-in-out": 1,
"cubic-bezier(0,.25,0,.5)": 1
},
"invalidTimingFunctions": {
"frames(5)": 1,
"steps(5, end)": 1,
"steps(5, start)": 1,
"cubic-bezier(0, .25, 0, .5)": 1
}
...
Только не понятно, а cubic-bezier правильная «не правильная функция» или не правильная «правильная функция»?
Также может найти не все цвета
.box {
color: #00000000;
color: #fffa;
color: rgb(128 0 60 / .1);
color: rgb(50% 40% 30%);
color: hsl(60deg 50% 35%);
color: hsl(70deg, 40%, 25%);
color: hsl(80deg 40% 30% / .1);
color: deeppink;
}
Вот самый точный подсчёт этих цветов...
...
"usage": {
"#00000000": 1,
"#ffffffaa": 1,
"hsl(70deg,40%,25%)": 1,
"deeppink": 1
}
...
В следующем коде, оказывается, нету ни одного data-uri...
.chess-bg {
background: #eee url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25">\
<rect x="50" width="50" height="50" /> \
<rect y="50" width="50" height="50" /> \
</svg>');
}
Количество объявлении (и их группировка по значениям) display было посчитано правильно!
