jss-preset-default

What is jss-preset-default?

The jss-preset-default package provides a set of default plugins for JSS (JavaScript Style Sheets). It includes a collection of plugins that help with various aspects of styling in JavaScript, such as vendor prefixing, nested selectors, and more.

What are jss-preset-default's main functionalities?

Vendor Prefixing

Automatically adds vendor prefixes to CSS properties to ensure compatibility across different browsers.

const jss = create(preset());
const styles = {
  button: {
    display: 'flex',
    justifyContent: 'center'
  }
};
const { classes } = jss.createStyleSheet(styles).attach();

Nested Selectors

Allows the use of nested selectors within your styles, similar to how you would use them in Sass or Less.

const jss = create(preset());
const styles = {
  container: {
    '&:hover': {
      backgroundColor: 'blue'
    }
  }
};
const { classes } = jss.createStyleSheet(styles).attach();

Global Styles

Enables the definition of global styles that apply to the entire document.

const jss = create(preset());
const styles = {
  '@global': {
    body: {
      margin: 0,
      padding: 0
    }
  }
};
const { classes } = jss.createStyleSheet(styles).attach();

Other packages similar to jss-preset-default

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-preset-default, styled-components is more tightly integrated with React and offers a more component-centric approach to styling.

emotion

Emotion is a performant and flexible CSS-in-JS library. It allows you to style applications quickly with string or object styles. Emotion offers a similar set of features to jss-preset-default but is known for its performance and flexibility, making it a popular choice for large-scale applications.

aphrodite

Aphrodite is a framework-agnostic CSS-in-JS library that focuses on performance and ease of use. It provides features like media queries and pseudo-selectors. Compared to jss-preset-default, Aphrodite is simpler and more lightweight, making it suitable for smaller projects or those that do not require extensive styling capabilities.

README

jss-preset-default

Default preset for JSS with selected plugins.

See our website jss-preset-default for more information.

Install

Using npm:

npm install jss-preset-default

or using yarn:

yarn add jss-preset-default

Changelog

10.9.1-alpha.2 (2022-4-24)

Bug fixes

• [jss] Update stylesheet if !important flag is set before and after the update 1612