Pass kwargs to mixin from hash?

[kezzbracey]

Hey guys,

First, thanks for the awesome maintenance you're doing on Stylus. I really appreciate it. :)

I'm wondering if it's currently possible to pass a set of keyword arguments through a mixin from a hash?

I took a run at creating a plugin to handle the process, but didn't really know what I was doing well enough I'm afraid.

What I'm trying to achieve is the ability to create hashes inside styles that define a series of mixins and their associated args to be output against the style. These hashes then get run through an "output-mixins" mixin.

It works beautifully if the mixin being called consumes rest params or if I just apply the values directly against a property, but I haven't been able to figure out how to pass kwargs from a hash, or from a predefined variable. I've also tried to use various BIFs to process the hash into usable kwargs, but didn't succeed. Each of my attempts have led to either the hash being output as a literal, or the comma separated list of key value pairs being processed as the first argument only.

This is where I'm at so far:

Stylus:

@import 'nib'

output-mixins(hash)
    for mixin, props in hash
        if props.pass
            // Can I do something here to convert the hash to passable arguments?
            {mixin}: props.pass
        else
            {mixin}: values(props)

// Example mixin with keyword args
width-height(height=auto, width=100%, min-height=auto, min-width=auto)
    height height
    width width
    min-height min-height
    min-width min-width

.normal_mixin_use
    width-height(height: 100px, width: 90%, min-height: 20px, min-width: 75rem)

.mixin_hash_kwargs
    mixin_hash_kwargs = {
        'width-height': {
            'pass': {
                height: 100px,
                width: 90%,
                min-height: 20px,
                min-width: 75rem
            }
        }
    }
    output-mixins mixin_hash_kwargs

.mixin_hash_rest
    mixin_hash_rest = {
        'border': {
            width: 20px,
            style: solid,
            color: black
        },
        'border-radius': {
            radius: 10px
        }
    }
    output-mixins mixin_hash_rest

Output:

.normal_mixin_use {
  height: 100px;
  width: 90%;
  min-height: 20px;
  min-width: 75rem;
}
.mixin_hash_kwargs {
  height: {"height":"(100px)","width":"(90%)","min-height":"(20px)","min-width":"(75rem)"};
  width: 100%;
  min-height: auto;
  min-width: auto;
}
.mixin_hash_rest {
  border: 20px solid #000;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

What do you think?

Is there a way to do this that I'm missing? Could I perhaps make it work via a custom js function / plugin? Or am I attempting something that can't really come off at this stage?

Thanks for any insight you can share!

Cheers,

Kezz

[Panya]

No, this is not possible currently, but I like the idea. I'll implement this feature. BTW in simple cases you can use hashes interpolation.

[kezzbracey]

Thanks Panya! :)

I'm mostly a front end coder, but can I help out at all?

[kizu]

@kezzbracey You can think about how you would like to see this feature implemented: which syntax should it have, how should you pass the hash in a way Stylus would understand it is a kwargs?

We can't allow just passing a hash and treating its keys as kwargs, so we'd need something to help Stylus understand what you need from it.

All I can think atm is using a reserved kwargs kwarg for it, so it would look like this:

{mixin}(kwargs: props.pass)

But it is rather obscure and then we'd need to find out how to manage a case when such kwargs arg is passed alongside other named args, who should take precedence, etc?

[vendethiel]

splat, js-like (...props) cpp: props..., ruby-like *props, scala-like props:_*, lispy & args, racket-like . args ?

[kizu]

I guess I like props... variant the best, as it would somewhat correspond to the args... that we have already.

[kezzbracey]

Reading the above, I'd agree props... seems the most consistent and intuitive.

[hikkyu]

Totally agree about the syntax :-)

Is there any news about this feature ? That's only the missing part to my little component framework :-)

[hikkyu]

@kezzbracey if you are interested, I write a little plugin to do that : https://github.com/hikkyu/advanced-css-component-stylus/blob/master/plugin/callWithObjArg.js

// include plugin 
use('./path/callWithObjArg.js')

hash = {
    foo: 'bar'
}

myMixin($foo: 'foo')
    body
        color $foo

callWithObjArg(myMixin, hash)

It's not perfect but work's :-)

[kezzbracey]

That's awesome, thanks a lot for the effort and the share @hikkyu :-)