{"id":14515,"library":"css-in-js-utils","title":"CSS-in-JS Utilities","description":"css-in-js-utils is a specialized utility library offering foundational functions for authors building CSS-in-JS solutions. It provides a suite of primitives like `assignStyle` for deep merging style objects, `camelCaseProperty` and `hyphenateProperty` for property name transformations, and `cssifyObject` to convert style objects into CSS strings. The current stable version is 3.1.0. While new feature development might be infrequent given its utility nature, the package demonstrates ongoing maintenance, with recent activity on its GitHub repository. This library distinguishes itself by targeting core functionalities required by other CSS-in-JS libraries, abstracting away common boilerplate, rather than serving as an end-user styling tool. Its design emphasizes stability and reusability of these low-level operations within the broader CSS-in-JS ecosystem.","status":"active","version":"3.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/robinweser/css-in-js-utils","tags":["javascript","css","cssinjs","utils","small","typescript"],"install":[{"cmd":"npm install css-in-js-utils","lang":"bash","label":"npm"},{"cmd":"yarn add css-in-js-utils","lang":"bash","label":"yarn"},{"cmd":"pnpm add css-in-js-utils","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This library primarily uses named exports. While older versions or specific build setups might support CommonJS `require`, modern usage (especially with TypeScript) favors ESM named imports. The package ships with TypeScript types.","wrong":"const { assignStyle } = require('css-in-js-utils')","symbol":"assignStyle","correct":"import { assignStyle } from 'css-in-js-utils'"},{"note":"All utilities are named exports; there is no default export for the entire module.","wrong":"import CssUtils from 'css-in-js-utils'; CssUtils.cssifyObject(...)","symbol":"cssifyObject","correct":"import { cssifyObject } from 'css-in-js-utils'"},{"note":"While star imports (`import * as Utils from 'pkg'`) work, direct named imports are generally preferred for clarity and tree-shaking benefits.","wrong":"import * as Utils from 'css-in-js-utils'; Utils.camelCaseProperty(...)","symbol":"camelCaseProperty","correct":"import { camelCaseProperty } from 'css-in-js-utils'"}],"quickstart":{"code":"import { assignStyle, cssifyObject, hyphenateProperty, isUnitlessProperty } from 'css-in-js-utils';\n\n// Define some base styles and overrides\nconst baseStyles = {\n  backgroundColor: 'red',\n  paddingTop: '10px',\n  ':hover': {\n    color: 'white',\n    fontSize: '16px'\n  }\n};\n\nconst overrideStyles = {\n  backgroundColor: 'blue',\n  margin: '8px',\n  ':hover': {\n    fontSize: '18px',\n    fontWeight: 'bold'\n  }\n};\n\nconsole.log('--- Demonstrating css-in-js-utils ---');\n\n// 1. Merge styles deeply using assignStyle\nconst mergedStyles = assignStyle(baseStyles, overrideStyles);\nconsole.log('Merged Styles:', mergedStyles);\n/*\nOutput:\nMerged Styles: {\n  backgroundColor: 'blue',\n  paddingTop: '10px',\n  margin: '8px',\n  ':hover': {\n    color: 'white',\n    fontSize: '18px',\n    fontWeight: 'bold'\n  }\n}\n*/\n\n// 2. Convert the top-level merged style object into a CSS string\n// Note: cssifyObject only processes direct properties, not nested ones like ':hover'\nconst cssString = cssifyObject(mergedStyles);\nconsole.log('CSS String (top-level):', cssString);\n// Output: CSS String (top-level): background-color:blue;padding-top:10px;margin:8px\n\n// 3. Demonstrate hyphenateProperty\nconst camelCaseProp = 'WebkitAppearance';\nconst hyphenatedProp = hyphenateProperty(camelCaseProp);\nconsole.log(`Hyphenated property for \"${camelCaseProp}\":`, hyphenatedProp);\n// Output: Hyphenated property for \"WebkitAppearance\": -webkit-appearance\n\n// 4. Demonstrate isUnitlessProperty (e.g., for 'zIndex')\nconsole.log('Is \"zIndex\" unitless?', isUnitlessProperty('zIndex')); // true\nconsole.log('Is \"width\" unitless?', isUnitlessProperty('width'));   // false\n","lang":"typescript","description":"This quickstart demonstrates how several `css-in-js-utils` functions can be combined to merge style objects, convert them to CSS strings, and inspect CSS property characteristics."},"warnings":[{"fix":"Consider using a full-fledged CSS-in-JS library like Emotion, Styled Components, or Fela for application development, which often internally utilize similar utilities.","message":"This package is explicitly designed for CSS-in-JS *library authors* and not for direct use in application development. Using it directly in your application code might lead to unnecessary complexity or unexpected behavior, as its APIs are low-level and optimized for library integration.","severity":"gotcha","affected_versions":"*"},{"fix":"Consult the official GitHub repository's commit history or issues for more granular details on changes between major versions if encountering unexpected behavior after upgrading.","message":"While specific breaking changes for v3.0.0 are not extensively documented in public release notes for `robinweser/css-in-js-utils`, a major version increment from 1.x.x to 3.x.x typically indicates potentially incompatible API changes. Users upgrading from v1.x.x should thoroughly review their usage and test for regressions, especially concerning argument signatures, return types, or edge case handling in utility functions.","severity":"breaking","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your project is configured for ESM and use `import { functionName } from 'css-in-js-utils'` syntax. If using CommonJS, verify your build configuration or check the `package.json` `exports` field for CJS compatibility.","cause":"Attempting to use CommonJS `require()` syntax (e.g., `const { assignStyle } = require('css-in-js-utils')`) in an environment where the package's primary export is ESM, or if using a build setup that doesn't correctly transpile ESM imports.","error":"TypeError: [functionName] is not a function"},{"fix":"All utilities are named exports. Use named imports: `import { assignStyle, cssifyObject } from 'css-in-js-utils'`.","cause":"Attempting to use a default import (e.g., `import StyleUtils from 'css-in-js-utils'`) when the library exclusively provides named exports.","error":"TS2305: Module '\"css-in-js-utils\"' has no exported member 'default'."},{"fix":"Always ensure that the arguments passed to `css-in-js-utils` functions match the expected types (e.g., string property names, string or number values, plain objects for style maps). Refer to the specific function's documentation for its required input types.","cause":"Passing `undefined`, `null`, or an incorrect data type to a utility function that expects a string or object, such as `cssifyDeclaration(property, value)` where `property` or `value` is not a string/number as expected.","error":"TypeError: Cannot read properties of undefined (reading 'property') or 'value'"}],"ecosystem":"npm"}