SkUI CSS

Introduction

This SkUI module represents a complete CSS parser and in-memory representation of a CSS rule-set. Currently it is a work-in-progress, and far from complete.

Implementation

CSS covers a wide array of properties and selectors. The in-memory representation provided here makes use of variants, optionals, etc. whenever they fit the bill naturally. The parser is written using Boost.Spirit.X3.

Supported features

CSS is large, and once basic support is completed, some properties might still be missing or incomplete. The below tables attempts to track what has already been implemented.

Feature	Implementation	Notes
Large cascade	❌
Small cascade	❌
Animations	❌

Selectors

Feature	Representation	Parser	Notes
.class	❌	❌
.class1.class2	❌	❌
.class1 .class2	❌	❌
#id	❌	❌
*	❌	❌
element	❌	❌
element,element	❌	❌
element element	❌	❌
element>element	❌	❌
element+element	❌	❌
element~element	❌	❌
[attribute]	❌	❌
[attribute=value]	❌	❌
[attribute~=value]	❌	❌
[attribute|=value]	❌	❌
[attribute^=value]	❌	❌
[attribute$=value]	❌	❌
[attribute*=value]	❌	❌
:active	❌	❌
::after	❌	❌
::before	❌	❌
:checked	❌	❌
:default	❌	❌
:disabled	❌	❌
:empty	❌	❌
:enabled	❌	❌
:first-child	❌	❌
::first-letter	❌	❌
::first-line	❌	❌
::first-of-type	❌	❌
:focus	❌	❌
:hover	❌	❌
:in-range	❌	❌
:indeterminate	❌	❌
:invalid	❌	❌
:lang(language)	❌	❌
:last-child	❌	❌
:last-of-type	❌	❌
:link	❌	❌
:not(selector)	❌	❌
:nth-child(n)	❌	❌
:nth-last-child(n)	❌	❌
:nth-last-of-type(n)	❌	❌
:nth-of-type(n)	❌	❌
:only-of-type	❌	❌
:only-child	❌	❌
:optional	❌	❌
:out-of-range	❌	❌
:placeholder	❌	❌
:read-only	❌	❌
:read-write	❌	❌
:required	❌	❌
:root	❌	❌
::selection	❌	❌
:target	❌	❌
:valid	❌	❌
:visited	❌	❌

Functions

Feature	Representation	Parser	Notes
attr()	❌	❌
calc()	❌	❌
cubic-bezier()	✔️	✔️
hsl()	✔️	✔️
hsla()	✔️	✔️
linear-gradient()	✔️	✔️
radial-gradient()	✔️	✔️
repeating-linear-gradient()	✔️	✔️
repeating-radial-gradient()	✔️	✔️
conical-gradient()	✔️	✔️
rgb()	✔️	✔️
rgba()	✔️	✔️
var()	❌	❌

Properties

