search

popcodeorg / popcode

An HTML/CSS/JavaScript editor for use in the classroom
MIT License
189 stars 139 forks source link

Display Grid Gives Error #1472

Open pwjablonski opened 6 years ago

pwjablonski commented 6 years ago

Looks like popcode doesn't support CSS Grid Layout. The below code throws an error in popcode. 

body {
    display: grid;
}
outoftime commented 6 years ago

Yeah, this is sort of a vexing ongoing issue (see also #1461). The issue isn’t really that we don’t “support” it, just that one of our validations doesn’t recognize it as a valid CSS property. Specifically, we use PrettyCSS to validate that all CSS properties used are known, and that all the values used for those properties are valid for the properties in question. The problem is that this relies on PrettyCSS having an accurate and up-to-date idea of what properties and values are supported by CSS, which sadly is not something we’ve been able to rely on. It’s a good library, but it doesn’t seem to be actively maintained outside of merging third-party pull requests.

To date our approach to this has been to basically submit PRs to PrettyCSS as needed (https://github.com/fidian/PrettyCSS/pull/44 https://github.com/fidian/PrettyCSS/pull/45 https://github.com/fidian/PrettyCSS/pull/51 https://github.com/fidian/PrettyCSS/pull/53) to get it to recognize properties/values we use instructionally. However this is pretty fragile and pretty much guarantees incomplete support for whatever modern CSS is at any given time.

Realistically I think our best bet would be to drop that rule from our PrettyCSS validations and maybe just drop PrettyCSS altogether, depending on how easy it is to get equivalent feedback from other CSS linters/parsers that we use. Stylelint has a property-no-unknown rule which will at least call out completely nonexistent properties; we may just need to give up on calling out invalid values for a given property.