Idea: Assembler Functions about assembler

[Awilum]

For me, Functions looks more intuitive and flexible than Mixins.

[Awilum]

Looks similar to Mixins, except, we don't need to use this special char ^ in x-style for functions

[msarca]

How about this example?

box-shadow: 0 0 4px $alpha($darken(rgba(255, 100, 5, var(--alpha, 1)), 20), 80), 
            0 0 8px var(--color, $darken($alpha(hsla(100, 100%, 50%, var(--alpha, 1)), 80), 20));

Not only that you need to evaluate var(--alpha), but you also need to evaluate rgba and hsla yourself. Moreover, $darken and $alpha need to be evaluated in a specific order because the value they return is used as an argument for other functions. This is fine for SCSS, which compiles everything ahead-of-time, but the parser of Assembler CSS works in real-time.

We already had this discussion and made some tests with @sorinsarca months ago, and this kind of functionality would have a tremendous impact on the performance. However, for the simple usage example you are presenting here, using a mixin can be enough.

registerMixin('darken', color, value, property) {
    property = property || 'color';
    return `${property}: ${darken(color, value)}`;
}

function darken(color, value) {
   // ...
}

Usage

^darken: #ff0fab, 20; ^darken: #ff00ff, 30, background-color;

[Explosion-Scratch]

^darken: #ff0fab, 20; ^darken: #ff00ff, 30, background-color;

It's a bit counter intuitive TBH, but you're right, it does work.

How about this example?

box-shadow: 0 0 4px $alpha($darken(rgba(255, 100, 5, var(--alpha, 1)), 20), 80), 
            0 0 8px var(--color, $darken($alpha(hsla(100, 100%, 50%, var(--alpha, 1)), 80), 20));

Not only that you need to evaluate var(--alpha), but you also need to evaluate rgba and hsla yourself. Moreover, $darken and $alpha need to be evaluated in a specific order because the value they return is used as an argument for other functions. This is fine for SCSS, which compiles everything ahead-of-time, but the parser of Assembler CSS works in real-time.

There are two solutions (ish) to all the pre-evaluating, 1, providing the arguments like this:

[{
	type: 'color',
	value: '#00BBBB',
	raw: 'rgb(0, 187, 187)',
}, {
	type: 'measurement',
	value: '16px',
	raw: '1rem',
}]

and two, just providing the raw string split by commas

["rgb(0, 187, 187)", "1rem"] --> from the original: "background: $myFunction(rgb(0, 187, 187), 1rem)"

This method would make a lot more sense from a performance standpoint, and it would also allow functions without huge performance impact. (Theoretically this would be the same as mixin performance)

Also note that with this method variables and colors and such would be left to the function, not assembler, this could be added separately with something like AssemblerCSS.compute("rgb(0, 187, 187)") which could return a uniform style output, convert units, eval vars, etc.

Note: The only thing Assembler would eval before passing the args to the function would be nested functions. Everything else would be passed as it appears in the css.

This is fine for SCSS, which compiles everything ahead-of-time, but the parser of Assembler CSS works in real-time.

TBH if the people designing their websites with assembler are super concerned about the performance impact, they could just not use the functions, right?

[Explosion-Scratch]

Looks similar to Mixins, except, we don't need to use this special char ^ in x-style for functions

And mixins can't be nested, and if I came across this code I wouldn't know what's going on:

^darken: #ff00ff, 30, background-color;

but this on the other hand:

background-color: $darken(#ff00ff, 30);

makes a lot more sense.

Basically it's an issue of syntax, not necessarily performance, as the performance could be solved by just passing raw parameters to the assembler.