search

master-co / css

The CSS Language and Framework
https://css.master.co
MIT License
1.75k stars 42 forks source link

💖 Prefer animation names over variables #317

Closed 1aron closed 6 months ago

1aron commented 6 months ago

Current

export default {
    variables: {
        float: '#000000'
    },
    animations: {
        float: {
            '0%': { transform: 'none' },
            '50%': { transform: 'translateY(-1.25rem)' },
            to: { transform: 'none' }
        },
    }
}
<div class="@float|.5s">

Generated CSS:

...
.\@float\|\.5s {
    animation: #000000 .5s;
}

Expected

export default {
    variables: {
        float: '#000000'
    },
    animations: {
        float: {
            '0%': { transform: 'none' },
            '50%': { transform: 'translateY(-1.25rem)' },
            to: { transform: 'none' }
        },
    }
}
<div class="@float|.5s">

Generated CSS:

...
.\@float\|\.5s {
    animation: float .5s;
}

Related properties: animation and animation-name

github-actions[bot] commented 6 months ago

:tada: This issue has been resolved in version 2.0.0-beta.211 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 5 months ago

:tada: This issue has been resolved in version 2.0.0-rc.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket: