Minimal styling, powered by Goober.
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

45 Zeilen
1.0 KiB

  1. import { css, extractCss } from '@tesseract-design/goofy-goober';
  2. const getClassName = (borderColor?: string) => css.cx(
  3. css`
  4. padding: 1rem;
  5. `,
  6. css.nest('.child-class')(
  7. css`
  8. color: red;
  9. `,
  10. ),
  11. css.media('(min-width: 600px)')(
  12. css`
  13. padding: 2rem;
  14. `,
  15. ),
  16. css.if(typeof borderColor === 'string')(
  17. css`
  18. border-width: 1px;
  19. border-style: solid;
  20. `
  21. ),
  22. css.dynamic({
  23. 'border-color': borderColor,
  24. }),
  25. )
  26. // Use setup() only with React/Preact
  27. const element = document.createElement('div')
  28. const childElement = document.createElement('div')
  29. childElement.classList.add('child-class')
  30. childElement.innerText = 'Hello, world!'
  31. element.appendChild(childElement)
  32. element.classList.add(...getClassName('red').split(' '))
  33. document.body.appendChild(element)
  34. const styleId = 'goofy-goober'
  35. const style = document.getElementById(styleId) ?? document.createElement('style')
  36. style.id = styleId
  37. style.innerText = extractCss()
  38. if (style.parentElement === null) {
  39. document.head.appendChild(style)
  40. }