How can I apply CSS Mixins with native Javascript?


Tags: javascript,css,ecmascript-6,css-variables

Problem :

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>



Solution :

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: { /*...*/ };`);

    CSS Howto..

    How to make the background image responsive

    How to style the div to triangle using CSS? [duplicate]

    How to download Jquery if link only shows source code and connect it to my html

    How to select the first element from a selection when one element does not have a class via CSS?

    how to put links in one line [CSS]

    How does floating and clearing on the same element work?

    How to Center an image on top of another image using CSS?

    How to specify max-height css property to Screen size

    How to keep active menu item underlined?

    How to put html input text into an image using CSS?

    How can I split code-blocks into a list?

    How to Implement different backgrounds on scroll [closed]

    jqueryui dialog with table — how to limit row height

    How to use existing SVG symbols (in a file) as markers in highcharts?

    How can I display a list in an x by y fashion?

    Lazy loading images how

    How to Format text boxes with Css

    My CSS looks perfect on desktop, but leaves a 2-5 pixel line to the right on mobile, how do I find the issue?

    How do I specify in HTML or CSS that a table column should have the minimum width

    Cakephp how to remove underline on links

    How to read and show accelerometer data (server side) using JavaScript and Node.js

    How to highlight 3 line toggle button when i hover?

    How to make a Bootstrap 3 dropdown menu open by default when it is inside a collapsed navbar

    How do I keep my links in my table on 1 line?

    How to Change CSS direction property of the input field automaticly if the user can use an language rtl or ltr

    How to make submit input and text input equally spaced

    How to display a css animation in the center of the screen

    css: how to make
    not highlighted when selecting text (in Chrome)

    How to change CSS color values in real-time off a javascript slider?

    how to avoid overlapping of text