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

style-deps

v2.0.1

Published

Traverse the dependency graph of a CSS project using npm-style import statements

Downloads

43

Readme

style-deps

Traverse the dependency graph of a CSS project using npm-style import statements, asynchronously. Basically: rework-npm meets module-deps.

Usage

styleDeps(file, [opts], done)

Starting with file as the entry file, traverse your project's dependency tree and come back with a single CSS bundle. Accepts for the following options:

  • compress: whether to minify the final CSS. Defaults to false.
  • debug: set to true to enable CSS sourcemaps. Defaults to false.
  • transforms: transform streams for modifying your CSS before it gets parsed.
  • pipe: accept streaming input by piping to the stream this function returns.

Returns a text stream which will simply emit the bundle as a single chunk when complete. This stream will also emit a file event for each file included in the bundle so that you can easily plug style-deps and its dependants into file-watching tools such as watchify.

Text Transforms

Much like browserify transforms, each text transform is a function which takes the absolute file path and returns a through stream that modifies the file before it's parsed:

var deps = require('style-deps')
var through = require('through')
var map = require('map-stream')
var path = require('path')

// Lower-case all of your project's CSS
function transform(file) {
  if (path.extname(file) !== '.CSS') return through()

  return map(function(chunk, next) {
    next(null, chunk.toString().toLowerCase())
  })
}

deps(__dirname + '/index.css', {
  transforms: [transform]
}, function(err, src) {
  if (err) throw err
  console.log(src)
})

Source Transforms

Similar to text transforms, except instead of returning a stream source transforms should return a function. This function should accept a CSS AST generated by css-parse, modifying it to make changes to the stylesheet after being parsed but before importing any modules.

Using source transforms instead of text transforms is recommended, considering that in the latter case transforms tend to parse/stringify content repeatedly resulting in unnecessary overhead.

Each returned source transform function is passed two arguments:

  • style: the parsed CSS AST to process.
  • next(err, new): a callback to be called when complete. You can either pass the callback nothing, or provide a new replacement value for the AST to use in the next modifier.
var shade = require('rework-shade')
var deps = require('style-deps')

function modifier(file, style, next) {
  shade()(style)
  next(null, style)
}

deps(__dirname + '/index.css', {
  transforms: [modifier]
}, function(err, src) {
  if (err) throw err
  console.log(src)
})