I appreciate the effort in improving CSS dev tools. I rely on them a lot, and just looking at those slides you can see how difficult of a problem it is to solve.
Flexbox and CSS Grid have introduced another level of complexity, in that, the display value of an element turns its direct children into flexbox/grid elements, making their display value irrelevant. It also makes their flex-* properties effective. You'd have to parse the DOM tree to detect such dependencies.
Also, pruning innefective properties isn't that easy because you need to take into account the context. Let's say you have a blue button with white text. This button is in dark navbar that also has white text. Apparently, the button's color is ineffective because inheriting its value from the navbar would suffice. But that same button in a dark text context would make the color property effective again. Since the button would have the same CSS class, you can't prune the color for all instances.
Flexbox and CSS Grid have introduced another level of complexity, in that, the display value of an element turns its direct children into flexbox/grid elements, making their display value irrelevant. It also makes their flex-* properties effective. You'd have to parse the DOM tree to detect such dependencies.
Also, pruning innefective properties isn't that easy because you need to take into account the context. Let's say you have a blue button with white text. This button is in dark navbar that also has white text. Apparently, the button's color is ineffective because inheriting its value from the navbar would suffice. But that same button in a dark text context would make the color property effective again. Since the button would have the same CSS class, you can't prune the color for all instances.
Definitely a hard problem to tackle.