stylelint: New rule: disallow ignored display values

There are some cases, where certain display values are overridden by other properties:

1. Elements with position: absolute or position: fixed (I’m not sure about position: sticky) have automatically applied display: block on them (if display: none is not present). Therefore CSS like this makes no sense:

.selector { position: absolute; display: inline-block; } If you open your developer tools, you will see, that the “computed” display-value of such an element is block.

=> new rule: no-ignored-display-values, which shows by default a warning, if a different value other than block or none is used within the same selector. There might even be an option, which disallows the use of block as well, as it’s applied anyway and is therefore unnecessary. Only display: none is useful (currently hidden elements, which are shown later).

1. Elements with a float value other than none (which is either left, right, inline-start or inline-end) have usually a different display property applied as well. This is more complicated though. While most elements have their display value changed to block, it may also be changed to table (if the display value used to be inline-table), or isn’t changed at all (if the display value was flex or flex-inline). A full “transformation”-table may be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/float

I’ve experienced, that such errors are surprisingly common. Even though there are edge cases, where such combinations might make sense (e.g. if a different class overrides the position property to static again under certain circumstances, so that the display: inline-block does something), I feel that these occasions are very very rare and this constellation should therefore show a warning.

Edit: I just found a similar rule, which does such checks. As far as i see, it doesn’t check for the two mentioned cases yet: https://github.com/stylelint/stylelint/tree/master/src/rules/declaration-block-no-ignored-properties