Skip to main content



with npm:

npm install @morfeo/jss

or yarn:

yarn add @morfeo/jss


@morfeo/jss exposes a plugin for jss and a utility to generate css classes from morfeo's style objects called getStyles


You'll probably never use directly @morfeo/jss, instead, you'll more likely to use @morfeo/react, @morfeo/svelte, @morfeo/web, or other packages that offer better integration of the morfeo eco-system in your framework of choice. But, if you're already using jss you can use use our plugin to bring morfeo's functionalities inside your app.

JSS Plugin

To integrate morfeo inside an app which is already using JSS you can add to the plugins morfeo:

import { morfeoJSS } from '@morfeo/jss';
import jss from 'jss';



With the utility getStyles you can obtain CSS classes based on morfeo style objects:

import { getStyles } from '@morfeo/jss';

const { classes } = getStyles({
button: {
bg: 'primary',
corner: 'm',

const element = document.getElementById('button');



import { Style } from '@morfeo/core';
import { StyleSheet, Jss } from 'jss';

function getStyles<Names extends string>(
styles: Record<Names, Style>,
): {
* The classes to apply to the element
classes: Record<Names, string>;
* The JSS StyleSheet object
stylesheet: StyleSheet<Names>;
* The JSS instance
jss: Jss;
* A callback that should be called when the element (or component) will be unmounted
destroy: () => void;
* A callback that should be called to update the style of the element (or component)
update: (styles: Record<Names, Style>) => Record<Names, string>;