Reimplement style info computing for style panel

[TrySound]

Since initial implementation style info computing became very complex. We need new version based considering all new requirements and data structures

• support "inherit" keyword
• support "currentColor" keyword without looking into browser style

Here are all sources of styles we have now

• initial style from mdn-data
• html style from browsers default stylesheets
• preset styles from component meta
• inherited styles from ancestor instances
• cascaded styles from previous breakpoints
• remote styles from previous style sources
• local styles from current style source

[istarkov]

The other thing we need to iterate/find ancestor node with specific styles

And we need computedStyle for inherit keyword. Use case - detect current node real style if inherit is set, needed in cases like show Position.

Both needs recursion or top/down algorithm of building current style.

[istarkov]

I think this is already too hard to read, we need some model like DOM.

node.parentNode
node.style
getComputedStyle(node)

Ability to use model with minimal knowledge of all that internal atoms. Without relying on React hooks.

[kof]

@istarkov be careful with "like DOM" DOM is slow partially because of the model.

[istarkov]

I don't mind if it will be not the full model but only parent iterator or getStyle(instanceId) call. As of now to do anything with styling you need to know all the internals we use. That's bad.

[istarkov]

I also think that tests we have should be rewritten in readable format. For now they are fully unreadable. It will be much better to understand what style shoud element have if our test input would be jsx like (we can use own jsx)

const blablaStyleSource = { width: 20px };
const blubluStyleSource = { height: 20px }

<div 
  style={{a: 1}} 
  style:break300={{ width: 10px, inheritedProp: blabla }} 
  style:break700={{ width: 10px, inheritedProp: blabla }} 
  styleSources={['local', blablaStyleSource, blublu]}
>
<selected style={} styleSources={['local']} selectedStyleSourceIndex={2} />
</div>

let screenWidth = 360px;
expect (calc(selected, screenWidth).style.local).tobe(xxx);
expect (calc(selected, screenWidth).style.value).tobe(xxx);
expect (calc(selected, screenWidth).parent.style.local).tobe(xxx);

or without jsx

div({ style: { }, styleSources: {}], [
  selected({ style, styleSources: {} })
]))

Looking at such tests at least the tree model is understandable, and I as a human can calc final result

[kof]

DOM model I meant meaning the children referencing parents and stuff like that. There are better ways to do this.

[TrySound]

Jax doesn't work for us because component names have pascal case and require such components to be in scope.

But yeah, if we use it for tests and embed template all would be easier.