jss-plugin-vendor-prefixer

What is jss-plugin-vendor-prefixer?

The jss-plugin-vendor-prefixer is a plugin for JSS (JavaScript Style Sheets) that automatically adds vendor prefixes to CSS properties, ensuring compatibility across different browsers.

What are jss-plugin-vendor-prefixer's main functionalities?

Automatic Vendor Prefixing

This feature automatically adds vendor prefixes to CSS properties. In the example, the 'display' and 'userSelect' properties will be prefixed as needed for different browsers.

const jss = require('jss').default;
const preset = require('jss-preset-default').default;
const vendorPrefixer = require('jss-plugin-vendor-prefixer').default;

jss.setup(preset());
jss.use(vendorPrefixer());

const styles = {
  button: {
    display: 'flex',
    userSelect: 'none'
  }
};

const { classes } = jss.createStyleSheet(styles).attach();
console.log(classes.button);

Other packages similar to jss-plugin-vendor-prefixer

autoprefixer

Autoprefixer is a PostCSS plugin that parses your CSS and adds vendor prefixes to CSS rules using values from the Can I Use website. It is more comprehensive and widely used compared to jss-plugin-vendor-prefixer, but it requires a PostCSS setup.

styletron-engine-atomic

Styletron is a toolkit for component-oriented styling. The styletron-engine-atomic package includes automatic vendor prefixing as part of its functionality. It is similar to jss-plugin-vendor-prefixer but is part of the Styletron ecosystem, which is focused on atomic CSS.

emotion

Emotion is a library designed for writing CSS styles with JavaScript. It includes automatic vendor prefixing as part of its core functionality. Emotion is more feature-rich and offers a broader range of styling capabilities compared to jss-plugin-vendor-prefixer.

README

jss-plugin-vendor-prefixer

JSS plugin that handles vendor prefixes in the browser

See our website jss-plugin-vendor-prefixer for more information.

Install

Using npm:

npm install jss-plugin-vendor-prefixer

or using yarn:

yarn add jss-plugin-vendor-prefixer

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}) => ({
    /* ... */
  })
})