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-value-types

v5.1.2

Published

Parsers, transformers and tests for special value types, eg: %, hex codes etc.

Downloads

6,059,222

Readme

Style Value Types

Parsers, transformers and tests for common style value types, eg: %, hex codes etc.

To help convert numerical values into commonly-used special value types, like px or hex, we provide an optional module called style-value-types:

npm install style-value-types --save 

Each value type has three functions:

  • test: Returns true if the provided value is of that type.
  • parse: Returns the value in a format suitable for animation. Either a number or { [key: string]: number }.

And one of:

  • transform: The reverse of parse. Accepts a number or map of named numbers and converts that into the value type.
  • createTransformer: Accepts a value and returns a transform based on that specific value.

Import

import { color } from 'style-value-types';

Example

// Test
color.test('#fff'); // true
color.test(0); // false

// Parse
color.parse('rgba(255, 255, 255, 0)');
// { red: 255, green: 255, blue: 255, alpha: 0 }

// Transform
color.transform({ hue: 200, saturation: 100, lightness: 50, alpha: 0.5 });
// 'hsla(200, 100%, 50%, 0.5)'

Included value types

  • alpha: Number between 0 and 1
  • complex: Handles space and comma delimited values, like CSS box-shadow: '10px 10px inset #f00, 5px 5px 30px #fff', gradient or a path definition.
  • color: String of either hex, hsla or rgba type
  • degrees: String ending in deg
  • hex: String beginning with # and followed by 3 or 6-digit hex code
  • hsla: String with valid hsla property
  • percent: String ending in %
  • px: String ending in px
  • scale: Number with a default of 1 instead of 0
  • rgbUnit: Integer between 1 and 255
  • rgba: String in rgba(rgbUnit, rgbUnit, rgbUnit, alpha) format

complex

The complex value type is slightly different to the others. Instead of a transform method, it has a createTransformer method which returns the transform method:

const svgPath = 'M150 0 L75 200';
const transform = complex.createTransformer(svgPath);

The returned transform function is unique to the string given to it. When this function is provided an object of the same format as returned by complex.parse() (in this example complex.parse(svgPath)), it will use the original string as a template.