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

varr

v1.0.1

Published

Simple variable replacement for CSS files

Downloads

7

Readme

Varr

Description

Varr is an extremely basic variable replacement command line Node.js tool. It's intended for use with CSS files, turning this source CSS code:

$brand_colour: #777;
$brand_font: Helvetica;
---

body {
	background: $brand_colour;
	font-family: $brand_font;
	border: 1px solid $brand_colour;
}

into this:

body {
	background: #777;
	font-family: Helvetica;
	border: 1px solid #777;
}

Caveats

  • Varr is ridiculously basic in it's implementation & functionality. Coming in at ~100 lines of JavaScript, this is not meant to be any sort of Sass alternative, let alone a competitor.
  • This tiny tool was born out of redesigning my personal site and just wanting a quick way to add variables to my single CSS file.
  • This tool currently only works with one file. Multiple files will be added in the near future, I just can't say when.
  • Tl;dr - Re-inventing the wheel, albeit a small wheel, can be a bunch of fun.

Installation

Available on npm.

For command line installation:

npm install varr -g

Setup

Varr expects certain config at the top of your source CSS file. The expected format looks like so:

$foo: bar;
$someFont: Arial;
---

body {
	background: $foo;
	font-family: $someFont;
}

If you've ever used Sass, then this should look fairly familiar. A set of key/values separated by line breaks.

The only other thing that is very key, is the 3 dashes below the variables. This tells Varr when to stop looking for config variables. Don't forget these. And always put the variables at the top of the file.

Usage

Usage is dead simple. First cd to a folder with a CSS file in it. Now we can run Varr.

The most basic command is:

varr -i style.css

This will take style.css as an input, process & replace the variables, and then output the new, compiled CSS file to dist/style.css. Varr outputs the new CSS file relative to where you're running the command (inside a folder called "dist"). If you'd like to change the output path, read on...

varr -i style.css -o production/live.css

Will take the same "style.css" input file, but once it's processed it, will output it to a folder called "production" (no need to create this folder) and call the new file "live.css".

Lastly, Varr does support file watching, so this command:

varr -i style.css -o production/live.css watch

Will run the tool each time you hit save on "style.css".

As per usual, errors are output to the command line, but should you hit save prematurely and it errors, just fix up your file and re-save it. The program should not break.

Contributing

I'll be using this tool for my own small projects, but I figured some people might benefit from something lightweight as well, so it became a public tool published on npm. I'd be really delighted if people did want to improve it, fix some stuff, etc...but we really don't need to re-create Sass.