jss-plugin-template

What is jss-plugin-template?

The jss-plugin-template package is a plugin for JSS (JavaScript Style Sheets) that allows you to use template literals to define styles. This can make your styles more readable and maintainable by leveraging the power of JavaScript template literals.

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

Define styles using template literals

This feature allows you to define CSS styles using JavaScript template literals, making it easier to write and maintain your styles.

const styles = {
  button: `
    background: blue;
    color: white;
    padding: 10px;
  `
};

Dynamic styles with JavaScript expressions

You can use JavaScript expressions within template literals to create dynamic styles. This is useful for theming and other dynamic styling needs.

const primaryColor = 'blue';
const styles = {
  button: `
    background: ${primaryColor};
    color: white;
    padding: 10px;
  `
};

Nested styles

Template literals support nested styles, allowing you to define styles for pseudo-classes and child elements in a more readable way.

const styles = {
  button: `
    background: blue;
    color: white;
    padding: 10px;
    &:hover {
      background: darkblue;
    }
  `
};

Other packages similar to jss-plugin-template

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. Compared to jss-plugin-template, styled-components is more focused on React and provides additional features like theming and server-side rendering.

emotion

Emotion is a performant and flexible CSS-in-JS library. It allows you to style applications quickly with string or object styles. Like jss-plugin-template, Emotion supports template literals, but it also offers more advanced features like theming, keyframes, and server-side rendering.

aphrodite

Aphrodite is a CSS-in-JS library that allows you to write styles in JavaScript and generate CSS classes. It focuses on performance and ease of use. While it doesn't use template literals like jss-plugin-template, it provides a straightforward API for defining styles and supports media queries and pseudo-classes.

README

jss-plugin-template

JSS plugin enables string templates

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

Install

Using npm:

npm install jss-plugin-template

or using yarn:

yarn add jss-plugin-template

Changelog

10.7.0 (2021-6-27)

Improvements

• [jss][ts] Improved style type 1521
• [react-jss] Refactored JssProvider to function component 1513
• [react-jss] Refactored WithStyles to function component 1508