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

css-dep-tree

v1.0.0-beta.6

Published

Generates a CSS dependency tree and dependency file/URL lists based on CSS imports

Downloads

1

Readme

css-dep-tree NPM Package

ISC License

Generates a CSS dependency tree and dependency file/URL lists based on CSS imports

Changelog

Install

Project Install

$ npm install --save css-dep-tree

Global Install

$ npm install -g css-dep-tree

Usage

Node Library:

let cssDepTree = require('css-dep-tree');

// `cssDepTree` returns a `Promise`
cssDepTree('main.css').then((results) => {
  console.log(results);
})
.catch((err) => {
  console.error(err);
});

// `cssDepTree` will also accept a callback
cssDepTree('main.css', (err, results) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log(results);
});

Command Line Tool:

$ cssdt -h

  Usage:
    (cssdt|cssdeptree) <cssFile> [options]

  Options:
    -r  --relative       Output files paths relative to current directory

    -l  --files-list     Only show list of file dependencies
    -u  --urls-list      Only show list of URL dependencies

    -L  --exclude-files  Exclude all files from output
    -U  --exclude-urls   Exclude all URL dependencies from output
    -T  --exclude-tree   Exclude dependency tree from output (only file and URL lists will be present)

    -c  --compress       Compress output JSON

    -h  --help           Show this message
    -V  --version        Show version number

API

cssDepTree(filePath, [options], [callback])

Builds a dependency tree and lists of all file and URL dependencies.

Parameters

  • filePath String Path to entry CSS file.

  • options Object or FunctionOperation options. (If options is a Function, then it is assumed to be the callback parameter).

    • relative Boolean (Default: false) If true, all file paths in results are expressed relative to the current directory.
    • excludeTree Boolean (Default: false) If true, full dependency tree object is excluded from results.
    • excludeFiles Boolean (Default: false) If true, all file dependency paths are excluded from results.
    • excludeURLs Boolean (Default: false) If true, all URL dependency paths are excluded from results.
  • callback(err, results) Function Callback function to execute when operation has completed.

Return Value

Type: Promise<Object>

The Object returned by the callback function parameter and Promise resolved callback has three properties:

  • tree Object Represents the full dependency tree. (Not present if options.excludeTree is true)

  • urls String[] Contains all dependency URL paths found in the dependency tree. (Not present if options.excludeFiles is true)

  • files String[] Contains all dependency file paths found in the dependency tree. (Not present if options.excludeURLs is true)

NOTE: Each unique URL and file path will appear only once in the urls & files lists, regardless of how many times it appears ion the dependency tree.

Example Results Object

{
  tree: {
    "file/path/root.css": {
      "urls": [
        "//example.com/my/css/url0.css",
        "http://example.com/my/css/url1.css",
        "https://example.com/my/css/url2.css"
      ],
      files: {
        "file/path/otherRootFile0.css": null,
        "file/path/otherRootFile1.css": null,
        "file/path/otherRootFile2.css": null,
        "file/path/sub-dir/subDirFile.css": {
          urls: [
            "//example.com/my/css/url0.css",
            "//example.com/some/url"
          ],
          files: {
            "file/path/otherRootFile1.css": null
          }
        }
      }
    }
  },
  urls: [
    "//example.com/my/css/url0.css",
    "http://example.com/my/css/url1.css",
    "https://example.com/my/css/url2.css",
    "//example.com/some/url"
  ],
  files: [
    "file/path/otherRootFile0.css",
    "file/path/otherRootFile1.css",
    "file/path/otherRootFile2.css",
    "file/path/sub-dir/subDirFile.css"
  ]
}

cssDepTree.files(filePath, [relative], [callback])

Builds a flat list of all file dependencies found in the dependency tree.

Parameters

  • filePath String Path to entry CSS file.

  • relative Boolean or Function (Default: false) If true, all file paths in results are expressed relative to the current directory. (If relative is a Function, then it is assumed to be the callback parameter).

  • callback(err, results) Function Callback function to execute when operation has completed.

Return Value

Type: Promise<String[]>

NOTE: Each unique file path will appear only once in the returned String[], regardless of how many times it appears ion the dependency tree.

cssDepTree.urls(filePath, [relative], [callback])

Builds a flat list of all URL dependencies found in the dependency tree.

Parameters

  • filePath String Path to entry CSS file.

  • relative Boolean or Function (Default: false) If true, all file paths in results are expressed relative to the current directory. (If relative is a Function, then it is assumed to be the callback parameter).

  • callback(err, results) Function Callback function to execute when operation has completed.

Return Value

Type: Promise<String[]>

NOTE: Each unique URL will appear only once in the returned String[], regardless of how many times it appears ion the dependency tree.

License

ISC License (ISC)

Copyright (c) 2017 Brandon Sara (http://bsara.github.io/)

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.