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

diamondpkg

v0.10.2

Published

Dependency management built for Sass, Less, Stylus, and CSS.

Downloads

14

Readme

Supported Environments

diamond supports node 4, 5, 6, and 7 with npm 3 or 4 (Note: node 4 comes with npm 2)

What data we collect

Let's be upfront, we collect data. You will soon be able to limit the data we collect. All data is anonymous. This data is not shared with anyone outside of the diamond team.

  • OS type
  • OS name
  • OS version
  • Node architecture
  • Node version
  • npm version
  • diamond version
  • Errors

Introduction

diamond is a package manager for Sass and Less. diamond allows you to mix and match (most of the time) Sass and Less packages. You can also ship custom functions to be run after compiling, or even Less plugins and Sass importers and functions.

Badge

diamond Feel free to include this badge in your project.

Markdown

[![diamond](https://diamond.js.org/badge.svg)](https://diamond.js.org)

Image URLs

https://diamond.js.org/badge.svg
https://diamond.js.org/badge.png

Installation

Using npm:

npm i -g diamondpkg

Or install the latest version from GitHub:

npm i -g diamondpkg/diamond

Quick Start

Lets say you want to use Bootstrap in your next project.

Installing

You can find Bootstrap under the package name bootstrap You install with the install command

diamond install bootstrap

This generates a diamond folder with all of the packages.

Importing

diamond uses a custom import format when importing packages.

Examples:

  • @import "~bootstrap"; will import the main file from Bootstrap, or throw an error if the package does not have a main file.
  • @import "~bootstrap/file.scss" will import file.scss from the package Bootstrap.

We want to import Bootstrap's main file, so we will use ~bootstrap

@import "~bootstrap";

#foo {
  color: white;
}

CSS

To use with vanilla CSS or another preprocessor, simply link the diamond/autoload.css file in your HTML. Compiling is not required with CSS.

Compiling

Sass

Once we have written our sass, we are ready for compiling.

If you try

node-sass myfile.scss

it will give you errors about not being able to find the file ~bootstrap. This is because you aren't using diamond's custom importer.

It is recommended to use the compile command to compile your Sass instead of node-sass. While this is not required, some packages like concise.css use functionality only found in the compile command. You will be warned if you are missing out on features not using the compile command.

diamond compile -o output.css input.scss

To compile with node-sass, use the --importer flag

node-sass --importer diamond input.scss > output.css

where diamond is the generated diamond folder on install.

Less

To compile with Less, either use the compile command, or lessc. (They both have the same features)

Compile Command
diamond compile -o output.css input.less
lessc
lessc --diamond input.less output.css

This uses less-plugin-diamond as a plugin, which is installed when you install diamond.