Property	Representation	Parser	Notes
align-content	✔️	✔️
align-items	✔️	✔️
align-self	✔️	✔️
all	❌	❌
animation	✔️	✔️
animation-delay	✔️	✔️
animation-direction	✔️	✔️
animation-duration	✔️	✔️
animation-fill-mode	✔️	✔️
animation-iteration-count	✔️	✔️
animation-name	✔️	✔️
animation-play-state	✔️	✔️
animation-timing-Function	✔️	✔️
backface-visibility	✔️	✔️
background	❌	❌
background-attachment	✔️	✔️
background-blend-mode	✔️	✔️
background-clip	✔️	✔️
background-color	✔️	✔️
background-image	✔️	✔️
background-origin	✔️	✔️
background-position	✔️	✔️
background-repeat	✔️	✔️
background-size	✔️	✔️
border	❌	❌
border-bottom	❌	❌
border-bottom-color	❌	❌
border-bottom-left-radius	❌	❌
border-bottom-right-radius	❌	❌
border-bottom-style	❌	❌
border-bottom-width	❌	❌
border-collapse	❌	❌
border-color	❌	❌
border-image	❌	❌
border-image-outset	❌	❌
border-image-repeat	❌	❌
border-image-slice	❌	❌
border-image-source	❌	❌
border-image-width	❌	❌
border-left	❌	❌
border-left-color	❌	❌
border-left-style	❌	❌
border-left-width	❌	❌
border-radius	❌	❌
border-right	❌	❌
border-right-color	❌	❌
border-right-style	❌	❌
border-right-width	❌	❌
border-spacing	❌	❌
border-style	❌	❌
border-top	❌	❌
border-top-color	❌	❌
border-top-left-radius	❌	❌
border-top-right-radius	❌	❌
border-top-style	❌	❌
border-top-width	❌	❌
border-width	❌	❌
bottom	❌	❌
box-decoration-break	✔️	✔️
box-shadow	✔️	✔️
box-sizing	✔️	✔️
caption-side	✔️	✔️
caret-color	❌	❌
charset	❌	❌
clear	✔️	✔️
clip	❌	❌
color	❌	❌
column-count	❌	❌
column-fill	❌	❌
column-gap	❌	❌
column-rule	❌	❌
column-rule-color	❌	❌
column-rule-style	❌	❌
column-rule-width	❌	❌
column-span	❌	❌
column-width	❌	❌
columns	❌	❌
content	❌	❌
counter-increment	❌	❌
counter-reset	❌	❌
cursor	❌	❌
direcion	❌	❌
display	❌	❌
empty-cells	❌	❌
filter	❌	❌
flex	❌	❌
flex-basis	❌	❌
flex-direction	❌	❌
flex-flow	❌	❌
flex-grow	❌	❌
flex-shrink	❌	❌
flex-wrap	❌	❌
float	❌	❌
font	❌	❌
font-face	❌	❌
font-family	❌	❌
font-kerning	❌	❌
font-size	❌	❌
font-size-adjust	❌	❌
font-stretch	❌	❌
font-style	❌	❌
font-variant	❌	❌
font-weight	❌	❌
grid	❌	❌
grid-area	❌	❌
grid-auto-columns	❌	❌
grid-auto-flows	❌	❌
grid-auto-rows	❌	❌
grid-column	❌	❌
grid-column	❌	❌
grid-column-end	❌	❌
grid-column-gap	❌	❌
grid-column-start	❌	❌
grid-gap	❌	❌
grid-row	❌	❌
grid-row-end	❌	❌
grid-row-gap	❌	❌
grid-row-start	❌	❌
grid-template	❌	❌
grid-template-areas	❌	❌
grid-template-columns	❌	❌
grid-template-rows	❌	❌
hanging-punctuation	❌	❌
height	❌	❌
hyphens	❌	❌
import	❌	❌
isolation	❌	❌
justify-content	❌	❌
keyframes	❌	❌
left	❌	❌
letter-spacing	❌	❌
line-height	❌	❌
list-style	❌	❌
list-style-image	❌	❌
list-style-position	❌	❌
list-style-stype	❌	❌
margin	❌	❌
margin-bottom	❌	❌
margin-left	❌	❌
margin-right	❌	❌
margin-top	❌	❌
max-height	❌	❌
max-width	❌	❌
media	❌	❌
min-height	❌	❌
min-width	❌	❌
mix-blend-mode	❌	❌
object-fit	❌	❌
object-position	❌	❌
opacity	❌	❌
order	❌	❌
outline	❌	❌
outline-color	❌	❌
outline-offset	❌	❌
outline-style	❌	❌
outline-width	❌	❌
overflow	❌	❌
overflow-x	❌	❌
overflow-y	❌	❌
padding	❌	❌
padding-bottom	❌	❌
padding-left	❌	❌
padding-right	❌	❌
padding-top	❌	❌
page-break-after	❌	❌
page-break-before	❌	❌
page-break-inside	❌	❌
perspective	❌	❌
perspective-origin	❌	❌
pointer-events	❌	❌
position	❌	❌
quotes	❌	❌
resize	❌	❌
right	❌	❌
scroll-behavior	❌	❌
tab-size	❌	❌
table-layout	❌	❌
text-align	❌	❌
text-align-last	❌	❌
text-decoration	❌	❌
text-decoration-color	❌	❌
text-decoration-line	❌	❌
text-decoration-style	❌	❌
text-indent	❌	❌
text-justify	❌	❌
text-overflow	❌	❌
text-shadow	❌	❌
text-transform	❌	❌
top	❌	❌
transform	❌	❌
transform-origin	❌	❌
transform-style	❌	❌
transition	❌	❌
transition-delay	❌	❌
transition-duration	❌	❌
transition-property	❌	❌
transition-timing-function	❌	❌
unicode-bidi	❌	❌
user-selection	❌	❌
vertical-align	❌	❌
visibility	❌	❌
white-space	❌	❌
width	❌	❌
word-break	❌	❌
word-spacing	❌	❌
word-wrap	❌	❌
z-index	❌	❌