Hakon add better way to get all CSS properties

[breck7]

Hakon will not compile a CSS property that is not defined in the grammar. This is good discipline and ensure there's autocomplete and type checking. However, keeping those up to date is a chore. Need a script to do it.

The Hakon grammar then also itself can serve as good docs for CSS.

[getflourish]

How are the properties currently collected?

[breck7]

One at a time by hand. Know of a definitive source in an easily parseable format?

[getflourish]

Source of truth I think the source for any complete property list will be w3.org https://drafts.csswg.org/indexes/#properties but it’s HTML only.

CSS Properties on MDN

For JSON data go to Mozilla MDN: https://github.com/mdn/data/blob/master/css/properties.json

Info on how it is updated: https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Update_the_CSS_JSON_DB

Here’s a nice example to see how the list is kept up-to-date: https://github.com/mdn/data/commit/03a02c4fad07bb65a7fa22366c172fa737cf8683#diff-562978da52d865694af570af147231e961cc58b084d8c2c4d8567e4c576b0ead

---

Before using MDN, there were other ways to get some data, which was often a mix of hand-made, forked, scraped, … so here are some more sources, just fo reference.

Other sources: It seems as if the VS Code CSS Langauge Service is based on it, because it references each MDN https://github.com/microsoft/vscode-css-languageservice/blob/main/src/data/webCustomData.ts

Another source can be autocompletions from code editors. Atom had a good list, VS Code used it as a base.

VS Code CSS Language Service https://github.com/microsoft/vscode-css-languageservice/blob/main/src/data/webCustomData.ts

Atom https://github.com/atom/autocomplete-css/blob/master/completions.json

Brackets https://github.com/adobe/brackets/blob/master/src/extensions/default/CSSCodeHints/CSSProperties.json

Chrome CSS Usage Stats https://www.chromestatus.com/metrics/css/popularity

Script that scrapes data from w3.org https://github.com/TejasQ/get-all-css-properties/blob/master/src/getAllCSSProperties.ts

[breck7]

This is fantastic. I like the idea of using MDN as the source of truth: https://github.com/mdn/data/blob/master/css/properties.json

But doing a cross check with usage in the wild first: https://www.chromestatus.com/metrics/css/popularity

Then probably just printing the missing properties, and allowing for one last human review.

Done once a month or so might not run into the situation where I go to use a CSS property and it is not in Hakon.

fetchMDN
 fetchWildUsage
  suggestMissingProperties

Thanks so much! I'm doing some cleanup in general of jtree sub projects right now, but this is on the todo list.

[breck7]

Would be neat but low pri