Lithen-tag-functions NPM

Lithen Tag Functions

Tagged Template Strings to use with html and css. Its part of Lithen modules. It works alone but is created to use with Web Components.

A counter modal example:

const modalStyles = css`
  & {
    border: 0;
    border-radius: 4px;
    box-shadow: 0 3px 4px #1117;
    padding: 20px;
    margin: auto;
  }

  &::backdrop {
    background-color: #222a;
  }

  & p {
    font-weight: bold;
    padding-bottom: 12px;
  }

  button {
    border: 0;
    border-radius: 4px;
    padding: 12px 16px;
    cursor: pointer;
  }
`

function counterModal() {
  const count = signal(0)
  const dialogRef = ref()

  function increment() {
    count.set(value => value + 1)
  }

  return html`
    <dialog ref=${dialogRef} css=${modalStyles}>
      <p>Count: ${count}</p>
      <button on-click=${increment}>
        Increment
      </button>
    </dialog>
    
    <button on-click=${() => dialogRef.el?.showModal()}>
      Open Modal
    </button>
  `
}

document.body.append(counterModal())

List of including functions, tag functions and its features

VSCode Extensions Recommendation

lit-plugin which came with lit-html and styled components extensions.
Auto Close Tag for auto closing HTML tags.
es6-string-html for HTML syntax highlight to custom tag functions, good to work with the el tag function.
inline HTML for emmet and IntelliSense in html and css tag functions.