Gathering detailed insights and metrics for sass-graph-viz
Gathering detailed insights and metrics for sass-graph-viz
Installations
npm install sass-graph-vizDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
14.17.0
NPM Version
6.14.13
Releases
11
Support loadPaths
v2.4.0
Updated on Jun 29, 2021
Escape Windows paths
v2.3.1
Updated on May 02, 2020
Handle LESS/CSS files too
v2.3.0
Updated on Jul 19, 2019
Fix missing package.json file
v2.2.2
Updated on Feb 08, 2019
Fix the release
v2.2.1
Updated on Feb 08, 2019
Debug logs & CLI version
v2.2.0
Updated on Dec 19, 2018
Languages
4
TypeScript
CSS
Pug
JavaScript
TypeScript (79.44%)
CSS (8.38%)
Pug (7.88%)
JavaScript (4.29%)
Developer
Download Statistics
Total Downloads
5,925
Last Day
3
Last Week
11
Last Month
70
Last Year
686
GitHub Statistics
MIT License
27 Stars
102 Commits
3 Forks
2 Watchers
1 Branches
1 Contributors
Updated on Feb 22, 2025
Maintainers
1
Package Meta Information
Latest Version
2.4.0
Package Id
sass-graph-viz@2.4.0
Unpacked Size
1.49 MB
Size
371.85 kB
File Count
71
NPM Version
6.14.13
Node Version
14.17.0
Total Downloads
Cumulative downloads
Total Downloads
5,925
Last Day
-50%
3
Compared to previous day
Last Week
-62.1%
11
Compared to previous week
Last Month
34.6%
70
Compared to previous month
Last Year
-37.8%
686
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Sass Graph Viz
Draw a visual graph of Sass dependencies.
I want to use it…
You need to install node.js.
As a command line tool
Install it with npm: npm install -g sass-graph-viz
$ sassgraphviz --help
Usage: sassgraphviz [options] <target>
Options:
-e, --exclude-externals Omit files that are not under given target
-l, --load-paths Add directories to the sass load path
-s, --simple Generate a simpler visualization (not recommended for complex graphs)
-p, --port <port> Port to use [3000]
-d, --debug Output details for debugging purposes
-h, --help Output usage information
-v, --version Print sass-graph-viz version
Examples:
sassgraphviz assets/scss
sassgraphviz .
sassgraphviz main.scss
sassgraphviz main.scss --load-paths path/to/sass-sources-1,path/to/sass-sources-2
sassgraphviz main.scss -s -e -p 3001
You can also use the shorthand sgv instead of sassgraphviz (e.g. you can type sgv assets/scss).
As a node.js library…
Install it locally to your project: npm install --save-dev sass-graph-viz
Then import it in your code:
1const sassGraphViz = require("sass-graph-viz");
To generate a visual graph
1generateVisualGraph( target: string, options?: Options );target can be a folder or a file.
options are optionals. Values are:
excludeExternals: booleanto omit files that are not under giventarget(defaultfalse)loadPaths: string[]to add directories to the sass load path (default[process.cwd])useSimpleViz: booleanto generate a simpler visualization (defaultfalse)withDebugLogs: booleanto log details for debugging purposes (defaultfalse)port: numberto use a custom port (default3000)
For instance:
sassGraphViz.generateVisualGraph('path/to/scss/')to render the default graphsassGraphViz.generateVisualGraph('path/to/scss/', { useSimpleViz: true })for the simpler visualizationsassGraphViz.generateVisualGraph('path/to/scss/', { port: 3001 })to use port3001
I want to modify the source code…
You need to install yarn.
First, clone the repository to get code locally: git clone git@github.com:nicoespeon/sass-graph-viz.git
Then, install dependencies: yarn install (or simply yarn)
Finally, if you do some changes, you need to rebuild the lib to use it: yarn build (or yarn build:watch for the watch mode).
And test that nothing has broken
Run tests with yarn test.
This project uses jest as a test runner.
And check the actual behavior of the code
Concrete scenarios are configured in examples/.
You can run one with yarn examples:<name-of-the-example>. For example:
yarn examples:basic-treewill run theexamples/basic-tree/scenarioyarn examples:simple-vizwill run theexamples/simple-viz/scenario
You can run all examples with yarn examples.
I want to contribute
:cowboy_hat_face: You're awesome!
Since this is the very beginning of the project, I didn't wrote a CONTRIBUTING.md yet. But you can go ahead, fork the repo, do your changes and create a Pull-Request.
I'm here to help. If you have any question, just ask with an issue.
If you don't feel like opening a PR, creating an issue to share some suggestions or report a bug is appreciated.
I want to know who made that
Made with :heart: and :unicorn: by Nicolas Carlo under the MIT license.
I have further questions…
Why some nodes are grey, green or red?
Sass-graph-viz does its best to help you analyze your codebase. Colors add semantics to nodes:
- regular SCSS files are always legit, there is nothing we can tell, so they are grey
- partials which are imported by another file feel valid, so they are green
- orphan partials which are not imported are suspicious, so they are red
I've got LESS/CSS files in my codebase. Will it work?
Yes, it will.
It's not the main target of this library, but it can be handy if you need it. Plus, it was easy to enable, thanks to sass-graph's work.
What's the difference with sass-graph?
Indeed, there is this awesome lib called sass-graph which
Parses Sass files in a directory and exposes a graph of dependencies.
I found it when I was looking for a lib to generate a graph of sass dependencies for a messy project. Unfortunately, it was only able to output some sort of graph in my terminal, or a json structure. I wanted something visual.
So I decided to plug sass-graph with a rendering library: this is the core of sass-graph-viz.
The difference is that sass-graph-viz generates a visual graph of dependencies in your browser.
How is this built?
It started with sass-graph and a rendering library. For the latter, I went with viz.js first because the API was simple and the result looked great.
The core idea is:
- Expose a CLI command to get the path to the directory I want to parse
- Delegates to sass-graph the generation of dependencies graph
- Translate sass-graph's Graph into my
Graphmodel - Delegates to viz.js the rendering of the
Graphin the browser
1graph TD 2 CLI -- directory to parse --> Generation["Generation (sass-graph)"] 3 Generation -- Graph --> Rendering["Rendering (viz.js)"] 4 Rendering --> Browser
Once I got the core idea, I can switch the infrastructure to use any concrete implementation I want, as long as it fulfills the expected interfaces.
If you're into Hexagonal Architecture, it may sounds like ports & adapters. It is, but I didn't made interfaces & the hexagon explicit yet (functions and types are simple enough).
For example, in v1, there are also:
- A node.js API that is consumed in the examples (which are manual E2E tests of the visual result)
- Another rendering solution using vis (because viz.js was not enough for real-life graphs)
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
Found 0/18 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 12 are checked with a SAST tool
Reason
61 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
- Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-p493-635q-r6gr
- Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
1.7
/10
Last Scanned on 2025-04-28
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More