buryem
v1.3.0
Published
got style conflicts? bury 'em!
Downloads
10
Readme
buryem
Got style conflicts? Bury 'em!
Based on Barium by Yuanyan Cao.
Features
- Keep Simple: No cascading, No nesting
- No Conflict: Selectors are generated and are unique
- Better CSS Support: Pseudo Classes, Media Queries
- Automatically Add things: Vendor Prefixes, Default "px" unit to numeric values where needed
Installation
npm i buryem --save
Developing
To build locally, run:
npm install --ignore-scripts
npm run build
Usage
import buryem from 'buryem';
const animations = buryem.createAnimations({
blurh: {
"33%": {
transform: "translateX(2px)"
},
"66%": {
transform: "translateX(-2px)"
},
"100%": {
transform: "translateX(0px)"
}
}
}, 'optional-readable-namespace');
const styles = buryem.create({
btn: {
display: 'inline-block',
color: '#000',
padding: '6px 12px',
marginBottom: '0',
fontSize: '14px',
fontWeight: 'normal',
lineHeight: '1.428571429',
textAlign: 'center',
whiteSpace: 'nowrap',
verticalAlign: 'middle',
cursor: 'pointer',
backgroundImage: 'none',
border: '1px solid transparent',
borderRadius: '4px',
userSelect: 'none',
':hover': {
color: '#fff',
animation: `${animations.blurh} .5s infinite`
},
// Try resizing the window!
'@media (max-width: 500px)': {
backgroundColor: '#5bc0de',
borderColor: '#46b8da'
}
}
}, 'optional-readable-namespace');
const Example = (props) => (
<div>
<button className={styles.btn}>
Click Me <span data-nah="nah">or nah</span>
</button>
<style>
{/* if you need to reach into the children you can do this */}
{`
.${styles.btn} [data-nah="nah"] {
color: #f0f;
}
`}
</style>
</div>
);
Pass an object as a 3rd argument to any of these methods and they will add or append the styles to be injected to it as a __cssText
property.