feat: Custom colors and spacings stats

bin/antbear.js

@@ -13,6 +13,8 @@ const {
 	getComponentsStats,
 	getPropsStats,
 	getValuesStats,
+	getColorsStats,
+	getSpacingStats,
 } = require('../src');
 
 function getBinaryName() {
@@ -79,6 +81,8 @@ if (patterns.length > 0) {
 	printObject(getComponentsStats(instances), 'Overridden components');
 	printObject(getPropsStats(instances), 'Properties');
 	printObject(getValuesStats(instances), 'Values');
+	printObject(getColorsStats(instances), 'Custom colors');
+	printObject(getSpacingStats(instances), 'Custom spacing');
 
 	if (isVerbose) {
 		printInstances(instances);

package.json

@@ -38,6 +38,8 @@
     "css-shorthand-expand": "^1.2.0",
     "estree-walker": "^2.0.1",
     "glob": "^7.1.6",
+    "is-color": "^1.0.2",
+    "is-css-length": "^0.2.0",
     "kleur": "^4.0.2",
     "lodash": "^4.17.19",
     "longest": "^2.0.1",

src/index.js

@@ -6,6 +6,8 @@ const {
 	getComponentsStats,
 	getPropsStats,
 	getValuesStats,
+	getColorsStats,
+	getSpacingStats,
 } = require('../src/util/calculateStats');
 
 function getInstances(files) {
@@ -21,4 +23,6 @@ module.exports = {
 	getComponentsStats,
 	getPropsStats,
 	getValuesStats,
+	getColorsStats,
+	getSpacingStats,
 };

src/util/calculateStats.js

@@ -1,7 +1,26 @@
 const { countBy, flatMap } = require('lodash');
+const isColor = require('is-color');
+const isLength = require('is-css-length');
 
-// TODO: Custom colors
-// TODO: Custom spacing
+// TODO: Better expanding of background, border
+// TODO: box-shadow, text-shadow, outline
+const COLOR_PROPS = [
+	'color',
+	'background-color',
+	'border-color',
+	'outline-color',
+];
+
+const SPACING_PROPS = [
+	'margin-top',
+	'margin-right',
+	'margin-bottom',
+	'margin-left',
+	'padding-top',
+	'padding-right',
+	'padding-bottom',
+	'padding-left',
+];
 
 const isComponent = (name) => name.match(/^[A-Z]/);
 
@@ -31,3 +50,29 @@ module.exports.getValuesStats = function (instances) {
 	const styles = getAllStyles(instances);
 	return countBy(styles, (style) => style.value);
 };
+
+module.exports.getColorsStats = function (instances) {
+	const styles = getAllStyles(instances);
+	return styles.reduce((colors, { name, value }) => {
+		if (COLOR_PROPS.includes(name) && isColor(value)) {
+			if (!colors[value]) {
+				colors[value] = 0;
+			}
+			colors[value]++;
+		}
+		return colors;
+	}, {});
+};
+
+module.exports.getSpacingStats = function (instances) {
+	const styles = getAllStyles(instances);
+	return styles.reduce((spacings, { name, value }) => {
+		if (SPACING_PROPS.includes(name) && isLength(value)) {
+			if (!spacings[value]) {
+				spacings[value] = 0;
+			}
+			spacings[value]++;
+		}
+		return spacings;
+	}, {});
+};