lv_css

Experimental CSS-like syntax for LVGL styles

MIT License

Stars
12

lv_css

This is an experimental compiler that translates a CSS-like file into LVGL style function calls.

/* test.css */
.testClass {
    background-color: blue;
    border-radius: 4px;
}
.testClass:focused, .testClass2 {
    background-color: rgba(255, 0, 0, 0.1);
    opacity: 0.2;
    background-blend-mode: normal;
    border-color: red;
}
./main.js test.css
/*
 * Autogenerated file; do not edit.
 */

lv_style_t lv_style_testClass;
lv_style_t lv_style_testClass2;

void lv_style_css_init(void) {
    lv_style_init(&lv_style_testClass);
    lv_style_set_bg_color(&lv_style_testClass, LV_STATE_FOCUSED, LV_COLOR_MAKE(255, 0, 0)); lv_style_set_bg_opa(&lv_style_testClass, LV_STATE_FOCUSED, 26);
    lv_style_set_radius(&lv_style_testClass, LV_STATE_NORMAL, 4);
    lv_style_set_opa_scale(&lv_style_testClass, LV_STATE_FOCUSED, 51);
    lv_style_set_bg_blend_mode(&lv_style_testClass, LV_STATE_FOCUSED, LV_BLEND_MODE_NORMAL);
    lv_style_set_border_color(&lv_style_testClass, LV_STATE_FOCUSED, LV_COLOR_MAKE(255, 0, 0)); lv_style_set_border_opa(&lv_style_testClass, LV_STATE_FOCUSED, 255);
    lv_style_init(&lv_style_testClass2);
    lv_style_set_bg_color(&lv_style_testClass2, LV_STATE_NORMAL, LV_COLOR_MAKE(255, 0, 0)); lv_style_set_bg_opa(&lv_style_testClass2, LV_STATE_NORMAL, 26);
    lv_style_set_opa_scale(&lv_style_testClass2, LV_STATE_NORMAL, 51);
    lv_style_set_bg_blend_mode(&lv_style_testClass2, LV_STATE_NORMAL, LV_BLEND_MODE_NORMAL);
    lv_style_set_border_color(&lv_style_testClass2, LV_STATE_NORMAL, LV_COLOR_MAKE(255, 0, 0)); lv_style_set_border_opa(&lv_style_testClass2, LV_STATE_NORMAL, 255);
}