Nourishing Pizza Microservice

    buryem

    1.3.0 • Public • Published

    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.

    Install

    npm i buryem

    DownloadsWeekly Downloads

    43

    Version

    1.3.0

    License

    MIT

    Last publish

    Collaborators

    • chadly
    • mdarens
    • tullo_x86