jss-camel-case

What is jss-camel-case?

The jss-camel-case npm package is a plugin for JSS (JavaScript Style Sheets) that converts camelCased property names to dash-separated (kebab-case) names. This is useful for writing CSS-in-JS styles in a more JavaScript-friendly syntax while ensuring compatibility with CSS standards.

What are jss-camel-case's main functionalities?

Convert camelCase to kebab-case

This feature allows you to write styles in camelCase and have them automatically converted to kebab-case. In the example, `backgroundColor` and `fontSize` are converted to `background-color` and `font-size` respectively.

const jss = require('jss').default;
const camelCase = require('jss-camel-case').default;

jss.use(camelCase());

const styles = {
  button: {
    backgroundColor: 'blue',
    fontSize: '14px'
  }
};

const sheet = jss.createStyleSheet(styles).attach();
console.log(sheet.toString());

Other packages similar to jss-camel-case

postcss

PostCSS is a tool for transforming CSS with JavaScript plugins. It can be used to convert camelCase to kebab-case among many other transformations. Unlike jss-camel-case, PostCSS is a more general-purpose tool and can be used for a wide range of CSS manipulations.

styled-components

Styled-components is a library for writing CSS-in-JS with a focus on React. It allows you to write actual CSS syntax within JavaScript and supports camelCase properties. While it doesn't convert camelCase to kebab-case, it provides a similar developer experience by allowing you to write styles in a JavaScript-friendly way.

emotion

Emotion is a performant and flexible CSS-in-JS library. It supports writing styles in camelCase and automatically converts them to kebab-case. Emotion offers more features and flexibility compared to jss-camel-case, including theming and server-side rendering support.

README

JSS plugin that allows to write camel cased rule properties

Internally it converts everything back to dash separated names.

Make sure you read how to use plugins in general.

Example

const styles = {
  container: {
    fontSize: '20px',
    zIndex: 1,
    lineHeight: 1.2
  }
}

.container-a24234 {
  font-size: 20px;
  z-index: 1;
  line-height: 1.2;
}

Demo

Simple

Issues

File a bug against cssinjs/jss prefixed with [jss-camel-case].

Run tests

npm i
npm run test

License

MIT