postcss / postcss-mixins

PostCSS plugin for mixins
MIT License
466 stars 47 forks source link

Can I create `mixin functions` in their own files and import them? #150

Closed ItzaMi closed 1 year ago

ItzaMi commented 1 year ago

I have a folder named mixins and inside of it I'm defining my CSS files with @define-mixin. However, I want to have a conditional in one of my mixins; I read about Function mixins and saw that you could directly state. functions inside the config file. But I would like to create these custom mixins in the same place as others. So I have a interactions.ts inside mixins with the following:

function focusAppearance(arg: string | undefined) {
    if (!arg) {
        return {
            'box-shadow': 'var(--box-shadow-accent-0px-spread)',
            '@media (hover: hover)': {
                '&:hover': { 'box-shadow': 'var(--box-shadow-accent-4px-spread)' }
            }
        };
    }

    return [... some other stuff]
}

export { focusAppearance}

How can I now use this focusAppearance? Is that even possible?

ai commented 1 year ago

Can you show the PostCSS config and the mixins/ dir content?