TenoxUI: Creating Conditional Style

#css #tailwindcss #javascript #webdev

In TenoxUI, the easiest way to define the class names is by defining a shorthand for CSS properties or variables you want. For example :

import { TenoxUI } from '@tenoxui/static'
const ui = new TenoxUI({
  property: {
    bg: 'background',
    p: 'padding',
    size: ['width', 'height']
    "my-color": "--my-color-var"
    d: "display",
    jc: "justifyContent",
    js: "justifySelf",
    ji: "justifyItems",
    ai: "alignItems",
    // ...
  }
})

And then use the class names like this :

<div class="bg-red p-1rem d-flex jc-center ai-center">
  <div class="box-300px my-color-[rgb(255,0,0)] bg-$my-color-var"></div>
</div>

But now, you can use only one type with different properties with different keys. What is key in TenoxUI? key is just a unique identifier for the value, can be defined as ({key}:value) or [{key}:value]. Example :

const ui = new TenoxUI({
  property: {
    // regular shorthand
    d: 'display',
    // shorthand for multiple properties
    tui: ({ key }) => key, // as long as the key is matched, use the key as property
    // condition shorthand with multiple properties
    justify: {
      property: ({ key }) => {
        const keys = {
          content: 'justifyContent',
          items: 'justifyItems',
          self: 'justifySelf'
        }
        return keys[key] || 'justifyBetween' // default: justify-between
      },
      value: ({ value }) =>
        ['between', 'evenly', 'around'].includes(value) ? `space-${value}` : value
    }
  }
})

console.log(
  ui
    .processClassNames([
      'd-flex',
      'justify-center',
      'justify-between',
      'justify-flex-start',
      'justify-(items:center)',
      'justify-(items:end)',
      'justify-(self:center)',

      // custom key from tui- shorthand
      'tui-(justify-content:center)',
      'tui-(color:red)',
      'tui-(text-align:left)',
      'tui-(--red-500:rgb(255_0_0))'
    ])
    .generateStylesheet()
)

And this is the final output :

.d-flex {
  display: flex;
}
.justify-center {
  justify-between: center;
}
.justify-between {
  justify-between: space-between;
}
.justify-flex-start {
  justify-between: flex-start;
}
.justify-\(items\:center\) {
  justify-items: center;
}
.justify-\(items\:end\) {
  justify-items: end;
}
.justify-\(self\:center\) {
  justify-self: center;
}
.tui-\(justify-content\:center\) {
  justify-content: center;
}
.tui-\(color\:red\) {
  color: red;
}
.tui-\(text-align\:left\) {
  text-align: left;
}
.tui-\(--red-500\:rgb\(255_0_0\)\) {
  --red-500: rgb(255 0 0);
}