Skip to main content

jss

Installation

with npm:

npm install @morfeo/jss

or yarn:

yarn add @morfeo/jss

Usage

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

Warning

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';

jss.use(morfeoJSS);

getStyles

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');

element.classList.add(classes.button);

API:

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>;
};