is-valid-css-unit

1.2.0 • Public • Published

is-valid-css-unit

Travis npm package Coveralls

Returns true if the given value is a valid CSS unit.

Install

Install with npm:

$ npm install --save is-valid-css-unit

Install with yarn:

$ yarn add is-valid-css-unit

Usage

import isValidCSSUnit from 'is-valid-css-unit'
 
// Returns true
isValidCSSUnit('12px')
isValidCSSUnit('4.01%')
isValidCSSUnit('-456.8deg')
isValidCSSUnit('0.0ms')
isValidCSSUnit('+0.0rem')
isValidCSSUnit('-0.0dpi')
isValidCSSUnit('.60vmin')
isValidCSSUnit('10e3in')
isValidCSSUnit('-3.4e-2em')
 
// Returns false
isValidCSSUnit('12.px')
isValidCSSUnit('+-12.2%')
isValidCSSUnit('12.1.1deg')
isValidCSSUnit('-ms')
isValidCSSUnit('.rem')
isValidCSSUnit('%dpi')
isValidCSSUnit('avmin')
isValidCSSUnit('1ain')
isValidCSSUnit('a1em')

If you want to test for specific CSS units, you can import specific methods:

import {
  isFontUnit,
  isTimeUnit,
  isAnglegeUnit,
  isViewportUnit,
  isAbsoluteUnit,
  isFrequencyUnit,
  isPercentageUnit,
  isResolutionUnit,
} from 'is-valid-css-unit'
 
// Returns true
isFontUnit('12em')
isTimeUnit('300ms')
isAnglegeUnit('-360.5deg')
isViewportUnit('50vw')
isAbsoluteUnit('125px')
isFrequencyUnit('5Hz')
isPercentageUnit('100%')
isResolutionUnit('+35dpi')
 
// Returns false
isFontUnit('12px')
isTimeUnit('300%')
isAnglegeUnit('-360.5vh')
isViewportUnit('50dpi')
isAbsoluteUnit('125rem')
isFrequencyUnit('5s')
isPercentageUnit('100rad')
isResolutionUnit('+35kHz')
  • isFontUnit: Checks for valid CSS font units (cap, ch, em, ex, ic, lh, rem, rlh).
  • isTimeUnit: Checks for valid CSS time units (s, ms).
  • isAngleUnit: Checks for valid CSS angle units (deg, grad, rad, turn).
  • isViewportUnit: Checks for valid CSS viewport units (vh, vw, vi, vb, vmin, vmax).
  • isAbsoluteUnit: Checks for valid CSS absolute units (px, cm, mm, Q, in, pc, pt, mozmm).
  • isFrequencyUnit: Checks for valid CSS frequency units (Hz, kHz).
  • isPercentageUnit: Checks for valid CSS percentage units (%).
  • isResolutionUnit: Checks for valid CSS resolution units (dpi, dpcm, dppx, x).

Playground

You can play around with different values here: http://refiddle.com/refiddles/5b92e39c75622d4ca9270000

Readme

Keywords

none

Package Sidebar

Install

npm i is-valid-css-unit

Weekly Downloads

2

Version

1.2.0

License

MIT

Unpacked Size

43.4 kB

Total Files

7

Last publish

Collaborators

  • elving