hepha
v0.0.1
Published
aphrodite's ugly husband for global styles
Downloads
4
Maintainers
Readme
Hepha
"aphrodite's ugly husband for global styles"
##Installation
npm i -S hepha
What's it do
Allows you to write global inline styles (normalizers, resets, 3rd party css overrides)
aphrodite is a 2-part contract.
It uses StyleShee.create
to generate a unique, modular classname,
and then css()
to inject the styles and definitions into the DOM.
That's what makes aphrodite beautiful.
Globals are ugly.
They aren't unique.
They are rarely !important
.
...but they're necessary.
That's where Hepha comes in.
API
injectGlobals(injectStyleOnce, globalStyles)
Example
import {injectGlobals} from 'hepha';
import {injectStyleOnce} from 'aphrodite/lib/inject';
import {themeColors} from './myThemeColors';
const globalStyles = {
html: {
fontFamily: [
{
"fontFamily": "FontFoo",
"fontWeight": 400,
"fontStyle": "normal",
"src": "url('data:application/octet-stream;base64,d09...') format('woff2')"
},
{
"fontFamily": "FontFoo",
"fontWeight": 400,
"fontStyle": "italic",
"src": "url('/static/fonts/foo.woff2') format('woff2')"
}
]
},
'*': {
boxSizing: 'border-box'
},
'body #a0-namespace.a0-theme-default .a0-panel button.a0-primary': {
backgroundColor: `${themeColors.warm} !important`
}
};
const statelessComponent = (props) => {
// it MUST go inside your component, just like `css()`
injectGlobals(injectStyleOnce, globalStyles);
return <div>Foo</div>
}
How it works
Heaven forbid you read 11 lines of code.
Is it performant?
Aphrodite only injects to the DOM when necessary.
Hepha only calls aphrodite once per object (so don't recreate your globalStyles
object on rerender).
License
MIT