Shape Path Editor does not support use of CSS Custom Properties

Developer Tools
#1

I noted that Shape Path Editor does not support use of CSS Custom Properties when used in clip-path property.

For example, if you try the following code:

.foo {
  clip-path: polygon(calc(var(--high) + var(--offset)) 0, 
             100% 0, 
             100% 100%, 
             calc(var(--low) + var(--offset)) 100%);
}

If you replace CSS Custom Properties with numbers (even leaving calc() function) Inspector correctly shows you Shape Path Editor icon.

Please, could be added support also for CSS Custom Properties in it?

#2

Hi Luca,

Indeed, the Shape Path Editor does not support CSS Custom Properties. There’s a bug opened if you want to track this: https://bugzilla.mozilla.org/show_bug.cgi?id=1522806

The same holds true for many other specialized editors in DevTools. The solution isn’t simple. We need to configure editors to follow the custom property declaration and update it accordingly in the CSS rule where from which it is inherited.

Particularly when mixed with calc(), the implementation gets complicated. For example, if dragging a point in the Shape Path Editor UI to edit a coordinate in any of those calc() instances defined above, how to split the value and send it to the right custom property (what value goes to --high and/or --offset)?

Supporting custom properties is something we want to do, but it requires careful thought. It is on our backlog but not in the near term.

#3

I perfectly understood @rcaliman, and thank you for your exaustive answer.
Maybe in the meantime could be enough a “trick” to replace code with CSS Custom Properties with another one in which their values are directly inserted into clip-path value, so then is possible to use default Shape Path Editor.

Effectively is the same thing that actually I need to do “manually” to be able to use Shape Path Editor during development