Freecodecamp: [beta] CSS Parsing Issue on certain Challenges

[ParaBolt]

The Issue

In certain challenges (listed below), if there is a space between property and colon, the tests will fail to validate even though code has been written correctly.

Meaning, This code fails :-

selector {
 property : value;
}

and this code passes :-

selector {
 property:value;
}

Examples

There are more, I'll update here as I find them.

• Applied Visual Design: Adjust the background-color Property of Text
• Applied Visual Design: Add a box-shadow to a Card-like Element
• Applied Visual Design: Create a Gradual CSS Linear Gradient
• Applied Visual Design: Adjust the Hover State of an Anchor Tag
• Applied Visual Design: Learn about Tertiary Colors
• Applied Visual Design: Adjust the Hue of a Color
• CSS Flexbox: Apply the flex-direction Property to Create Rows in the Tweet Embed

[texas2010]

that dont have an issue? you wrote wrong code. it suppose to be property: value;

it will be failed if you add space before : . property : value;

[ParaBolt]

It is correct syntax, parsed and rendered by the browser correctly. And as I mention, that style of CSS passes in all other tests, yet fails in the above-mentioned ones as well as a few others even though the result is rendered correctly on the result view screen.

[cdrani]

@ParaBolt:
Hmmm... on one hand the examples provided alongside the challenge use the standard conventions for css markup and campers will most likely try to format their code based on the example code, therefore unknowingly adhering to industry style guides. However, I see the point in that campers should not have to worry about following a style guide during the early learning process, but instead focus on using correct syntax.

There's really only two options at this point, the first one being to rewrite the tests so they aren't as strict, although it would be to the benefit of campers if they are nudged towards writing code that conforms to the accepted conventions, even at the early stages of learning CSS. The other option, and the better one, is to wait for issue #10749 to be resolved, which will then clear up these and the other challenges waiting on this fix.

I believe the consensus is on option two.

[QuincyLarson]

I'm closing this issue as stale since it hasn't been active lately. If you think this is still relevant to the newly updated platform, please explain why, then reopen it.

[T1mL3arn]

Issue is still present for Add a box-shadow to a Card-like Element.

While both of these are correct

/* first */
#thumbnail {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19)
              , 0 6px 6px rgba(0,0,0,0.23);
  }

/* second */
#thumbnail {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }

only the second passes the test.

Win7 Firefox 63.0.1

[QuincyLarson]

@T1mL3arn Thanks for catching this! I can confirm this issue still exists on Add a box-shadow to a Card-like Element as @T1mL3arn pointed out. I've re-opened this issue.

Would anyone be interested in tackling this?

[RandellDawson]

This issue has now been resolved in PR #34801. It may be a while before the change is moved to production though.