apply-like-functionality.html

<a href=# class=primary>Primary</a>
<a href=# class=secondary>Secondary</a>

<style>
  [--button] {
    text-decoration: none;
    cursor: pointer;
  }
  [--small] {
    padding: .25em;
    font-size: 10pt;
  }
  [--medium] {
    padding: .5em;
    font-size: 12pt;
  }
  [--large] {
    padding: 1em;
    font-size: 14pt;
  }
  [--circular] {
    border-radius: 100%;
  }
  [--rounded] {
    border-radius: .5em;
  }
  [--square] {
    border-radius: 0;
  }
  [--dark-on-light] {
    color: black;
  }
  [--light-on-dark] {
    color: white;
  }
  [--bordered] {
    border: 1px solid currentColor;
  }
  [--blue] {
    background-color: dodgerblue;
  }
  [--purple] {
    background-color: indigo;
  }

  .primary {
    --apply: [
      "[--button]", "[--large]", "[--rounded]", "[--light-on-dark]", "[--purple]", "[--bordered]"
    ]
  }

  .secondary {
    --apply: [
      "[--button]", "[--medium]", "[--rounded]", "[--dark-on-light]", "[--bordered]"
    ]
  }
</style>

<script type=module>
  import process from 'https://unpkg.com/process-css-rules'
  import stringify from 'https://unpkg.com/stringify-css-stylesheet'

  // Apply properties of other rules
  Array.from(document.styleSheets).forEach(stylesheet =>
    process(
      stylesheet,
      rule => {
        if (
          rule.constructor.name === 'CSSStyleRule'
          && rule.style.getPropertyValue('--apply') !== ''
        ) {
          JSON.parse(rule.style.getPropertyValue('--apply')).forEach(selector => {
            Array.from(rule.parentStyleSheet.cssRules)
              .filter(sibling => sibling.selectorText === selector)
              .forEach(sibling => Array.from(sibling.style).forEach(property => {
                // Apply properties
                rule.style.setProperty(
                  property,
                  sibling.style.getPropertyValue(property)
                )
                // Remove --apply property itself
                rule.style.removeProperty('--apply')
              }))
          })
        }
      }
    )
  )

  // Remove helper rules
  Array.from(document.styleSheets).forEach(stylesheet =>
    process(
      stylesheet,
      rule => {
        if (
          rule.constructor.name === 'CSSStyleRule'
          && rule.selectorText.includes('[--')
        ) {
          rule.parentStyleSheet.deleteRule(
            Array.from(rule.parentStyleSheet.cssRules).indexOf(rule)
          )
        }
      }
    )
  )

  // Log output to console
  Array.from(document.styleSheets).forEach(stylesheet =>
    console.log(stringify(stylesheet))
  )
</script>

output.css

.primary { text-decoration: none; cursor: pointer; padding: 1em; font-size: 14pt; border-radius: 0.5em; color: white; background-color: indigo; border: 1px solid currentcolor; }
.secondary { text-decoration: none; cursor: pointer; padding: 0.5em; font-size: 12pt; border-radius: 0.5em; color: black; border: 1px solid currentcolor; }