Freecodecamp: Override All Other Styles by using Important:bug

[IonZero1]

Challenge Override All Other Styles by using Important has an issue.
User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink !important ;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

i dont pass the:Your pink-text class declaration should have the !important keyword to override all other declarations.

[raisedadead]

@IonZero1 Thanks for the report

The above

color: pink !important ;

has a space between !important and ;.

Removing it like below fixes the challenge, and lets it pass:

color: pink !important;

This is a valid bug, maybe the tests are killing it. Needs fixing and allowing space in between.

[Manish-Giri]

I'll work on it..

[dhcodes]

@Manish-Giri you have all the fun :)

[Manish-Giri]

@dhcodes all the fun goes away the minute I hit gulp 😟

[Manish-Giri]

@raisedadead I tested the code locally, it looks like the bug doesn't exist in staging. If you look at this line, the regex does account for possible spaces between !important and ;

code.match(/\\.pink-text\\s*?\\{[\\s\\S]*?color:.*pink.*!important\\s*;?[^\\.]*\\}/g)

Here is the result on my local instance -

[raisedadead]

@Manish-Giri thanks it looks like the code on backup/master is old.

@IonZero1 this issue is fixed and will be available when we release our website soon. Sorry for the inconvenience. Until then please proceed by removing the space as suggested in the comments above.

Thanks and happy coding!

[lourcastillo-zz]

<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>