Нужен фидбек по модулю
 

Хай!

https://github.com/everget/scancss

Это собиратор статистики по CSS стайлшитам. По типу cssstats, но помощнее.

Кто может потестить/опробовать/потыкать в деле - сделайте это, пожалуйста.

Best regards,
ваш Кориолан.

Ок, попробуем.

Проверял на одном 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 было посчитано правильно!