CSS validation issues

[ahukkanen]

Typo @ Emoji.css

https://github.com/joeattardi/picmo/blob/7a996dbc0a94a771beba573a66861e7484b7a0b9/packages/picmo/src/views/Emoji.css#L24

Should be solid instead of soldi.

Test by going to: https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input

Enter this CSS (omit the CSS variable as that alone would actually pass the validation):

.test {
  outline: 1px soldi #fff;
}

Invalid values for linear-gradient

https://github.com/joeattardi/picmo/blob/efd47b0367bff64f1f23d92a60cf519acd60e305/packages/picmo/src/styles/index.css#L39-L45

Test by going to: https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input

Enter this CSS:

.test {
  background-image: linear-gradient(
    90deg,
    rgba(#fff, 0) 0,
    rgba(#fff, 0.2) 20%,
    rgba(#fff, 0.5) 60%,
    rgba(#fff, 0)
  );
}

The values passed to rgba should be RGB values, not hexadecimals.

Types are incompatible

https://github.com/joeattardi/picmo/blob/7a996dbc0a94a771beba573a66861e7484b7a0b9/packages/picmo/src/views/CategoryTabs.css#L60

This produces the following CSS validation issue:

Value Error : max-width The types are incompatible ))

Test by going to: https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input

Enter this CSS:

.test {
  max-width: min(calc(8 * 2rem * 1.3 + 2.75rem), calc(var(--category-count) * 2.5rem));
}

The reason for this to fail is that the --category-count CSS variable is not readable through the CSS as it is assigned dynamically through the JS here: https://github.com/joeattardi/picmo/blob/7a996dbc0a94a771beba573a66861e7484b7a0b9/packages/picmo/src/views/EmojiPicker.ts#L316

But if you pass this CSS to the validator it actually passes because the CSS parser can now read the CSS value:

:root {
  --category-count: 1;
}

.test {
  max-width: min(calc(8 * 2rem * 1.3 + 2.75rem), calc(var(--category-count) * 2.5rem));
}

This issue causes an HTML validation error on the page because the styles are injected to the page but the CSS variable is not. HTML validation issues can cause issues during accessibility evaluations.

[joeattardi]

Yikes, those are definitely not valid CSS colors. No idea where those came from. I even wrote a book on CSS and didn't catch it. Probably in a late night coding session. :) I tested the generated stylesheets and they all pass the validator now, this will be fixed in the next release.