Usage

import { Builder } from 'xeerpe'

.box {
  width: 300px;
  height: 100px;
  border-radius: 16px;
}

import { Builder } from 'xeerpe'
 
const DemoComponent = () => {
 
  const xeerpeBackground =
        new Builder()
        .linearGradient({
          from: '#34d399',
          to: '#172554'
        })
        .toStyle()
 
  return (
 
    <div
      className="box"
      style={xeerpeBackground}
    />
 
  )
}
 
export default DemoComponent

import { Component } from '@angular/core'
import { CommonModule } from '@angular/common'
import { Builder } from 'xeerpe'
 
@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div
      class="box"
      [style]="xeerpeBackground"
    ></div>
  `,
})
 
export class DemoComponent {
 
  xeerpeBackground = new Builder()
    .linearGradient({
      from: '#34d399',
      to: '#172554'
    })
    .toStyle()
 
}

<script setup lang="ts">
 
import { Builder } from 'xeerpe'
 
const xeerpeBackground = new Builder()
  .linearGradient({
    from: '#34d399',
    to: '#172554'
  })
  .toStyle()
 
</script>
 
<template>
 
  <div
    class="box"
    :style="xeerpeBackground"
  ></div>
 
</template>

import { Builder } from 'xeerpe'
 
const xeerpeBackground = new Builder()
  .linearGradient({
    from: '#34d399',
    to: '#172554'
  })
  .toStyle()
 
const demoComponent = document.createElement('div')
 
demoComponent.className = 'box'
demoComponent.style.cssText = xeerpeBackground
 
document.body.appendChild(demoComponent)