feat: display tracking information about unused variables

Unused variables are grouped per containig files and displayed with line
and column information. Files are displayed relatively to working
directory. In addition to total amount of variables, amount of unused
variables gets also displayed.

fix(app.js): Fixed file according to xo linting rules

feat: print enhanced information of unused variable

line and column of unused variable with respect to all files of one
regarded directory, i.e., within concatenation of all those files, are
printed

fix: line Info of variable now gets displayed per containing file

fix: unused variables are grouped per containing file

feat: display path of files containing unused variables relatively

fix: added newline  before files containing UVs are displayed

stlye(cli.js): put console.log command on more lines

refactor(index.js): refactored calculation of variable Lines per File

fix(cli.js): exchanged manual ansi escape code with chalk command

fix: Deleted wrongfully copied directory

fix(README.md): Updated README.md

fix(): incorporated ideas from PR #124

Co-Authored-By: Daniel <50356015+danny007in@users.noreply.github.com>

README.md

@@ -31,8 +31,25 @@ let unused = fusv.find('scss')
 // Array of unused variables
 console.log(unused.unused);
 // ['$foo', '$bar', '$imunused']
+console.log(unused.unusedOrigin);
+// [
+//  {
+//      name: '$foo',
+//      column: x_1,
+//      line: y_2,
+//      file 'scss/dir1/dir2/foo.scss'
+//  },
+//  {
+//      name: '$bar',
+//      column: x_2,
+//      line: y_2
+//      file 'scss/bar.scss'
+//  }
+//]
 console.log(unused.total);
-// Total number of variables in the files
+// Total number of variables in the files in directory 'scss'
+console.log(unused.totalUnused);
+// Number of unused variables in the files in directory 'scss'
 
 // ignoring variables
 const ignoredVars = ['$my-var', '$my-second-var']
@@ -44,7 +61,13 @@ unused = fusv.find('scss', { ignore: ignoredVars })
 * `dir`: string
 * `options`: optional options Object
 
-Returns an object with `unused` and `total`. `unused` has the array of unused variables and `total` has the sum of all variables in the files (unused and used ones).
+Returns an object with `unusedOrigin`, `unused`, `totalUnused` and`total`.
+
+* `unusedOrigin` is an array carrying objects containing unused sass variables and their origin,
+Information included are the `name` of the variable as well as the `line` and `column` of the variable in their originating `file`,
+* `unused` is an of array of unused variables without further information,
+* `totalUnused` has the sum of all unused variables of all examined files in given `dir`,
+*  and `total` has the sum of all variables of all examined files in given `dir` (unused and used ones).
 
 #### options.ignore
 

cli.js

@@ -30,13 +30,25 @@ function main(args) {
         const unusedVars = fusv.find(dir, { ignore });
 
         console.log(`${chalk.cyan.bold(unusedVars.total)} total variables.`);
-
-        unusedVars.unused.forEach(unusedVar => {
-            console.log(`Variable ${chalk.bold(unusedVar)} is not being used!`);
+        console.log(`${chalk.cyan.bold(unusedVars.totalUnusedVars)} total unused variables.`);
+
+        let currentFile = '';
+        const currentDirectory = process.cwd();
+        unusedVars.unusedInfo.forEach(unusedVar => {
+            if (currentFile !== unusedVar.file) {
+                currentFile = unusedVar.file;
+                const fileRelativePath = path.relative(currentDirectory, currentFile);
+                console.log(`\n${chalk.underline(fileRelativePath)}`);
+            }
+
+            console.log(
+                ` ${unusedVar.line}:${unusedVar.column}\t` +
+                `Variable ${chalk.bold(unusedVar.name)} is not being used!`
+            );
         });
 
         // eslint-disable-next-line unicorn/prefer-spread
-        unusedList = unusedList.concat(unusedVars.unused);
+        unusedList = unusedList.concat(unusedVars.unusedInfo);
     });
 
     if (unusedList.length === 0) {

index.js

@@ -28,29 +28,39 @@ function findUnusedVars(strDir, opts) {
     // Array of all Sass files
     const sassFiles = glob.sync(path.join(dir, '**/*.scss'));
 
-    // String of all Sass files' content
-    let sassFilesString = sassFiles.reduce((sassStr, file) => {
-        sassStr += fs.readFileSync(file, 'utf8');
-        return sassStr;
-    }, '');
-
-    // Remove jekyll comments
-    if (sassFilesString.includes('---')) {
-        sassFilesString = sassFilesString.replace(/---/g, '');
-    }
+    // Build sassFilesString as concatenation of all sassFiles
+    // Get all variables and their origin information
+    let variables = [];
+    const sassVarInfo = [];
+    let strSass = '';
+    let sassFilesString = '';
+    sassFiles.forEach((file, i) => {
+        strSass = fs.readFileSync(file, 'utf8');
+
+        // remove jekyl comments
+        if (strSass.includes('---')) {
+            strSass = strSass.replace(/---/g, '');
+        }
 
-    const variables = parse(sassFilesString, options.ignore);
+        sassVarInfo[i] = parse(strSass, options.ignore, file);
+
+        variables = [].concat(...sassVarInfo);
+        sassFilesString += strSass;
+    });
 
-    // Store unused vars from all files and loop through each variable
+    // Get unused variables by filtering single occuring variables in in sassFilesString
     const unusedVars = variables.filter(variable => {
-        const re = new RegExp(`(${escapeRegex(variable)})\\b(?!-)`, 'g');
+        const re = new RegExp(`(${escapeRegex(variable.name)})\\b(?!-)`, 'g');
 
         return sassFilesString.match(re).length === 1;
     });
 
+    // Unused and total for backwards compatibility
     return {
-        unused: unusedVars,
-        total: variables.length
+        totalUnusedVars: unusedVars.map(({ name }) => name).length,
+        total: variables.length,
+        unusedInfo: unusedVars,
+        unused: unusedVars.map(({ name }) => name)
     };
 }
 

lib/parse-variable.js

@@ -5,27 +5,32 @@ const Declaration = require('postcss/lib/declaration');
 const Comment = require('postcss/lib/comment');
 let fusvEnabled = true;
 
-function parseNodes(nodes, variables, ignoreList) {
+function parseNodes(nodes, variables, ignoreList, file = '') {
     for (const node of nodes) {
-        findVars(node, variables, ignoreList);
+        findVars(node, variables, ignoreList, file);
     }
 }
 
-function findVars(node, result, ignoreList) {
+function findVars(node, result, ignoreList, file = '') {
     if (node instanceof Comment) {
         parseComment(node);
 
         return;
     }
 
     if (node instanceof Declaration && node.prop.startsWith('$') && !ignoreList.includes(node.prop) && fusvEnabled) {
-        result.push(node.prop);
+        result.push({
+            name: node.prop,
+            line: node.source.start.line,
+            column: node.source.start.column,
+            file
+        });
 
         return;
     }
 
     if (node.nodes) {
-        parseNodes(node.nodes, result, ignoreList);
+        parseNodes(node.nodes, result, ignoreList, file);
     }
 }
 
@@ -37,11 +42,11 @@ function parseComment(node) {
     }
 }
 
-function parse(scssString, ignoreList) {
+function parse(scssString, ignoreList, file = '') {
     const parsedScss = scssParse(scssString);
     const variables = [];
 
-    parseNodes(parsedScss.nodes, variables, ignoreList);
+    parseNodes(parsedScss.nodes, variables, ignoreList, file);
     return variables;
 }