camelcase-css

What is camelcase-css?

The camelcase-css npm package is designed to convert CSS property names from kebab-case to camelCase. This is particularly useful when working with CSS in JavaScript, such as when using inline styles in React components or when manipulating CSS properties through JavaScript. By converting CSS property names to camelCase, it aligns with the JavaScript naming conventions and allows for a more seamless integration of CSS styles within JavaScript code.

What are camelcase-css's main functionalities?

Converting CSS property names

This feature allows you to convert any CSS property from kebab-case to camelCase. For example, if you have a CSS property like 'margin-top', using camelcase-css, you can easily convert it to 'marginTop' which is the format expected by JavaScript for setting CSS properties.

"margin-top" => "marginTop"

Batch conversion of CSS properties

In addition to converting individual CSS property names, camelcase-css can also handle objects containing multiple CSS properties. This is particularly useful when you have an object representing a style (e.g., for inline styles in React) and you need to ensure all property names are in camelCase.

{ 'margin-top': '20px', 'text-align': 'center' } => { marginTop: '20px', textAlign: 'center' }

Other packages similar to camelcase-css

change-case

The change-case package provides a suite of utilities to convert strings between various cases, including camelCase. While it offers broader functionality for string case conversion beyond CSS property names, it requires more manual handling to specifically target CSS properties for conversion.

to-camel-case

Similar to camelcase-css, to-camel-case is focused on converting strings to camelCase. However, it is a more general-purpose tool and does not specifically target CSS property names. Users would need to manually filter and apply it to CSS properties, making camelcase-css more convenient for CSS-related tasks.

README

camelcase-css

Convert a kebab-cased CSS property into a camelCased DOM property.

Installation

Node.js >= 6 is required. Type this at the command line:

npm install camelcase-css

Usage

const camelCaseCSS = require('camelcase-css');

camelCaseCSS('-webkit-border-radius');  //-> WebkitBorderRadius
camelCaseCSS('-moz-border-radius');     //-> MozBorderRadius
camelCaseCSS('-ms-border-radius');      //-> msBorderRadius
camelCaseCSS('border-radius');          //-> borderRadius