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