node package manager

scssinspect

jsinspect

Detect copy-pasted and structurally similar code in your Scss stylesheets.

NPM info

dependencies licence npm version downloads

Overview

Example console output:

screenshot

Example HTML report

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 scssinspect

Usage

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 regex

If 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/**/*.css

Integration

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 || true

Reporters

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 files

HTML

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