jss-plugin-rule-value-function

What is jss-plugin-rule-value-function?

The jss-plugin-rule-value-function package is a plugin for JSS (JavaScript Style Sheets) that allows you to use functions as values in your style rules. This can be particularly useful for dynamic styling based on props or other runtime conditions.

What are jss-plugin-rule-value-function's main functionalities?

Dynamic Styling

This feature allows you to define styles that can change dynamically based on the properties passed to the component. In this example, the button's color and background color are determined by the props `color` and `bgColor`.

const styles = {
  button: {
    color: props => props.color,
    backgroundColor: props => props.bgColor
  }
};

const useStyles = createUseStyles(styles);

function Button(props) {
  const classes = useStyles(props);
  return <button className={classes.button}>Click me</button>;
}

Conditional Styling

This feature allows you to apply conditional styling based on the properties. In this example, the button's color and background color change based on whether the `isPrimary` prop is true or false.

const styles = {
  button: {
    color: props => props.isPrimary ? 'blue' : 'gray',
    backgroundColor: props => props.isPrimary ? 'lightblue' : 'lightgray'
  }
};

const useStyles = createUseStyles(styles);

function Button(props) {
  const classes = useStyles(props);
  return <button className={classes.button}>Click me</button>;
}

Other packages similar to jss-plugin-rule-value-function

styled-components

styled-components is a library for React and React Native that allows you to use component-level styles in your application. It uses tagged template literals to style your components. Unlike jss-plugin-rule-value-function, styled-components is more focused on creating styled components rather than applying dynamic styles through functions.

emotion

Emotion is a performant and flexible CSS-in-JS library. It allows you to style applications quickly with string or object styles. Similar to jss-plugin-rule-value-function, Emotion supports dynamic styling, but it also offers more features like theming and server-side rendering.

aphrodite

Aphrodite is a CSS-in-JS library that allows you to write styles in JavaScript and apply them to your components. It supports media queries and pseudo-selectors. While it does not use functions for dynamic styling like jss-plugin-rule-value-function, it offers a straightforward API for styling components.

README

jss-plugin-rule-value-function

JSS plugin for function value and rule syntax

See our website jss-plugin-rule-value-function for more information.

Install

Using npm:

npm install jss-plugin-rule-value-function

or using yarn:

yarn add jss-plugin-rule-value-function

Changelog

10.6.0 (2021-3-14)

Improvements

• [*] Define specific polyfills for specific packages that will be required and define a policy for adding polyfills. Makes sure we will notice if a polyfill is needed in a supported browser by failing the CI. 1456
• [jss] Use globalThis to support secure version of JavaScript called SES 1449
• [jss][ts] Styles now supports ClassNames, Props/Data, and Theme as type parameters (eg. Styles<Names, Data, Theme>). 1460
• [react-jss][ts] withStyles and createUseStyles now support ClassNames, Props, and Theme as type parameters (eg. createUseStyles<Names, Props, Theme>). 1460
• [react-jss][ts] useStyles finally expects the correct argument type: a Props object with an optional Theme property (both determined from createUseStyles). 1460
• [react-jss][ts] Support global TS theme definition 1453
• [react-jss][ts] Allow partial classes prop in withStyles() 1428

Breaking Changes

• [react-jss][ts] Theme is no longer the first generic type parameter for createUseStyles. 1460
  • There are two main ways to tell TS your Theme's type without reaching over the other type parameters:

Using the function argument.

const useStyles = createUseStyles(theme: Theme => ({
  ruleName: { /* ... */ };
}))

Using the object argument with a function. (You will only need to specify the Theme type once.)

const useStyles = createUseStyles({
  ruleName: ({theme}: {theme: Theme}) => ({
    /* ... */
  })
})