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

animation names in :global scope are rewritten #243

Closed
at0g opened this issue Mar 11, 2016 · 10 comments

Comments

@at0g
Copy link

commented Mar 11, 2016

Source file (mixed scopes)

// file: main.scss
:global {
    .spin {
        animation: spin 1s infinite linear;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
}

.example {
    width: 4rem;
    height: 4rem;
    background: red;
}

With the source file above, I expect to find both .spin and @keyframes spin written into the global css scope. Instead I get spin and @keyframes QaBLEFqXSeSWZkvccbzsW.

This becomes really problematic when trying to import 3rd party css that defines their own animations.

Output

.spin {
  animation: spin 1s infinite linear; }

@keyframes QaBLEFqXSeSWZkvccbzsW {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

._1zRVcLYUvZ_iPce6xumbp9 {
  width: 4rem;
  height: 4rem;
  background: red; }

Loader config

{
    test: /.scss$/,
    loader: 'style!css?modules!sass'
}
@hellatan

This comment has been minimized.

Copy link

commented Mar 13, 2016

@at0g - I was having trouble with this when using :local since our project doesn't have local css turned on by default. You might want to try this instead:

// file: main.scss
:global {
    .spin {
        animation: spin 1s infinite linear;
    }
    @keyframes :global(spin) {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
}

When I swapped :global for :local, the @keyframes animation name was renamed properly in both the declaration and within the class I was using it in.

Here's my setup:

:local {
    @keyframes :local(spin) {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .spinnerWrapper {
        background: none;
        position: relative;
        width: 200px;
        height: 200px;
    }
    .spinner {
        animation: spin 1s linear infinite;
    }
}

which output to:

@keyframes _spinner__spin___QWBLz {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

._spinner__spinnerWrapper___rKp5P {
  background: none;
  position: relative;
  width: 200px;
  height: 200px;
}

._spinner__spinner___3jLpF {
  animation: _spinner__spin___QWBLz 1s linear infinite;
}
@at0g

This comment has been minimized.

Copy link
Author

commented Mar 14, 2016

@hellatan Thanks, but it does not really solve the issue (which is the animation name being rewritten in the global scope).

My expectation is that styles within :local or :global scope would be renamed consistently - in most cases they are, but not with animation names.

@hellatan

This comment has been minimized.

Copy link

commented Mar 17, 2016

@at0g ya that's a good point - it is a non-obvious workaround. Are there any other keywords/characters other than @keyframes that could be an issue? I'm imagining that it's only seeing ., #, [ and alphanumeric values to apply the local/global css algorithm to.

@bebraw bebraw added the type: Bug label May 14, 2016

@dominik791

This comment has been minimized.

Copy link

commented Oct 21, 2016

If you want to have global class for animation you can use:

:global {
  .fadeIn :local {
    animation: fadeIn 2.5s ease-out;
  }
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
}

which results in:

.fadeIn {
    animation: animations__fadeIn___2pADx 2.5s ease-out; 
}
@keyframes animations__fadeIn___2pADx {
  from {
    opacity: 0; }
  to {
    opacity: 1; } 
}

If you use shorthand property for animations, be careful to put animation-name as the first one

@AlejandroEsquivel

This comment has been minimized.

Copy link

commented Dec 13, 2016

This worked for me

@-webkit-keyframes :local(animatetop) {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
@keyframes :local(animatetop) {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
:local(.modalContent) :local{
    position: relative;
    background-color: white;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 500px;
    min-height:300px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

The output was: (if that's what you were trying to accomplish)

@-webkit-keyframes _31eoHIHwv5wTOt_wePBEKx {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
@keyframes _31eoHIHwv5wTOt_wePBEKx {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
._3X1GGZ3CQqrjQ7gOsJ1Vev{
    position: relative;
    background-color: white;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 500px;
    min-height:300px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: _31eoHIHwv5wTOt_wePBEKx;
    -webkit-animation-duration: 0.4s;
    animation-name: _31eoHIHwv5wTOt_wePBEKx;
    animation-duration: 0.4s
}
@HuBinAdd

This comment has been minimized.

Copy link

commented Jan 3, 2018

// file: main.scss
:global {
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .spin :local{
        animation: spin 1s infinite linear;
    }
}

That's what I did.

@bbthorntz

This comment has been minimized.

Copy link

commented Mar 1, 2018

Had a similar issue but ensuring the animation name (as suggested by @dominik791) was specified as the first property in the animation shorthand fixed it.

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Jul 6, 2018

@Finesse

This comment has been minimized.

Copy link

commented Mar 3, 2019

I fixed the issue in my project by replacing

.example {
   animation: 0.5s ease-out fadeIn;
}

with

.example {
   animation: fadeIn 0.5s ease-out;
}
@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

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