The twitch-sub-goal from pisyukaev

twitch-sub-goal's Issues

Function to generate css styles

Я использую вот такую функцию для генерации стилей

export const selectors: Record<string, string> = {
  widget: '.goal_widget',
  progressBar: '.goal_widget__progress_bar',
  image: '.goal_widget__image.tw-image',
  leftText: '.goal_widget__metadata > div:first-child',
  rightText: '.goal_widget__contributions',
  counterText: '.goal_widget__contributions > span'
}

export type WidgetOptions = {
  widget: {
    backgroundColor: string
    borderRadius: string
    borderWidth: string
    borderStyle: string
    borderColor: string
  }
  ...
}

export function transformOptionsToStyles(styles: WidgetOptions) {
  return Object.entries(styles)
    .reduce<string[]>((classes, [selector, styles]) => {
      const classStyles = Object.entries(styles).reduce<string[]>(
        (styles, [property, value]) => {
          styles.push(
            `\n${decamelize(property, {
              separator: '-'
            })}: ${value} !important;`
          )
          return styles
        },
        []
      )
      classes.push(`${selectors[selector]} {${classStyles.join('')}}`)
      return classes
    }, [])
    .join('\n ')
}

и чтобы не плодить лишние поля в настройках (property), пришлось поставить библиотеку https://github.com/sindresorhus/decamelize для трансформации camelCase: backgroundColor -> background-color

Originally posted by @crashmax-dev in #21 (comment)