Ideas

[Explosion-Scratch]

Hi! I really love this project and I had a few ideas for it:

• Lighten and darken colors? E.g. lighten(@${0}, 20) (out of 100)
• Built in color palette (It's sort of annoying to import the material design one every time
• <x-style> tag supporting css-like syntax something like this:

/* It'd  be cool to support multiple properties on one line */
mixin:button {
	inline-flex; 
	^reset; 
	^button-color:${0=grey};
	justify-content:center; align-items:center;
	cursor:pointer;
	cursor.disabled:not-allowed;
	py:4; px:6;
	/* Multiple on one line */
	opacity.disabled:50%; transition:all 0.25s;
	border; 
	/* Mostly formatted like CSS */
	color:white; 
	uppercase; 
	radius
}
/* Also supporting normal syntax CSS */
button {
	^button:yellow;
    color: black;
}

• A JavaScript API

Assembler.compile(css_code);//Would return the actual CSS generated, not the classes and variables but the actual CSS that would do the identical thing.

Assembler.addMixin("mixin name", "Props and stuff here");

Assembler.addShorthand("bgc", "background-color"); /* Now bgc maps to background-color */

[msarca]

Thanks for the suggestions! Many of the things you have suggested we plan to add in future releases. The built-in color palette will definitely be the first. You can already create advanced mixins in JavaScript https://asmcss.com/docs/1.x/mixins.html#javascript-mixins

[Explosion-Scratch]

Cool! Thanks!

[Explosion-Scratch]

Update: Functional async compile function, (Just works for the time being, I'm sure a native one could be synchronous and way faster.)

function compile(css) {
  return new Promise((resolve) => {
    //Create elements and stuff
    var container = document.createElement("div");
    //Just in case IE doesn't support something.
    container.setAttribute("style", "display: none !important; position: absolute !important; top: -99999999px !important; left: -9999999px !important; overflow: hidden !important; width: 0 !important; height: 0 !important; visibility: none !important;");
    var d = document.createElement("div");
    d.setAttribute("x-style", css);
    container.appendChild(d);
    document.body.appendChild(container);

    var observer = new MutationObserver(function (mutations, me) {
      for (const mutation of mutations) {
        if (
          mutation.type === "attributes" &&
          mutation.attributeName === "style"
        ) {
          resolve(d.getAttribute("style"));
          me.disconnect();
        }
      }
    });

    observer.observe(d, {
      attributes: true
    });
  });
}