@shat/stylenames

    1.3.3 • Public • Published

    build npm version npm bundle size (scoped)

    @shat/stylenames

    A simple JavaScript utility for conditionally joining inline styles together.

    This is a fork of the unmaintained stylenames package

    What does stylenames do?

    In one short sentence: "stylenames converts an object to a css style string."

    Think classNames but for inline styles.

    Install

    From CDN: Add the following script to the end of your <head> section.

    <script src="https://cdn.jsdelivr.net/npm/@shat/stylenames@v1.x.x/lib/index.umd.js"></script>

    That's it. It will initialize itself as styleNames().

    From NPM: Install the package from NPM.

    npm install @shat/stylenames

    Include it in your script.

    import styleNames from '@shat/stylenames';

    Quick Start

    Standalone:

    styleNames({
        backgroundColor: 'red',
        width: '120px',
        
        'height':{
            // If the condition is false the style does not get used.
            '200px': false,
            // Only the first value with true condition is used.
            '300px': true,
            '400px': true
        },
    });

    With Alpine.js:

    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
    
    <div x-data="{}">
      <button :style="styleNames({ backgroundColor: 'red', padding: '20px' })">
        A red button
      </button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/@shat/stylenames@v1.x.x/lib/index.umd.js"></script>

    Examples

    Without conditions

    let styles1 = styleNames({
        height: '120px',
        width: '100px'
    });
    console.log(styles1); //--> 'height:120px;width:100px;'

    With one condition using a boolean toggle

    let styles1 = styleNames({
        height: '120px',
        width: {
            '200px': false
        }
    });
    console.log(styles1); //--> 'height:120px '
    
    let styles2 = styleNames({
        height: '120px',
        width: {
            '200px': true
        }
    });
    console.log(styles2); //--> 'height:120px;width:200px;'

    With multiple rules with 1 boolean toggle

    const styles = styleNames({
        'height:120px;width:100px;': true
    });
    console.log(styles); //--> 'height:120px;width:100px;'

    With camelcased rules

    const styles = styleNames({backgroundColor: 'red'});
    console.log(styles); //--> 'background-color:red;'

    With array input

    const styles = styleNames(['height:120px', 'width:100px']);
    console.log(styles); //--> 'height:120px;width:100px;'

    With more than one condition using a function toggle

    let itemCount = 0;
    
    let styleNamesConfig = {
        display: {
            'none': () => itemCount === 0
        },
        height: '120px',
        width: {
            '100px': () => itemCount <= 1,
            '200px': () => itemCount <= 2,
            '400px': () => itemCount <= 4,
            '100%': () => itemCount > 4
        }
    };
    
    console.log(styleNames(styleNamesConfig)); //--> 'display:none;height:120px;width:100px;'
    
    itemCount++; //1
    console.log(styleNames(styleNamesConfig)); //--> 'height:120px;width:100px;'
    
    itemCount++; //2
    console.log(styleNames(styleNamesConfig)); //--> 'height:120px;width:200px;'
    
    itemCount++; //3
    console.log(styleNames(styleNamesConfig)); //--> 'height:120px;width:400px;'
    
    itemCount += 12; //15
    console.log(styleNames(styleNamesConfig)); //--> 'height:120px;width:100%;'

    Contributing

    Requirements

    • Node 10
    • Yarn 1.x or npm

    Setup

    1. Clone the repository
    2. Run yarn or npm install installs all required dependencies.

    npm scripts

    Equivalent npm run <script> should also work

    • yarn build will bundle/transpile JavaScript for all targets using microbundle.
    • yarn test will run tests using Jest.
    • yarn lint will lint all of the files with xo
    • yarn format will run lint with --fix option on all the examples files (and tests).

    LICENSE

    Code is licensed under the MIT License.

    Acknowledgments

    This package is maintained by Hugo from Code with Hugo and Alpine.js Weekly.

    Special thanks to:

    Install

    npm i @shat/stylenames

    DownloadsWeekly Downloads

    14

    Version

    1.3.3

    License

    MIT

    Unpacked Size

    20.2 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar