Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

jss-plugin-extend

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

jss-plugin-extend

JSS plugin that enables mixing in styles.

10.0.1
Source
npm

Version published: 5 years ago

Maintainers: 1

Created: 6 years ago

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