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
Closed

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

kylecesmat opened this issue May 23, 2017 · 23 comments

Comments

@kylecesmat
Copy link

@kylecesmat kylecesmat 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
Copy link

@AndrewPHunter AndrewPHunter 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

Loading

@pixelass
Copy link

@pixelass pixelass 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"

Loading

@TrySound
Copy link
Contributor

@TrySound TrySound commented Jun 7, 2017

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

Loading

@pixelass
Copy link

@pixelass pixelass 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.

Loading

@pixelass
Copy link

@pixelass pixelass commented Jun 7, 2017

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

Loading

@TrySound
Copy link
Contributor

@TrySound TrySound commented Jun 7, 2017

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

Loading

@pixelass
Copy link

@pixelass pixelass commented Jun 7, 2017

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

#537 (comment)

Loading

@TrySound
Copy link
Contributor

@TrySound TrySound commented Jun 7, 2017

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

Loading

@pixelass
Copy link

@pixelass pixelass 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.

Loading

@TrySound
Copy link
Contributor

@TrySound TrySound commented Jun 7, 2017

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

Loading

@pixelass
Copy link

@pixelass pixelass 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.

Loading

@damujiangr
Copy link

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

Loading

@amerllica
Copy link

@amerllica amerllica 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.

Loading

@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Feb 15, 2018

Duplicate #243

Loading

@sergeyshmakov
Copy link

@sergeyshmakov sergeyshmakov commented Feb 13, 2019

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

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

Loading

@Finesse
Copy link

@Finesse Finesse 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;
}

Loading

@sergeyshmakov
Copy link

@sergeyshmakov sergeyshmakov 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.

Loading

@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Mar 4, 2019

Somebody can create issue with reproducible test report?

Loading

@Finesse
Copy link

@Finesse Finesse 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.

Loading

@sergeyshmakov
Copy link

@sergeyshmakov sergeyshmakov 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.

Loading

@Finesse
Copy link

@Finesse Finesse 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

Loading

@brendanfalkowski
Copy link

@brendanfalkowski brendanfalkowski 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

Loading

@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Jul 13, 2019

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

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants