goofy-goober/examples/vanilla/script.ts

import { css, extractCss } from '@tesseract-design/goofy-goober';

const getClassName = (borderColor?: string) => css.cx(
  css`
    padding: 1rem;
  `,
  css.nest('.child-class')(
    css`
      color: red;
    `,
  ),
  css.media('(min-width: 600px)')(
    css`
      padding: 2rem;
    `,
  ),
  css.if(typeof borderColor === 'string')(
    css`
      border-width: 1px;
      border-style: solid;
    `
  ),
  css.dynamic({
    'border-color': borderColor,
  }),
)

// Use setup() only with React/Preact

const element = document.createElement('div')
const childElement = document.createElement('div')
childElement.classList.add('child-class')
childElement.innerText = 'Hello, world!'
element.appendChild(childElement)
element.classList.add(...getClassName('red').split(' '))
document.body.appendChild(element)

const styleId = 'goofy-goober'
const style = document.getElementById(styleId) ?? document.createElement('style')
style.id = styleId
style.innerText = extractCss()
if (style.parentElement === null) {
  document.head.appendChild(style)
}