feat: Add custom styles per module

component-driven · Jul 31, 2020 · 254f3ef · 254f3ef
1 parent 9fc1fb1
commit 254f3ef
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 0 deletions.
diff --git a/Readme.md b/Readme.md
@@ -18,6 +18,16 @@ By analyzing custom styles usage in the application and finding which component
 - [ ] CSS Modules
 - [ ] Sass
 
+## Statistics
+
+- [x] Custom styles per module
+- [x] Overridden elements
+- [x] Overridden components
+- [x] CSS properties
+- [x] CSS values
+- [x] Custom colors (very basic, needs more work)
+- [x] Custom spacing
+
 ## Changelog
 
 The changelog can be found on the [Releases page](https://github.com/sapegin/antbear/releases).

diff --git a/bin/antbear.js b/bin/antbear.js
@@ -8,6 +8,7 @@ const kleur = require('kleur');
 const longest = require('longest');
 const { flatMap, sortBy } = require('lodash');
 const {
+	getStylesPerModule,
 	getInstances,
 	getElementsStats,
 	getComponentsStats,
@@ -50,6 +51,11 @@ function printInstances(instances) {
 	});
 }
 
+function printMetric(value, caption) {
+	console.log(kleur.underline(caption), value.toFixed(2));
+	console.log();
+}
+
 function printObject(object, caption) {
 	const keyColWidth = longest(Object.keys(object)).length;
 	const valueColWidth = longest(Object.values(object)).length;
@@ -77,6 +83,10 @@ if (patterns.length > 0) {
 	const files = flatMap(patterns, (pattern) => glob.sync(pattern));
 	const instances = getInstances(files);
 
+	printMetric(
+		getStylesPerModule(instances, files.length),
+		'Custom styles per module'
+	);
 	printObject(getElementsStats(instances), 'Overridden elements');
 	printObject(getComponentsStats(instances), 'Overridden components');
 	printObject(getPropsStats(instances), 'Properties');

diff --git a/src/index.js b/src/index.js
@@ -2,6 +2,7 @@ const fs = require('fs');
 const { flatMap } = require('lodash');
 const { parseJavaScript } = require('./util/parseJavaScript');
 const {
+	getStylesPerModule,
 	getElementsStats,
 	getComponentsStats,
 	getPropsStats,
@@ -18,6 +19,7 @@ function getInstances(files) {
 }
 
 module.exports = {
+	getStylesPerModule,
 	getInstances,
 	getElementsStats,
 	getComponentsStats,

diff --git a/src/stats.js b/src/stats.js
@@ -27,6 +27,11 @@ const isComponent = (name) => name.match(/^[A-Z]/);
 const getAllStyles = (instances) =>
 	flatMap(instances, (instance) => instance.styles);
 
+module.exports.getStylesPerModule = function (instances, numberOfFiles) {
+	const styles = getAllStyles(instances);
+	return styles.length / numberOfFiles;
+};
+
 module.exports.getElementsStats = function (instances) {
 	const elementsOnly = instances.filter(
 		(instance) => !isComponent(instance.component)