Skip to main content


@morfeo/web adds to @morfeo/core additional parsers and typings to make it perfect for a web environment.


with npm:

npm install @morfeo/web

or yarn:

yarn add @morfeo/web


@morfeo/web re-export all the @morfeo/core library, check out its documentation before continue.

In addition to the core library, the web package adds the parsers to handle pseudo classes, pseudo elements and gradients.


You can pass to the resolve method any pseudo class with the format '&:{pseudo}', for example:

import { morfeo } from '@morfeo/web';

const style = morfeo.resolve({
bg: 'primary',
'&:hover': {
bg: 'secondary',

Will generate the style:

"backgroundColor": "black",
"&:hover": {
"backgroundColor": "grey"

If you're using @morfeo/web to directly style a component without any other css-in-js library, you can use getStyles :

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

const element = document.querySelector('#myButton');

const { classes } = getStyles({
button: {
bg: 'primary',
'&:hover': {
bg: 'secondary',


In this case, @morfeo will generate plain css. To understand more about this topic we suggest you check our documentation about @morfeo/jss, in fact, the function getStyles is re-exported from @morfeo/jss.

Supported Pseudos

For now morfeo support this pseudos:


as specified here yuo can always add more parser to extends morfeo, or simply add more pseudos in this list by editing this file and open a pull request.


You can specify inside the theme a set of gradients to use inside your application by using the gradients theme slice:

const myTheme = {
gradients: {
primary: {
start: 0,
angle: 90,
end: 100,
colors: ['primary', 'secondary'],
kind: 'linear',

An example of usage is:

const buttonStyle = morfeo.resolve({ gradient: 'primary' });
const textStyle = morfeo.resolve({ textGradient: 'primary' });

with the results:



check out the theme specification or @morfeo/spec for the complete specification of the type GradientConfig used inside the gradients theme slice.