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

Default preset for JSS with selected plugins.

Preset allows to setup JSS quickly with default settings and a number of plugins so that you don't need to learn how to setup plugins.


API

preset()

Preset exports a default function which accepts options. Options is a map of plugin name in camel case and plugin options as value.

It returns a JSS options object, which can be passed to JSS constructor or the setup.

preset({somePlugin: options})

Setup global JSS instance

import jss from 'jss'
import preset from 'jss-preset-default'

jss.setup(preset())

Setup own JSS instance

import {create} from 'jss'
import preset from 'jss-preset-default'

const jss = create(preset())

Issues

File a bug against cssinjs/jss prefixed with [jss-preset-default].

License

MIT