v2 style2state syntax proposal

[tenphi]

The current syntax is very simple and works well in most cases but limits the power of CSS selectors. There is no way to bind style value to the custom selector-like attribute with a specific value.

For example, we want our block to have the color #text by default and the color #special when it's focused or hovered.

Old syntax:

<nu-block color="#text :hover.focus[#special]"></nu-block>

New syntax:

<nu-block color="#text &:hover,:focus{#special}"></nu-block>

It's easier to read the second selector 'cause there is more CSS-like syntax. Also [, ] brackets are replaced with more intuitive {, }.

It's also possible to specify custom selectors with attributes and their values:

<nu-block color="#text &[type='primary'],[type='clear']{#special}"></nu-block>

There is still room for improvements 'cause we don't have the ability to specify CSS pseudo selector and Numl use its syntax to declare modifiers. The declaration color="#text &:hover,:focus{#special}" will be transformed into color="#text &[is-hover],[is-focus]{#special}". If we need to use native :hover syntax then there is no option for that.

Any ideas?

[tenphi]

We can also introduce more advanced logic syntax like:

<nu-block color="#text &[type='primary'],(:hover,:focus,:pressed){#special}"></nu-block>

...that is the shorthand for:

<nu-block color="#text &[type='primary']:hover,[type='primary']:focus,[type='primary']:pressed{#special}"></nu-block>

We can support any level of logic nesting here.

[timeshift92]

in principle, the project is still young, before version 1 you can think about a better implementation

[tenphi]

We won't change v1 syntax. v1 is almost ready. We already postponed its release by a lot. A new syntax will require a big refactoring to its core. In that case, we will never see the v1 'cause there is always room for enhancements.

[shubham-kaushal]

Updates: https://github.com/numldesign/tasty