style-utils

library0.3.8jsnpmunverified

Utility functions for parsing and transforming CSS style strings, color values, and transforms, originally companion to animation libraries tween-one, queue-anim, and scroll-anim (v0.3.8). Provides color parsing (hex, rgb, hsl, modern CSS), shadow parsing, transform decomposition, camelCase/snake_case conversions, vendor prefix normalization, and style merging. Lightweight, no dependencies, supports modern color syntax. Last release 2021; used primarily in older animation libraries.

testing

npm install style-utils

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · STYLE-UTILS

style-utils

testingjavascriptv0.3.8

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

parseColor

✓ import { parseColor } from 'style-utils'

✗ import parseColor from 'style-utils'

ESM named exports; no default export.

getTransform

✓ import { getTransform } from 'style-utils'

✗ const getTransform = require('style-utils').getTransform

CommonJS require requires .getTransform property.

mergeStyle

✓ import { mergeStyle } from 'style-utils'

✗ import { mergeStyle } from 'style-utils/somefile'

All exports are from the package root; no subpath exports.

Shows parsing a color to RGBA array, decomposing a CSS transform string, and checking vendor prefix for a CSS property.

import { parseColor, getTransform, checkStyleName } from 'style-utils'; // Parse color const rgba = parseColor('#ff0'); console.log(rgba); // [255,255,0,1] // Parse CSS transform const transform = getTransform('translateX(100px) rotate(30deg)'); console.log(transform.translateX); // 100 console.log(transform.rotate); // 30 // Convert camelCase to kebab-case console.log(checkStyleName('filter')); // 'WebkitFilter' or vendor-prefixed variant

Debug

Known issues

gotchaparseColor does not parse named colors like 'red' or 'transparent'

fix

Use hex, rgb, rgba, hsl, hsla string format only.

affects: >=0.0.0

gotchagetTransform returns an object with lowercase keys (e.g., translatex, not translateX).

fix

Access properties using lowercase: transform.translatex instead of transform.translateX.

affects: >=0.3.0

gotchacheckStyleName returns the vendor-prefixed style name for properties like 'filter' (returns 'WebkitFilter' in Chrome).

fix

Use checkStyleName to get the correct property name for the current browser.

affects: >=0.0.0

Errors

Common errors & fixes

TypeError: parseColor is not a function

Attempting default import instead of named import

fix

Use import { parseColor } from 'style-utils'

Module not found: Can't resolve 'style-utils' in '/path/to/file'

Package not installed or missing from node_modules

fix

Run npm install style-utils

TypeError: Cannot read properties of undefined (reading '0')

parseColor passed an invalid or unsupported color string (e.g., 'red')

fix

Pass a valid hex, rgb/a, hsl/a color string. See parseColor docs.

Upgrade

Version history

0.3.8latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

5 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/jljsj/style-css ↗

packagestyle-utils ↗

homepagehttps://github.com/jljsj/style-css#readme ↗