CSS Utilities

import { jsStyleObjectToCss } from '@bbc/front-end-kit/js/utils/css';

This file contains utility functions for working with CSS in JavaScript, such as converting JS style objects to CSS strings.

jsStyleObjectToCss

Converts a JavaScript style object (with camelCase property names) into a CSS string with kebab-case properties and values.

Parameters

• styleObject (object): An object where keys are camelCase CSS properties and values are CSS values.

Returns

• string: A CSS string with kebab-case properties and values. Only the keys are transformed — values are passed through as-is.

Example

import { jsStyleObjectToCss } from '@bbc/front-end-kit/js/utils/css';

const styleObj = {
  backgroundColor: 'red',
  fontSize: '16px',
  marginTop: '10px',
};

const cssString = jsStyleObjectToCss(styleObj);
console.log(cssString); // 'background-color: red; font-size: 16px; margin-top: 10px;'