search

gajus / babel-plugin-react-css-modules

Transforms styleName to className using compile time CSS module resolution.
Other
2.05k stars 162 forks source link

Wrong animation name #220

Closed jan-krakora closed 5 years ago

jan-krakora commented 5 years ago

I'm trying to use an animation in my CSS module

.toolbar.visible {
    animation: 3s slidein;
}

@keyframes slidein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

But the generated style contains :local like this

.src-components-overview-header-___Toolbar__toolbar___VvFba.src-components-overview-header-___Toolbar__visible___3K423 {
    animation: 3s :local(slidein);
}

@keyframes src-components-overview-header-___Toolbar__slidein___1_lIw {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}
hinok commented 5 years ago

@jan-krakora It's css-loader from the webpack issue, not babel-plugin-react-css-modules. You can fix it by changing order in the shorthand to this

.toolbar.visible {
    animation: slidein 3s;
    /* Look that animation-name is defined as the first */
}

@keyframes slidein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

You can read more about it here: https://github.com/webpack-contrib/css-loader/issues/243