CSSHelp Features and Bugs

Reason for this issue:

• Documenting quirks and issues with the CSSHelp class

Quirks (will not fix)

• Testing in JSDOM results in whitespace formatting being taken through to computed values. Example
• Colour values are computed into rgb. Example: #000 -> rgb(0, 0, 0)
  • Note: Named colours are not computed. Example: red -> red
• Custom CSS variable property values are not computed. Example: #000 -> #000
• Custom CSS variable property values come with untrimmed whitespace. Example:

CSSHelp(document).getStyleDeclaration('selector')?.getPropertyValue('--custom-variable') === " #000"

Bugs (will fix)

• Safari does not have <CSSMediaRule>.conditionText. Ref: https://github.com/freeCodeCamp/freeCodeCamp/issues/42354#issuecomment-854505895
  • Will likely only rely on media.mediaText property, as conditionText is computed from this.

Feature Requests 🤷‍♂️

• Calculated values can contain whitespace (not \t\r\n). Example:

selector {
  background: linear-gradient(  var(--building-color1 ) ,
      var(--window-color1)
    );

getStyleDeclaration('selector')?.background === "linear-gradient( var(--building-color1 ) , var(--window-color1) )"

• This helper should be able to select out only the CSS defined in the editor, but testing needs to be done to confirm external stylesheets will not end up being selected. (related: #42356 )

[ShaunSHamilton]

@moT01 The only thing I would want done is this helper should be able to ignore external stylesheets (e.g. Darkmode Browser Extensions), but will require some tinkering, and potentially adding something unique to the styles appended to the iframe.

Short: I would like this to stay open, for now. What needs to change is: https://github.com/freeCodeCamp/freeCodeCamp/blob/5de0aae5da35927042a8ad5565b6b7eca0a95338/client/src/utils/css-help.ts#L95-L103

[prasad1004]

🙌