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

inline-style-linter

v0.2.8

Published

Linting tools for inline styles

Downloads

13

Readme

Build Status Test Coverage Code Climate npm version Dependencies

inline-style-linter is a configureable, modular & plugin-based javascript-runtime style linter that pushes developer experience to a next level.

Documentation

For detailed information according plugins, data, configuration and FAQ please check the documentation before creating an issue.

Usage

npm install inline-style-linter

First you will need to configure your Linter for your special use case. Check out Plugins for a list of currently provided plugins and settings.

import Linter, { Plugins } from 'inline-style-linter'

// example configuration
const config = {
	plugins: [
		Plugins.preferNumber,
		Plugins.shorthandLonghand,
		Plugins.noInitialValue
	]
}

// new Linter instance with the given config
const linter = new Linter(config)

// example style object
const styles = {
	border: '1px solid gray',
	borderColor: 'blue',
	borderWidth: 2,
	width: '50px',
	fontSize: 14
}

// basic linting which returns a set of warnings
const warnings = linter.lint(styles)

// if no warnings occured the array will be empty
// no linting issues therefore recorded
warnings.length === 0

// else you might iterate over them and do something
warnings.forEach(warning => console.log(warning.hint))

// This would output the following
// > Do not mix longhands: 'borderColor, borderWidth' with their shorthand: 'border'.
// > Prefer numbers for 'width:50px'. Use 'width:50' instead.

Plugins

| Plugin | configurable | description| | ------ | ------ | ------ | | noInitialValue | no | Warns if property specific initial values are used. | | noVendorPrefix | no | Warns if vendor prefixes are manually set (Recommended: inline-style-prefixer) | | preferNumber | no | Warns if number values are specified as strings e.g. width: '50px' | | requireUnit | no | Warns if number values are used. e.g. width: 50 | | shorthandLonghand | no | Warns if shorthand and longhand properties are used alongside. | | compatibility | yes | Checks for browser compatibility & compatibility issues |

Warnings

Every plugins returns warnings if there are rule violations. There are two values which must be provided:

  • type: basic enumration to identify the plugin that throws
  • hint: dynamic generated text describing the issue

Depending on which plugin is used there is other information provided such as property, value or suggestion. e.g. The example above would provide the following warnings.

[{
	type: 'SHORTHAND_LONGHAND',
	hint: "Do not mix longhands: 'borderColor, borderWidth' with their shorthand: 'border'.",
	shorthand: 'border',
	longhands: ['borderColor', 'borderWidth']
},{
	type: 'PREFER_NUMBER',
	hint: "Prefer numbers for 'width:50px'. Use 'width:50' instead.",
	property: 'width',
	value: '50px',
	suggestion: 50
}]

License

inline-style-linter is licensed under the MIT License. Documentation is licensed under Creative Common License. Created with ♥ by @rofrischmann.

Contributing

I would love to see people getting involved. If you have a feature request please create an issue. Also if you're even improving inline-style-linter by any kind please don't be shy and send a pull request to let everyone benefit.

Issues

If you're having any issue please let me know as fast as possible to find a solution a hopefully fix the issue. Try to add as much information as possible such as your environment, exact case, the line of actions to reproduce the issue.

Pull Requests

If you are creating a pull request, try to use commit messages that are self-explanatory. Also always add some tests unless it's totally senseless (add a reason why it's senseless) and test your code before you commit so Travis won't throw errors.