Implemented CSS styling support (#17)

Please note that supported CSS set is limited.
1. libcss mostly supports CSS2 syntax. CSS3 parts will be added but not
all at once.
2. CSS spec is huge, it's hard to implement it right away.

Co-authored-by: Artem Chernyshev <[email protected]>

Author: Unix4ever

.gitmodules

@@ -4,6 +4,6 @@
 [submodule "nanosvg"]
 	path = nanosvg
 	url = https://github.com/memononen/nanosvg.git
-[submodule "katana-parser"]
-	path = katana-parser
-	url = https://github.com/hackers-painters/katana-parser.git
+[submodule "libcss"]
+	path = libcss
+	url = https://github.com/Unix4ever/libcss.git

CMakeLists.txt

@@ -6,7 +6,7 @@ option(BUILD_SAMPLES "build ImVue samples" OFF)
 option(BUILD_IMGUI_FROM_SUBMODULE "build Dear ImGui from submodule" ON)
 option(BUILD_LUA_BINDINGS "build Lua bindings" ON)
 option(BUILD_CSS_STYLING "build css styling" ON)
-option(BUILD_KATANA_FROM_SUBMODULE "build libcss using submodule" ON)
+option(BUILD_CSS_FROM_SUBMODULE "build libcss using submodule" ON)
 option(BUILD_TESTS "build unit test for the project" OFF)
 option(IMVUE_NO_EXCEPTIONS "disable raising exceptions. Use log errors instead" OFF)
 option(IMVUE_USE_LUAJIT "use luajit" OFF)
@@ -40,14 +40,13 @@ if(BUILD_LUA_BINDINGS)
   set(ADDITIONAL_SOURCES src/lua/script.cpp ${ADDITIONAL_SOURCES})
 endif(BUILD_LUA_BINDINGS)
 
-# disable it for now. It's not used, and does not build on windows
-#if(BUILD_KATANA_FROM_SUBMODULE)
-#  set(KATANA_INCLUDE_DIRS katana-parser/src/)
-#  set(KATANA_LIBRARY katana)
-#  include_directories(${KATANA_INCLUDE_DIRS})
-#  file(GLOB_RECURSE sources katana-parser/src/*.c)
-#  add_library(${KATANA_LIBRARY} STATIC ${sources})
-#endif(BUILD_KATANA_FROM_SUBMODULE)
+if(BUILD_CSS_FROM_SUBMODULE)
+  add_subdirectory(libcss)
+  include_directories(libcss/libcss/include)
+  include_directories(libcss/libwapcaplet/include)
+  include_directories(libcss/libparserutils/include)
+  set(ADDITIONAL_LIBS ${ADDITIONAL_LIBS} css wapcaplet parserutils)
+endif(BUILD_CSS_FROM_SUBMODULE)
 
 if(BUILD_TESTS)
   find_package(GTest)
@@ -73,7 +72,10 @@ add_library(${LIB_NAME} STATIC
   src/imvue_element.cpp
   src/imvue_script.cpp
   src/imvue_context.cpp
+  src/imvue_style.cpp
+  src/imvue_layout.cpp
   src/imstring.cpp
+  src/css/select.cpp
 ${ADDITIONAL_SOURCES})
 
 set(IMGUI_SOURCES

README.md

@@ -38,6 +38,15 @@ You can either define them using `lua` syntax or `imv` xml file.
 
 `imv` files search path is configured using `package.imvpath` variable.
 
+CSS Styles Support
+------------------
+
+ImVue supports CSS styling and HTML syntax to some extent.
+
+[Styled document example](samples/simple/styled.xml) in action:
+
+![demo](demo.gif)
+
 Vue Special Syntax
 ------------------
 
@@ -65,7 +74,6 @@ Vue Special Syntax
 - Getting `event.target` in event handlers.
 - Changing element properties using refs (RO access only).
 - `${}` eval syntax in attributes.
-- CSS styles.
 - V8 JS integration.
 
 ### Lua Implementation Specifics
@@ -76,33 +84,18 @@ there is no limitation on what you can do. Globals are also available.
 Besides, it will create reactive listeners for each field that was used in the
 evaluation.
 
-Benchmarks
-----------
-
-Rendering 1000 windows with a single button.
-
-```
-------------------------------------------------------------------------------
-Benchmark                                    Time             CPU   Iterations
-------------------------------------------------------------------------------
-ImVueBenchmark/RenderImGuiLuaStatic    1968641 ns      1963054 ns         3493 # lua bindings
-ImVueBenchmark/RenderImGuiStatic       1894949 ns      1894921 ns         3654 # vanilla ImGui
-ImVueBenchmark/RenderImVueScripted     1909691 ns      1909661 ns         3615 # imgui with lua scripting enabled
-ImVueBenchmark/RenderImVueStatic       1888849 ns      1888819 ns         3667 # static xml template
-```
-
 Dependencies
 ------------
 
 - ImGui without any modifications.
 - NanoSVG is used for image rendering. Using customized rasterizer.
 - RapidXML is used for XML parsing.
+- customized version of [LibCSS](https://github.com/Unix4ever/libcss).
 
 Optional Core Dependecies
 -------------------------
 
 - Lua 5.1+/LuaJIT 2.0.5+ - adds script interpreter.
-- katana-parser allows reading CSS to change widgets style.
 
 Samples Dependencies
 --------------------
@@ -119,7 +112,3 @@ Build
 1. Run:
 
 `make build`
-
-### Using conan
-
-TODO

demo.gif

@@ -15,10 +15,10 @@ add_library(imgui_sdl2
 
 set(LIBS
   imgui
+  ${ADDITIONAL_LIBS}
   ${OPENGL_LIBRARIES}
   ${GLEW_LIBRARIES}
-  #${SDL2_LIBRARIES}
-  ${LUA_LIBRARIES}
+  ${SDL2_LIBRARIES}
   SDL2::SDL2main
   SDL2::SDL2-static
 )