Skip to content

setup.md

Latest commit

 

History

History
138 lines (96 loc) · 3.01 KB

setup.md

File metadata and controls

138 lines (96 loc) · 3.01 KB

Setup

Install

Using npm

npm i jss

For bower or direct script injection use unpkg:

Full: https://unpkg.com/jss/dist/jss.js

Minified: https://unpkg.com/jss/dist/jss.min.js

Polyfills:

Only in development mode:

CSS.escape

Setup with the default preset

Use the default preset for a quick setup with recommended plugins.

First, install a preset from npm:

npm i 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 just use a preset for a quick setup with default plugins.

import jss from 'jss'
import camelCase from 'jss-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 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.

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

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

<head>
  <title>JSS</title>
  <!-- custom-insertion-point -->
</head>
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>
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.

npm i jss-cli -g
jss --help
⚡