xhmikosr / find-unused-sass-variables Goto Github PK
View Code? Open in Web Editor NEWA simple tool to find unused Sass variables
License: MIT License
A simple tool to find unused Sass variables
License: MIT License
It would be nice if this could be a stylelint plugin, maybe we can just extend https://github.com/kristerkari/stylelint-scss?
And make use of variadic options
We might need to switch to globby
too.
Also, we could probably keep a fusv.sync
method.
EDIT: we can keep glob and use util.promisify
probably.
Hi guys,
I just did some tests with this tool, but ran into an issue when variables are used outside the folder that is scanned.
For example:
$variable: value;
@import "../path-outside-scanned-folder/variable-is-used-here.scss";
This will erroneously fail.
I tried to solve this, but then I realised #4 needed to be fixed first because a way to scan a file is needed.
https://github.com/sindresorhus/escape-string-regexp
No need to reinvent the wheel, but since it requires Node.js 8.x, wait a bit.
If you have a variable which name is a part of an other variable, it's flagged as used. It is because the ReExp find more than one occurrence.
const variables = ['$unused', '$black', '$black-light', '$black-lightest'];
const sassFilesString = '$unused: #123; $black: #000; $black-light: #111; $black-lightest: #222; .class {color: $black;}';
function regExpQuote(str) {
return str.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
}
const unusedVars = variables.filter(variable => {
const re = new RegExp(regExpQuote(variable), 'g');
return sassFilesString.match(re).length === 1;
});
console.log(unusedVars); // ["$unused", "$black-lightest"]
$black
and $black-light
are not used in the SCSS code but part of $black-lightest
After update to the latest version amount of total variables is zero.
Windows 10, command line inside IntelliJ IDEA
npm 9.6.7
node 18.17.1
C:\git\...>npx find-unused-sass-variables projects\quote-ui
Looking for unused variables
Searching for unused variables in "C:\git\...\projects\quote-ui" folder, scss files...
206 total variables
No unused variables found in "C:\git\...\projects\quote-ui"!
C:\git\...>npm install find-unused-sass-variables@latest
added 2 packages, and changed 3 packages in 5s
181 packages are looking for funding
run `npm fund` for details
C:\git\...>npx find-unused-sass-variables projects\quote-ui
Looking for unused variables
Searching for unused variables in "C:\git\...\projects\quote-ui\src" folder, scss files...
0 total variables
No unused variables found in "C:\git\...\projects\quote-ui\src"!
Let's you ignore SCSS file(s):
Change in index.js
const sassFiles = glob.sync(path.join(dir, '**/*.scss'), { ignore: opt.ignoreFiles });
Usage:
const unused = fusv.find("./scss", { ignoreFiles: ["**/_crappy-vars.scss"], ignore: ["$crappy-var"] });`
I have a branch with pretty basic CLI support. It works OK but I want to get rid of the global variable I'm using and then merge.
We could add a package like commander if needed, but preferably we should keep it as simple as possible since this tool is pretty dump.
Note to self: document caveats.
Or rather never worked but the docs and cli say it's supported.
3.1.0:
C:\Users\xmr\Desktop\find-unused-sass-variables>fusv tests/ --ignore="$a,$b"
Looking for unused variables
Finding unused variables in "C:\Users\xmr\Desktop\find-unused-sass-variables\tests"...
9 total variables.
Variable $unused is not being used!
Variable $black is not being used!
Variable $ignored-variable is not being used!
Variable $enabled-variable is not being used!
Variable $nestedVar is not being used!
Variable $nestNestedVar is not being used!
C:\Users\xmr\Desktop\find-unused-sass-variables>echo %ERRORLEVEL%
1
main:
C:\Users\xmr\Desktop\find-unused-sass-variables>npm run test:cli
> [email protected] test:cli
> node ./cli.js tests/ --ignore="$a,$b"
Looking for unused variables
Searching for unused variables in "C:\Users\xmr\Desktop\find-unused-sass-variables\tests" folder, scss files...
9 total variables.
6 are not used!
Variable $unused is not being used! C:/Users/xmr/Desktop/find-unused-sass-variables/tests/_variables.scss:4
Variable $black is not being used! C:/Users/xmr/Desktop/find-unused-sass-variables/tests/_variables.scss:5
Variable $ignored-variable is not being used! C:/Users/xmr/Desktop/find-unused-sass-variables/tests/_variables.scss:13
Variable $enabled-variable is not being used! C:/Users/xmr/Desktop/find-unused-sass-variables/tests/_variables.scss:19
Variable $nestedVar is not being used! C:/Users/xmr/Desktop/find-unused-sass-variables/tests/test.scss:7
Variable $nestNestedVar is not being used! C:/Users/xmr/Desktop/find-unused-sass-variables/tests/test.scss:12
C:\Users\xmr\Desktop\find-unused-sass-variables>echo %ERRORLEVEL%
0
Except for fs.existsSync
which isn't deprecated, but including glob
.
EDIT:
We might need to switch to globby
too.
Also, we should probably keep a fusv.sync
method.
EDIT2: we can keep glob and use util.promisify
probably.
If a file has the following:
---
---
@charset "utf-8";
@import "vendor/normalize";
---
is needed for jekyll, then it throws
C:\Users\xmr\Desktop\foo\blog>fusv .
Looking for unused variables
i Finding unused variables in "C:\Users\xmr\Desktop\foo\blog"...
C:\Users\xmr\Desktop\find-unused-sass-variables\node_modules\postcss\lib\parser.js:504
throw this.input.error('Unknown word', tokens[0][2], tokens[0][3]);
^
CssSyntaxError: <css input>:1392:1: Unknown word
at Input.error (C:\Users\xmr\Desktop\find-unused-sass-variables\node_modules\postcss\lib\input.js:124:16)
at ScssParser.unknownWord (C:\Users\xmr\Desktop\find-unused-sass-variables\node_modules\postcss\lib\parser.js:504:22)
at ScssParser.other (C:\Users\xmr\Desktop\find-unused-sass-variables\node_modules\postcss\lib\parser.js:169:12)
at ScssParser.parse (C:\Users\xmr\Desktop\find-unused-sass-variables\node_modules\postcss\lib\parser.js:83:16)
at scssParse (C:\Users\xmr\Desktop\find-unused-sass-variables\node_modules\postcss-scss\lib\scss-parse.js:11:10)
at Object.findUnusedVars [as find] (C:\Users\xmr\Desktop\find-unused-sass-variables\index.js:30:24)
at args.forEach (C:\Users\xmr\Desktop\find-unused-sass-variables\cli.js:33:29)
at Array.forEach (<anonymous>)
at Object.<anonymous> (C:\Users\xmr\Desktop\find-unused-sass-variables\cli.js:28:6)
at Module._compile (internal/modules/cjs/loader.js:689:30)
H:\progs\dev\find-unused-sass-variables>node cli.js ..\..\
Looking for unused variables
i Finding unused variables in "H:\progs"...
H:\progs\dev\find-unused-sass-variables\index.js:35
variables.forEach((variable) => {
^
TypeError: Cannot read property 'forEach' of null
at Object.findUnusedVars [as find] (H:\progs\dev\find-unused-sass-variables\index.js:35:15)
at args.forEach (H:\progs\dev\find-unused-sass-variables\cli.js:33:29)
at Array.forEach (<anonymous>)
at Object.<anonymous> (H:\progs\dev\find-unused-sass-variables\cli.js:28:6)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Function.Module.runMain (module.js:676:10)
If the old version(example v7.0.13) of postcss
installed in package, find() of find-unused-sass-variables
is returned no result.
In this case, Declaration
class referred to by find-unused-sass-variable
and that referred to by postcss-scss
are different.
Because, postcss-scss
used old version(v7.0.13) of postcss
and
find-unused-sass-variable
used new version (v7.0.23 after) of postcss
.
The node instance of Declaration
always false in parse-variable.js
.
The same applies to Comment
class.
module | path of Declaration class |
---|---|
postcss-scss |
/node_modules/postcss/lib/declaration.js |
find-unused-sass-variables |
/node_modules/find-unused-sass-variables/node_modules/postcss/lib/declaration.js |
examples: unused_test.zip
npm install
npm run test
{ unused: [ '$unused1' ], total: 1 }
npm install --save-dev [email protected]
npm run test
{ unused: [], total: 0 }
I'm not good at English.
node: v12.13.1
npm: v6.12.1
Revert #113 and make sure it works after we have async API
https://www.npmjs.com/package/ignore-by-default
Maybe with an option though.
$a
isn't detected because the second character is a :
On Ubuntu:
> node ./cli.js tests/ --ignore="$a,$b"
Looking for unused variables
Searching for unused variables in "/home/runner/work/find-unused-sass-variables/find-unused-sass-variables/tests" folder, scss files...
11 total variables.
8 are not used!
Variable $a is not being used! /home/runner/work/find-unused-sass-variables/find-unused-sass-variables/tests/_variables.scss:2
Variable $b is not being used! /home/runner/work/find-unused-sass-variables/find-unused-sass-variables/tests/_variables.scss:3
Variable $unused is not being used! /home/runner/work/find-unused-sass-variables/find-unused-sass-variables/tests/_variables.scss:4
Variable $black is not being used! /home/runner/work/find-unused-sass-variables/find-unused-sass-variables/tests/_variables.scss:5
Variable $ignored-variable is not being used! /home/runner/work/find-unused-sass-variables/find-unused-sass-variables/tests/_variables.scss:13
Variable $enabled-variable is not being used! /home/runner/work/find-unused-sass-variables/find-unused-sass-variables/tests/_variables.scss:19
Variable $nestedVar is not being used! /home/runner/work/find-unused-sass-variables/find-unused-sass-variables/tests/test.scss:7
Variable $nestNestedVar is not being used! /home/runner/work/find-unused-sass-variables/find-unused-sass-variables/tests/test.scss:12
On Windows:
> node ./cli.js tests/ --ignore="$a,$b"
Looking for unused variables
Searching for unused variables in "D:\a\find-unused-sass-variables\find-unused-sass-variables\tests" folder, scss files...
9 total variables.
6 are not used!
Variable $unused is not being used! D:/a/find-unused-sass-variables/find-unused-sass-variables/tests/_variables.scss:4
Variable $black is not being used! D:/a/find-unused-sass-variables/find-unused-sass-variables/tests/_variables.scss:5
Variable $ignored-variable is not being used! D:/a/find-unused-sass-variables/find-unused-sass-variables/tests/_variables.scss:13
Variable $enabled-variable is not being used! D:/a/find-unused-sass-variables/find-unused-sass-variables/tests/_variables.scss:19
Variable $nestedVar is not being used! D:/a/find-unused-sass-variables/find-unused-sass-variables/tests/test.scss:7
Variable $nestNestedVar is not being used! D:/a/find-unused-sass-variables/find-unused-sass-variables/tests/test.scss:12
It seems that the ignore
CLI option isn't respected on Linux. Maybe we need to escape $
?
Problem: Parser will yield errors like CssSyntaxError: <css input>:x:x: Unknown word
Quick fix: In file index.js change sassStr += fs.readFileSync(file, 'utf8');
to e.g.
let data = fs.readFileSync(file, 'utf-8');
// Remove 0xFEFF / BOM / UTF-8 with signature
if (data.startsWith("")) {
data = data.substring(1);
}
sassStr += data;
Maybe we should be able to do that in nodejs scripts :
const findUnusedSassVar = require('find-unused-sass-variables')
const folders = []
const unUsed = findUnusedSassVar.find(folders)
Currently, when we ignore a variable, it's removed from the total number of variables.
Not sure if it would make more sense to not change the total number of variables... Perhaps it should only change the number of unused variables only.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.