jss-plugin-extend

What is jss-plugin-extend?

The jss-plugin-extend package is a plugin for JSS (JavaScript Style Sheets) that allows you to extend styles from one rule to another. This can be particularly useful for reusing styles and creating more maintainable and modular CSS-in-JS code.

What are jss-plugin-extend's main functionalities?

Basic Style Extension

This feature allows you to extend the styles of one rule into another. In this example, the 'primaryButton' rule extends the 'button' rule and overrides the background color.

const styles = {
  button: {
    padding: '10px',
    background: 'blue'
  },
  primaryButton: {
    extend: 'button',
    background: 'red'
  }
};

Multiple Extensions

This feature allows you to extend multiple rules into one. In this example, the 'primaryButton' rule extends both the 'base' and 'button' rules.

const styles = {
  base: {
    padding: '10px',
    margin: '5px'
  },
  button: {
    extend: 'base',
    background: 'blue'
  },
  primaryButton: {
    extend: ['base', 'button'],
    background: 'red'
  }
};

Conditional Extensions

This feature allows you to conditionally extend styles based on props or other conditions. In this example, the 'primaryButton' rule extends the 'button' rule only if the 'primary' prop is true.

const styles = {
  button: {
    padding: '10px',
    background: 'blue'
  },
  primaryButton: {
    extend: props => props.primary ? 'button' : null,
    background: 'red'
  }
};

Other packages similar to jss-plugin-extend

styled-components

styled-components is a library for React and React Native that allows you to use component-level styles in your application. It provides a way to extend styles using the 'extend' method, similar to jss-plugin-extend, but it is more focused on styled components and theming.

emotion

Emotion is a library designed for writing CSS styles with JavaScript. It offers powerful and flexible styling capabilities, including the ability to extend styles using the 'css' function. Emotion is known for its performance and ease of use, making it a strong alternative to jss-plugin-extend.

aphrodite

Aphrodite is a library for inline styles in JavaScript. It allows you to extend styles using the 'extend' method, similar to jss-plugin-extend. Aphrodite is lightweight and focuses on performance, making it a good choice for projects that need fast and efficient styling solutions.

README

jss-plugin-extend

JSS plugin that enables mixing in styles.

See our website jss-plugin-extend for more information.

Install

Using npm:

npm install jss-plugin-extend

or using yarn:

yarn add jss-plugin-extend

Changelog

10.10.0 (2023-2-9)

Improvements

• [jss] Added support for @container query 1637