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.0.0 (2019-9-22)

Summary

A higher level overview of v10 release.

• [react-jss] A new hooks-based API has been released and became the new default way to use JSS with React.
• [jss] Keyframe IDs are now scoped by default.
• [jss] Function values, function rules and observables apply plugins by default now, which means they can support all kinds of syntaxes: e.g. fallbacks, media queries, nesting, global styles.
• [jss] Houdini Typed CSSOM Values are supported now.
• [all] Each package supports ESM modules import, also possible directly from https://unpkg.com/.
• [all][ts] Added TS type definitions to this repository.

For more details please read the rest of the changelog.