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?