Skip to content

setup.md

Latest commit

 

History

History
174 lines (120 loc) · 4.3 KB

setup.md

File metadata and controls

174 lines (120 loc) · 4.3 KB
Raw

Setup

Install

yarn add jss

Alternatively, you can use unpkg CDN.

Polyfills

Check out the environment requirements as well as our browsers support and required polyfills.

Setup with the default preset

Use the default preset for quick setup with recommended plugins.

First, install a preset from yarn:

yarn add jss-preset-default

Then setup JSS to use it:

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

jss.setup(preset())

// Create your style.
const style = {
  myButton: {
    color: 'green'
  }
}

// Compile styles, apply plugins.
const sheet = jss.createStyleSheet(style)

// If you want to render on the client, insert it into DOM.
sheet.attach()

// If you want to render server-side, get the CSS text.
sheet.toString()

Setup with custom plugins

You can use JSS with or without plugins. Make sure you use the plugins in the right order or use a preset for quick setup with default plugins.

import jss from 'jss'
import camelCase from 'jss-plugin-camel-case'
import somePlugin from 'jss-some-plugin'

// Use plugins.
jss.use(camelCase(), somePlugin())

// Create your style.
const style = {
  myButton: {
    color: 'green'
  }
}

// Compile styles, apply plugins.
const sheet = jss.createStyleSheet(style)

// If you want to render on the client, insert it into DOM.
sheet.attach()

// If you want to render server-side, get the CSS text.
sheet.toString()

Specify the DOM insertion point

You can instruct JSS to render your stylesheets starting at a specific point in the DOM by placing a comment node anywhere in the head of the document.

It can be useful if you have another dependency that needs to come before or after the JSS Style Sheets for source order specificity purposes.

You can specify an insertionPoint during jss.setup().

<head>
  <title>JSS</title>
  <!-- custom-insertion-point -->
</head>
import jss from 'jss'

jss.setup({insertionPoint: 'custom-insertion-point'})

Here is another example, with the insertion point moved to the body:

<head>
  <title>JSS in body</title>
</head>
<body>
  <div id="insertion-point">
    This might be any DOM node of your choice which can serve as an insertion point.
  </div>
</body>
import jss from 'jss'

jss.setup({
  insertionPoint: document.getElementById('insertion-point')
})

Using a CSSStyleSheet instance for secure style injection

For environments with strict Content Security Policy (CSP) settings, JSS now supports injecting styles into a CSSStyleSheet instance. This approach is particularly useful when inline styles are restricted and a nonce value is unavailable or not exposed.

Example

Create a CSSStyleSheet instance and pass it to JSS during setup:

import jss from 'jss'

const sheet = new CSSStyleSheet()
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]

jss.setup({
  insertionPoint: sheet // Pass the CSSStyleSheet instance
})

// Create your style.
const style = {
  myButton: {
    color: 'green'
  }
}

// Compile styles, apply plugins.
const jssSheet = jss.createStyleSheet(style)

// Inject styles directly into the provided CSSStyleSheet.
jssSheet.attach()

Benefits

  • Enables secure style injection into a CSSStyleSheet instance, avoiding inline styles.
  • Works seamlessly in CSP-enabled applications where the nonce attribute cannot be used or accessed.

Notes

  • This feature is an alternative to nonce-based CSP compliance. Both approaches are supported.
  • Ensure the provided CSSStyleSheet instance is valid and adopted by the document where styles need to be applied.

Configuring Content Security Policy

You might need to set the style-src CSP directive, but do not want to set it to unsafe-inline. See these instructions for configuring CSP.

CLI

For more information see CLI.

yarn global add jss-cli
jss --help