✨ Functional styles

[bhvngt]

Description

It will be very useful if master-css can allow passing parameters to custom classes.

For example

Style.extend('classes', 
    {
        btn: (size,blue) => `font:${size}rem text:center h:40 bg:${blue}`
    },
);

<div class="btn(1,blue)">

[ansarizafar]

It would be great, If we can also pass parameter to custom values.

Styles.extend('values', {
    'box-shadow': {
        push(color): `0 .2rem 0 ${color}`
}
})

[1aron]

Description

It will be very useful if master-css can allow passing parameters to custom classes.

For example

Style.extend('classes', 
    {
        btn: (size,blue) => `font:${size}rem text:center h:40 bg:${blue}`
    },
);

<div class="btn(1,blue)">

The feature was on our internal R&D list a long time ago. 😎

[bhvngt]

Thanks @1aron. Is this feature available in v2-beta? As I could not find any reference of this feature in the v2 documentation.

Thanks for doing all the great work. I will be trying out v2 for my project.

[1aron]

@bhvngt The feature will not be implemented at this time, but it'll definitely be. We still need to do more investigations and practical applications internally, probably in the later stage of v2.

[itsezc]

I think this feature should be titled "mixins" to avoid any confusion

[ansarizafar]

Is there any new update on this feature? I really need Functional classes.

[Awilum]

Is there any new update on this feature? I really need Functional classes.

same here

[1aron]

I also really like this feature, it will probably be implemented in v2.1 or v2.2

[1aron]

Using v2 configuration, it will look like:

export default {
    styles: {
        btn: (size, color) => `h:${size === 'md' ? 40 : 48} text:center inline-flex bg:${color}`
    }
}

<button class="btn(md,blue)">Submit</button>

You can also use it with class-variant:

import cv from 'class-variant'

const btn = cv('text:center inline-flex', {
    size: {
        sm: 32,
        md: 40
    },
    ({ color }) => `bg:${color}`
})

btn.default = {
    size: 48,
    color: 'white'
}

export default {
    styles: {
        btn: (size, color) => btn({ size, color })
    }
}