Classed styles

[neriyaco]

Currently we have the Style class to manipulate the style of elements which apply the style directly in the html attributes.

A better way of doing this would be to create a unique class for each Style instance and apply the style as CSS, then adding the class to the element, similar to CSS Modules.

Example:

# card_style.py
from jsx import Style

card = Style({
    'background-color': 'white',
    'border': '1px solid #e1e4e8',
    'border-radius': '6px',
    'box-shadow': '0 1px 3px rgba(27,31,35,0.12), 0 1px 2px rgba(27,31,35,0.24)',
    'padding': '16px',
    'margin': '8px'
})

# card.py
from jsx import ContainerComponent
from .card_style import card

class Card(ContainerComponent):
    def render(self):
        return Div(
            *self.children,
            class_name={card.class_name}
        )

[neriyaco]

We might add support for css modules in general.

The Style class will probably stay the same.

[neriyaco]

This functionality is added in v0.6.0.

I’ll add documentation on release.