Skip to content

Latest commit

 

History

History
132 lines (92 loc) · 3.04 KB

setup.md

File metadata and controls

132 lines (92 loc) · 3.04 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')
})

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