Skip to main content
Version: Next 🚧

CSS 解析器和选择引擎库

  • 开始日期:2023-05-01
  • 目标主要版本:3.x
  • 参考问题:无
  • 实现 PR:无

概括

将 CSS 相关的功能模块整合为独立的子库,重新设计部分接口,移除对 UI 库、线程库、字体库的依赖。

基本示例

#include <stdio.h>
#include <css.h>

char css_str[] = "\
* {\
box-sizing: border-box;\
}\
.btn {\
font-size: 14px;\
}\
";

int main(void)
{
css_prop_t *prop;
css_selector_t *selector;
css_style_decl_t *style;

css_init();
css_load_from_string(css_str);
selector = css_selector_create(".btn");
style = css_select_style(selector);
prop = css_style_decl_find(style, css_key_font_size);
if (prop != NULL) {
printf("font-size: %fpx\n", prop->value.unit_value.value);
}
css_selector_destroy(selector);
css_style_decl_destroy(style);
css_destroy();
return 0;
}

动机

  • 减少依赖项: 样式数据库操作依赖线程库的互斥锁、font-family 属性解析器依赖字体库、@font-face 规则解析器依赖 UI 库的 TextView 部件。
  • 纠正 CSS 相关数据类型的命名: 部分 CSS 相关数据类型命名并不正确,例如:样式表(StyleeSheet)是包含了 CSS 规则集的对象,然而 LCUI_StyleSheet 里面却是 CSS 属性列表,正确的命名是 StyleDeclaration

详细设计

调整命名

为提升辨识度,所有标识符命名以 css_ 开头。

参考 LibCSS 库和 MDN 中的 CSS 对象模型相关的文章,确定 CSS 库中的对象类型名和释义:

对象CSSOM 中的名称CSS 库中的名称含义

样式表

CSSStyleSheet

css_stylesheet_t

各种规则的集合

样式声明

CSSStyleDeclaration

css_style_decl_t

CSS 属性键值对的集合

规则

CSSRule

css_rule_t

(字面意思)

样式规则

CSSStyleRule

css_style_rule_t

定义了一组属性和值,以及应用这些属性和值的元素。

主要标识符命名改动如下:

  • LCUI_StyleSheet -> css_style_decl_t,StyleSheet 保存了所有 CSS 属性,数组下标既是属性编号。为节省内存占用,改用 css_style_decl_t
  • LCUI_StyleList -> css_style_decl_t,StyleList 是一个链表,仅存储了使用的 CSS 属性。
  • LCUI_Style -> css_style_value_t
  • LCUI_Selector -> css_selector_t
  • LCUI_SelectorNode -> css_selector_node_t
  • LCUI_LoadCSSFile() -> css_load_from_file()
  • LCUI_LoadCSSString() -> css_load_from_string()
  • CSSParser_Begin() -> css_parser_create()
  • CSSParser_End() -> css_parser_destroy()
  • LCUI_GetStyleSheet() -> css_select_style()

其它改动是相似的,不再赘述。

调整数据结构

参考 CSS Typed Object Model API 文档中的各种值类型接口,将 LCUI_Style 中的 pxspstyleval_stringval_image 等成员改为如下所示的几类成员:

struct css_style_value_t {
css_style_value_type_t type;
union {
css_private_value_t value;
css_numeric_value_t numeric_value;
css_integer_value_t integer_value;
css_string_value_t string_value;
css_unit_value_t unit_value;
css_color_value_t color_value;
css_image_value_t image_value;
css_unparsed_value_t unparsed_value;
css_keyword_value_t keyword_value;
css_style_array_value_t array_value;
css_boolean_value_t boolean_value;
};
};

移除线程库依赖

删除 LCUI_Mutex 和相关函数调用。

移除字体库和 UI 库依赖

css_font_face_parser_t 内新增 callback 函数指针成员,新增 css_font_face_parser_on_load() 函数用于设置 callback,由 UI 库调用它来响应字体加载。

调整 UI 库的样式操作方法

取消 Widget_SetStyle() 函数宏,新增几个函数用于操作不同类型的属性值,命名以 ui_widget_set_style_ 开头,后面接 CSS 属性值类型名,例如:

void ui_widget_set_style_unit_value(ui_widget_t *w, int key,
css_numeric_value_t value,
css_unit_t unit);
void ui_widget_set_style_keyword_value(ui_widget_t *w, int key,
css_keyword_value_t value);
void ui_widget_set_style_color_value(ui_widget_t *w, int key,
css_color_value_t value);
void ui_widget_set_style_numeric_value(ui_widget_t *w, int key,
css_numeric_value_t value);

用法对比:

// 之前
Widget_SetStyle(widget, key_width, 100, px);

// 之后
ui_widget_set_style_unit_value(widget, css_prop_width, 100, CSS_UNIT_PX);

缺点

无。

备选方案

参考 LibCSS 的设计,更改数据类型和函数的命名,使 CSS 库的用法与 LibCSS 库高度相似。这个方案成本太高,暂不考虑。

采用策略

这是个破坏性改动,需要对所有用到 CSS 功能的代码进行修改,由于主要改动都在命名上,这些文件通常只需要全局替换名称即可。