jss-plugin-default-unit

What is jss-plugin-default-unit?

The jss-plugin-default-unit npm package is a plugin for JSS (JavaScript Style Sheets) that automatically adds units to numeric values in style objects. This is particularly useful when working with CSS in JS, as it simplifies the process of defining styles by allowing developers to omit units for properties that require them, with the plugin automatically appending the appropriate unit based on the property.

What are jss-plugin-default-unit's main functionalities?

Automatic unit appending

Automatically appends 'px' to numeric values for properties that typically require a pixel unit, while leaving unitless values as is for properties that do not require units.

{
  container: {
    width: 100, // becomes '100px' automatically
    opacity: 0.5 // remains unitless as expected
  }
}

Customizable unit mapping

Allows customization of the units appended to specific properties, enabling developers to specify alternative units like 'em' or 'rem' for properties like 'line-height' and 'font-size'.

jss.use(defaultUnit({
  'line-height': 'em',
  'font-size': 'rem'
}));

Other packages similar to jss-plugin-default-unit

styled-components

Styled-components is a library for styling React components using tagged template literals. It supports automatic unit appending in a similar way to jss-plugin-default-unit but is more focused on component-level styling with a CSS-in-JS approach.

glamor

Glamor is a CSS-in-JS library that allows for styling components with JavaScript. It offers similar functionality to jss-plugin-default-unit in terms of automatically appending units to styles defined in JavaScript, but it provides a different API and approach to styling.

README

jss-plugin-default-unit

JSS plugin that adds default custom unit to numeric values where needed

See our website jss-plugin-default-unit for more information.

Install

Using npm:

npm install jss-plugin-default-unit

or using yarn:

yarn add jss-plugin-default-unit