{"id":46550,"library":"style-utils","title":"style-utils","description":"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.","status":"active","version":"0.3.8","language":"javascript","source_language":"en","source_url":"https://github.com/jljsj/style-css","tags":["javascript"],"install":[{"cmd":"npm install style-utils","lang":"bash","label":"npm"},{"cmd":"yarn add style-utils","lang":"bash","label":"yarn"},{"cmd":"pnpm add style-utils","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM named exports; no default export.","wrong":"import parseColor from 'style-utils'","symbol":"parseColor","correct":"import { parseColor } from 'style-utils'"},{"note":"CommonJS require requires .getTransform property.","wrong":"const getTransform = require('style-utils').getTransform","symbol":"getTransform","correct":"import { getTransform } from 'style-utils'"},{"note":"All exports are from the package root; no subpath exports.","wrong":"import { mergeStyle } from 'style-utils/somefile'","symbol":"mergeStyle","correct":"import { mergeStyle } from 'style-utils'"}],"quickstart":{"code":"import { parseColor, getTransform, checkStyleName } from 'style-utils';\n\n// Parse color\nconst rgba = parseColor('#ff0');\nconsole.log(rgba); // [255,255,0,1]\n\n// Parse CSS transform\nconst transform = getTransform('translateX(100px) rotate(30deg)');\nconsole.log(transform.translateX); // 100\nconsole.log(transform.rotate); // 30\n\n// Convert camelCase to kebab-case\nconsole.log(checkStyleName('filter')); // 'WebkitFilter' or vendor-prefixed variant","lang":"typescript","description":"Shows parsing a color to RGBA array, decomposing a CSS transform string, and checking vendor prefix for a CSS property."},"warnings":[{"fix":"Use hex, rgb, rgba, hsl, hsla string format only.","message":"parseColor does not parse named colors like 'red' or 'transparent'","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Access properties using lowercase: transform.translatex instead of transform.translateX.","message":"getTransform returns an object with lowercase keys (e.g., translatex, not translateX).","severity":"gotcha","affected_versions":">=0.3.0"},{"fix":"Use checkStyleName to get the correct property name for the current browser.","message":"checkStyleName returns the vendor-prefixed style name for properties like 'filter' (returns 'WebkitFilter' in Chrome).","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"search_vec":"'2021':62 'anim':20,27,31,67 'camelcase/snake_case':45 'color':13,34,58 'companion':18 'convers':46 'css':10,40 'decomposit':44 'depend':55 'function':5 'hex':36 'hsl':38 'javascript':69 'last':60 'librari':21,68 'lightweight':53 'merg':52 'modern':39,57 'normal':49 'older':66 'one':24 'origin':17 'pars':7,35,42 'prefix':48 'primarili':64 'provid':33 'queue':26 'queue-anim':25 'releas':61 'rgb':37 'scroll':30 'scroll-anim':29 'shadow':41 'string':12 'style':2,11,51 'style-util':1 'support':56 'syntax':59 'transform':9,16,43 'tween':23 'tween-on':22 'use':63 'util':3,4 'v0.3.8':32 'valu':14 'vendor':47","created_at":"2026-06-07T13:00:28.731540+00:00","updated_at":"2026-06-07T13:00:28.731540+00:00","problems":[{"fix":"Use import { parseColor } from 'style-utils'","cause":"Attempting default import instead of named import","error":"TypeError: parseColor is not a function"},{"fix":"Run npm install style-utils","cause":"Package not installed or missing from node_modules","error":"Module not found: Can't resolve 'style-utils' in '/path/to/file'"},{"fix":"Pass a valid hex, rgb/a, hsl/a color string. See parseColor docs.","cause":"parseColor passed an invalid or unsupported color string (e.g., 'red')","error":"TypeError: Cannot read properties of undefined (reading '0')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/jljsj/style-css#readme","github":"https://github.com/jljsj/style-css","docs":null,"changelog":null,"pypi":null,"npm":"style-utils","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}