How can I apply CSS Mixins with native Javascript?

Question

If my browser has native implementation from the CSS properties then I should have some sort of Javascript API to manipulate mixins too like I could do with CSS variables:

document.body.style.setProperty('--some-property', 'value');

I googled it but sadly most of the cases I runned into a css framework which has some sort of hack to make css mixin with javascript, sadly I did not find a API documentation about that, somebody knows how to do it?

The HTMLElement.style is a CSSStyleDeclaration what have an API, but there in that I can only find the setProperty method but no setMixin method.

PROGRESS:

If I add to the style attribute the @apply --some-mixin; then the mixin is not applied. Now I think I should try out to make custom inline css and add to the document, but this is still some hacky way to do it and also it's not working.

Here some snippet for testing, but be awere you need to active experiental web platform features in your browser to see the mixin working!

let container = document.getElementById('container');

for(var i = 1; i<=5; i++)
{
    let itemElement = document.createElement('DIV');
        itemElement.classList.add('item');
        itemElement.innerText = `Some added item#${i}!`;
        itemElement.style.color = `var(--item-${i}-color, blue)`;
  
    let style = itemElement.getAttribute('style');
      itemElement.setAttribute('style', `${style} @apply --item-${i};`);
  
    container.appendChild( itemElement );
}

if( true /* some sort of logic which are not important */ )
{
    container.style.setProperty('--item-2-color', 'green');
  
    // @todo add custom mixin to item#4 to be highlighted someway, and use Javascript API without this type of hacks:

    let style = container.getAttribute('style');
    container.setAttribute('style', `${style} --item-4: { margin: 10px 0; background-color: orange; color: yellow; };`);
    
}

:root {
    /* static css mixin */
    --paper-shadow: {
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                  0 1px 5px 0 rgba(0, 0, 0, 0.12),
                  0 3px 1px -2px rgba(0, 0, 0, 0.2);
    };
}
  
body, #container {
  background: #eee; font-family: Arial, sans-serif;
}
  
h2 {
  text-align: center;
}

#container {
  padding: 30px;
  
  --item-3-color: red;

  /* initial css mixin from dinamic mixin */
  --item-3: {
    font-weight: bold;
  };
}

#container .item {
  background: #fff; padding: 20px 10px;
  font-size: 90%; text-align: center; letter-spacing: 1px;
  
  @apply --paper-shadow;
}

<h2>You need to activate #experimental-web-platform-features in your browser to see the mixin working!</h2>
<div id="container"></div>

Answer 1

I found a hacky solution which is working but not the exact API type of solution what I want, but for those who want to solve the problem quickly can get the style attribute and add the mixin directley to the element:

let element = document.querySelector('some-element');

/* IMPORTANT!
 * do something with element.style and/or add css-property
 * before you change the style attribute!
 */

// get the current custom styles
let style = element.getAttribute('style');

// apply css mixin to the element:
element.setAttribute('style', `${style} @apply --some-mixin;`);

// set css mixin to the element:
element.setAttribute('style', `${style} --some-mixin: { /*...*/ };`);