Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using @keyframes animation does not result in proper output #539

Closed
kylecesmat opened this issue May 23, 2017 · 23 comments

Comments

@kylecesmat
Copy link

commented May 23, 2017

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

@AndrewPHunter

This comment has been minimized.

Copy link

commented May 29, 2017

+1

I have the same issue with css-loader using key-frames animation.

package.json (relevant portion):

    "autoprefixer": "7.1.1",
    "css-loader": "0.28.1",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "node-sass": "4.5.3",
    "sass-loader": "6.0.5",
    "style-loader": "0.18.1",
    "url-loader": "0.5.8",
    "webpack": "2.5.1",
    "webpack-bundle-analyzer": "2.8.2",
    "webpack-dev-middleware": "1.10.2",
    "webpack-hot-middleware": "2.18.0",
    "webpack-md5-hash": "0.0.5"

webpack config.dev

{
        test: /(\.css|\.scss|\.sass)$/,
        use: [
          {loader: 'style-loader'},
          {
            loader:'css-loader',
            options:{
              sourceMap:true,
              modules: true,
              localIdentName: '[local]---[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader',
            options:{
              sourceMap: true,
              plugins:()=>[
                autoprefixer()
              ]
            }
          },
          {
            loader: 'sass-loader',
            options:{
              sourceMap:true,
              includePaths: [path.resolve(__dirname, 'src', 'scss')]
            }
          }
        ]
      }
}

Node Version: 7.9

@pixelass

This comment has been minimized.

Copy link

commented Jun 7, 2017

Node version 8

Seems like this module has so many bugs that it is basically unusable. Pretty sure this should have a note

"A lot of features will not work as expected !EXPERIMENTAL USAGE ONLY"

@TrySound

This comment has been minimized.

Copy link
Contributor

commented Jun 7, 2017

I'm gonna release beta in a week. You may track progress here.
css-modules/css-modules#240

@pixelass

This comment has been minimized.

Copy link

commented Jun 7, 2017

@TrySound thx. I'm seeing so many issues in this loader. I'm just adding this to a project and surprised how unstable it is. Happy to contribute and help where I can since I need a reliable loader.

@pixelass

This comment has been minimized.

Copy link

commented Jun 7, 2017

@TrySound sorry my bad, just realized you referenced the css-modules repo.

@TrySound

This comment has been minimized.

Copy link
Contributor

commented Jun 7, 2017

Yep. All problems mostly rely on css-modules implementation.

@pixelass

This comment has been minimized.

Copy link

commented Jun 7, 2017

@TrySound super off topic but I'm guessing this issue is not related to css-modules?

#537 (comment)

@TrySound

This comment has been minimized.

Copy link
Contributor

commented Jun 7, 2017

Partially related to current implementation. We want to release fixed version to not break users later.

@pixelass

This comment has been minimized.

Copy link

commented Jun 7, 2017

OK, thx that helps. sort of. I have been using css-modulesify with browserify in the last years and never ran into any issues. I knew webpack wasn't a great tool. sorry if that sounds mean.

@TrySound

This comment has been minimized.

Copy link
Contributor

commented Jun 7, 2017

I will appreciate some review and maybe documentation improvements of plugins.

@pixelass

This comment has been minimized.

Copy link

commented Jun 7, 2017

@TrySound I'll do my best, sadly not within the next weeks since I have to prepare a conference talk.

I just started using webpack so there's a lot of reading to do.

@damujiangr

This comment has been minimized.

Copy link

commented Aug 29, 2017

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)
    }
}
@amerllica

This comment has been minimized.

Copy link

commented Dec 30, 2017

@damujiangr

Code by create-react-app

This solution has issue in webpack product version. the animation property completely is ignored in webpack product version.

But in dev version is ok.

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Feb 15, 2018

Duplicate #243

@sergeyshmakov

This comment has been minimized.

Copy link

commented Feb 13, 2019

This is my comment how to fix this keyframes-animation issue of css-loader:

css-modules/css-modules#141 (comment)

@Finesse

This comment has been minimized.

Copy link

commented Mar 3, 2019

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

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

This comment has been minimized.

Copy link

commented Mar 3, 2019

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

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

May be it works. There is many ways to fix if you are code owner of keyframe-animations, but if you need to fix it in the external module - you need to solve it on the webpack level.

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Mar 4, 2019

Somebody can create issue with reproducible test report?

@Finesse

This comment has been minimized.

Copy link

commented Mar 5, 2019

@sergeyshmakov

May be it works. There is many ways to fix if you are code owner of keyframe-animations, but if you need to fix it in the external module - you need to solve it on the webpack level.

Maybe you can use a postcss-loader to change the animation arguments order in the CSS code before the code gets to the css-loader.

@sergeyshmakov

This comment has been minimized.

Copy link

commented Mar 7, 2019

@Finesse I would be happy if you provide working settings. Because most of plugins that I see has a very rare release date.

@Finesse

This comment has been minimized.

Copy link

commented Mar 8, 2019

@sergeyshmakov I made a quick search and couldn’t find an appropriate PostCSS plugin. So I’m afraid you need to make your own plugin. There is a very similar plugin, you can use it as an example: https://github.com/ben-eb/postcss-ordered-values

@brendanfalkowski

This comment has been minimized.

Copy link

commented Jul 12, 2019

For reference, I found this issue while debugging and documented several approaches here: https://gravitydept.com/blog/keyframe-animations-in-css-modules

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Jul 13, 2019

@brendanfalkowski please open new issue with reproducible test repo, thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
10 participants
You can’t perform that action at this time.