css-loader: Using @keyframes animation does not result in proper output

I’m unsure if this is an issue related to css-loader or another parser within my configuration. This issue only seems to be present when using keyframes within an animation.

Do you want to request a feature or report a bug? Report a Bug

What is the current behavior? The following source:

.confirmRemove {
  animation: 150ms appear ease-in;
}

@keyframes appear { ... }

Is compiled to:

.comparators__confirmRemove__32JB0 {
  -webkit-animation: 150ms :local(appear) ease-in;
  animation: 150ms :local(appear) ease-in;
}

@keyframes comparators__appear__KTI43 { ... }

Where I would expect this instead:

.comparators__confirmRemove__32JB0 {
  -webkit-animation: 150ms comparators__appear__KTI43 ease-in;
  animation: 150ms comparators__appear__KTI43 ease-in;
}

@keyframes comparators__appear__KTI43 { ... }

If the current behavior is a bug, please provide the steps to reproduce.

// package.json
"postcss-cssnext": "^2.10.0"
"postcss-import": "^9.1.0"
"postcss-loader": "^1.3.3"
"css-loader": "^0.26.1"
"webpack": "^2.2.1"
"extract-text-webpack-plugin": "^2.0.0-rc.3"

// webpack.config.js
const postcssImport = require('postcss-import');
const postcssnext = require('postcss-cssnext');
const isProductionBuild = false;

{
        test: /\.css$/,
        loader: ExtractCss.extract({
          fallback: 'style-loader',
          use: [{
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: isProductionBuild ? '[hash:base64:6]' : '[name]__[local]__[hash:base64:5]',
              importLoaders: 1,
              minimize: isProductionBuild,
            },
          },
          {
            loader: 'postcss-loader',
            options: { plugins: () => ([postcssImport, postcssnext]) },
          }],
        }),
      },

Please mention other relevant information such as your webpack version, Node.js version and Operating System. Node 7.5.0

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 15
Comments: 23 (7 by maintainers)

Most upvoted comments

Code by create-react-app

// if you want to transfrom '.AppLogo', remove the ':global()' 
:global(.AppLogo) :global {
    animation: AppLogoSpin infinite 20s linear;
    height: 80px;
}

@keyframes :global(AppLogoSpin) {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

Result

.AppLogo {
    -webkit-animation: AppLogoSpin infinite 20s linear;
    animation: AppLogoSpin infinite 20s linear;
    height: 80px
}

@-webkit-keyframes AppLogoSpin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

+11

damujiangr on Aug 29, 2017

I fixed the issue in my project by the following replacement:

.confirmRemove {
-  animation: 150ms appear ease-in;
+  animation: appear 150ms ease-in;
}

Finesse on Mar 3, 2019