Skip to main content

web

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

Installation

with npm:

npm install @morfeo/web

or yarn:

yarn add @morfeo/web

Usage

@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.

pseudos

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

element.classList.add(classes.button);

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:

&:active
&:checked
&:disabled
&:empty
&:enabled
&:first-child
&:first-of-type
&:focus
&:hover
&:in-range
&:invalid
&:last-child
&:last-of-type
&:link
&:only-of-type
&:only-child
&:optional
&:out-of-range
&:read-only
&:read-write
&:required
&:root
&:target
&:valid
&:visited
&::after
&::before

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.

gradients

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

const myTheme = {
...restOfTheTheme,
gradients: {
...restOfTheTheme.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:

gradient-Button.png

gradient-Text.png

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