Dynamic css

Dynamic css for lit , inspired by tailwindcss.

Currently focusing on support for Lit. It will be extended to other frameworks later.

Install & use

npm i dyncss

import { html } from "lit"
import { c , m, column12 ... } from "dyncss";

html`
<div ${c (m(5)) }> Hello Dyncss </div>
`

or

import * as _ from "dyncss";

html`
<div ${_.c (_.m(5)) }> Hello Dyncss </div>
`

Feature

• Builder auto tree-shaking (webpack / parcel / vite / other )
• Code editor auto code hints.
• Cache styles high performance.
• Keep the same name as tailwindcss.
• More dynamic than tailwindcss.
• Custom writing.

Keep the same name as tailwindcss

<div class="column-12">tailwindcss code</div>
<div ${c(columns(12))}>dyncss code</div>

<div class="hover:m-28">margin: 7rem;</div>
<div ${c(m(28).hover)}>margin: 7rem;</div>

More dynamic than tailwindcss.

Dyncss Support dynamic parameters.

<div ${c(m(28).hover)}>calc(var(--margin-num, 0.25rem) * ${n})</div>

<div ${c(m(50).hover)}>
  Means
  <style>
    margin: calc(var(--margin-num, 0.25rem) * 50);
  </style>
</div>

Custom writing

<div ${c(s("margin:12px; color:blue; border:3px solid #ccc").hover)}>
  Custom writing css.
</div>

Dynamic parameters:

let marginValue = 300;
<div ${c(s(`margin:${ marginValue }px; color:blue; border:3px solid #ccc`).hover)}>
  Dynamic parameters.
</div>

Static css properties do not set up aliases.

tailwindcss code:
<div class="break-after-avoid-page"><div>

dyncss code:
<div ${c(s("break-after:avoid-page"))}><div>

tailwindcss code:
<div class="hover:break-after-avoid-page hover:clear-right"><div>

dyncss code:
<div ${c(s("break-after:avoid-page;clear: right").hover)}><div>