scssinspect
v0.6.6
Published
Detect duplication in your scss stylesheets
Downloads
90
Maintainers
jsekReadme
Detect copy-pasted and structurally similar code in your Scss stylesheets.
Overview
Example console output:
There are several types of AST nodes that can be anonymized:
- arguments (in functions and mixins calls)
- base64
- class
- interpolation
- number
- selector
- string
- url
- value
- variable
Installation
Global installation (recommended):
npm i -g scssinspectUsage
Usage: scssinspect [options] <paths ...>
Duplicate code and structure detection for Scss.
Values matching is enabled by default. Example use:
scssinspect --ignore "merged.scss" ./path/to/src
Options:
-h, --help output usage information
-V, --version output the version number
-t, --threshold <number> minimal length of duplicated text (default: 50)
-y, --type [char|token|property] type of element to apply threshold (default: char)
-a, --anonymize <types> types of values to be anonymized (e.g. 'number')
-l, --lang [css|less|sass|scss] set language (default: scss)
--syntax print syntax trees only
-c, --config path to config file (default: .scssinspectrc)
-r, --reporter <name> specify the reporter to use (you can also set custom path to *.js file)
--diff [css|lines|none] type of diff to use (default: lines)
-s, --skip skip files with parsing errors
-C, --no-color disable colors
--ignore <pattern> ignore paths matching a regexIf a .scssinspectrc file is located in the project directory, its values will
be used in place of the defaults listed above. For example:
{
"anonymize" : "number|string" // list of types delimited by '|'
"threshold" : 100,
"type" : "token",
"lang" : "scss",
"diff" : "css",
"reporter" : "html",
"skip" : false,
"ignore" : "bootstrap|legacy|lib" // used as RegExp
}You can use ignore parameter to set one pattern as well as multiple a .scssinspectignore files with patterns applied locally (for current directory and children).
Example .scssinspectignore may look like this:
lib
**/_legacy/**
vendor/**/*.cssIntegration
Example for Travis CI. Expected Entries in your .travis.yml:
before_script:
- "npm install -g scssinspect"
script:
- "scssinspect -t 30 ./path/to/src"If you wish to log results as HTML and not break the build, use following example:
script:
- "scssinspect -t 30 -r html ./path/to/src" > logs/scssinspect.html || trueReporters
Default
Default reporter is well suited for CLI usage.
Match - 2 instances
.\demo\a.scss:2,2
.\demo\b.scss:2,5
- .\demo\a.scss:2,2
+ .\demo\b.scss:2,5
+ div {
+ border: none;
+ color: red;
+ }
- div { color: red; border: none; }
1 match found across 2 filesHTML
HTML reporter is well suited for CI usage. (Note that example below got indentation and formatting)
<!doctype html>
<html>
<head>
<style><!-- styles --></style>
<title><!-- current date --></title>
</head>
<body>
<header>Match - 2 instances</header>
<h3>demo\a.scss:3,3</h3>
<h3>demo\b.scss:6,8</h3>
<pre class='diff'>
<code class='diff-files'>
- .\demo\a.scss:3,3
+ .\demo\b.scss:6,8
</code>
<code class='line-added'>+ .b, .a { </code>
<code class='line-added'>+ color: #fff; </code>
<code class='line-added'>+ } </code>
<code class='line-removed'>- .a,.b { color: #fff; }</code>
</pre>
<footer>
<span class='failure'>1 match found across 2 files</span>
</footer>
</body>
</html>Known issues
Scssinspect is dependent on Gonzales-PE parser which sometimes cannot parse scss
libraries (like bootstrap). It is recommended to ignore these files or directories
using --ignore flag or ignore property in .scssinspectrc.
Performance
Workstation:
- CPU: Intel Xeon 3.40GHz
Codebase (big):
- 200 files, ~35 000 LOC
> powershell Measure-Command {scssinspect -t 30 -y property --diff none ./path/to/src}
TotalSeconds : 4.22