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.