2

Is there an npm package somewhere (or an open source JavaScript repo I can use) that maps CSS property names to their expected value data types?

I'm looking for something like the following:

import {getCssPropertyTypes} from 'some-package';

getCssPropertyTypes('background-color');
// returns ['color']

I want to use this for a stylelint plugin. I've tried digging into the internals of postcss, css-tree, stylelint itself, and the results of many an npm or google search to no avail.

Is the only solution here to personally write a web scraper for MDN docs?

derpedy-doo
  • 1,097
  • 1
  • 18
  • 22
  • You meant `returns ['backgroundColor']`? – ulou Sep 28 '20 at 22:52
  • @ulou no, I'm indeed looking for `returns ['color']` per `The background-color property is specified as a single value.` from the [MDN docs for `background-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) – derpedy-doo Sep 28 '20 at 22:57
  • I don't see any mention of which CSS properties map to which data types, and without a spec-level definition, no _correct_ code can be written to give you the mapping you're looking for. On that note: what do you need it for? Because it's entirely possible you thought up a solution to a problem and you're asking about how to effect that solution, instead of asking how to solve the original problem. – Mike 'Pomax' Kamermans Sep 28 '20 at 23:12
  • I am using VSCode with an MDN plugin, and it already does that for me. Is there a reason you need it yourself? CSS is pretty non-destructive, so an incorrect value there does not result in errors or code not 'being valid', so it seems like a solution in search of a problem? Or do you just want to auto-detect where to blame when a value doesn't match the prop? – somethinghere Sep 28 '20 at 23:40
  • @Mike'Pomax'Kamermans for the example of `background-color`, [the spec indicates here](https://drafts.csswg.org/css-backgrounds-3/#background-color) that the value should be of type ``. Perhaps other properties aren't as explicit, I haven't checked them all, but I would be surprised if that were the case. – derpedy-doo Sep 29 '20 at 15:38
  • @somethinghere I want to incorporate this in a linter rule that checks declarations based on the expected value type. Could you link to the MDN plugin (extension?) you use? If it's already doing what I want hopefully I can reuse some of its internals. – derpedy-doo Sep 29 '20 at 15:43
  • For which linting engine? – Mike 'Pomax' Kamermans Sep 29 '20 at 17:45
  • 1
    It's called `searchdocs`, and it apparently searches SO and MDN. Might just be a live page parser though. It lists `Syntax: [,]* ` when I hover over the `background` attribute. Thing is, I don't see why you would need to lint this. There is no danger in non-functional CSS, except a graphic being slightly different. It also has the issue with the ever changing values and combinations of values you can use in CSS. Ah well, if you manage it, it could be interesting I guess. – somethinghere Sep 29 '20 at 19:28
  • @Mike'Pomax'Kamermans stylelint – derpedy-doo Sep 29 '20 at 21:02
  • 1
    > "a linter rule that checks declarations based on the expected value type". The [stylelint-csstree-validator plugin](https://www.npmjs.com/package/stylelint-csstree-validator) checks declarations based on the expected value type. > "for the example of `background-color`, the spec indicates here that the value should be of type ``." Should you want to roll your own plugin, I believe [this is the data](https://github.com/csstree/docs/blob/master/docs/syntax/data.json#L525) csstree uses for the validation, which includes your `background-color` as `` example. – jeddy3 Oct 05 '20 at 09:48

0 Answers0