css-box-shadow

1.0.0-3 verified Sat Apr 25 auth: no javascript

A zero-dependency CSS box-shadow parser and stringifier. Current stable version 1.0.0-3. Lightweight, simple API to convert between CSS string values and structured objects, and vice versa. Useful for manipulating box-shadow values programmatically in styling tools, CSS-in-JS libraries, or animation systems. No dependencies, works in Node and browser.

Common errors

error Cannot read properties of undefined (reading 'match') ↓

cause Passing a non-string value to parse().

fix

Always pass a string: const result = parse(String(value));

error TypeError: stringify is not a function ↓

cause Attempting to call stringify as default import.

fix

Use named import: import { stringify } from 'css-box-shadow'

Warnings

gotcha The package version is 1.0.0-3 (pre-release). API may change between minor versions. ↓

fix Pin to exact version if stability is critical.

gotcha Only supports a limited subset of CSS box-shadow syntax; multiple shadows with comma separation are supported as array, but `inset` keyword must be first if present. ↓

fix Ensure input strings follow standard CSS box-shadow format.

gotcha The package does not perform validation of color values; arbitrary strings accepted. ↓

fix Validate color values separately if needed.

Install

npm install css-box-shadow

yarn add css-box-shadow

pnpm add css-box-shadow

Imports

parse

wrong

import parse from 'css-box-shadow'

correct

import { parse } from 'css-box-shadow'

Named export; default export is not available.

stringify

wrong

import { stringify } from 'css-box-shadow'; const { stringify } = require('css-box-shadow')

correct

import { stringify } from 'css-box-shadow'

Also works with CommonJS require(). Both ESM and CJS are supported.

parse (CommonJS)

wrong

const parse = require('css-box-shadow').default

correct

const { parse } = require('css-box-shadow')

No default export; destructure the required object.

Quickstart

Parses a CSS box-shadow string into an array of objects, then stringifies it back.

import { parse, stringify } from 'css-box-shadow';

const shadowString = '0 0 0 32px tomato';
const parsed = parse(shadowString);
console.log(parsed);
// [{ inset: false, offsetX: 0, offsetY: 0, blurRadius: 0, spreadRadius: 32, color: 'tomato' }]

const reconstructed = stringify(parsed);
console.log(reconstructed);
// '0 0 0 32px tomato'