Heptapod
css
functions for emotion
Experiments with tagged template literals and custom Install
npm i heptapod -S
or
yarn add heptapod
const css = const cls3 = css` font-size: 16px; background: rgba(45, 213, 47, 0.11); color: aquamarine;`` background-color: hotpink;`` font-size: 16px; background: rgba(0, 0, 0, 0.11);` <div className=cls3>Basic</div>
This will insert the following styles into the current Stylesheet emotion is using.
{} {}
It works for both string and object based styles. The following object styles will output the same styles as the string variant above.
const cls3 = backgroundColor: 'hotpink' fontSize: 16 background: 'rgba(0, 0, 0, 0.11)' <div className=cls3>Basic</div>
API
function
createResponsiveCss : DynamicStyleFunction
Arguments
- breakpointsconst customCssFunction =
Returns
heptapod
returns a function that can be used in place of emotions
css` function. This function can be partially applied to add further media query styles.