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

anvil.csslint

v0.0.1

Published

CSSLint plugin for anvil.js

Downloads

4

Readme

Anvil CSSLint Plugin

This plugin requires anvil.js version 0.8.* or greater.

Installation

	anvil install anvil.csslint

Usage

After you have installed the plugin you first need to reference the plugin inside the dependencies key of your build.json.

{
	"source": "src",
	"spec": "spec",
	"output": [ "build" ],
	"dependencies" : [ "anvil.csslint" ],
	"anvil.csslint": {
		// Required settings here...
	}
}

Then you will need to choose one of the following senarios in order for the plugin to know which files to lint.

  • Linting all your files
  • Linting Specifc Files
  • Linting All Files Except

Settings

Linting all your files

Let's say that you had 5 CSS files in your src folder and you wanted all of them to be linted when you build your project. The following "all": true setting will tell anvil.csslint that you want everything to be linted.

{
	"source": "src",
	"spec": "spec",
	"output": [ "build" ],
	"dependencies" : [ "anvil.csslint" ],
	"anvil.csslint": {
		"all": true
	}
}

Linting Specific Files

If you had 5 CSS files in your src folder and you only wanted a specific subset of those to be linted, then you could use the include setting and provide a list of files you want to include in the linting process.

{
	"source": "src",
	"spec": "spec",
	"output": [ "build" ],
	"dependencies" : [ "anvil.csslint" ],
	"anvil.csslint": {
		"include": [ "main.css" ]
	}
}

Linting All Files Except

If you had 5 CSS files in your src folder and you wanted most of them to be linted, but to ignore a couple of items, then you could use the exclude setting and provide a list of files you want to exclude in the linting process.

{
	"source": "src",
	"spec": "spec",
	"output": [ "build" ],
	"dependencies" : [ "anvil.csslint" ],
	"anvil.csslint": {
		"exclude": [ "util.css" ]
	}
}

Breaking Build Option

By default if there are any errors that CSSLint returns then the build process will be aborted. You can override this option by providing setting the breakBuild to false.

{
	"source": "src",
	"spec": "spec",
	"output": [ "build" ],
	"dependencies" : [ "anvil.csslint" ],
	"anvil.csslint": {
		"all": true,
		"breakBuild": false
	}
}

Ignore Specific Errors

Sometimes there are CSSLint errors that for one reason or another you want ignored by the build process. To do that you can provide an ignore option with a list of all the errors that you feel are acceptable for your project. You list the line, character, and reason (contains) of each error you'd like to ignore. You can provide a combination of these options for more or less flexibility.

{
	"source": "src",
	"spec": "spec",
	"output": [ "build" ],
	"dependencies" : [ "anvil.csslint" ],
	"anvil.csslint": {
		"all": true,
		"ignore": [
			{ "line": 81, "character": 26, "reason": "'someVariable' is already defined." },
			... other options ...
		]
	}
}

The following option ignores message for line 1 and col 15

{ "line": 1, "col": 15, "message": "Expected COLON at line 1, col 15." }

The following option ignores any error on line 81 and col 12

{ "line": 81, "col": 12 }

The following option ignores message anywhere on line 81

{ "line": 81, "message": "Don't use IDs in selectors." }

The following option ignores any errors on line 81

{ "line": 81 }

The following option ignores any errors matching message anywhere in the file

{ "message": "Don't use adjoining classes." }

CSSLint Settings

You can always provide custom CSSLint and global comments to the top of each of your CSS file to tweak it's lint ruleset settings, but that can be redundant and a nuisance. So, you can provide these common settings in your 'anvil.csslint' settings to be used during the linting process. For more information about these seeting check the official wiki.

{
	"source": "src",
	"spec": "spec",
	"output": [ "build" ],
	"dependencies" : [ "anvil.csslint" ],
	"anvil.csslint": {
		"all": true,
		"ruleset": {
			"important":1,
			"adjoining-classes":1,
			"known-properties":1,
			"box-sizing":1,
			"box-model":1,
			"outline-none":1,
			"duplicate-background-images":1,
			"compatible-vendor-prefixes":1,
			"display-property-grouping":1,
			"qualified-headings":1,
			"fallback-colors":1,
			"duplicate-properties":1,
			"empty-rules":1,
			"errors":1,
			"shorthand":1,
			"ids":1,
			"gradients":1,
			"font-sizes":1,
			"font-faces":1,
			"floats":1,
			"underscore-property-hack":1,
			"overqualified-elements":1,
			"import":1,
			"regex-selectors":1,
			"rules-count":1,
			"star-property-hack":1,
			"text-indent":1,
			"unique-headings":1,
			"universal-selector":1,
			"unqualified-attributes":1,
			"vendor-prefix":1,
			"zero-units":1
		}
	}
}

Uninstallation

	anvil uninstall anvil.csslint