Skip to content

A simple JavaScript utility for conditionally joining inline styles together

License

Notifications You must be signed in to change notification settings

shatstack/stylenames

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

81 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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/[email protected]/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/[email protected]/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/[email protected]/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: