npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

find-unused-sass-variables

v6.0.0

Published

A small tool to find unused Sass variables

Downloads

207,817

Readme

find-unused-sass-variables

npm version Build Status

A simple tool to check for unused Sass variables in a directory.

Install

npm install find-unused-sass-variables --save-dev

Usage

find-unused-sass-variables folder [, folder2...] --ignore "$my-var,$my-second-var" -e scss -e css --ignoreFiles file-with-unused-vars.scss
# or
fusv folder [, folder2...] --ignore "$my-var,$my-second-var" -e scss -e css --ignoreFiles file-with-unused-vars.scss

API

import { findAsync, find } from 'find-unused-sass-variables';

// 'directory' is a folder
const unused = find('directory');
// Array of unused variables
console.log(unused.unused);
// Array<{ name: string, line: string, file: string }>
/*
[
  {
    name = '$foo';
    file = 'file where this variable can be found';
    line = 'line of file';
  },
  {
    ....
  }
]
*/
// Total number of variables in the files
console.log(unused.total);
// Ignoring variables
const ignoredVars = ['$my-var', '$my-second-var'];
const unused = find('directory', { ignore: ignoredVars });
// Ignoring files
const ignoreFiles = ['./file-with-unused-vars.scss', '**/_variables.scss'];
const unused = fusv.find('directory', { ignoreFiles });
// Specifying file extensions
const unused = find('directory', { fileExtensions: ['css','scss']});
// Asynchronous usage
let unused = await findAsync('directory');

// or like a Promise
unused = findAsync('directory').then(result => {
  console.log(unused.unused);
});

find(dir, options)

  • 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).

findAsync(dir, options)

Returns a Promise which resolves result; returns the same as find(dir, options).

options.ignore

Array of strings of the variables to ignore, e.g. ['$my-var', '$my-second-var']

options.ignoreFiles

Array of strings of files to ignore, e.g. ['./file-with-unused-vars.scss', '**/_variables.scss'].

options.fileExtensions

Array of file extensions to search for unused variables in. e.g. ['scss']

Disable & enable

Disable or enable fusv with the fusv-disable and fusv-enable comments:

$used-variable-1: #666;

// fusv-disable
$unused-variable: #coffee;
// fusv-enable

$used-variable-2: #ace;

Notes

  • The tool's logic is pretty "dumb"; if you use the same name for a variable in different files or namespaces, then it won't distinguish between them.
  • The tool only looks for .scss files by default, but you can optionally specify the file extension.

License

MIT