It-helpers NPM

it-helpers

Helpers for `augm-it`

These helper functions, along with uhtml are included the browser runtime for augm-it

API

`css, raw`

Both css and raw can be used as identity functions for strings and plain-tag for template tag literals

Example

import { css, raw } from 'it-helpers'
let x = '#f00';
let style = css`
  .test{
    color: ${x}
  }
`
/** OR **/
style = css(".test{color:"+x+"}")

`classify, mangle`

These return proxies to generate CSS class names. The proxy resolves to a string within template literals (when cast to a primitive using Symbol.toPrimitive) or when .toString() is called. When a property is accessed from the proxy, it returns the "base" string plus the property name. "[base]__[property]"

classify is meant for on-site components when name-clashing can be manually prevented
mangle is meant for external imports of components when name-clashing is a concern

Example

let it = classify('MyButton')

console.log(`${it}`) // MyButton
console.log(it.toString()) // MyButton
console.log(it.container) // MyButton__container
console.log(it.overlay) // MyButton__overlay

console.log(it) // Proxy({})
console.log('.'+it) // .MyButton

it = mangle('Btn2') // random ID generated when mangle is called

console.log(`${it}`) //Btn2-fa31b46
console.log(it.container) // Btn2-fa31b46__container
console.log(it.overlay) // Btn2-fa31b46__overlay

`uid`

Exports a version of @lukeed/uid that guarantees that the first character is a _ so that they will be valid CSS selectors.

`liveCSS`

liveCSS behaves just like css and raw, but automatically injects a style tag into with the contents. Returns the style node.

Putting it together

import { html } from 'uhtml'
import { css, classify } from 'it-helpers'

let Header = classify('Header')

let style = css`
  /* .Header{ ... } */
  .${Header}{ 
    width: 100%;
    padding: 4rem 0;
  }
   /* .Header__container{ ... } */
  .${Header.container}{
    width: 80%;
    display: block;
    margin: auto;
  }
  /* .Header__title{ ... } */
  .${Header.title}{
    font-size: 2rem;
    text-align: center;
  }
`