diff --git a/Cargo.toml b/Cargo.toml
index f80668293..016bd8d95 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -2,7 +2,7 @@
 name = "gosub_engine"
 version = "0.1.0"
 edition = "2021"
-rust-version = "1.73"
+rust-version = "1.79"
 authors = ["Gosub Community <info@gosub.io>"]
 description = "An HTML5 browser engine written in Rust."
 license = "MIT"
@@ -47,6 +47,8 @@ clap = { version = "4.5.13", features = ["derive"] }
 simple_logger = "5.0.0"
 cookie = { version = "0.18.1", features = ["secure", "private"] }
 url = "2.5.2"
+nom = "7.1.3"
+nom-trace = "0.2.1"
 
 [dev-dependencies]
 criterion = { version = "0.5", features = ["html_reports"] }
diff --git a/crates/gosub_css3/Cargo.toml b/crates/gosub_css3/Cargo.toml
index 6f6aa8907..3740e33db 100644
--- a/crates/gosub_css3/Cargo.toml
+++ b/crates/gosub_css3/Cargo.toml
@@ -11,3 +11,4 @@ lazy_static = "1.5"
 log = "0.4.22"
 simple_logger = "5.0.0"
 anyhow = { version = "1.0.86", features = [] }
+colors-transform = "0.2.11"
\ No newline at end of file
diff --git a/crates/gosub_styling/src/css_colors.rs b/crates/gosub_css3/src/colors.rs
similarity index 90%
rename from crates/gosub_styling/src/css_colors.rs
rename to crates/gosub_css3/src/colors.rs
index 8f2a728bd..7575cb3bc 100644
--- a/crates/gosub_styling/src/css_colors.rs
+++ b/crates/gosub_css3/src/colors.rs
@@ -1,10 +1,11 @@
-use colors_transform::Color;
-use colors_transform::{AlphaColor, Hsl, Rgb};
-use lazy_static::lazy_static;
 use std::convert::From;
 use std::fmt::Debug;
 use std::str::FromStr;
 
+use colors_transform::Color;
+use colors_transform::{AlphaColor, Hsl, Rgb};
+use lazy_static::lazy_static;
+
 // Values for this table is taken from https://www.w3.org/TR/CSS21/propidx.html
 // Probably not the complete list, but it will do for now
 
@@ -51,6 +52,11 @@ impl From<&str> for RgbColor {
         if value.is_empty() {
             return RgbColor::default();
         }
+        if value == "currentcolor" {
+            // @todo: implement currentcolor
+            return RgbColor::default();
+        }
+
         if value.starts_with('#') {
             return parse_hex(value);
         }
@@ -86,6 +92,7 @@ impl From<&str> for RgbColor {
             return RgbColor::new(rgb.get_red(), rgb.get_green(), rgb.get_blue(), 255.0);
         }
         if value.starts_with("hsla(") {
+            // @TODO: hsla() does not work properly
             // HSLA function
             let hsl = Hsl::from_str(value);
             if hsl.is_err() {
@@ -105,7 +112,7 @@ impl From<&str> for RgbColor {
 }
 
 fn get_hex_color_from_name(color_name: &str) -> Option<&str> {
-    for entry in crate::css_colors::CSS_COLORNAMES.iter() {
+    for entry in crate::colors::CSS_COLORNAMES.iter() {
         if entry.name == color_name {
             return Some(entry.value);
         }
@@ -778,6 +785,69 @@ lazy_static! {
     ];
 }
 
+pub fn is_system_color(name: &str) -> bool {
+    for entry in CSS_SYSTEM_COLOR_NAMES.iter() {
+        if entry == &name {
+            return true;
+        }
+    }
+    false
+}
+
+pub fn is_named_color(name: &str) -> bool {
+    for entry in CSS_COLORNAMES.iter() {
+        if entry.name == name {
+            return true;
+        }
+    }
+    false
+}
+
+pub const CSS_SYSTEM_COLOR_NAMES: [&str; 42] = [
+    "AccentColor",
+    "AccentColorText",
+    "ActiveText",
+    "ButtonBorder",
+    "ButtonFace",
+    "ButtonText",
+    "Canvas",
+    "CanvasText",
+    "Field",
+    "FieldText",
+    "GrayText",
+    "Highlight",
+    "HighlightText",
+    "LinkText",
+    "Mark",
+    "MarkText",
+    "SelectedItem",
+    "SelectedItemText",
+    "VisitedText",
+    "ActiveBorder",
+    "ActiveCaption",
+    "AppWorkspace",
+    "Background",
+    "ButtonHighlight",
+    "ButtonShadow",
+    "CaptionText",
+    "InactiveBorder",
+    "InactiveCaption",
+    "InactiveCaptionText",
+    "InfoBackground",
+    "InfoText",
+    "Menu",
+    "MenuText",
+    "Scrollbar",
+    "ThreeDDarkShadow",
+    "ThreeDFace",
+    "ThreeDHighlight",
+    "ThreeDLightShadow",
+    "ThreeDShadow",
+    "Window",
+    "WindowFrame",
+    "WindowText",
+];
+
 #[cfg(test)]
 mod tests {
     #[test]
@@ -905,4 +975,36 @@ mod tests {
         assert_eq!(color.b, 0x99 as f32);
         assert_eq!(color.a, 255.0);
     }
+
+    #[test]
+    fn rgb_func_colors() {
+        let color = super::RgbColor::from("rgb(10, 20, 30)");
+        assert_eq!(color.r, 10.0);
+        assert_eq!(color.g, 20.0);
+        assert_eq!(color.b, 30.0);
+        assert_eq!(color.a, 255.0);
+
+        // invalid color
+        let color = super::RgbColor::from("rgb(10)");
+        assert_eq!(color.r, 0.0);
+        assert_eq!(color.g, 0.0);
+        assert_eq!(color.b, 0.0);
+        assert_eq!(color.a, 255.0);
+    }
+
+    #[test]
+    fn hsl_func_colors() {
+        let color = super::RgbColor::from("hsl(10, 20%, 30%)");
+        assert_eq!(color.r, 91.8);
+        assert_eq!(color.g, 66.3);
+        assert_eq!(color.b, 61.2);
+        assert_eq!(color.a, 255.0);
+
+        // invalid color
+        let color = super::RgbColor::from("hsl(10)");
+        assert_eq!(color.r, 0.0);
+        assert_eq!(color.g, 0.0);
+        assert_eq!(color.b, 0.0);
+        assert_eq!(color.a, 255.0);
+    }
 }
diff --git a/crates/gosub_css3/src/convert/ast_converter.rs b/crates/gosub_css3/src/convert/ast_converter.rs
index 1116776b5..16940fa02 100644
--- a/crates/gosub_css3/src/convert/ast_converter.rs
+++ b/crates/gosub_css3/src/convert/ast_converter.rs
@@ -1,7 +1,7 @@
 use crate::node::{Node as CssNode, NodeType};
 use crate::stylesheet::{
     CssDeclaration, CssOrigin, CssRule, CssSelector, CssSelectorPart, CssSelectorType,
-    CssStylesheet, MatcherType,
+    CssStylesheet, CssValue, MatcherType,
 };
 use anyhow::anyhow;
 use gosub_shared::types::Result;
@@ -56,7 +56,6 @@ in css:
 vs
     h3 { color: rebeccapurple; }
     h4 { color: rebeccapurple; }
-
 */
 
 /// Converts a CSS AST to a CSS stylesheet structure
@@ -92,7 +91,6 @@ pub fn convert_ast_to_stylesheet(
             }
 
             let mut selector = CssSelector { parts: vec![] };
-
             for node in node.as_selector_list().iter() {
                 if !node.is_selector() {
                     continue;
@@ -170,10 +168,23 @@ pub fn convert_ast_to_stylesheet(
                     continue;
                 }
 
-                let (property, value, important) = declaration.as_declaration();
+                let (property, nodes, important) = declaration.as_declaration();
+
+                // Convert the nodes into CSS Values
+                let mut css_values = vec![];
+                for node in nodes.iter() {
+                    if let Ok(value) = CssValue::parse_ast_node(node) {
+                        css_values.push(value);
+                    }
+                }
+
+                if css_values.is_empty() {
+                    continue;
+                }
+
                 rule.declarations.push(CssDeclaration {
                     property: property.clone(),
-                    value: value[0].to_string(),
+                    value: css_values.to_vec(),
                     important: *important,
                 });
             }
@@ -183,3 +194,92 @@ pub fn convert_ast_to_stylesheet(
     }
     Ok(sheet)
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::parser_config::ParserConfig;
+    use crate::Css3;
+
+    #[test]
+    fn convert_font_family() {
+        let ast = Css3::parse(
+            r#"
+              body {
+                border: 1px solid black;
+                color: #ffffff;
+                background-color: #121212;
+                font-family: "Arial", sans-serif;
+                margin: 0;
+                padding: 0;
+              }
+            "#,
+            ParserConfig::default(),
+        )
+        .unwrap();
+
+        let tree = convert_ast_to_stylesheet(&ast, CssOrigin::UserAgent, "test.css").unwrap();
+
+        dbg!(&tree);
+    }
+
+    #[test]
+    fn convert_test() {
+        let ast = Css3::parse(
+            r#"
+            h1 { color: red; }
+            h3, h4 { border: 1px solid black; }
+            "#,
+            ParserConfig::default(),
+        )
+        .unwrap();
+
+        let tree = convert_ast_to_stylesheet(&ast, CssOrigin::UserAgent, "test.css").unwrap();
+
+        assert_eq!(
+            tree.rules
+                .first()
+                .unwrap()
+                .declarations
+                .first()
+                .unwrap()
+                .property,
+            "color"
+        );
+        assert_eq!(
+            tree.rules
+                .first()
+                .unwrap()
+                .declarations
+                .first()
+                .unwrap()
+                .value,
+            vec![CssValue::String("red".into())]
+        );
+
+        assert_eq!(
+            tree.rules
+                .get(1)
+                .unwrap()
+                .declarations
+                .first()
+                .unwrap()
+                .property,
+            "border"
+        );
+        assert_eq!(
+            tree.rules
+                .get(1)
+                .unwrap()
+                .declarations
+                .first()
+                .unwrap()
+                .value,
+            vec![
+                CssValue::Unit(1.0, "px".into()),
+                CssValue::String("solid".into()),
+                CssValue::String("black".into())
+            ]
+        );
+    }
+}
diff --git a/crates/gosub_css3/src/lib.rs b/crates/gosub_css3/src/lib.rs
index adfd4105a..b4880d8aa 100644
--- a/crates/gosub_css3/src/lib.rs
+++ b/crates/gosub_css3/src/lib.rs
@@ -4,6 +4,7 @@ use crate::tokenizer::Tokenizer;
 use gosub_shared::byte_stream::{ByteStream, Encoding, Location};
 use gosub_shared::{timing_start, timing_stop};
 
+pub mod colors;
 pub mod convert;
 mod node;
 pub mod parser;
diff --git a/crates/gosub_css3/src/stylesheet.rs b/crates/gosub_css3/src/stylesheet.rs
index 81fd69d97..528eccfe4 100644
--- a/crates/gosub_css3/src/stylesheet.rs
+++ b/crates/gosub_css3/src/stylesheet.rs
@@ -1,4 +1,7 @@
+use crate::colors::RgbColor;
+use anyhow::anyhow;
 use core::fmt::Debug;
+use gosub_shared::types::Result;
 use std::cmp::Ordering;
 use std::fmt::Display;
 
@@ -48,8 +51,9 @@ impl CssRule {
 pub struct CssDeclaration {
     // Css property color
     pub property: String,
-    // Raw value of the declaration. It is not calculated or converted in any way (ie: "red", "50px" etc)
-    pub value: String,
+    // Raw values of the declaration. It is not calculated or converted in any way (ie: "red", "50px" etc)
+    // There can be multiple values  (ie:   "1px solid black" are split into 3 values)
+    pub value: Vec<CssValue>,
     // ie: !important
     pub important: bool,
 }
@@ -204,3 +208,330 @@ impl Ord for Specificity {
         }
     }
 }
+
+/// Actual CSS value, can be a color, length, percentage, string or unit. Some relative values will be computed
+/// from other values (ie: Percent(50) will convert to Length(100) when the parent width is 200)
+#[derive(Debug, Clone, PartialEq)]
+pub enum CssValue {
+    None,
+    Color(RgbColor),
+    Zero,
+    Number(f32),
+    Percentage(f32),
+    String(String),
+    Unit(f32, String),
+    Function(String, Vec<CssValue>),
+    Initial,
+    Inherit,
+    Comma,
+    List(Vec<CssValue>),
+}
+
+impl Display for CssValue {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            CssValue::None => write!(f, "none"),
+            CssValue::Color(col) => {
+                write!(
+                    f,
+                    "#{:02x}{:02x}{:02x}{:02x}",
+                    col.r as u8, col.g as u8, col.b as u8, col.a as u8
+                )
+            }
+            CssValue::Zero => write!(f, "0"),
+            CssValue::Number(num) => write!(f, "{}", num),
+            CssValue::Percentage(p) => write!(f, "{}%", p),
+            CssValue::String(s) => write!(f, "{}", s),
+            CssValue::Unit(val, unit) => write!(f, "{}{}", val, unit),
+            CssValue::Function(name, args) => {
+                write!(f, "{}(", name)?;
+                for (i, arg) in args.iter().enumerate() {
+                    if i > 0 {
+                        write!(f, ", ")?;
+                    }
+                    write!(f, "{}", arg)?;
+                }
+                write!(f, ")")
+            }
+            CssValue::Initial => write!(f, "initial"),
+            CssValue::Inherit => write!(f, "inherit"),
+            CssValue::Comma => write!(f, ","),
+            CssValue::List(v) => {
+                write!(f, "List(")?;
+                for (i, value) in v.iter().enumerate() {
+                    if i > 0 {
+                        write!(f, ", ")?;
+                    }
+                    write!(f, "{}", value)?;
+                }
+                write!(f, ")")
+            }
+        }
+    }
+}
+
+impl CssValue {
+    pub fn to_color(&self) -> Option<RgbColor> {
+        match self {
+            CssValue::Color(col) => Some(*col),
+            CssValue::String(s) => Some(RgbColor::from(s.as_str())),
+            _ => None,
+        }
+    }
+
+    pub fn unit_to_px(&self) -> f32 {
+        //TODO: Implement the rest of the units
+        match self {
+            CssValue::Unit(val, unit) => match unit.as_str() {
+                "px" => *val,
+                "em" => *val * 16.0,
+                "rem" => *val * 16.0,
+                _ => *val,
+            },
+            CssValue::String(value) => {
+                if value.ends_with("px") {
+                    value.trim_end_matches("px").parse::<f32>().unwrap()
+                } else if value.ends_with("rem") {
+                    value.trim_end_matches("rem").parse::<f32>().unwrap() * 16.0
+                } else if value.ends_with("em") {
+                    value.trim_end_matches("em").parse::<f32>().unwrap() * 16.0
+                } else {
+                    0.0
+                }
+            }
+            _ => 0.0,
+        }
+    }
+
+    /// Converts a CSS AST node to a CSS value
+    pub fn parse_ast_node(node: &crate::node::Node) -> Result<CssValue> {
+        match *node.node_type.clone() {
+            crate::node::NodeType::Ident { value } => Ok(CssValue::String(value)),
+            crate::node::NodeType::Number { value } => {
+                if value == 0.0 {
+                    // Zero is a special case since we need to do some pattern matching once in a while, and
+                    // this is not possible (anymore) with floating point 0.0 it seems
+                    Ok(CssValue::Zero)
+                } else {
+                    Ok(CssValue::Number(value))
+                }
+            }
+            crate::node::NodeType::Percentage { value } => Ok(CssValue::Percentage(value)),
+            crate::node::NodeType::Dimension { value, unit } => Ok(CssValue::Unit(value, unit)),
+            crate::node::NodeType::String { value } => Ok(CssValue::String(value)),
+            crate::node::NodeType::Hash { value } => Ok(CssValue::String(value)),
+            crate::node::NodeType::Operator(_) => Ok(CssValue::None),
+            crate::node::NodeType::Calc { .. } => {
+                Ok(CssValue::Function("calc".to_string(), vec![]))
+            }
+            crate::node::NodeType::Url { url } => Ok(CssValue::Function(
+                "url".to_string(),
+                vec![CssValue::String(url)],
+            )),
+            crate::node::NodeType::Function { name, arguments } => {
+                let mut list = vec![];
+                for node in arguments.iter() {
+                    match CssValue::parse_ast_node(node) {
+                        Ok(value) => list.push(value),
+                        Err(e) => return Err(e),
+                    }
+                }
+                Ok(CssValue::Function(name, list))
+            }
+            _ => Err(anyhow!(format!(
+                "Cannot convert node to CssValue: {:?}",
+                node
+            ))),
+        }
+    }
+
+    /// Parses a string into a CSS value or list of css values
+    pub fn parse_str(value: &str) -> Result<CssValue> {
+        match value {
+            "initial" => return Ok(CssValue::Initial),
+            "inherit" => return Ok(CssValue::Inherit),
+            "none" => return Ok(CssValue::None),
+            "" => return Ok(CssValue::String("".into())),
+            _ => {}
+        }
+
+        if let Ok(num) = value.parse::<f32>() {
+            return Ok(CssValue::Number(num));
+        }
+
+        // Color values
+        if value.starts_with("color(") && value.ends_with(')') {
+            return Ok(CssValue::Color(RgbColor::from(
+                value[6..value.len() - 1].to_string().as_str(),
+            )));
+        }
+
+        // Percentages
+        if value.ends_with('%') {
+            if let Ok(num) = value[0..value.len() - 1].parse::<f32>() {
+                return Ok(CssValue::Percentage(num));
+            }
+        }
+
+        // units. If the value starts with a number and ends with some non-numerical
+        let mut split_index = None;
+        for (index, char) in value.chars().enumerate() {
+            if char.is_alphabetic() {
+                split_index = Some(index);
+                break;
+            }
+        }
+        if let Some(index) = split_index {
+            let (number_part, unit_part) = value.split_at(index);
+            if let Ok(number) = number_part.parse::<f32>() {
+                return Ok(CssValue::Unit(number, unit_part.to_string()));
+            }
+        }
+
+        Ok(CssValue::String(value.to_string()))
+    }
+}
+
+#[cfg(test)]
+mod test {
+    use super::*;
+
+    // #[test]
+    // fn test_css_value_to_color() {
+    //     assert_eq!(CssValue::from_str("color(#ff0000)").unwrap().to_color().unwrap(), RgbColor::from("#ff0000"));
+    //     assert_eq!(CssValue::from_str("'Hello'").unwrap().to_color().unwrap(), RgbColor::from("#000000"));
+    // }
+    //
+    // #[test]
+    // fn test_css_value_unit_to_px() {
+    //     assert_eq!(CssValue::from_str("10px").unwrap().unit_to_px(), 10.0);
+    //     assert_eq!(CssValue::from_str("10em").unwrap().unit_to_px(), 160.0);
+    //     assert_eq!(CssValue::from_str("10rem").unwrap().unit_to_px(), 160.0);
+    //     assert_eq!(CssValue::from_str("10").unwrap().unit_to_px(), 0.0);
+    // }
+
+    #[test]
+    fn test_css_rule() {
+        let rule = CssRule {
+            selectors: vec![CssSelector {
+                parts: vec![CssSelectorPart {
+                    type_: CssSelectorType::Type,
+                    value: "h1".to_string(),
+                    ..Default::default()
+                }],
+            }],
+            declarations: vec![CssDeclaration {
+                property: "color".to_string(),
+                value: vec![CssValue::String("red".to_string())],
+                important: false,
+            }],
+        };
+
+        assert_eq!(rule.selectors().len(), 1);
+        assert_eq!(
+            rule.selectors()
+                .first()
+                .unwrap()
+                .parts
+                .first()
+                .unwrap()
+                .value,
+            "h1"
+        );
+        assert_eq!(rule.declarations().len(), 1);
+        assert_eq!(rule.declarations().first().unwrap().property, "color");
+    }
+
+    #[test]
+    fn test_specificity() {
+        let selector = CssSelector {
+            parts: vec![
+                CssSelectorPart {
+                    type_: CssSelectorType::Type,
+                    value: "h1".to_string(),
+                    ..Default::default()
+                },
+                CssSelectorPart {
+                    type_: CssSelectorType::Class,
+                    value: "myclass".to_string(),
+                    ..Default::default()
+                },
+                CssSelectorPart {
+                    type_: CssSelectorType::Id,
+                    value: "myid".to_string(),
+                    ..Default::default()
+                },
+            ],
+        };
+
+        let specificity = selector.specificity();
+        assert_eq!(specificity, Specificity::new(1, 1, 1));
+
+        let selector = CssSelector {
+            parts: vec![
+                CssSelectorPart {
+                    type_: CssSelectorType::Type,
+                    value: "h1".to_string(),
+                    ..Default::default()
+                },
+                CssSelectorPart {
+                    type_: CssSelectorType::Class,
+                    value: "myclass".to_string(),
+                    ..Default::default()
+                },
+            ],
+        };
+
+        let specificity = selector.specificity();
+        assert_eq!(specificity, Specificity::new(0, 1, 1));
+
+        let selector = CssSelector {
+            parts: vec![CssSelectorPart {
+                type_: CssSelectorType::Type,
+                value: "h1".to_string(),
+                ..Default::default()
+            }],
+        };
+
+        let specificity = selector.specificity();
+        assert_eq!(specificity, Specificity::new(0, 0, 1));
+
+        let selector = CssSelector {
+            parts: vec![
+                CssSelectorPart {
+                    type_: CssSelectorType::Class,
+                    value: "myclass".to_string(),
+                    ..Default::default()
+                },
+                CssSelectorPart {
+                    type_: CssSelectorType::Class,
+                    value: "otherclass".to_string(),
+                    ..Default::default()
+                },
+            ],
+        };
+
+        let specificity = selector.specificity();
+        assert_eq!(specificity, Specificity::new(0, 2, 0));
+    }
+
+    #[test]
+    fn test_specificity_ordering() {
+        let specificity1 = Specificity::new(1, 1, 1);
+        let specificity2 = Specificity::new(0, 1, 1);
+        let specificity3 = Specificity::new(0, 0, 1);
+        let specificity4 = Specificity::new(0, 2, 0);
+        let specificity5 = Specificity::new(1, 0, 0);
+        let specificity6 = Specificity::new(1, 2, 1);
+        let specificity7 = Specificity::new(1, 1, 2);
+        let specificity8 = Specificity::new(2, 1, 1);
+
+        assert!(specificity1 > specificity2);
+        assert!(specificity2 > specificity3);
+        assert!(specificity3 < specificity4);
+        assert!(specificity4 < specificity5);
+        assert!(specificity5 < specificity6);
+        assert!(specificity6 > specificity7);
+        assert!(specificity7 < specificity8);
+    }
+}
diff --git a/crates/gosub_html5/src/lib.rs b/crates/gosub_html5/src/lib.rs
index 6e6009630..0966d5c64 100644
--- a/crates/gosub_html5/src/lib.rs
+++ b/crates/gosub_html5/src/lib.rs
@@ -2,6 +2,10 @@
 //!
 //! The parser's job is to take a stream of bytes and turn it into a DOM tree. The parser is
 //! implemented as a state machine and runs in the current thread.
+use crate::parser::document::{Document, DocumentBuilder, DocumentHandle};
+use crate::parser::Html5Parser;
+use gosub_shared::byte_stream::{ByteStream, Encoding};
+
 pub mod dom;
 pub mod element_class;
 pub mod error_logger;
@@ -12,3 +16,15 @@ pub mod tokenizer;
 pub mod util;
 pub mod visit;
 pub mod writer;
+
+/// Parses the given HTML string and returns a handle to the resulting DOM tree.
+pub fn html_compile(html: &str) -> DocumentHandle {
+    let mut stream = ByteStream::new();
+    stream.read_from_str(html, Some(Encoding::UTF8));
+    stream.close();
+
+    let document = DocumentBuilder::new_document(None);
+    let _ = Html5Parser::parse_document(&mut stream, Document::clone(&document), None);
+
+    document
+}
diff --git a/crates/gosub_render_utils/Cargo.toml b/crates/gosub_render_utils/Cargo.toml
index f735b4678..2cf2ef8eb 100644
--- a/crates/gosub_render_utils/Cargo.toml
+++ b/crates/gosub_render_utils/Cargo.toml
@@ -8,6 +8,7 @@ license = "MIT"
 [dependencies]
 gosub_html5 = { path = "../gosub_html5" }
 gosub_styling = { path = "../gosub_styling" }
+gosub_css3 = { path = "../gosub_css3" }
 gosub_render_backend = { path = "../gosub_render_backend" }
 anyhow = "1.0.86"
 regex = "1.10.6"
diff --git a/crates/gosub_render_utils/src/style/parse.rs b/crates/gosub_render_utils/src/style/parse.rs
new file mode 100644
index 000000000..b8685081b
--- /dev/null
+++ b/crates/gosub_render_utils/src/style/parse.rs
@@ -0,0 +1,207 @@
+use taffy::prelude::*;
+use taffy::{
+    AlignContent, AlignItems, Dimension, GridPlacement, LengthPercentage, LengthPercentageAuto,
+    TrackSizingFunction,
+};
+
+use gosub_render_backend::{PreRenderText, RenderBackend};
+// use gosub_styling::css_values::CssValue;
+use gosub_css3::stylesheet::CssValue;
+use gosub_styling::render_tree::{RenderTreeNode, TextData};
+
+pub(crate) fn parse_len<B: RenderBackend>(
+    node: &mut RenderTreeNode<B>,
+    name: &str,
+) -> LengthPercentage {
+    let Some(property) = node.get_property(name) else {
+        return LengthPercentage::Length(0.0);
+    };
+
+    property.compute_value();
+
+    match &property.actual {
+        CssValue::Percentage(value) => LengthPercentage::Percent(*value),
+        CssValue::Unit(..) => LengthPercentage::Length(property.actual.unit_to_px()),
+        CssValue::String(_) => LengthPercentage::Length(property.actual.unit_to_px()), //HACK
+        _ => LengthPercentage::Length(0.0),
+    }
+}
+
+pub(crate) fn parse_len_auto<B: RenderBackend>(
+    node: &mut RenderTreeNode<B>,
+    name: &str,
+) -> LengthPercentageAuto {
+    let Some(property) = node.get_property(name) else {
+        return LengthPercentageAuto::Auto;
+    };
+
+    property.compute_value();
+
+    match &property.actual {
+        CssValue::String(value) => match value.as_str() {
+            "auto" => LengthPercentageAuto::Auto,
+            _ => LengthPercentageAuto::Length(property.actual.unit_to_px()), //HACK
+        },
+        CssValue::Percentage(value) => LengthPercentageAuto::Percent(*value),
+        CssValue::Unit(..) => LengthPercentageAuto::Length(property.actual.unit_to_px()),
+        _ => LengthPercentageAuto::Auto,
+    }
+}
+
+pub(crate) fn parse_dimension<B: RenderBackend>(
+    node: &mut RenderTreeNode<B>,
+    name: &str,
+) -> Dimension {
+    let Some(property) = node.get_property(name) else {
+        return Dimension::Auto;
+    };
+
+    property.compute_value();
+
+    match &property.actual {
+        CssValue::String(value) => match value.as_str() {
+            "auto" => Dimension::Auto,
+            s if s.ends_with('%') => {
+                let value = s.trim_end_matches('%').parse::<f32>().unwrap_or(0.0);
+                Dimension::Percent(value)
+            }
+            _ => Dimension::Length(property.actual.unit_to_px()), //HACK
+        },
+        CssValue::Percentage(value) => Dimension::Percent(*value),
+        CssValue::Unit(..) => Dimension::Length(property.actual.unit_to_px()),
+        _ => Dimension::Auto,
+    }
+}
+
+pub(crate) fn parse_text_dim<B: RenderBackend>(text: &mut TextData<B>, name: &str) -> Dimension {
+    let size = text.prerender.prerender();
+
+    if name == "width" || name == "max-width" || name == "min-width" {
+        Dimension::Length(size.width)
+    } else if name == "height" || name == "max-height" || name == "min-height" {
+        Dimension::Length(size.height)
+    } else {
+        Dimension::Auto
+    }
+}
+
+pub(crate) fn parse_align_i<B: RenderBackend>(
+    node: &mut RenderTreeNode<B>,
+    name: &str,
+) -> Option<AlignItems> {
+    let display = node.get_property(name)?;
+    display.compute_value();
+
+    let CssValue::String(ref value) = display.actual else {
+        return None;
+    };
+
+    match value.as_str() {
+        "start" => Some(AlignItems::Start),
+        "end" => Some(AlignItems::End),
+        "flex-start" => Some(AlignItems::FlexStart),
+        "flex-end" => Some(AlignItems::FlexEnd),
+        "center" => Some(AlignItems::Center),
+        "baseline" => Some(AlignItems::Baseline),
+        "stretch" => Some(AlignItems::Stretch),
+        _ => None,
+    }
+}
+
+pub(crate) fn parse_align_c<B: RenderBackend>(
+    node: &mut RenderTreeNode<B>,
+    name: &str,
+) -> Option<AlignContent> {
+    let display = node.get_property(name)?;
+
+    display.compute_value();
+
+    let CssValue::String(ref value) = display.actual else {
+        return None;
+    };
+
+    match value.as_str() {
+        "start" => Some(AlignContent::Start),
+        "end" => Some(AlignContent::End),
+        "flex-start" => Some(AlignContent::FlexStart),
+        "flex-end" => Some(AlignContent::FlexEnd),
+        "center" => Some(AlignContent::Center),
+        "stretch" => Some(AlignContent::Stretch),
+        "space-between" => Some(AlignContent::SpaceBetween),
+        "space-around" => Some(AlignContent::SpaceAround),
+        _ => None,
+    }
+}
+
+pub(crate) fn parse_tracking_sizing_function<B: RenderBackend>(
+    node: &mut RenderTreeNode<B>,
+    name: &str,
+) -> Vec<TrackSizingFunction> {
+    let Some(display) = node.get_property(name) else {
+        return Vec::new();
+    };
+
+    display.compute_value();
+
+    let CssValue::String(ref _value) = display.actual else {
+        return Vec::new();
+    };
+
+    Vec::new() //TODO: Implement this
+}
+
+#[allow(dead_code)]
+pub(crate) fn parse_non_repeated_tracking_sizing_function<B: RenderBackend>(
+    _node: &mut RenderTreeNode<B>,
+    _name: &str,
+) -> NonRepeatedTrackSizingFunction {
+    todo!("implement parse_non_repeated_tracking_sizing_function")
+}
+
+pub(crate) fn parse_grid_auto<B: RenderBackend>(
+    node: &mut RenderTreeNode<B>,
+    name: &str,
+) -> Vec<NonRepeatedTrackSizingFunction> {
+    let Some(display) = node.get_property(name) else {
+        return Vec::new();
+    };
+
+    display.compute_value();
+
+    let CssValue::String(ref _value) = display.actual else {
+        return Vec::new();
+    };
+
+    Vec::new() //TODO: Implement this
+}
+
+pub(crate) fn parse_grid_placement<B: RenderBackend>(
+    node: &mut RenderTreeNode<B>,
+    name: &str,
+) -> GridPlacement {
+    let Some(display) = node.get_property(name) else {
+        return GridPlacement::Auto;
+    };
+
+    display.compute_value();
+
+    match &display.actual {
+        CssValue::String(value) => {
+            if value.starts_with("span") {
+                let value = value.trim_start_matches("span").trim();
+
+                if let Ok(value) = value.parse::<u16>() {
+                    GridPlacement::from_span(value)
+                } else {
+                    GridPlacement::Auto
+                }
+            } else if let Ok(value) = value.parse::<i16>() {
+                GridPlacement::from_line_index(value)
+            } else {
+                GridPlacement::Auto
+            }
+        }
+        CssValue::Number(value) => GridPlacement::from_line_index((*value) as i16),
+        _ => GridPlacement::Auto,
+    }
+}
diff --git a/crates/gosub_renderer/Cargo.toml b/crates/gosub_renderer/Cargo.toml
index c567ac8b7..ee22a16f2 100644
--- a/crates/gosub_renderer/Cargo.toml
+++ b/crates/gosub_renderer/Cargo.toml
@@ -12,6 +12,7 @@ gosub_rendering = { path = "../gosub_render_utils" }
 gosub_html5 = { path = "../gosub_html5" }
 gosub_shared = { path = "../gosub_shared" }
 gosub_styling = { path = "../gosub_styling" }
+gosub_css3 = { path = "../gosub_css3" }
 gosub_net = { path = "../gosub_net" }
 gosub_render_backend = { path = "../gosub_render_backend" }
 anyhow = "1.0.86"
diff --git a/crates/gosub_renderer/src/draw.rs b/crates/gosub_renderer/src/draw.rs
index 8aa9a039e..0f95ac042 100644
--- a/crates/gosub_renderer/src/draw.rs
+++ b/crates/gosub_renderer/src/draw.rs
@@ -6,6 +6,8 @@ use url::Url;
 use gosub_html5::node::NodeId;
 use gosub_render_backend::geo::{Size, SizeU32, FP};
 use gosub_render_backend::layout::{Layout, LayoutTree, Layouter};
+use gosub_css3::colors::RgbColor;
+use gosub_css3::stylesheet::CssValue;
 use gosub_render_backend::svg::SvgRenderer;
 use gosub_render_backend::{
     Border, BorderSide, BorderStyle, Brush, Color, ImageBuffer, NodeDesc, Rect, RenderBackend,
@@ -13,8 +15,6 @@ use gosub_render_backend::{
 };
 use gosub_rendering::position::PositionTree;
 use gosub_shared::types::Result;
-use gosub_styling::css_colors::RgbColor;
-use gosub_styling::css_values::CssValue;
 use gosub_styling::render_tree::{RenderNodeData, RenderTree, RenderTreeNode};
 
 use crate::draw::img::request_img;
diff --git a/crates/gosub_renderer/src/render_tree.rs b/crates/gosub_renderer/src/render_tree.rs
index c945e3fb1..ca5e7c9c3 100644
--- a/crates/gosub_renderer/src/render_tree.rs
+++ b/crates/gosub_renderer/src/render_tree.rs
@@ -12,8 +12,8 @@ use gosub_render_backend::layout::Layouter;
 use gosub_render_backend::RenderBackend;
 use gosub_rendering::position::PositionTree;
 use gosub_shared::byte_stream::{ByteStream, Confidence, Encoding};
-use gosub_styling::css_values::CssProperties;
 use gosub_styling::render_tree::{generate_render_tree, RenderNodeData, RenderTree};
+use gosub_styling::styling::CssProperties;
 
 pub struct TreeDrawer<B: RenderBackend, L: Layouter> {
     pub(crate) tree: RenderTree<B, L>,
diff --git a/crates/gosub_styling/Cargo.toml b/crates/gosub_styling/Cargo.toml
index d5edc27cb..c86f8a3ba 100644
--- a/crates/gosub_styling/Cargo.toml
+++ b/crates/gosub_styling/Cargo.toml
@@ -15,9 +15,19 @@ lazy_static = "1.5"
 anyhow = "1.0.86"
 regex = "1.10.6"
 colors-transform = "0.2.11"
+vello = "0.1.0"
+backtrace = "0.3.71"
+log = "0.4.21"
+rand = "0.9.0-alpha.1"
 
 #[target.'cfg(target_arch = "wasm32")'.dependencies]
 #web-sys = { version = "0.3.69", features = ["fontface"] }
 
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
-rust-fontconfig = "0.1.7"
\ No newline at end of file
+rust-fontconfig = "0.1.7"
+itertools = "0.10.5"
+serde = { version = "1.0.197", features = ["derive"] }
+serde_json = "1.0.115"
+memoize = "0.4.2"
+thiserror = "1.0.58"
+nom = "7.1.3"
diff --git a/crates/gosub_styling/resources/definitions/definitions.json b/crates/gosub_styling/resources/definitions/definitions.json
new file mode 100644
index 000000000..4af50bcdf
--- /dev/null
+++ b/crates/gosub_styling/resources/definitions/definitions.json
@@ -0,0 +1,8036 @@
+{
+  "properties": [
+    {
+      "name": "border-clip-top",
+      "syntax": "normal | [ <length-percentage [0,∞]> | <flex> ]+",
+      "computed": [],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-mask-box-image-width",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-mask-image",
+      "syntax": "",
+      "computed": [
+        "absoluteURIOrNone"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "object-fit",
+      "syntax": "fill | contain | cover | none | scale-down",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "fill",
+      "inherited": false
+    },
+    {
+      "name": "outline",
+      "syntax": "[ <'outline-width'> || <'outline-style'> || <'outline-color'> ]",
+      "computed": [
+        "outline-color",
+        "outline-width",
+        "outline-style"
+      ],
+      "initial": [
+        "outline-color",
+        "outline-style",
+        "outline-width"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "white-space",
+      "syntax": "normal | pre | nowrap | pre-wrap | break-spaces | pre-line",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "text-indent",
+      "syntax": "[ <length-percentage> ] && hanging? && each-line?",
+      "computed": [
+        "percentageOrAbsoluteLengthPlusKeywords"
+      ],
+      "initial": "0",
+      "inherited": true
+    },
+    {
+      "name": "column-span",
+      "syntax": "none | all",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "shape-rendering",
+      "syntax": "auto | optimizeSpeed | crispEdges | geometricPrecision",
+      "computed": [],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "shape-outside",
+      "syntax": "none | [ <basic-shape> || <shape-box> ] | <image>",
+      "computed": [
+        "asDefinedForBasicShapeWithAbsoluteURIOtherwiseAsSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "min-height",
+      "syntax": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>) | <calc-size()>",
+      "computed": [
+        "percentageAsSpecifiedOrAbsoluteLength"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "fill-rule",
+      "syntax": "nonzero | evenodd",
+      "computed": [],
+      "initial": "nonzero",
+      "inherited": true
+    },
+    {
+      "name": "box-shadow",
+      "syntax": "<spread-shadow>#",
+      "computed": [
+        "absoluteLengthsSpecifiedColorAsSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "dominant-baseline",
+      "syntax": "auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top",
+      "computed": [],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "stroke-dash-justify",
+      "syntax": "none | [ stretch | compress ] || [ dashes || gaps ]",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "stroke-opacity",
+      "syntax": "<'opacity'>",
+      "computed": [],
+      "initial": "1",
+      "inherited": true
+    },
+    {
+      "name": "speak-as",
+      "syntax": "normal | spell-out || digits || [ literal-punctuation | no-punctuation ]",
+      "computed": [],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "column-rule-style",
+      "syntax": "<line-style>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "float-defer",
+      "syntax": "<integer> | last | none",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "right",
+      "syntax": "auto | <length-percentage>",
+      "computed": [
+        "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "cursor",
+      "syntax": "[ [ <url> | <url-set> ] [<x> <y>]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]",
+      "computed": [
+        "asSpecifiedURLsAbsolute"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "grid-row-start",
+      "syntax": "<grid-line>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "scroll-margin-top",
+      "syntax": "<length>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "zoom",
+      "syntax": "<number [0,∞]> || <percentage [0,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "flex-direction",
+      "syntax": "row | row-reverse | column | column-reverse",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "row",
+      "inherited": false
+    },
+    {
+      "name": "flex-flow",
+      "syntax": "<'flex-direction'> || <'flex-wrap'>",
+      "computed": [
+        "flex-direction",
+        "flex-wrap"
+      ],
+      "initial": [
+        "flex-direction",
+        "flex-wrap"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "offset-path",
+      "syntax": "none | <offset-path> || <coord-box>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "rest",
+      "syntax": "<'rest-before'> <'rest-after'>?",
+      "computed": [],
+      "initial": "N/A (see individual properties)",
+      "inherited": false
+    },
+    {
+      "name": "region-fragment",
+      "syntax": "auto | break",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "column-rule",
+      "syntax": "<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>",
+      "computed": [
+        "column-rule-color",
+        "column-rule-style",
+        "column-rule-width"
+      ],
+      "initial": [
+        "column-rule-width",
+        "column-rule-style",
+        "column-rule-color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "pause-before",
+      "syntax": "<time [0s,∞]> | none | x-weak | weak | medium | strong | x-strong",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "stroke-origin",
+      "syntax": "match-parent | fill-box | stroke-box | content-box | padding-box | border-box",
+      "computed": [],
+      "initial": "match-parent",
+      "inherited": false
+    },
+    {
+      "name": "mask-size",
+      "syntax": "<bg-size>#",
+      "computed": [
+        "asSpecifiedRelativeToAbsoluteLengths"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "flex-grow",
+      "syntax": "<number [0,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "border-bottom-right-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2}",
+      "computed": [
+        "twoAbsoluteLengthOrPercentages"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "voice-range",
+      "syntax": "<frequency [0Hz,∞]> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]]",
+      "computed": [],
+      "initial": "medium",
+      "inherited": true
+    },
+    {
+      "name": "border-collapse",
+      "syntax": "separate | collapse",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "separate",
+      "inherited": true
+    },
+    {
+      "name": "overflow-y",
+      "syntax": "visible | hidden | clip | scroll | auto",
+      "computed": [
+        "asSpecifiedButVisibleOrClipReplacedToAutoOrHiddenIfOtherValueDifferent"
+      ],
+      "initial": "visible",
+      "inherited": false
+    },
+    {
+      "name": "shape-margin",
+      "syntax": "<length-percentage [0,∞]>",
+      "computed": [
+        "asSpecifiedRelativeToAbsoluteLengths"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "overflow-wrap",
+      "syntax": "normal | break-word | anywhere",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "-webkit-text-stroke-color",
+      "syntax": "<color>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": true
+    },
+    {
+      "name": "-webkit-transition-delay",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "text-anchor",
+      "syntax": "start | middle | end",
+      "computed": [],
+      "initial": "start",
+      "inherited": true
+    },
+    {
+      "name": "counter-set",
+      "syntax": "[ <counter-name> <integer>? ]+ | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "top",
+      "syntax": "auto | <length-percentage>",
+      "computed": [
+        "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "animation-range-end",
+      "syntax": "[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#",
+      "computed": [
+        "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "animation-direction",
+      "syntax": "<single-animation-direction>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "page-break-inside",
+      "syntax": "avoid | auto | inherit",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "place-content",
+      "syntax": "<'align-content'> <'justify-content'>?",
+      "computed": [
+        "align-content",
+        "justify-content"
+      ],
+      "initial": [
+        "align-content",
+        "justify-content"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "grid-column-start",
+      "syntax": "<grid-line>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "inline-sizing",
+      "syntax": "normal | stretch",
+      "computed": [],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "cue-after",
+      "syntax": "<uri> <decibel>? | none",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "view-transition-name",
+      "syntax": "none | <custom-ident>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-mask-box-image-slice",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "nav-right",
+      "syntax": "auto | <id> [ current | root | <target-name> ]?",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "margin-left",
+      "syntax": "<length-percentage> | auto",
+      "computed": [
+        "percentageAsSpecifiedOrAbsoluteLength"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "mask-position",
+      "syntax": "<position>#",
+      "computed": [
+        "consistsOfTwoKeywordsForOriginAndOffsets"
+      ],
+      "initial": "0% 0%",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-text-stroke",
+      "syntax": "<line-width> || <color>",
+      "computed": [
+        "-webkit-text-stroke-width",
+        "-webkit-text-stroke-color"
+      ],
+      "initial": [
+        "-webkit-text-stroke-width",
+        "-webkit-text-stroke-color"
+      ],
+      "inherited": true
+    },
+    {
+      "name": "flow-into",
+      "syntax": "none | <ident> [element | content]?",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "rx",
+      "syntax": "<length-percentage> | auto",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "filter",
+      "syntax": "none | <filter-value-list>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "outline-width",
+      "syntax": "<line-width>",
+      "computed": [
+        "absoluteLength0ForNone"
+      ],
+      "initial": "medium",
+      "inherited": false
+    },
+    {
+      "name": "fill-origin",
+      "syntax": "match-parent | fill-box | stroke-box | content-box | padding-box | border-box",
+      "computed": [],
+      "initial": "match-parent",
+      "inherited": false
+    },
+    {
+      "name": "isolation",
+      "syntax": "<isolation-mode>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "border-block-start-style",
+      "syntax": "<line-style>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "voice-stress",
+      "syntax": "normal | strong | moderate | none | reduced",
+      "computed": [],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "image-orientation",
+      "syntax": "from-image | none | [ <angle> || flip ]",
+      "computed": [
+        "angleRoundedToNextQuarter"
+      ],
+      "initial": "from-image",
+      "inherited": true
+    },
+    {
+      "name": "text-decoration-color",
+      "syntax": "<color>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": false
+    },
+    {
+      "name": "padding-top",
+      "syntax": "<length-percentage [0,∞]>",
+      "computed": [
+        "percentageAsSpecifiedOrAbsoluteLength"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "border-top-color",
+      "syntax": "<color> | <image-1D>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-mask-box-image-source",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "text-decoration-style",
+      "syntax": "solid | double | dotted | dashed | wavy",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "solid",
+      "inherited": false
+    },
+    {
+      "name": "animation-timing-function",
+      "syntax": "<easing-function>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "ease",
+      "inherited": false
+    },
+    {
+      "name": "border-block-end-width",
+      "syntax": "<line-width>",
+      "computed": [
+        "absoluteLengthZeroIfBorderStyleNoneOrHidden"
+      ],
+      "initial": "medium",
+      "inherited": false
+    },
+    {
+      "name": "list-style-type",
+      "syntax": "<counter-style> | <string> | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "disc",
+      "inherited": true
+    },
+    {
+      "name": "border-left",
+      "syntax": "<line-width> || <line-style> || <color>",
+      "computed": [
+        "border-left-width",
+        "border-left-style",
+        "border-left-color"
+      ],
+      "initial": [
+        "border-left-width",
+        "border-left-style",
+        "border-left-color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "text-emphasis",
+      "syntax": "<'text-emphasis-style'> || <'text-emphasis-color'>",
+      "computed": [
+        "text-emphasis-style",
+        "text-emphasis-color"
+      ],
+      "initial": [
+        "text-emphasis-style",
+        "text-emphasis-color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "color-interpolation-filters",
+      "syntax": "auto | sRGB | linearRGB",
+      "computed": [],
+      "initial": "linearRGB",
+      "inherited": true
+    },
+    {
+      "name": "nav-up",
+      "syntax": "auto | <id> [ current | root | <target-name> ]?",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-transition-property",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "voice-rate",
+      "syntax": "[normal | x-slow | slow | medium | fast | x-fast] || <percentage [0,∞]>",
+      "computed": [],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "scroll-padding-inline",
+      "syntax": "[ auto | <length-percentage [0,∞]> ]{1,2}",
+      "computed": [
+        "scroll-padding-inline-start",
+        "scroll-padding-inline-end"
+      ],
+      "initial": [
+        "scroll-padding-inline-start",
+        "scroll-padding-inline-end"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "scroll-margin-left",
+      "syntax": "<length>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "text-decoration",
+      "syntax": "<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>",
+      "computed": [
+        "text-decoration-line",
+        "text-decoration-style",
+        "text-decoration-color",
+        "text-decoration-thickness"
+      ],
+      "initial": [
+        "text-decoration-color",
+        "text-decoration-style",
+        "text-decoration-line"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "line-snap",
+      "syntax": "none | baseline | contain",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "width",
+      "syntax": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>) | <calc-size()>",
+      "computed": [
+        "percentageAutoOrAbsoluteLength"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "stroke-position",
+      "syntax": "<position>#",
+      "computed": [],
+      "initial": "0% 0%",
+      "inherited": true
+    },
+    {
+      "name": "tab-size",
+      "syntax": "<number [0,∞]> | <length [0,∞]>",
+      "computed": [
+        "specifiedIntegerOrAbsoluteLength"
+      ],
+      "initial": "8",
+      "inherited": true
+    },
+    {
+      "name": "border-color",
+      "syntax": "[ <color> | <image-1D> ]{1,4}",
+      "computed": [
+        "border-bottom-color",
+        "border-left-color",
+        "border-right-color",
+        "border-top-color"
+      ],
+      "initial": [
+        "border-top-color",
+        "border-right-color",
+        "border-bottom-color",
+        "border-left-color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "border-block-end-style",
+      "syntax": "<line-style>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-animation-fill-mode",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-box-flex",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "speak",
+      "syntax": "auto | never | always",
+      "computed": [],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "cy",
+      "syntax": "<length-percentage>",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "visibility",
+      "syntax": "visible | hidden | collapse",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "visible",
+      "inherited": true
+    },
+    {
+      "name": "grid-auto-rows",
+      "syntax": "<track-size>+",
+      "computed": [
+        "percentageAsSpecifiedOrAbsoluteLength"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "border-bottom",
+      "syntax": "<line-width> || <line-style> || <color>",
+      "computed": [
+        "border-bottom-width",
+        "border-bottom-style",
+        "border-bottom-color"
+      ],
+      "initial": [
+        "border-bottom-width",
+        "border-bottom-style",
+        "border-bottom-color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "-webkit-box-pack",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "scroll-padding-inline-end",
+      "syntax": "auto | <length-percentage [0,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "min-width",
+      "syntax": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>) | <calc-size()>",
+      "computed": [
+        "percentageAsSpecifiedOrAbsoluteLength"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "grid-template-rows",
+      "syntax": "none | <track-list> | <auto-track-list> | subgrid <line-name-list>?",
+      "computed": [
+        "asSpecifiedRelativeToAbsoluteLengths"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "scroll-padding",
+      "syntax": "[ auto | <length-percentage [0,∞]> ]{1,4}",
+      "computed": [
+        "scroll-padding-bottom",
+        "scroll-padding-left",
+        "scroll-padding-right",
+        "scroll-padding-top"
+      ],
+      "initial": [
+        "scroll-padding-bottom",
+        "scroll-padding-left",
+        "scroll-padding-right",
+        "scroll-padding-top"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "margin-right",
+      "syntax": "<length-percentage> | auto",
+      "computed": [
+        "percentageAsSpecifiedOrAbsoluteLength"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "bottom",
+      "syntax": "auto | <length-percentage>",
+      "computed": [
+        "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "block-step-insert",
+      "syntax": "margin | padding",
+      "computed": [],
+      "initial": "margin",
+      "inherited": false
+    },
+    {
+      "name": "stroke-align",
+      "syntax": "center | inset | outset",
+      "computed": [],
+      "initial": "center",
+      "inherited": true
+    },
+    {
+      "name": "font-synthesis-small-caps",
+      "syntax": "auto | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "align-content",
+      "syntax": "normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "offset",
+      "syntax": "[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?",
+      "computed": [
+        "offset-position",
+        "offset-path",
+        "offset-distance",
+        "offset-anchor",
+        "offset-rotate"
+      ],
+      "initial": [
+        "offset-position",
+        "offset-path",
+        "offset-distance",
+        "offset-anchor",
+        "offset-rotate"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "writing-mode",
+      "syntax": "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "horizontal-tb",
+      "inherited": true
+    },
+    {
+      "name": "break-inside",
+      "syntax": "auto | avoid | avoid-page | avoid-column | avoid-region",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "border-block",
+      "syntax": "<'border-block-start'>",
+      "computed": [
+        "border-block-width",
+        "border-block-style",
+        "border-block-color"
+      ],
+      "initial": [
+        "border-block-width",
+        "border-block-style",
+        "border-block-color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "border-inline-end-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "border-radius",
+      "syntax": "<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?",
+      "computed": [
+        "border-bottom-left-radius",
+        "border-bottom-right-radius",
+        "border-top-left-radius",
+        "border-top-right-radius"
+      ],
+      "initial": [
+        "border-top-left-radius",
+        "border-top-right-radius",
+        "border-bottom-right-radius",
+        "border-bottom-left-radius"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "border-image-slice",
+      "syntax": "[<number [0,∞]> | <percentage [0,∞]>]{1,4} && fill?",
+      "computed": [
+        "oneToFourPercentagesOrAbsoluteLengthsPlusFill"
+      ],
+      "initial": "100%",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-border-top-right-radius",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "marker-start",
+      "syntax": "none | <marker-ref>",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "pointer-events",
+      "syntax": "auto | bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "inset",
+      "syntax": "<'top'>{1,4}",
+      "computed": [
+        "top",
+        "bottom",
+        "left",
+        "right"
+      ],
+      "initial": [
+        "top",
+        "bottom",
+        "left",
+        "right"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "font-weight",
+      "syntax": "<font-weight-absolute> | bolder | lighter",
+      "computed": [
+        "keywordOrNumericalValueBolderLighterTransformedToRealValue"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "opacity",
+      "syntax": "<opacity-value>",
+      "computed": [
+        "specifiedValueNumberClipped0To1"
+      ],
+      "initial": "1",
+      "inherited": false
+    },
+    {
+      "name": "dynamic-range-limit",
+      "syntax": "standard | high | constrained-high",
+      "computed": [],
+      "initial": "high",
+      "inherited": false
+    },
+    {
+      "name": "columns",
+      "syntax": "<'column-width'> || <'column-count'>",
+      "computed": [
+        "column-width",
+        "column-count"
+      ],
+      "initial": [
+        "column-width",
+        "column-count"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "font-variation-settings",
+      "syntax": "normal | [ <opentype-tag> <number>]#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "mix-blend-mode",
+      "syntax": "<blend-mode> | plus-darker | plus-lighter",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "position",
+      "syntax": "static | relative | absolute | sticky | fixed | <running()>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "static",
+      "inherited": false
+    },
+    {
+      "name": "animation-delay",
+      "syntax": "<time>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0s",
+      "inherited": false
+    },
+    {
+      "name": "border-inline-style",
+      "syntax": "<'border-top-style'>{1,2}",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "border-inline-end-width",
+      "syntax": "<line-width>",
+      "computed": [
+        "absoluteLengthZeroIfBorderStyleNoneOrHidden"
+      ],
+      "initial": "medium",
+      "inherited": false
+    },
+    {
+      "name": "scroll-padding-block-end",
+      "syntax": "auto | <length-percentage [0,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "overscroll-behavior-y",
+      "syntax": "contain | none | auto",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "font-variant-position",
+      "syntax": "normal | sub | super",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "justify-content",
+      "syntax": "normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "border-inline-end",
+      "syntax": "<line-width> || <line-style> || <color>",
+      "computed": [
+        "border-width",
+        "border-style",
+        "border-inline-end-color"
+      ],
+      "initial": [
+        "border-width",
+        "border-style",
+        "color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "-webkit-text-size-adjust",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "font-optical-sizing",
+      "syntax": "auto | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "-webkit-background-size",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "transition-property",
+      "syntax": "none | <single-transition-property>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "all",
+      "inherited": false
+    },
+    {
+      "name": "scroll-timeline-name",
+      "syntax": "[ none | <dashed-ident> ]#",
+      "computed": [
+        "noneOrOrderedListOfIdentifiers"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "font-kerning",
+      "syntax": "auto | normal | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "padding",
+      "syntax": "<'padding-top'>{1,4}",
+      "computed": [
+        "padding-bottom",
+        "padding-left",
+        "padding-right",
+        "padding-top"
+      ],
+      "initial": [
+        "padding-bottom",
+        "padding-left",
+        "padding-right",
+        "padding-top"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "margin-inline-end",
+      "syntax": "<'margin-top'>",
+      "computed": [
+        "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "math-depth",
+      "syntax": "auto-add | add(<integer>) | <integer>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0",
+      "inherited": true
+    },
+    {
+      "name": "view-timeline-name",
+      "syntax": "[ none | <dashed-ident> ]#",
+      "computed": [
+        "noneOrOrderedListOfIdentifiers"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "stroke-color",
+      "syntax": "<color>#",
+      "computed": [],
+      "initial": "transparent",
+      "inherited": true
+    },
+    {
+      "name": "all",
+      "syntax": "initial | inherit | unset | revert | revert-layer",
+      "computed": [
+        "asSpecifiedAppliesToEachProperty"
+      ],
+      "initial": "noPracticalInitialValue",
+      "inherited": false
+    },
+    {
+      "name": "outline-color",
+      "syntax": "auto | [ <color> | <image-1D> ]",
+      "computed": [
+        "autoForTranslucentColorRGBAOtherwiseRGB"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-flex-basis",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "cx",
+      "syntax": "<length-percentage>",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "scroll-margin-right",
+      "syntax": "<length>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "float-offset",
+      "syntax": "<length> | <percentage>",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "mask-origin",
+      "syntax": "<coord-box>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "border-box",
+      "inherited": false
+    },
+    {
+      "name": "align-self",
+      "syntax": "auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position> | anchor-center",
+      "computed": [
+        "autoOnAbsolutelyPositionedElementsValueOfAlignItemsOnParent"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-mask-box-image-outset",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "contain",
+      "syntax": "none | strict | content | [ [size | inline-size] || layout || style || paint ]",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "max-block-size",
+      "syntax": "<'max-width'>",
+      "computed": [
+        "sameAsMaxWidthAndMaxHeight"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "margin-block-end",
+      "syntax": "<'margin-top'>",
+      "computed": [
+        "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "text-emphasis-position",
+      "syntax": "[ over | under ] && [ right | left ]?",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "over right",
+      "inherited": true
+    },
+    {
+      "name": "font-language-override",
+      "syntax": "normal | <string>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "border-style",
+      "syntax": "<line-style>{1,4}",
+      "computed": [
+        "border-bottom-style",
+        "border-left-style",
+        "border-right-style",
+        "border-top-style"
+      ],
+      "initial": [
+        "border-top-style",
+        "border-right-style",
+        "border-bottom-style",
+        "border-left-style"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "scroll-margin-inline-end",
+      "syntax": "<length>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "nav-down",
+      "syntax": "auto | <id> [ current | root | <target-name> ]?",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "height",
+      "syntax": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>) | <calc-size()>",
+      "computed": [
+        "percentageAutoOrAbsoluteLength"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "border-image-repeat",
+      "syntax": "[ stretch | repeat | round | space ]{1,2}",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "stretch",
+      "inherited": false
+    },
+    {
+      "name": "line-break",
+      "syntax": "auto | loose | normal | strict | anywhere",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "-webkit-align-content",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "scroll-padding-block-start",
+      "syntax": "auto | <length-percentage [0,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "font-variant-numeric",
+      "syntax": "normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "scrollbar-width",
+      "syntax": "auto | thin | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-box-orient",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "grid-row-gap",
+      "syntax": "",
+      "computed": [
+        "percentageAsSpecifiedOrAbsoluteLength"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "direction",
+      "syntax": "ltr | rtl",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "ltr",
+      "inherited": true
+    },
+    {
+      "name": "ruby-merge",
+      "syntax": "separate | merge | auto",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "separate",
+      "inherited": true
+    },
+    {
+      "name": "scroll-margin-inline-start",
+      "syntax": "<length>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "anchor-scope",
+      "syntax": "none | all | <dashed-ident>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "link-parameters",
+      "syntax": "none | <link-param>+",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "border-left-style",
+      "syntax": "<line-style>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "word-wrap",
+      "syntax": "normal | break-word | anywhere",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "border-block-end-color",
+      "syntax": "<color> | <image-1D>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": false
+    },
+    {
+      "name": "border-left-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-transform-style",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "vector-effect",
+      "syntax": "none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "scroll-margin",
+      "syntax": "<length>{1,4}",
+      "computed": [
+        "scroll-margin-bottom",
+        "scroll-margin-left",
+        "scroll-margin-right",
+        "scroll-margin-top"
+      ],
+      "initial": [
+        "scroll-margin-bottom",
+        "scroll-margin-left",
+        "scroll-margin-right",
+        "scroll-margin-top"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "page",
+      "syntax": "auto | <custom-ident>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "inset-inline",
+      "syntax": "<'top'>{1,2}",
+      "computed": [
+        "inset-inline-start",
+        "inset-inline-end"
+      ],
+      "initial": [
+        "inset-inline-start",
+        "inset-inline-end"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "margin",
+      "syntax": "<'margin-top'>{1,4}",
+      "computed": [
+        "margin-bottom",
+        "margin-left",
+        "margin-right",
+        "margin-top"
+      ],
+      "initial": [
+        "margin-bottom",
+        "margin-left",
+        "margin-right",
+        "margin-top"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "text-shadow",
+      "syntax": "none | [ <color>? && <length>{2,3} ]#",
+      "computed": [
+        "colorPlusThreeAbsoluteLengths"
+      ],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "justify-self",
+      "syntax": "auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | anchor-center",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "offset-anchor",
+      "syntax": "auto | <position>",
+      "computed": [
+        "forLengthAbsoluteValueOtherwisePercentage"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "grid-template-columns",
+      "syntax": "none | <track-list> | <auto-track-list> | subgrid <line-name-list>?",
+      "computed": [
+        "asSpecifiedRelativeToAbsoluteLengths"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "border-block-start-color",
+      "syntax": "<color> | <image-1D>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": false
+    },
+    {
+      "name": "border-bottom-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "column-rule-color",
+      "syntax": "<color>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": false
+    },
+    {
+      "name": "inset-block-start",
+      "syntax": "auto | <length-percentage>",
+      "computed": [
+        "sameAsBoxOffsets"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "border-inline-end-style",
+      "syntax": "<line-style>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "voice-family",
+      "syntax": "[[<family-name> | <generic-voice>],]* [<family-name> | <generic-voice>] | preserve",
+      "computed": [],
+      "initial": "implementation-dependent",
+      "inherited": true
+    },
+    {
+      "name": "spatial-navigation-action",
+      "syntax": "auto | focus | scroll",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "position-visibility",
+      "syntax": "always | [ anchors-valid || anchors-visible || no-overflow ]",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "anchors-visible",
+      "inherited": false
+    },
+    {
+      "name": "user-select",
+      "syntax": "auto | text | none | contain | all",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "stroke-width",
+      "syntax": "[<length-percentage> | <number>]#",
+      "computed": [],
+      "initial": "1px",
+      "inherited": true
+    },
+    {
+      "name": "-webkit-box-align",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "rest-before",
+      "syntax": "<time [0s,∞]> | none | x-weak | weak | medium | strong | x-strong",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "marker-end",
+      "syntax": "none | <marker-ref>",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "overflow-x",
+      "syntax": "visible | hidden | clip | scroll | auto",
+      "computed": [
+        "asSpecifiedButVisibleOrClipReplacedToAutoOrHiddenIfOtherValueDifferent"
+      ],
+      "initial": "visible",
+      "inherited": false
+    },
+    {
+      "name": "text-decoration-line",
+      "syntax": "none | [ underline || overline || line-through || blink ]",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "scrollbar-gutter",
+      "syntax": "auto | stable && both-edges?",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "fill-color",
+      "syntax": "<color>",
+      "computed": [],
+      "initial": "currentcolor",
+      "inherited": true
+    },
+    {
+      "name": "stroke-dasharray",
+      "syntax": "none | [<length-percentage> | <number>]+#",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "border-inline-start-width",
+      "syntax": "<line-width>",
+      "computed": [
+        "absoluteLengthZeroIfBorderStyleNoneOrHidden"
+      ],
+      "initial": "medium",
+      "inherited": false
+    },
+    {
+      "name": "scroll-margin-block-start",
+      "syntax": "<length>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "scroll-margin-inline",
+      "syntax": "<length>{1,2}",
+      "computed": [
+        "scroll-margin-inline-start",
+        "scroll-margin-inline-end"
+      ],
+      "initial": [
+        "scroll-margin-inline-start",
+        "scroll-margin-inline-end"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "font-variant-east-asian",
+      "syntax": "normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "box-decoration-break",
+      "syntax": "slice | clone",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "slice",
+      "inherited": false
+    },
+    {
+      "name": "border-top-right-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2}",
+      "computed": [
+        "twoAbsoluteLengthOrPercentages"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "pause",
+      "syntax": "<'pause-before'> <'pause-after'>?",
+      "computed": [],
+      "initial": "N/A (see individual properties)",
+      "inherited": false
+    },
+    {
+      "name": "voice-duration",
+      "syntax": "auto | <time [0s,∞]>",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "margin-block-start",
+      "syntax": "<'margin-top'>",
+      "computed": [
+        "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "grid-column-end",
+      "syntax": "<grid-line>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-animation-timing-function",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-border-bottom-left-radius",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "padding-inline-start",
+      "syntax": "<'padding-top'>",
+      "computed": [
+        "asLength"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "marker-side",
+      "syntax": "match-self | match-parent",
+      "computed": [],
+      "initial": "match-self",
+      "inherited": true
+    },
+    {
+      "name": "mask-border-mode",
+      "syntax": "luminance | alpha",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "alpha",
+      "inherited": false
+    },
+    {
+      "name": "flex-basis",
+      "syntax": "content | <'width'>",
+      "computed": [
+        "asSpecifiedRelativeToAbsoluteLengths"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "wrap-through",
+      "syntax": "wrap | none",
+      "computed": [],
+      "initial": "wrap",
+      "inherited": false
+    },
+    {
+      "name": "border-right-width",
+      "syntax": "<line-width>",
+      "computed": [
+        "absoluteLengthOr0IfBorderRightStyleNoneOrHidden"
+      ],
+      "initial": "medium",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-border-top-left-radius",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "bookmark-label",
+      "syntax": "<content-list>",
+      "computed": [],
+      "initial": "content(text)",
+      "inherited": false
+    },
+    {
+      "name": "max-inline-size",
+      "syntax": "<'max-width'>",
+      "computed": [
+        "sameAsMaxWidthAndMaxHeight"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "stroke-linejoin",
+      "syntax": "[ crop | arcs | miter ] || [ bevel | round | fallback ]",
+      "computed": [],
+      "initial": "miter",
+      "inherited": true
+    },
+    {
+      "name": "border-right-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "vertical-align",
+      "syntax": "[ first | last] || <'alignment-baseline'> || <'baseline-shift'>",
+      "computed": [
+        "absoluteLengthOrKeyword"
+      ],
+      "initial": "baseline",
+      "inherited": false
+    },
+    {
+      "name": "voice-pitch",
+      "syntax": "<frequency [0Hz,∞]> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]]",
+      "computed": [],
+      "initial": "medium",
+      "inherited": true
+    },
+    {
+      "name": "inset-inline-end",
+      "syntax": "auto | <length-percentage>",
+      "computed": [
+        "sameAsBoxOffsets"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "scroll-timeline",
+      "syntax": "[ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#",
+      "computed": [
+        "scroll-timeline-name",
+        "scroll-timeline-axis"
+      ],
+      "initial": [
+        "scroll-timeline-name",
+        "scroll-timeline-axis"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "border-image",
+      "syntax": "<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>",
+      "computed": [
+        "border-image-outset",
+        "border-image-repeat",
+        "border-image-slice",
+        "border-image-source",
+        "border-image-width"
+      ],
+      "initial": [
+        "border-image-source",
+        "border-image-slice",
+        "border-image-width",
+        "border-image-outset",
+        "border-image-repeat"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "transform-origin",
+      "syntax": "[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>? | [[ center | left | right ] && [ center | top | bottom ]] <length>?",
+      "computed": [
+        "forLengthAbsoluteValueOtherwisePercentage"
+      ],
+      "initial": "50% 50% 0",
+      "inherited": false
+    },
+    {
+      "name": "float",
+      "syntax": "block-start | block-end | inline-start | inline-end | snap-block | <snap-block()> | snap-inline | <snap-inline()> | left | right | top | bottom | none | footnote",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "scroll-padding-top",
+      "syntax": "auto | <length-percentage [0,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "font-synthesis-style",
+      "syntax": "auto | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "hanging-punctuation",
+      "syntax": "none | [ first || [ force-end | allow-end ] || last ]",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "-webkit-animation-duration",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-background-clip",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "alignment-baseline",
+      "syntax": "baseline | text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top",
+      "computed": [],
+      "initial": "baseline",
+      "inherited": false
+    },
+    {
+      "name": "box-sizing",
+      "syntax": "content-box | border-box",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "content-box",
+      "inherited": false
+    },
+    {
+      "name": "box-shadow-offset",
+      "syntax": "[ none | <length>{2} ]#",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "block-step",
+      "syntax": "<'block-step-size'> || <'block-step-insert'> || <'block-step-align'> || <'block-step-round'>",
+      "computed": [],
+      "initial": "see individual properties",
+      "inherited": false
+    },
+    {
+      "name": "nav-left",
+      "syntax": "auto | <id> [ current | root | <target-name> ]?",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "background-repeat",
+      "syntax": "<repeat-style>#",
+      "computed": [
+        "listEachItemHasTwoKeywordsOnePerDimension"
+      ],
+      "initial": "repeat",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-mask-composite",
+      "syntax": "",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "source-over",
+      "inherited": false
+    },
+    {
+      "name": "initial-letter-align",
+      "syntax": "[ border-box? [ alphabetic | ideographic | hanging | leading ]? ]!",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "object-position",
+      "syntax": "<position>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "50% 50%",
+      "inherited": false
+    },
+    {
+      "name": "transition-delay",
+      "syntax": "<time>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0s",
+      "inherited": false
+    },
+    {
+      "name": "border-block-width",
+      "syntax": "<'border-top-width'>{1,2}",
+      "computed": [
+        "absoluteLengthZeroIfBorderStyleNoneOrHidden"
+      ],
+      "initial": "medium",
+      "inherited": false
+    },
+    {
+      "name": "border-top-left-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2}",
+      "computed": [
+        "twoAbsoluteLengthOrPercentages"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "ruby-position",
+      "syntax": "[ alternate || [ over | under ] ] | inter-character",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "alternate",
+      "inherited": true
+    },
+    {
+      "name": "overflow-block",
+      "syntax": "visible | hidden | clip | scroll | auto",
+      "computed": [
+        "asSpecifiedButVisibleOrClipReplacedToAutoOrHiddenIfOtherValueDifferent"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-flex",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "marker",
+      "syntax": "none | <marker-ref>",
+      "computed": [],
+      "initial": "not defined for shorthand properties",
+      "inherited": true
+    },
+    {
+      "name": "order",
+      "syntax": "<integer>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-mask-origin",
+      "syntax": "",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "padding",
+      "inherited": false
+    },
+    {
+      "name": "table-layout",
+      "syntax": "auto | fixed",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "left",
+      "syntax": "auto | <length-percentage>",
+      "computed": [
+        "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "mask-type",
+      "syntax": "luminance | alpha",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "luminance",
+      "inherited": false
+    },
+    {
+      "name": "offset-rotate",
+      "syntax": "[ auto | reverse ] || <angle>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "letter-spacing",
+      "syntax": "normal | <length>",
+      "computed": [
+        "optimumValueOfAbsoluteLengthOrNormal"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "-webkit-animation-iteration-count",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "fill",
+      "syntax": "<paint>",
+      "computed": [],
+      "initial": "black",
+      "inherited": true
+    },
+    {
+      "name": "caret-animation",
+      "syntax": "auto | manual",
+      "computed": [],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "border-image-outset",
+      "syntax": "[ <length [0,∞]> | <number [0,∞]> ]{1,4}",
+      "computed": [
+        "asSpecifiedRelativeToAbsoluteLengths"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "text-align-all",
+      "syntax": "start | end | left | right | center | justify | match-parent",
+      "computed": [],
+      "initial": "start",
+      "inherited": true
+    },
+    {
+      "name": "widows",
+      "syntax": "<integer [1,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "2",
+      "inherited": true
+    },
+    {
+      "name": "initial-letter-wrap",
+      "syntax": "none | first | all | grid | <length-percentage>",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "cue",
+      "syntax": "<'cue-before'> <'cue-after'>?",
+      "computed": [],
+      "initial": "N/A (see individual properties)",
+      "inherited": false
+    },
+    {
+      "name": "overflow-anchor",
+      "syntax": "auto | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "animation-fill-mode",
+      "syntax": "<single-animation-fill-mode>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "border-block-style",
+      "syntax": "<'border-top-style'>{1,2}",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-flex-shrink",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-transition",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "scroll-padding-bottom",
+      "syntax": "auto | <length-percentage [0,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "inset-block-end",
+      "syntax": "auto | <length-percentage>",
+      "computed": [
+        "sameAsBoxOffsets"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-appearance",
+      "syntax": "",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "noneButOverriddenInUserAgentCSS",
+      "inherited": false
+    },
+    {
+      "name": "scroll-timeline-axis",
+      "syntax": "[ block | inline | x | y ]#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "block",
+      "inherited": false
+    },
+    {
+      "name": "view-timeline-axis",
+      "syntax": "[ block | inline | x | y ]#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "block",
+      "inherited": false
+    },
+    {
+      "name": "stroke-size",
+      "syntax": "<bg-size>#",
+      "computed": [],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "font-style",
+      "syntax": "normal | italic | oblique <angle [-90deg,90deg]>?",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "border-block-color",
+      "syntax": "<'border-top-color'>{1,2}",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-filter",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "column-rule-width",
+      "syntax": "<line-width>",
+      "computed": [
+        "absoluteLength0IfColumnRuleStyleNoneOrHidden"
+      ],
+      "initial": "medium",
+      "inherited": false
+    },
+    {
+      "name": "empty-cells",
+      "syntax": "show | hide",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "show",
+      "inherited": true
+    },
+    {
+      "name": "max-width",
+      "syntax": "none | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>) | <calc-size()>",
+      "computed": [
+        "percentageAsSpecifiedAbsoluteLengthOrNone"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "grid-template-areas",
+      "syntax": "none | <string>+",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "border-inline-color",
+      "syntax": "<'border-top-color'>{1,2}",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": false
+    },
+    {
+      "name": "border-bottom-width",
+      "syntax": "<line-width>",
+      "computed": [
+        "absoluteLengthOr0IfBorderBottomStyleNoneOrHidden"
+      ],
+      "initial": "medium",
+      "inherited": false
+    },
+    {
+      "name": "border-start-end-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2}",
+      "computed": [
+        "twoAbsoluteLengthOrPercentages"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "flood-opacity",
+      "syntax": "<'opacity'>",
+      "computed": [],
+      "initial": "1",
+      "inherited": false
+    },
+    {
+      "name": "font-stretch",
+      "syntax": "",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "border-top",
+      "syntax": "<line-width> || <line-style> || <color>",
+      "computed": [
+        "border-top-width",
+        "border-top-style",
+        "border-top-color"
+      ],
+      "initial": [
+        "border-top-width",
+        "border-top-style",
+        "border-top-color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "-webkit-animation-name",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "fill-repeat",
+      "syntax": "<repeat-style>#",
+      "computed": [],
+      "initial": "repeat",
+      "inherited": true
+    },
+    {
+      "name": "margin-trim",
+      "syntax": "none | [ block || inline ] | [ block-start || inline-start || block-end || inline-end ]",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-border-radius",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "stroke-dashcorner",
+      "syntax": "none | <length>",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "background-image",
+      "syntax": "<bg-image>#",
+      "computed": [
+        "asSpecifiedURLsAbsolute"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "mask-border-source",
+      "syntax": "none | <image>",
+      "computed": [
+        "asSpecifiedURLsAbsolute"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "quotes",
+      "syntax": "auto | none | match-parent | [ <string> <string> ]+",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "dependsOnUserAgent",
+      "inherited": true
+    },
+    {
+      "name": "overscroll-behavior-block",
+      "syntax": "contain | none | auto",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "timeline-scope",
+      "syntax": "none | all | <dashed-ident>#",
+      "computed": [
+        "noneOrOrderedListOfIdentifiers"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "border-image-source",
+      "syntax": "none | <image>",
+      "computed": [
+        "noneOrImageWithAbsoluteURI"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "border-bottom-left-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2}",
+      "computed": [
+        "twoAbsoluteLengthOrPercentages"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-justify-content",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "stroke-repeat",
+      "syntax": "<repeat-style>#",
+      "computed": [],
+      "initial": "repeat",
+      "inherited": true
+    },
+    {
+      "name": "font-feature-settings",
+      "syntax": "normal | <feature-tag-value>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "flex-wrap",
+      "syntax": "nowrap | wrap | wrap-reverse",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "nowrap",
+      "inherited": false
+    },
+    {
+      "name": "box-shadow-position",
+      "syntax": "[ outset | inset ]#",
+      "computed": [],
+      "initial": "outset",
+      "inherited": false
+    },
+    {
+      "name": "font-width",
+      "syntax": "normal | <percentage [0,∞]> | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded",
+      "computed": [],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "grid-gap",
+      "syntax": "",
+      "computed": [
+        "grid-row-gap",
+        "grid-column-gap"
+      ],
+      "initial": [
+        "grid-row-gap",
+        "grid-column-gap"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "scroll-snap-align",
+      "syntax": "[ none | start | end | center ]{1,2}",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "padding-left",
+      "syntax": "<length-percentage [0,∞]>",
+      "computed": [
+        "percentageAsSpecifiedOrAbsoluteLength"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "footnote-display",
+      "syntax": "block | inline | compact",
+      "computed": [],
+      "initial": "block",
+      "inherited": false
+    },
+    {
+      "name": "border-clip-right",
+      "syntax": "normal | [ <length-percentage [0,∞]> | <flex> ]+",
+      "computed": [],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "mask-border-outset",
+      "syntax": "[ <length> | <number> ]{1,4}",
+      "computed": [
+        "asSpecifiedRelativeToAbsoluteLengths"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "touch-action",
+      "syntax": "auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-animation-direction",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-mask-clip",
+      "syntax": "",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "border",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-transition-timing-function",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "scroll-margin-bottom",
+      "syntax": "<length>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "margin-inline-start",
+      "syntax": "<'margin-top'>",
+      "computed": [
+        "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "text-combine-upright",
+      "syntax": "none | all | [ digits <integer [2,4]>? ]",
+      "computed": [
+        "keywordPlusIntegerIfDigits"
+      ],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "text-rendering",
+      "syntax": "auto | optimizeSpeed | optimizeLegibility | geometricPrecision",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "text-size-adjust",
+      "syntax": "auto | none | <percentage [0,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "autoForSmartphoneBrowsersSupportingInflation",
+      "inherited": true
+    },
+    {
+      "name": "color-scheme",
+      "syntax": "normal | [ light | dark | <custom-ident> ]+ && only?",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "print-color-adjust",
+      "syntax": "economy | exact",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "economy",
+      "inherited": true
+    },
+    {
+      "name": "fill-break",
+      "syntax": "bounding-box | slice | clone",
+      "computed": [],
+      "initial": "bounding-box",
+      "inherited": false
+    },
+    {
+      "name": "fill-opacity",
+      "syntax": "<'opacity'>",
+      "computed": [],
+      "initial": "1",
+      "inherited": true
+    },
+    {
+      "name": "text-transform",
+      "syntax": "none | [capitalize | uppercase | lowercase ] || full-width || full-size-kana | math-auto",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "border-block-end-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "column-fill",
+      "syntax": "auto | balance | balance-all",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "balance",
+      "inherited": false
+    },
+    {
+      "name": "x",
+      "syntax": "<length-percentage>",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "caret-color",
+      "syntax": "auto | <color>",
+      "computed": [
+        "asAutoOrColor"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "unicode-bidi",
+      "syntax": "normal | embed | isolate | bidi-override | isolate-override | plaintext",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-flex-grow",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "font-synthesis",
+      "syntax": "none | [ weight || style || small-caps || position]",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "weight style small-caps position ",
+      "inherited": true
+    },
+    {
+      "name": "footnote-policy",
+      "syntax": "auto | line | block",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "box-shadow-spread",
+      "syntax": "<length>#",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "text-box",
+      "syntax": "normal | <'text-box-trim'> || <'text-box-edge'>",
+      "computed": [],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "flow-from",
+      "syntax": "<ident> | none",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "text-overflow",
+      "syntax": "clip | ellipsis",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "clip",
+      "inherited": false
+    },
+    {
+      "name": "anchor-name",
+      "syntax": "none | <dashed-ident>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "animation-range",
+      "syntax": "[ <'animation-range-start'> <'animation-range-end'>? ]#",
+      "computed": [
+        "animation-range-start",
+        "animation-range-end"
+      ],
+      "initial": [
+        "animation-range-start",
+        "animation-range-end"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "background-blend-mode",
+      "syntax": "<mix-blend-mode>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "animation-name",
+      "syntax": "[ none | <keyframes-name> ]#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "padding-block",
+      "syntax": "<'padding-top'>{1,2}",
+      "computed": [
+        "padding-block-start",
+        "padding-block-end"
+      ],
+      "initial": [
+        "padding-block-start",
+        "padding-block-end"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "counter-reset",
+      "syntax": "[ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+ | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "mask-image",
+      "syntax": "<mask-reference>#",
+      "computed": [
+        "asSpecifiedURLsAbsolute"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-transition-duration",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "content-visibility",
+      "syntax": "visible | auto | hidden",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "visible",
+      "inherited": false
+    },
+    {
+      "name": "position-area",
+      "syntax": "none | <position-area>",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "view-timeline",
+      "syntax": "[ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#",
+      "computed": [
+        "view-timeline-name",
+        "view-timeline-axis"
+      ],
+      "initial": [
+        "view-timeline-name",
+        "view-timeline-axis"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "padding-bottom",
+      "syntax": "<length-percentage [0,∞]>",
+      "computed": [
+        "percentageAsSpecifiedOrAbsoluteLength"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "border-inline-start",
+      "syntax": "<line-width> || <line-style> || <color>",
+      "computed": [
+        "border-width",
+        "border-style",
+        "border-inline-start-color"
+      ],
+      "initial": [
+        "border-width",
+        "border-style",
+        "color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "-webkit-flex-flow",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "line-height-step",
+      "syntax": "<length [0,∞]>",
+      "computed": [
+        "absoluteLength"
+      ],
+      "initial": "0",
+      "inherited": true
+    },
+    {
+      "name": "border-spacing",
+      "syntax": "<length>{1,2}",
+      "computed": [
+        "twoAbsoluteLengths"
+      ],
+      "initial": "0",
+      "inherited": true
+    },
+    {
+      "name": "text-underline-position",
+      "syntax": "auto | [ under || [ left | right ] ]",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "transform",
+      "syntax": "none | <transform-list>",
+      "computed": [
+        "asSpecifiedRelativeToAbsoluteLengths"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "transition-timing-function",
+      "syntax": "<easing-function>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "ease",
+      "inherited": false
+    },
+    {
+      "name": "scroll-margin-block-end",
+      "syntax": "<length>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "background-origin",
+      "syntax": "<visual-box>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "padding-box",
+      "inherited": false
+    },
+    {
+      "name": "animation-duration",
+      "syntax": "<time [0s,∞]>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0s",
+      "inherited": false
+    },
+    {
+      "name": "border-clip-bottom",
+      "syntax": "normal | [ <length-percentage [0,∞]> | <flex> ]+",
+      "computed": [],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-align-self",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "padding-block-end",
+      "syntax": "<'padding-top'>",
+      "computed": [
+        "asLength"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "overscroll-behavior-x",
+      "syntax": "contain | none | auto",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-user-select",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "font-variant-emoji",
+      "syntax": "normal | text | emoji | unicode",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "color",
+      "syntax": "<color>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "canvastext",
+      "inherited": true
+    },
+    {
+      "name": "-webkit-mask-size",
+      "syntax": "",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto auto",
+      "inherited": false
+    },
+    {
+      "name": "voice-volume",
+      "syntax": "silent | [[x-soft | soft | medium | loud | x-loud] || <decibel>]",
+      "computed": [],
+      "initial": "medium",
+      "inherited": true
+    },
+    {
+      "name": "background-clip",
+      "syntax": "<visual-box>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "border-box",
+      "inherited": false
+    },
+    {
+      "name": "border-right",
+      "syntax": "<line-width> || <line-style> || <color>",
+      "computed": [
+        "border-right-width",
+        "border-right-style",
+        "border-right-color"
+      ],
+      "initial": [
+        "border-right-width",
+        "border-right-style",
+        "border-right-color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "stroke-alignment",
+      "syntax": "center | inner | outer",
+      "computed": [],
+      "initial": "center",
+      "inherited": true
+    },
+    {
+      "name": "scroll-behavior",
+      "syntax": "auto | smooth",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "background-position",
+      "syntax": "<bg-position>#",
+      "computed": [
+        "background-position-x",
+        "background-position-y"
+      ],
+      "initial": "0% 0%",
+      "inherited": false
+    },
+    {
+      "name": "z-index",
+      "syntax": "auto | <integer> | inherit",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "column-gap",
+      "syntax": "normal | <length-percentage [0,∞]>",
+      "computed": [
+        "asSpecifiedWithLengthsAbsoluteAndNormalComputingToZeroExceptMultiColumn"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "break-after",
+      "syntax": "auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "line-height",
+      "syntax": "normal | <number [0,∞]> | <length-percentage [0,∞]>",
+      "computed": [
+        "absoluteLengthOrAsSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "mask-border-width",
+      "syntax": "[ <length-percentage> | <number> | auto ]{1,4}",
+      "computed": [
+        "asSpecifiedRelativeToAbsoluteLengths"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "bookmark-state",
+      "syntax": "open | closed",
+      "computed": [],
+      "initial": "open",
+      "inherited": false
+    },
+    {
+      "name": "background-size",
+      "syntax": "<bg-size>#",
+      "computed": [
+        "asSpecifiedRelativeToAbsoluteLengths"
+      ],
+      "initial": "auto auto",
+      "inherited": false
+    },
+    {
+      "name": "display",
+      "syntax": "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> | <display-outside> || [ <display-inside> | math ]",
+      "computed": [
+        "asSpecifiedExceptPositionedFloatingAndRootElementsKeywordMaybeDifferent"
+      ],
+      "initial": "inline",
+      "inherited": false
+    },
+    {
+      "name": "flex-shrink",
+      "syntax": "<number [0,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "1",
+      "inherited": false
+    },
+    {
+      "name": "border-right-style",
+      "syntax": "<line-style>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "baseline-source",
+      "syntax": "auto | first | last",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "text-orientation",
+      "syntax": "mixed | upright | sideways",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "mixed",
+      "inherited": true
+    },
+    {
+      "name": "text-align-last",
+      "syntax": "auto | start | end | left | right | center | justify | match-parent",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "orphans",
+      "syntax": "<integer [1,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "2",
+      "inherited": true
+    },
+    {
+      "name": "border-block-start-width",
+      "syntax": "<line-width>",
+      "computed": [
+        "absoluteLengthZeroIfBorderStyleNoneOrHidden"
+      ],
+      "initial": "medium",
+      "inherited": false
+    },
+    {
+      "name": "cue-before",
+      "syntax": "<uri> <decibel>? | none",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "y",
+      "syntax": "<length-percentage>",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "content",
+      "syntax": "normal | none | [ <content-replacement> | <content-list> ] [/ [ <string> | <counter> | <attr()> ]+ ]? | <element()>",
+      "computed": [
+        "normalOnElementsForPseudosNoneAbsoluteURIStringOrAsSpecified"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "break-before",
+      "syntax": "auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-text-stroke-width",
+      "syntax": "<line-width>",
+      "computed": [
+        "absoluteLength"
+      ],
+      "initial": "0",
+      "inherited": true
+    },
+    {
+      "name": "min-inline-size",
+      "syntax": "<'min-width'>",
+      "computed": [
+        "sameAsMinWidthAndMinHeight"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "clear",
+      "syntax": "inline-start | inline-end | block-start | block-end | left | right | top | bottom | both-inline | both-block | both | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "transition-duration",
+      "syntax": "<time [0s,∞]>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0s",
+      "inherited": false
+    },
+    {
+      "name": "border-block-start-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "voice-balance",
+      "syntax": "<number> | left | center | right | leftwards | rightwards",
+      "computed": [],
+      "initial": "center",
+      "inherited": true
+    },
+    {
+      "name": "color-adjust",
+      "syntax": "<'print-color-adjust'>",
+      "computed": [],
+      "initial": "see individual properties",
+      "inherited": false
+    },
+    {
+      "name": "stroke-miterlimit",
+      "syntax": "<number>",
+      "computed": [],
+      "initial": "4",
+      "inherited": true
+    },
+    {
+      "name": "border-image-width",
+      "syntax": "[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}",
+      "computed": [
+        "asSpecifiedRelativeToAbsoluteLengths"
+      ],
+      "initial": "1",
+      "inherited": false
+    },
+    {
+      "name": "mask-clip",
+      "syntax": "[ <coord-box> | no-clip ]#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "border-box",
+      "inherited": false
+    },
+    {
+      "name": "row-gap",
+      "syntax": "normal | <length-percentage [0,∞]>",
+      "computed": [
+        "asSpecifiedWithLengthsAbsoluteAndNormalComputingToZeroExceptMultiColumn"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "column-width",
+      "syntax": "auto | <length [0,∞]> | min-content | max-content | fit-content(<length-percentage>)",
+      "computed": [
+        "absoluteLengthZeroOrLarger"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "scroll-padding-left",
+      "syntax": "auto | <length-percentage [0,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "animation-range-start",
+      "syntax": "[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#",
+      "computed": [
+        "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "max-height",
+      "syntax": "none | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>) | <calc-size()>",
+      "computed": [
+        "percentageAsSpecifiedAbsoluteLengthOrNone"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "font-synthesis-position",
+      "syntax": "auto | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "border-top-width",
+      "syntax": "<line-width>",
+      "computed": [
+        "absoluteLengthOr0IfBorderTopStyleNoneOrHidden"
+      ],
+      "initial": "medium",
+      "inherited": false
+    },
+    {
+      "name": "border-inline-width",
+      "syntax": "<'border-top-width'>{1,2}",
+      "computed": [
+        "absoluteLengthZeroIfBorderStyleNoneOrHidden"
+      ],
+      "initial": "medium",
+      "inherited": false
+    },
+    {
+      "name": "grid-auto-columns",
+      "syntax": "<track-size>+",
+      "computed": [
+        "percentageAsSpecifiedOrAbsoluteLength"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "border-bottom-color",
+      "syntax": "<color> | <image-1D>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-text-fill-color",
+      "syntax": "<color>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": true
+    },
+    {
+      "name": "-webkit-backface-visibility",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-box-shadow",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-perspective",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "pause-after",
+      "syntax": "<time [0s,∞]> | none | x-weak | weak | medium | strong | x-strong",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "caption-side",
+      "syntax": "top | bottom",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "top",
+      "inherited": true
+    },
+    {
+      "name": "position-try-order",
+      "syntax": "normal | <try-size>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "offset-position",
+      "syntax": "normal | auto | <position>",
+      "computed": [
+        "forLengthAbsoluteValueOtherwisePercentage"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "border-clip-left",
+      "syntax": "normal | [ <length-percentage [0,∞]> | <flex> ]+",
+      "computed": [],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "r",
+      "syntax": "<length-percentage>",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "place-self",
+      "syntax": "<'align-self'> <'justify-self'>?",
+      "computed": [
+        "align-self",
+        "justify-self"
+      ],
+      "initial": [
+        "align-self",
+        "justify-self"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "scrollbar-color",
+      "syntax": "auto | <color>{2}",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "block-step-round",
+      "syntax": "up | down | nearest",
+      "computed": [],
+      "initial": "up",
+      "inherited": false
+    },
+    {
+      "name": "marker-mid",
+      "syntax": "none | <marker-ref>",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "inline-size",
+      "syntax": "<'width'>",
+      "computed": [
+        "sameAsWidthAndHeight"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "flood-color",
+      "syntax": "<color>",
+      "computed": [],
+      "initial": "black",
+      "inherited": false
+    },
+    {
+      "name": "caret",
+      "syntax": "<'caret-color'> || <'caret-animation'> || <'caret-shape'>",
+      "computed": [
+        "caret-color",
+        "caret-shape"
+      ],
+      "initial": [
+        "caret-color",
+        "caret-shape"
+      ],
+      "inherited": true
+    },
+    {
+      "name": "border-inline-start-color",
+      "syntax": "<color> | <image-1D>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": false
+    },
+    {
+      "name": "border-end-start-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2}",
+      "computed": [
+        "twoAbsoluteLengthOrPercentages"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "column-count",
+      "syntax": "auto | <integer [1,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "stop-opacity",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "math-style",
+      "syntax": "normal | compact",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "appearance",
+      "syntax": "none | auto | <compat-auto> | <compat-special>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "stroke-dash-corner",
+      "syntax": "none | <length>",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "font-palette",
+      "syntax": "normal | light | dark | <palette-identifier> | <palette-mix()>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "text-justify",
+      "syntax": "auto | none | inter-word | inter-character",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "-webkit-animation-delay",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "shape-subtract",
+      "syntax": "none | [ <basic-shape>| <uri> ]+",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "scroll-snap-stop",
+      "syntax": "normal | always",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "list-style",
+      "syntax": "<'list-style-position'> || <'list-style-image'> || <'list-style-type'>",
+      "computed": [
+        "list-style-image",
+        "list-style-position",
+        "list-style-type"
+      ],
+      "initial": [
+        "list-style-type",
+        "list-style-position",
+        "list-style-image"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "margin-break",
+      "syntax": "auto | keep | discard",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "border-left-width",
+      "syntax": "<line-width>",
+      "computed": [
+        "absoluteLengthOr0IfBorderLeftStyleNoneOrHidden"
+      ],
+      "initial": "medium",
+      "inherited": false
+    },
+    {
+      "name": "overflow-inline",
+      "syntax": "visible | hidden | clip | scroll | auto",
+      "computed": [
+        "asSpecifiedButVisibleOrClipReplacedToAutoOrHiddenIfOtherValueDifferent"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "block-size",
+      "syntax": "<'width'>",
+      "computed": [
+        "sameAsWidthAndHeight"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "overscroll-behavior",
+      "syntax": "[ contain | none | auto ]{1,2}",
+      "computed": [
+        "overscroll-behavior-x",
+        "overscroll-behavior-y"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "margin-bottom",
+      "syntax": "<length-percentage> | auto",
+      "computed": [
+        "percentageAsSpecifiedOrAbsoluteLength"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "padding-right",
+      "syntax": "<length-percentage [0,∞]>",
+      "computed": [
+        "percentageAsSpecifiedOrAbsoluteLength"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "page-break-before",
+      "syntax": "auto | always | avoid | left | right | inherit",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "box-shadow-blur",
+      "syntax": "<length [0,∞]>#",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-animation-play-state",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "fill-size",
+      "syntax": "<bg-size>#",
+      "computed": [],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "clip",
+      "syntax": "<rect()> | auto",
+      "computed": [
+        "autoOrRectangle"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "mask-composite",
+      "syntax": "<compositing-operator>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "add",
+      "inherited": false
+    },
+    {
+      "name": "border-inline-start-style",
+      "syntax": "<line-style>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "box-shadow-color",
+      "syntax": "<color>#",
+      "computed": [],
+      "initial": "currentcolor",
+      "inherited": false
+    },
+    {
+      "name": "stroke-image",
+      "syntax": "<paint>#",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "background-color",
+      "syntax": "<color>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "transparent",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-mask-position",
+      "syntax": "",
+      "computed": [
+        "absoluteLengthOrPercentage"
+      ],
+      "initial": "0% 0%",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-box-ordinal-group",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "initial-letter",
+      "syntax": "normal | <number [1,∞]> <integer [1,∞]> | <number [1,∞]> && [ drop | raise ]?",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "d",
+      "syntax": "none | <string>",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "list-style-position",
+      "syntax": "inside | outside",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "outside",
+      "inherited": true
+    },
+    {
+      "name": "float-reference",
+      "syntax": "inline | column | region | page",
+      "computed": [],
+      "initial": "inline",
+      "inherited": false
+    },
+    {
+      "name": "font-size",
+      "syntax": "<absolute-size> | <relative-size> | <length-percentage [0,∞]> | math",
+      "computed": [
+        "asSpecifiedRelativeToAbsoluteLengths"
+      ],
+      "initial": "medium",
+      "inherited": true
+    },
+    {
+      "name": "grid-row-end",
+      "syntax": "<grid-line>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "border-clip",
+      "syntax": "normal | [ <length-percentage [0,∞]> | <flex> ]+",
+      "computed": [],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "padding-inline",
+      "syntax": "<'padding-top'>{1,2}",
+      "computed": [
+        "padding-inline-start",
+        "padding-inline-end"
+      ],
+      "initial": [
+        "padding-inline-start",
+        "padding-inline-end"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "lighting-color",
+      "syntax": "<color>",
+      "computed": [],
+      "initial": "white",
+      "inherited": false
+    },
+    {
+      "name": "math-shift",
+      "syntax": "normal | compact",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "mask-border-slice",
+      "syntax": "[ <number> | <percentage> ]{1,4} fill?",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "scroll-snap-type",
+      "syntax": "none | [ x | y | block | inline | both ] [ mandatory | proximity ]?",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "transition",
+      "syntax": "<single-transition>#",
+      "computed": [
+        "transition-delay",
+        "transition-duration",
+        "transition-property",
+        "transition-timing-function",
+        "transition-behavior"
+      ],
+      "initial": [
+        "transition-delay",
+        "transition-duration",
+        "transition-property",
+        "transition-timing-function",
+        "transition-behavior"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "-webkit-animation",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "baseline-shift",
+      "syntax": "<length-percentage> | sub | super | top | center | bottom",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "stroke-break",
+      "syntax": "bounding-box | slice | clone",
+      "computed": [],
+      "initial": "bounding-box",
+      "inherited": false
+    },
+    {
+      "name": "stroke-dashoffset",
+      "syntax": "<length-percentage> | <number>",
+      "computed": [],
+      "initial": "0",
+      "inherited": true
+    },
+    {
+      "name": "animation-iteration-count",
+      "syntax": "<single-animation-iteration-count>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "1",
+      "inherited": false
+    },
+    {
+      "name": "align-items",
+      "syntax": "normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ] | anchor-center",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "grid-row",
+      "syntax": "<grid-line> [ / <grid-line> ]?",
+      "computed": [
+        "grid-row-start",
+        "grid-row-end"
+      ],
+      "initial": [
+        "grid-row-start",
+        "grid-row-end"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "paint-order",
+      "syntax": "normal | [ fill || stroke || markers ]",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "stop-color",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "padding-inline-end",
+      "syntax": "<'padding-top'>",
+      "computed": [
+        "asLength"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "animation-play-state",
+      "syntax": "<single-animation-play-state>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "running",
+      "inherited": false
+    },
+    {
+      "name": "word-spacing",
+      "syntax": "normal | <length>",
+      "computed": [
+        "absoluteLength"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "-webkit-mask",
+      "syntax": "",
+      "computed": [
+        "-webkit-mask-image",
+        "-webkit-mask-repeat",
+        "-webkit-mask-attachment",
+        "-webkit-mask-position",
+        "-webkit-mask-origin",
+        "-webkit-mask-clip"
+      ],
+      "initial": [
+        "-webkit-mask-image",
+        "-webkit-mask-repeat",
+        "-webkit-mask-attachment",
+        "-webkit-mask-position",
+        "-webkit-mask-origin",
+        "-webkit-mask-clip"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "ruby-overhang",
+      "syntax": "auto | none",
+      "computed": [],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "text-emphasis-color",
+      "syntax": "<color>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": true
+    },
+    {
+      "name": "position-try-fallbacks",
+      "syntax": "none | [ [<dashed-ident> || <try-tactic>] | <'position-area'> ]#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "inset-inline-start",
+      "syntax": "auto | <length-percentage>",
+      "computed": [
+        "sameAsBoxOffsets"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "will-change",
+      "syntax": "auto | <animateable-feature>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "font-family",
+      "syntax": "[ <family-name> | <generic-family> ]#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "dependsOnUserAgent",
+      "inherited": true
+    },
+    {
+      "name": "grid",
+      "syntax": "<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>",
+      "computed": [
+        "grid-template-rows",
+        "grid-template-columns",
+        "grid-template-areas",
+        "grid-auto-rows",
+        "grid-auto-columns",
+        "grid-auto-flow",
+        "grid-column-gap",
+        "grid-row-gap",
+        "column-gap",
+        "row-gap"
+      ],
+      "initial": [
+        "grid-template-rows",
+        "grid-template-columns",
+        "grid-template-areas",
+        "grid-auto-rows",
+        "grid-auto-columns",
+        "grid-auto-flow",
+        "grid-column-gap",
+        "grid-row-gap",
+        "column-gap",
+        "row-gap"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "position-anchor",
+      "syntax": "auto | <anchor-element>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "implicit",
+      "inherited": false
+    },
+    {
+      "name": "view-timeline-inset",
+      "syntax": "[ [ auto | <length-percentage> ]{1,2} ]#",
+      "computed": [
+        "listEachItemConsistingOfPairsOfAutoOrLengthPercentage"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "background-attachment",
+      "syntax": "<attachment>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "scroll",
+      "inherited": false
+    },
+    {
+      "name": "clip-rule",
+      "syntax": "nonzero | evenodd",
+      "computed": [],
+      "initial": "nonzero",
+      "inherited": true
+    },
+    {
+      "name": "-webkit-mask-box-image-repeat",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "min-block-size",
+      "syntax": "<'min-width'>",
+      "computed": [
+        "sameAsMinWidthAndMinHeight"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "font",
+      "syntax": "[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | <system-family-name>",
+      "computed": [
+        "font-style",
+        "font-variant",
+        "font-weight",
+        "font-stretch",
+        "font-size",
+        "line-height",
+        "font-family"
+      ],
+      "initial": [
+        "font-style",
+        "font-variant",
+        "font-weight",
+        "font-stretch",
+        "font-size",
+        "line-height",
+        "font-family"
+      ],
+      "inherited": true
+    },
+    {
+      "name": "animation",
+      "syntax": "<single-animation>#",
+      "computed": [
+        "animation-name",
+        "animation-duration",
+        "animation-timing-function",
+        "animation-delay",
+        "animation-direction",
+        "animation-iteration-count",
+        "animation-fill-mode",
+        "animation-play-state",
+        "animation-timeline"
+      ],
+      "initial": [
+        "animation-name",
+        "animation-duration",
+        "animation-timing-function",
+        "animation-delay",
+        "animation-iteration-count",
+        "animation-direction",
+        "animation-fill-mode",
+        "animation-play-state",
+        "animation-timeline"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "glyph-orientation-vertical",
+      "syntax": "auto | 0deg | 90deg | 0 | 90",
+      "computed": [],
+      "initial": "n/a",
+      "inherited": false
+    },
+    {
+      "name": "grid-area",
+      "syntax": "<grid-line> [ / <grid-line> ]{0,3}",
+      "computed": [
+        "grid-row-start",
+        "grid-column-start",
+        "grid-row-end",
+        "grid-column-end"
+      ],
+      "initial": [
+        "grid-row-start",
+        "grid-column-start",
+        "grid-row-end",
+        "grid-column-end"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "border-top-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-transform",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "block-step-align",
+      "syntax": "auto | center | start | end",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "scroll-padding-right",
+      "syntax": "auto | <length-percentage [0,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "field-sizing",
+      "syntax": "fixed | content",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "fixed",
+      "inherited": false
+    },
+    {
+      "name": "fill-position",
+      "syntax": "<position>#",
+      "computed": [],
+      "initial": "0% 0%",
+      "inherited": true
+    },
+    {
+      "name": "grid-column-gap",
+      "syntax": "",
+      "computed": [
+        "percentageAsSpecifiedOrAbsoluteLength"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "text-box-edge",
+      "syntax": "auto | <text-edge>",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "overflow",
+      "syntax": "<'overflow-block'>{1,2}",
+      "computed": [
+        "overflow-x",
+        "overflow-y"
+      ],
+      "initial": "visible",
+      "inherited": false
+    },
+    {
+      "name": "counter-increment",
+      "syntax": "[ <counter-name> <integer>? ]+ | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "caret-shape",
+      "syntax": "auto | bar | block | underscore",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "line-fit-edge",
+      "syntax": "leading | <text-edge>",
+      "computed": [],
+      "initial": "leading",
+      "inherited": true
+    },
+    {
+      "name": "-webkit-box-sizing",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-mask-box-image",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "spatial-navigation-contain",
+      "syntax": "auto | contain",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "margin-block",
+      "syntax": "<'margin-top'>{1,2}",
+      "computed": [
+        "margin-block-start",
+        "margin-block-end"
+      ],
+      "initial": [
+        "margin-block-start",
+        "margin-block-end"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "box-snap",
+      "syntax": "none | block-start | block-end | center | baseline | last-baseline",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "font-synthesis-weight",
+      "syntax": "auto | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "clip-path",
+      "syntax": "<clip-source> | [ <basic-shape> || <geometry-box> ] | none",
+      "computed": [
+        "asSpecifiedURLsAbsolute"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "mask-border-repeat",
+      "syntax": "[ stretch | repeat | round | space ]{1,2}",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "stretch",
+      "inherited": false
+    },
+    {
+      "name": "mask-border",
+      "syntax": "<'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>",
+      "computed": [
+        "mask-border-mode",
+        "mask-border-outset",
+        "mask-border-repeat",
+        "mask-border-slice",
+        "mask-border-source",
+        "mask-border-width"
+      ],
+      "initial": [
+        "mask-border-mode",
+        "mask-border-outset",
+        "mask-border-repeat",
+        "mask-border-slice",
+        "mask-border-source",
+        "mask-border-width"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "grid-column",
+      "syntax": "<grid-line> [ / <grid-line> ]?",
+      "computed": [
+        "grid-column-start",
+        "grid-column-end"
+      ],
+      "initial": [
+        "grid-column-start",
+        "grid-column-end"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "string-set",
+      "syntax": "none | [ <custom-ident> <string>+ ]#",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "border-bottom-style",
+      "syntax": "<line-style>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-flex-wrap",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "border-boundary",
+      "syntax": "none | parent | display",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "scroll-padding-inline-start",
+      "syntax": "auto | <length-percentage [0,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "list-style-image",
+      "syntax": "<image> | none",
+      "computed": [
+        "theKeywordListStyleImageNoneOrComputedValue"
+      ],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "mask-mode",
+      "syntax": "<masking-mode>#",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "match-source",
+      "inherited": false
+    },
+    {
+      "name": "wrap-flow",
+      "syntax": "auto | both | start | end | minimum | maximum | clear",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "border-right-color",
+      "syntax": "<color> | <image-1D>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": false
+    },
+    {
+      "name": "border-block-start",
+      "syntax": "<line-width> || <line-style> || <color>",
+      "computed": [
+        "border-width",
+        "border-style",
+        "border-block-start-color"
+      ],
+      "initial": [
+        "border-width",
+        "border-style",
+        "color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "bookmark-level",
+      "syntax": "none | <integer [1,∞]>",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "ruby-align",
+      "syntax": "start | center | space-between | space-around",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "space-around",
+      "inherited": true
+    },
+    {
+      "name": "font-variant-ligatures",
+      "syntax": "normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "font-variant-alternates",
+      "syntax": "normal | [ stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name>#) || character-variant(<feature-value-name>#) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) ]",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "block-step-size",
+      "syntax": "none | <length [0,∞]>",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "stroke-linecap",
+      "syntax": "butt | round | square",
+      "computed": [],
+      "initial": "butt",
+      "inherited": true
+    },
+    {
+      "name": "border-inline",
+      "syntax": "<'border-block-start'>",
+      "computed": [
+        "border-inline-width",
+        "border-inline-style",
+        "border-inline-color"
+      ],
+      "initial": [
+        "border-inline-width",
+        "border-inline-style",
+        "border-inline-color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "border-inline-start-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+      "computed": [],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "text-box-trim",
+      "syntax": "none | trim-start | trim-end | trim-both",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "ry",
+      "syntax": "<length-percentage> | auto",
+      "computed": [],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "input-security",
+      "syntax": "auto | none",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "font-variant-caps",
+      "syntax": "normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "justify-items",
+      "syntax": "normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "legacy",
+      "inherited": false
+    },
+    {
+      "name": "offset-distance",
+      "syntax": "<length-percentage>",
+      "computed": [
+        "forLengthAbsoluteValueOtherwisePercentage"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "grid-auto-flow",
+      "syntax": "[ row | column ] || dense",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "row",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-transform-origin",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "line-grid",
+      "syntax": "match-parent | create",
+      "computed": [],
+      "initial": "match-parent",
+      "inherited": false
+    },
+    {
+      "name": "inset-block",
+      "syntax": "<'top'>{1,2}",
+      "computed": [
+        "inset-block-start",
+        "inset-block-end"
+      ],
+      "initial": [
+        "inset-block-start",
+        "inset-block-end"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "resize",
+      "syntax": "none | both | horizontal | vertical | block | inline",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "mask",
+      "syntax": "<mask-layer>#",
+      "computed": [
+        "mask-image",
+        "mask-mode",
+        "mask-repeat",
+        "mask-position",
+        "mask-clip",
+        "mask-origin",
+        "mask-size",
+        "mask-composite"
+      ],
+      "initial": [
+        "mask-image",
+        "mask-mode",
+        "mask-repeat",
+        "mask-position",
+        "mask-clip",
+        "mask-origin",
+        "mask-size",
+        "mask-composite"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "-webkit-background-origin",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "spatial-navigation-function",
+      "syntax": "normal | grid",
+      "computed": [],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "overflow-clip-margin",
+      "syntax": "<visual-box> || <length [0,∞]>",
+      "computed": [
+        "theComputedLengthAndVisualBox"
+      ],
+      "initial": "0px",
+      "inherited": false
+    },
+    {
+      "name": "margin-inline",
+      "syntax": "<'margin-top'>{1,2}",
+      "computed": [
+        "margin-inline-start",
+        "margin-inline-end"
+      ],
+      "initial": [
+        "margin-inline-start",
+        "margin-inline-end"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "border-width",
+      "syntax": "<line-width>{1,4}",
+      "computed": [
+        "border-bottom-width",
+        "border-left-width",
+        "border-right-width",
+        "border-top-width"
+      ],
+      "initial": [
+        "border-top-width",
+        "border-right-width",
+        "border-bottom-width",
+        "border-left-width"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "grid-template",
+      "syntax": "none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?",
+      "computed": [
+        "grid-template-columns",
+        "grid-template-rows",
+        "grid-template-areas"
+      ],
+      "initial": [
+        "grid-template-columns",
+        "grid-template-rows",
+        "grid-template-areas"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "border-left-color",
+      "syntax": "<color> | <image-1D>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": false
+    },
+    {
+      "name": "border-start-start-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2}",
+      "computed": [
+        "twoAbsoluteLengthOrPercentages"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "padding-block-start",
+      "syntax": "<'padding-top'>",
+      "computed": [
+        "asLength"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "position-try",
+      "syntax": "<'position-try-order'>? <'position-try-fallbacks'>",
+      "computed": [
+        "position-try-fallbacks",
+        "position-try-order"
+      ],
+      "initial": [
+        "position-try-fallbacks",
+        "position-try-order"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "overscroll-behavior-inline",
+      "syntax": "contain | none | auto",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "outline-style",
+      "syntax": "auto | <outline-line-style>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "outline-offset",
+      "syntax": "<length>",
+      "computed": [
+        "asSpecifiedRelativeToAbsoluteLengths"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "fill-image",
+      "syntax": "<paint>#",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "text-align",
+      "syntax": "start | end | left | right | center | justify | match-parent | justify-all",
+      "computed": [
+        "asSpecifiedExceptMatchParent"
+      ],
+      "initial": "startOrNamelessValueIfLTRRightIfRTL",
+      "inherited": true
+    },
+    {
+      "name": "stroke",
+      "syntax": "<paint>",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "-webkit-border-bottom-right-radius",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-order",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-perspective-origin",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "reading-flow",
+      "syntax": "normal | flex-visual | flex-flow | grid-rows | grid-columns | grid-order",
+      "computed": [],
+      "initial": "normal",
+      "inherited": false
+    },
+    {
+      "name": "flex",
+      "syntax": "none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]",
+      "computed": [
+        "flex-grow",
+        "flex-shrink",
+        "flex-basis"
+      ],
+      "initial": [
+        "flex-grow",
+        "flex-shrink",
+        "flex-basis"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "border-limit",
+      "syntax": "all | [ sides | corners ] <length-percentage [0,∞]>? | [ top | right | bottom | left ] <length-percentage [0,∞]>",
+      "computed": [],
+      "initial": "all",
+      "inherited": false
+    },
+    {
+      "name": "font-size-adjust",
+      "syntax": "none | <number [0,∞]>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "word-break",
+      "syntax": "normal | keep-all | break-all | break-word",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "border-top-style",
+      "syntax": "<line-style>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "corners",
+      "syntax": "<'corner-shape'> || <'border-radius'>",
+      "computed": [],
+      "initial": "see individual properties",
+      "inherited": false
+    },
+    {
+      "name": "shape-image-threshold",
+      "syntax": "<opacity-value>",
+      "computed": [
+        "specifiedValueNumberClipped0To1"
+      ],
+      "initial": "0.0",
+      "inherited": false
+    },
+    {
+      "name": "text-emphasis-style",
+      "syntax": "none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "transform-box",
+      "syntax": "content-box | border-box | fill-box | stroke-box | view-box",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "view-box",
+      "inherited": false
+    },
+    {
+      "name": "page-break-after",
+      "syntax": "auto | always | avoid | left | right | inherit",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": false
+    },
+    {
+      "name": "corner-shape",
+      "syntax": "[ round | angle ]{1,4}",
+      "computed": [],
+      "initial": "round",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-align-items",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-mask-repeat",
+      "syntax": "",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "repeat",
+      "inherited": false
+    },
+    {
+      "name": "image-rendering",
+      "syntax": "auto | smooth | high-quality | pixelated | crisp-edges",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "color-interpolation",
+      "syntax": "auto | sRGB | linearRGB",
+      "computed": [],
+      "initial": "sRGB",
+      "inherited": true
+    },
+    {
+      "name": "scroll-padding-block",
+      "syntax": "[ auto | <length-percentage [0,∞]> ]{1,2}",
+      "computed": [
+        "scroll-padding-block-start",
+        "scroll-padding-block-end"
+      ],
+      "initial": [
+        "scroll-padding-block-start",
+        "scroll-padding-block-end"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "mask-repeat",
+      "syntax": "<repeat-style>#",
+      "computed": [
+        "consistsOfTwoDimensionKeywords"
+      ],
+      "initial": "repeat",
+      "inherited": false
+    },
+    {
+      "name": "place-items",
+      "syntax": "<'align-items'> <'justify-items'>?",
+      "computed": [
+        "align-items",
+        "justify-items"
+      ],
+      "initial": [
+        "align-items",
+        "justify-items"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "hyphens",
+      "syntax": "none | manual | auto",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "manual",
+      "inherited": true
+    },
+    {
+      "name": "border-block-end",
+      "syntax": "<line-width> || <line-style> || <color>",
+      "computed": [
+        "border-top-width",
+        "border-top-style",
+        "border-top-color"
+      ],
+      "initial": [
+        "border-top-width",
+        "border-top-style",
+        "border-top-color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "rest-after",
+      "syntax": "<time [0s,∞]> | none | x-weak | weak | medium | strong | x-strong",
+      "computed": [],
+      "initial": "none",
+      "inherited": false
+    },
+    {
+      "name": "stroke-dashadjust",
+      "syntax": "none | [stretch | compress] [dashes | gaps]?",
+      "computed": [],
+      "initial": "none",
+      "inherited": true
+    },
+    {
+      "name": "forced-color-adjust",
+      "syntax": "auto | none | preserve-parent-color",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "auto",
+      "inherited": true
+    },
+    {
+      "name": "font-variant",
+      "syntax": "normal | none | [ [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name>#) || character-variant(<feature-value-name>#) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) ] || [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] || [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]",
+      "computed": [
+        "asSpecified"
+      ],
+      "initial": "normal",
+      "inherited": true
+    },
+    {
+      "name": "margin-top",
+      "syntax": "<length-percentage> | auto",
+      "computed": [
+        "percentageAsSpecifiedOrAbsoluteLength"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "gap",
+      "syntax": "<'row-gap'> <'column-gap'>?",
+      "computed": [
+        "row-gap",
+        "column-gap"
+      ],
+      "initial": [
+        "row-gap",
+        "column-gap"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "border-end-end-radius",
+      "syntax": "<length-percentage [0,∞]>{1,2}",
+      "computed": [
+        "twoAbsoluteLengthOrPercentages"
+      ],
+      "initial": "0",
+      "inherited": false
+    },
+    {
+      "name": "background",
+      "syntax": "<bg-layer>#? , <final-bg-layer>",
+      "computed": [
+        "background-image",
+        "background-position",
+        "background-size",
+        "background-repeat",
+        "background-origin",
+        "background-clip",
+        "background-attachment",
+        "background-color"
+      ],
+      "initial": [
+        "background-image",
+        "background-position",
+        "background-size",
+        "background-repeat",
+        "background-origin",
+        "background-clip",
+        "background-attachment",
+        "background-color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "border",
+      "syntax": "<line-width> || <line-style> || <color>",
+      "computed": [
+        "border-width",
+        "border-style",
+        "border-color"
+      ],
+      "initial": [
+        "border-width",
+        "border-style",
+        "border-color"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "border-inline-end-color",
+      "syntax": "<color> | <image-1D>",
+      "computed": [
+        "computedColor"
+      ],
+      "initial": "currentcolor",
+      "inherited": false
+    },
+    {
+      "name": "-webkit-flex-direction",
+      "syntax": "",
+      "computed": [],
+      "initial": "",
+      "inherited": false
+    },
+    {
+      "name": "scroll-margin-block",
+      "syntax": "<length>{1,2}",
+      "computed": [
+        "scroll-margin-block-start",
+        "scroll-margin-block-end"
+      ],
+      "initial": [
+        "scroll-margin-block-start",
+        "scroll-margin-block-end"
+      ],
+      "inherited": false
+    },
+    {
+      "name": "accent-color",
+      "syntax": "auto | <color>",
+      "computed": [
+        "asAutoOrColor"
+      ],
+      "initial": "auto",
+      "inherited": true
+    }
+  ],
+  "values": [
+    {
+      "name": "<basic-shape-rect>",
+      "syntax": "<inset()> | <rect()> | <xywh()>"
+    },
+    {
+      "name": "<shape-box>",
+      "syntax": "<visual-box> | margin-box"
+    },
+    {
+      "name": "drop-shadow()",
+      "syntax": "drop-shadow( [ <color>? && <length>{2,3} ] )"
+    },
+    {
+      "name": "<try-size>",
+      "syntax": "most-width | most-height | most-block-size | most-inline-size"
+    },
+    {
+      "name": "<color-interpolation-method>",
+      "syntax": "in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]"
+    },
+    {
+      "name": "<color-stop-list>",
+      "syntax": "<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?"
+    },
+    {
+      "name": "<function-name>",
+      "syntax": "<dashed-ident>"
+    },
+    {
+      "name": "<reversed-counter-name>",
+      "syntax": "reversed( <counter-name> )"
+    },
+    {
+      "name": "<color-font-tech>",
+      "syntax": "[color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]"
+    },
+    {
+      "name": "<mask-source>",
+      "syntax": "<url>"
+    },
+    {
+      "name": "atan()",
+      "syntax": "atan( <calc-sum> )"
+    },
+    {
+      "name": "<counter>",
+      "syntax": "<counter()> | <counters()>"
+    },
+    {
+      "name": "snap-inline()",
+      "syntax": "snap-inline( <length> , [ left | right | near ]? )"
+    },
+    {
+      "name": "<blend-mode>",
+      "syntax": "normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity"
+    },
+    {
+      "name": "<custom-selector>",
+      "syntax": "<custom-arg>? : <extension-name> [ ( <custom-arg>+#? ) ]? ;"
+    },
+    {
+      "name": "<pseudo-element-selector>",
+      "syntax": "':' <pseudo-class-selector> | <legacy-pseudo-element-selector>"
+    },
+    {
+      "name": "<frequency-percentage>",
+      "syntax": "[ <frequency> | <percentage> ]"
+    },
+    {
+      "name": "rgba()",
+      "syntax": "[ <legacy-rgba-syntax> | <modern-rgba-syntax> ]"
+    },
+    {
+      "name": "hsla()",
+      "syntax": "[ <legacy-hsla-syntax> | <modern-hsla-syntax> ]"
+    },
+    {
+      "name": "sepia()",
+      "syntax": "sepia( [ <number> | <percentage> ]? )"
+    },
+    {
+      "name": "<font-tech>",
+      "syntax": "[<font-features-tech> | <color-font-tech> | variations | palettes | incremental ]"
+    },
+    {
+      "name": "<single-animation-iteration-count>",
+      "syntax": "infinite | <number [0,∞]>"
+    },
+    {
+      "name": "<single-animation-play-state>",
+      "syntax": "running | paused"
+    },
+    {
+      "name": "target-counter()",
+      "syntax": "target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )"
+    },
+    {
+      "name": "rotate()",
+      "syntax": "rotate( [ <angle> | <zero> ] )"
+    },
+    {
+      "name": "<compat-auto>",
+      "syntax": "searchfield | textarea | checkbox | radio | menulist | listbox | meter | progress-bar | button"
+    },
+    {
+      "name": "<composite-mode>",
+      "syntax": "clear | copy | source-over | destination-over | source-in | destination-in | source-out | destination-out | source-atop | destination-atop | xor | lighter | plus-darker | plus-lighter"
+    },
+    {
+      "name": "mod()",
+      "syntax": "mod( <calc-sum>, <calc-sum> )"
+    },
+    {
+      "name": "<wq-name>",
+      "syntax": "<ns-prefix>? <ident-token>"
+    },
+    {
+      "name": "<fixed-size>",
+      "syntax": "<fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )"
+    },
+    {
+      "name": "<position-area>",
+      "syntax": "[ [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | x-self-start | x-self-end | span-x-self-start | span-x-self-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | y-self-start | y-self-end | span-y-self-start | span-y-self-end | span-all ] | [ block-start | center | block-end | span-block-start | span-block-end | span-all ] || [ inline-start | center | inline-end | span-inline-start | span-inline-end | span-all ] | [ self-block-start | center | self-block-end | span-self-block-start | span-self-block-end | span-all ] || [ self-inline-start | center | self-inline-end | span-self-inline-start | span-self-inline-end | span-all ] | [ start | center | end | span-start | span-end | span-all ]{1,2} | [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2} ]"
+    },
+    {
+      "name": "<display-outside>",
+      "syntax": "block | inline | run-in"
+    },
+    {
+      "name": "<simple-selector-list>",
+      "syntax": "<simple-selector>#"
+    },
+    {
+      "name": "<ratio>",
+      "syntax": "<number [0,∞]> [ / <number [0,∞]> ]?"
+    },
+    {
+      "name": "min()",
+      "syntax": "min( <calc-sum># )"
+    },
+    {
+      "name": "<legacy-rgba-syntax>",
+      "syntax": "rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )"
+    },
+    {
+      "name": "<side-or-corner>",
+      "syntax": "[left | right] || [top | bottom]"
+    },
+    {
+      "name": "<contextual-alt-values>",
+      "syntax": "[ contextual | no-contextual ]"
+    },
+    {
+      "name": "<step-position>",
+      "syntax": "jump-start | jump-end | jump-none | jump-both | start | end"
+    },
+    {
+      "name": "<single-animation-fill-mode>",
+      "syntax": "none | forwards | backwards | both"
+    },
+    {
+      "name": "symbols()",
+      "syntax": "symbols( <symbols-type>? [ <string> | <image> ]+ )"
+    },
+    {
+      "name": "<supports-in-parens>",
+      "syntax": "( <supports-condition> ) | <supports-feature> | <general-enclosed>"
+    },
+    {
+      "name": "<compat-special>",
+      "syntax": "textfield | menulist-button"
+    },
+    {
+      "name": "view()",
+      "syntax": "view( [ <axis> || <'view-timeline-inset'> ]? )"
+    },
+    {
+      "name": "<display-listitem>",
+      "syntax": "<display-outside>? && [ flow | flow-root ]? && list-item"
+    },
+    {
+      "name": "fit-content()",
+      "syntax": "fit-content( <length-percentage> )"
+    },
+    {
+      "name": "<relative-real-selector-list>",
+      "syntax": "<relative-real-selector>#"
+    },
+    {
+      "name": "<track-list>",
+      "syntax": "[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?"
+    },
+    {
+      "name": "<auto-track-list>",
+      "syntax": "[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?"
+    },
+    {
+      "name": "<symbol>",
+      "syntax": "<string> | <image> | <custom-ident>"
+    },
+    {
+      "name": "scale()",
+      "syntax": "scale( <number> , <number>? )"
+    },
+    {
+      "name": "<shadow>",
+      "syntax": "<color>? && [<length>{2} <length [0,∞]>? <length>?] && inset?"
+    },
+    {
+      "name": "<link-param>",
+      "syntax": "param( <custom-property-name> <declaration-value>? )"
+    },
+    {
+      "name": "<compound-selector-list>",
+      "syntax": "<compound-selector>#"
+    },
+    {
+      "name": "<radial-size>",
+      "syntax": "<radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}"
+    },
+    {
+      "name": "<font-features-tech>",
+      "syntax": "[features-opentype | features-aat | features-graphite]"
+    },
+    {
+      "name": "running()",
+      "syntax": "running( <custom-ident> )"
+    },
+    {
+      "name": "<keyframe-selector>",
+      "syntax": "from | to | <percentage [0,100]>"
+    },
+    {
+      "name": "<linear-gradient-syntax>",
+      "syntax": "[ <angle> | to <side-or-corner> ]? , <color-stop-list>"
+    },
+    {
+      "name": "<anchor-size>",
+      "syntax": "width | height | block | inline | self-block | self-inline"
+    },
+    {
+      "name": "<linear-stop>",
+      "syntax": "<number> && <linear-stop-length>?"
+    },
+    {
+      "name": "<css-type>",
+      "syntax": "<syntax-component> | <type()>"
+    },
+    {
+      "name": "<target>",
+      "syntax": "<target-counter()> | <target-counters()> | <target-text()>"
+    },
+    {
+      "name": "<easing-function>",
+      "syntax": "linear | <linear-easing-function> | <cubic-bezier-easing-function> | <step-easing-function>"
+    },
+    {
+      "name": "<legacy-hsla-syntax>",
+      "syntax": "hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )"
+    },
+    {
+      "name": "<modern-hsla-syntax>",
+      "syntax": "hsla( [<hue> | none] [<percentage> | <number> | none] [<percentage> | <number> | none] [ / [<alpha-value> | none] ]? )"
+    },
+    {
+      "name": "blur()",
+      "syntax": "blur( <length>? )"
+    },
+    {
+      "name": "filter()",
+      "syntax": "filter( [ <image> | <string> ], <filter-value-list> )"
+    },
+    {
+      "name": "<pt-name-selector>",
+      "syntax": "'*' | <custom-ident>"
+    },
+    {
+      "name": "<single-transition-property>",
+      "syntax": "all | <custom-ident>"
+    },
+    {
+      "name": "<visual-box>",
+      "syntax": "content-box | padding-box | border-box"
+    },
+    {
+      "name": "<length-percentage>",
+      "syntax": "[ <length> | <percentage> ]"
+    },
+    {
+      "name": "<spread-shadow>",
+      "syntax": "<'box-shadow-color'>? && [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] && <'box-shadow-position'>?"
+    },
+    {
+      "name": "<predefined-rgb-params>",
+      "syntax": "<predefined-rgb> [ <number> | <percentage> | none ]{3}"
+    },
+    {
+      "name": "<symbols-type>",
+      "syntax": "cyclic | numeric | alphabetic | symbolic | fixed"
+    },
+    {
+      "name": "<scroller>",
+      "syntax": "root | nearest | self"
+    },
+    {
+      "name": "<generic-complete>",
+      "syntax": "serif | sans-serif | system-ui | cursive | fantasy | math | monospace"
+    },
+    {
+      "name": "<east-asian-width-values>",
+      "syntax": "[ full-width | proportional-width ]"
+    },
+    {
+      "name": "<geometry-box>",
+      "syntax": "<shape-box> | fill-box | stroke-box | view-box"
+    },
+    {
+      "name": "<media-not>",
+      "syntax": "not <media-in-parens>"
+    },
+    {
+      "name": "<opacity-value>",
+      "syntax": "<number> | <percentage>"
+    },
+    {
+      "name": "<hue>",
+      "syntax": "<number> | <angle>"
+    },
+    {
+      "name": "tan()",
+      "syntax": "tan( <calc-sum> )"
+    },
+    {
+      "name": "<boolean>",
+      "syntax": "<bool-not> | <bool-in-parens> [ <bool-and>* | <bool-or>* ]"
+    },
+    {
+      "name": "snap-block()",
+      "syntax": "snap-block( <length> , [ start | end | near ]? )"
+    },
+    {
+      "name": "<paint>",
+      "syntax": "none | <image> | <svg-paint>"
+    },
+    {
+      "name": "<generic-incomplete>",
+      "syntax": "ui-serif | ui-sans-serif | ui-monospace | ui-rounded"
+    },
+    {
+      "name": "exp()",
+      "syntax": "exp( <calc-sum> )"
+    },
+    {
+      "name": "<pseudo-page>",
+      "syntax": "':' [ left | right | first | blank ]"
+    },
+    {
+      "name": "<track-size>",
+      "syntax": "<track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage [0,∞]> )"
+    },
+    {
+      "name": "<hue-interpolation-method>",
+      "syntax": "[ shorter | longer | increasing | decreasing ] hue"
+    },
+    {
+      "name": "<predefined-rectangular>",
+      "syntax": "jzazbz | ictcp"
+    },
+    {
+      "name": "contrast()",
+      "syntax": "contrast( [ <number> | <percentage> ]? )"
+    },
+    {
+      "name": "<svg-paint>",
+      "syntax": "child | child( <integer> )"
+    },
+    {
+      "name": "<single-animation>",
+      "syntax": "<time [0s,∞]> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]"
+    },
+    {
+      "name": "<media-query>",
+      "syntax": "<media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?"
+    },
+    {
+      "name": "<display-legacy>",
+      "syntax": "inline-block | inline-table | inline-flex | inline-grid"
+    },
+    {
+      "name": "<complex-real-selector>",
+      "syntax": "<compound-selector> [ <combinator>? <compound-selector> ]*"
+    },
+    {
+      "name": "<generic-voice>",
+      "syntax": "[<age>? <gender> <integer>?]"
+    },
+    {
+      "name": "<points>",
+      "syntax": "[ <number>+ ]#"
+    },
+    {
+      "name": "xywh()",
+      "syntax": "xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )"
+    },
+    {
+      "name": "<historical-lig-values>",
+      "syntax": "[ historical-ligatures | no-historical-ligatures ]"
+    },
+    {
+      "name": "<isolation-mode>",
+      "syntax": "auto | isolate"
+    },
+    {
+      "name": "<bg-size>",
+      "syntax": "[ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain"
+    },
+    {
+      "name": "<bool-not>",
+      "syntax": "not <bool-in-parens>"
+    },
+    {
+      "name": "<color-base>",
+      "syntax": "<hex-color> | <color-function> | <named-color> | transparent"
+    },
+    {
+      "name": "<image>",
+      "syntax": "<url> | <gradient>"
+    },
+    {
+      "name": "skew()",
+      "syntax": "skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )"
+    },
+    {
+      "name": "<mf-comparison>",
+      "syntax": "<mf-lt> | <mf-gt> | <mf-eq>"
+    },
+    {
+      "name": "asin()",
+      "syntax": "asin( <calc-sum> )"
+    },
+    {
+      "name": "paint()",
+      "syntax": "paint( <ident>, <declaration-value>? )"
+    },
+    {
+      "name": "<font-format>",
+      "syntax": "[<string> | collection | embedded-opentype | opentype | svg | truetype | woff | woff2 ]"
+    },
+    {
+      "name": "<pseudo-class-selector>",
+      "syntax": "':' <ident-token> | ':' <function-token> <any-value> ')'"
+    },
+    {
+      "name": "minmax()",
+      "syntax": "minmax(min, max)"
+    },
+    {
+      "name": "sign()",
+      "syntax": "sign( <calc-sum> )"
+    },
+    {
+      "name": "<legacy-rgb-syntax>",
+      "syntax": "rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )"
+    },
+    {
+      "name": "counters()",
+      "syntax": "counters( <counter-name>, <string>, <counter-style>? )"
+    },
+    {
+      "name": "<numeric-spacing-values>",
+      "syntax": "[ proportional-nums | tabular-nums ]"
+    },
+    {
+      "name": "<display-inside>",
+      "syntax": "flow | flow-root | table | flex | grid | ruby"
+    },
+    {
+      "name": "sqrt()",
+      "syntax": "sqrt( <calc-sum> )"
+    },
+    {
+      "name": "<dasharray>",
+      "syntax": "[ [ <length-percentage> | <number> ]+ ]#"
+    },
+    {
+      "name": "<an+b>",
+      "syntax": "odd | even | <integer> | <n-dimension> | '+'? n | -n | <ndashdigit-dimension> | '+'? <ndashdigit-ident> | <dashndashdigit-ident> | <n-dimension> <signed-integer> | '+'? n <signed-integer> | -n <signed-integer> | <ndash-dimension> <signless-integer> | '+'? n- <signless-integer> | -n- <signless-integer> | <n-dimension> ['+' | '-'] <signless-integer> | '+'? n ['+' | '-'] <signless-integer> | -n ['+' | '-'] <signless-integer>"
+    },
+    {
+      "name": "opacity()",
+      "syntax": "opacity( [ <number> | <percentage> ]? )"
+    },
+    {
+      "name": "<attachment>",
+      "syntax": "scroll | fixed | local"
+    },
+    {
+      "name": "<subclass-selector>",
+      "syntax": "<id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>"
+    },
+    {
+      "name": "atan2()",
+      "syntax": "atan2( <calc-sum>, <calc-sum> )"
+    },
+    {
+      "name": "saturate()",
+      "syntax": "saturate( [ <number> | <percentage> ]? )"
+    },
+    {
+      "name": "<filter-function>",
+      "syntax": "<blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>"
+    },
+    {
+      "name": "<number-optional-number>",
+      "syntax": "<number> <number>?"
+    },
+    {
+      "name": "<discretionary-lig-values>",
+      "syntax": "[ discretionary-ligatures | no-discretionary-ligatures ]"
+    },
+    {
+      "name": "<keyframe-block>",
+      "syntax": "<keyframe-selector># { <declaration-list> }"
+    },
+    {
+      "name": "<mask-layer>",
+      "syntax": "<mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>"
+    },
+    {
+      "name": "<grid-line>",
+      "syntax": "auto | <custom-ident> | [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] | [ span && [ <integer [1,∞]> || <custom-ident> ] ]"
+    },
+    {
+      "name": "<fixed-repeat>",
+      "syntax": "repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )"
+    },
+    {
+      "name": "lab()",
+      "syntax": "lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )"
+    },
+    {
+      "name": "<page-selector-list>",
+      "syntax": "<page-selector>#"
+    },
+    {
+      "name": "hue-rotate()",
+      "syntax": "hue-rotate( [ <angle> | <zero> ]? )"
+    },
+    {
+      "name": "<anchor-element>",
+      "syntax": "<dashed-ident>"
+    },
+    {
+      "name": "linear()",
+      "syntax": "linear(<linear-stop-list>)"
+    },
+    {
+      "name": "<bg-position>",
+      "syntax": "[ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]"
+    },
+    {
+      "name": "<source-size-list>",
+      "syntax": "<source-size>#? , <source-size-value>"
+    },
+    {
+      "name": "scaleX()",
+      "syntax": "scaleX( <number> )"
+    },
+    {
+      "name": "<transform-list>",
+      "syntax": "<transform-function>+"
+    },
+    {
+      "name": "<media-feature>",
+      "syntax": "[ <mf-plain> | <mf-boolean> | <mf-range> ]"
+    },
+    {
+      "name": "src()",
+      "syntax": "src( <string> <url-modifier>* )"
+    },
+    {
+      "name": "<explicit-track-list>",
+      "syntax": "[ <line-names>? <track-size> ]+ <line-names>?"
+    },
+    {
+      "name": "<inflexible-breadth>",
+      "syntax": "<length-percentage [0,∞]> | min-content | max-content | auto"
+    },
+    {
+      "name": "<step-easing-function>",
+      "syntax": "step-start | step-end | steps(<integer> , <step-position>?)"
+    },
+    {
+      "name": "<id-selector>",
+      "syntax": "<hash-token>"
+    },
+    {
+      "name": "<auto-repeat>",
+      "syntax": "repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )"
+    },
+    {
+      "name": "target-text()",
+      "syntax": "target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )"
+    },
+    {
+      "name": "abs()",
+      "syntax": "abs( <calc-sum> )"
+    },
+    {
+      "name": "<calc-value>",
+      "syntax": "<number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )"
+    },
+    {
+      "name": "<color-function>",
+      "syntax": "<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <oklab()> | <oklch()> | <color()>"
+    },
+    {
+      "name": "<source-size-value>",
+      "syntax": "<length> | auto"
+    },
+    {
+      "name": "<self-position>",
+      "syntax": "center | start | end | self-start | self-end | flex-start | flex-end"
+    },
+    {
+      "name": "<offset-path>",
+      "syntax": "<ray()> | <url> | <basic-shape>"
+    },
+    {
+      "name": "translate()",
+      "syntax": "translate( <length-percentage> , <length-percentage>? )"
+    },
+    {
+      "name": "<media-or>",
+      "syntax": "or <media-in-parens>"
+    },
+    {
+      "name": "<xyz>",
+      "syntax": "xyz | xyz-d50 | xyz-d65"
+    },
+    {
+      "name": "clamp()",
+      "syntax": "clamp( [ <calc-sum> | none ], <calc-sum>, [ <calc-sum> | none ] )"
+    },
+    {
+      "name": "<general-enclosed>",
+      "syntax": "[ <function-token> <any-value>? ) ] | [ ( <any-value>? ) ]"
+    },
+    {
+      "name": "<repeat-style>",
+      "syntax": "repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}"
+    },
+    {
+      "name": "<single-animation-direction>",
+      "syntax": "normal | reverse | alternate | alternate-reverse"
+    },
+    {
+      "name": "<bool-and>",
+      "syntax": "and <bool-in-parens>"
+    },
+    {
+      "name": "target-counters()",
+      "syntax": "target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )"
+    },
+    {
+      "name": "<legacy-pseudo-element-selector>",
+      "syntax": "':' [before | after | first-line | first-letter]"
+    },
+    {
+      "name": "max()",
+      "syntax": "max( <calc-sum># )"
+    },
+    {
+      "name": "<class-selector>",
+      "syntax": "'.' <ident-token>"
+    },
+    {
+      "name": "<mf-range>",
+      "syntax": "<mf-name> <mf-comparison> <mf-value> | <mf-value> <mf-comparison> <mf-name> | <mf-value> <mf-lt> <mf-name> <mf-lt> <mf-value> | <mf-value> <mf-gt> <mf-name> <mf-gt> <mf-value>"
+    },
+    {
+      "name": "<calc-keyword>",
+      "syntax": "e | pi | infinity | -infinity | NaN"
+    },
+    {
+      "name": "<modern-rgba-syntax>",
+      "syntax": "rgba( [ <number> | <percentage> | none]{3} [ / [<alpha-value> | none] ]? )"
+    },
+    {
+      "name": "lch()",
+      "syntax": "lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )"
+    },
+    {
+      "name": "oklch()",
+      "syntax": "oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )"
+    },
+    {
+      "name": "<linear-easing-function>",
+      "syntax": "linear(<linear-stop-list>)"
+    },
+    {
+      "name": "var()",
+      "syntax": "var( <custom-property-name> , <declaration-value>? )"
+    },
+    {
+      "name": "<marker-ref>",
+      "syntax": "<url>"
+    },
+    {
+      "name": "<feature-value-name>",
+      "syntax": "<ident>"
+    },
+    {
+      "name": "skewX()",
+      "syntax": "skewX( [ <angle> | <zero> ] )"
+    },
+    {
+      "name": "<predefined-polar-params>",
+      "syntax": "jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none]"
+    },
+    {
+      "name": "<linear-color-hint>",
+      "syntax": "<length-percentage>"
+    },
+    {
+      "name": "<predefined-rectangular-params>",
+      "syntax": "<predefined-rectangular> [ <number> | <percentage> | none ]{3}"
+    },
+    {
+      "name": "<quote>",
+      "syntax": "open-quote | close-quote | no-open-quote | no-close-quote"
+    },
+    {
+      "name": "<leader-type>",
+      "syntax": "dotted | solid | space | <string>"
+    },
+    {
+      "name": "<function-parameter-list>",
+      "syntax": "<function-parameter>#"
+    },
+    {
+      "name": "<radial-extent>",
+      "syntax": "closest-corner | closest-side | farthest-corner | farthest-side"
+    },
+    {
+      "name": "<numeric-figure-values>",
+      "syntax": "[ lining-nums | oldstyle-nums ]"
+    },
+    {
+      "name": "<bg-image>",
+      "syntax": "<image> | none"
+    },
+    {
+      "name": "ray()",
+      "syntax": "ray( <angle> && <ray-size>? && contain? && [at <position>]? )"
+    },
+    {
+      "name": "<east-asian-variant-values>",
+      "syntax": "[ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]"
+    },
+    {
+      "name": "rgb()",
+      "syntax": "[ <legacy-rgb-syntax> | <modern-rgb-syntax> ]"
+    },
+    {
+      "name": "<syntax-combinator>",
+      "syntax": "'|'"
+    },
+    {
+      "name": "<namespace-prefix>",
+      "syntax": "<ident>"
+    },
+    {
+      "name": "<page-selector>",
+      "syntax": "[ <ident-token>? <pseudo-page>* ]!"
+    },
+    {
+      "name": "cubic-bezier()",
+      "syntax": "cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)"
+    },
+    {
+      "name": "<complex-selector-unit>",
+      "syntax": "[ <compound-selector>? <pseudo-compound-selector>* ]!"
+    },
+    {
+      "name": "<media-condition-without-or>",
+      "syntax": "<media-not> | <media-in-parens> <media-and>*"
+    },
+    {
+      "name": "translateX()",
+      "syntax": "translateX( <length-percentage> )"
+    },
+    {
+      "name": "scaleY()",
+      "syntax": "scaleY( <number> )"
+    },
+    {
+      "name": "scroll()",
+      "syntax": "scroll( [ <scroller> || <axis> ]? )"
+    },
+    {
+      "name": "<font-variant-css2>",
+      "syntax": "[normal | small-caps]"
+    },
+    {
+      "name": "env()",
+      "syntax": "env( <custom-ident> <integer [0,∞]>*, <declaration-value>? )"
+    },
+    {
+      "name": "<selector-list>",
+      "syntax": "<complex-selector-list>"
+    },
+    {
+      "name": "<legacy-hsl-syntax>",
+      "syntax": "hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )"
+    },
+    {
+      "name": "<mask-reference>",
+      "syntax": "none | <image> | <mask-source>"
+    },
+    {
+      "name": "<custom-arg>",
+      "syntax": "$ <ident-token> ;"
+    },
+    {
+      "name": "<gradient>",
+      "syntax": "<linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>"
+    },
+    {
+      "name": "radial-gradient()",
+      "syntax": "radial-gradient( [ <radial-gradient-syntax> ] )"
+    },
+    {
+      "name": "brightness()",
+      "syntax": "brightness( [ <number> | <percentage> ]? )"
+    },
+    {
+      "name": "<family-name>",
+      "syntax": "<string> | <custom-ident>+"
+    },
+    {
+      "name": "steps()",
+      "syntax": "steps(<integer>, <step-position>?)"
+    },
+    {
+      "name": "<function-parameter>",
+      "syntax": "<custom-property-name> <css-type>? [ : <declaration-value> ]?"
+    },
+    {
+      "name": "<mq-boolean>",
+      "syntax": "<integer [0,1]>"
+    },
+    {
+      "name": "hypot()",
+      "syntax": "hypot( <calc-sum># )"
+    },
+    {
+      "name": "oklab()",
+      "syntax": "oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )"
+    },
+    {
+      "name": "<counter-style>",
+      "syntax": "<counter-style-name> | <symbols()>"
+    },
+    {
+      "name": "<supports-feature>",
+      "syntax": "<supports-decl>"
+    },
+    {
+      "name": "<try-tactic>",
+      "syntax": "flip-block || flip-inline || flip-start"
+    },
+    {
+      "name": "<line-width>",
+      "syntax": "<length [0,∞]> | thin | medium | thick"
+    },
+    {
+      "name": "<media-type>",
+      "syntax": "<ident>"
+    },
+    {
+      "name": "matrix()",
+      "syntax": "matrix( <number>#{6} )"
+    },
+    {
+      "name": "palette-mix()",
+      "syntax": "palette-mix(<color-interpolation-method> , [ [normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2})"
+    },
+    {
+      "name": "<complex-real-selector-list>",
+      "syntax": "<complex-real-selector>#"
+    },
+    {
+      "name": "<simple-selector>",
+      "syntax": "<type-selector> | <subclass-selector>"
+    },
+    {
+      "name": "<mf-boolean>",
+      "syntax": "<mf-name>"
+    },
+    {
+      "name": "<rectangular-color-space>",
+      "syntax": "srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65"
+    },
+    {
+      "name": "dynamic-range-limit-mix()",
+      "syntax": "dynamic-range-limit-mix( [ <ident> && <percentage [0,100]>? ]#{2})"
+    },
+    {
+      "name": "<content-replacement>",
+      "syntax": "<image>"
+    },
+    {
+      "name": "<display-internal>",
+      "syntax": "table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container"
+    },
+    {
+      "name": "<display-box>",
+      "syntax": "contents | none"
+    },
+    {
+      "name": "anchor()",
+      "syntax": "anchor( <anchor-element>? && <anchor-side>, <length-percentage>? )"
+    },
+    {
+      "name": "string()",
+      "syntax": "string( <custom-ident> , [ first | start | last | first-except ]? )"
+    },
+    {
+      "name": "<syntax-component-name>",
+      "syntax": "'<' <syntax-type> '>' | <custom-ident>"
+    },
+    {
+      "name": "round()",
+      "syntax": "round( <rounding-strategy>?, <calc-sum>, <calc-sum>? )"
+    },
+    {
+      "name": "rem()",
+      "syntax": "rem( <calc-sum>, <calc-sum> )"
+    },
+    {
+      "name": "sin()",
+      "syntax": "sin( <calc-sum> )"
+    },
+    {
+      "name": "<boolean-without-or>",
+      "syntax": "<bool-not> | <bool-in-parens> <bool-and>*"
+    },
+    {
+      "name": "<content-distribution>",
+      "syntax": "space-between | space-around | space-evenly | stretch"
+    },
+    {
+      "name": "<mf-name>",
+      "syntax": "<ident>"
+    },
+    {
+      "name": "ellipse()",
+      "syntax": "ellipse( <radial-size>? [ at <position> ]? )"
+    },
+    {
+      "name": "rect()",
+      "syntax": "rect( <top>, <right>, <bottom>, <left> )"
+    },
+    {
+      "name": "<complex-selector-list>",
+      "syntax": "<complex-selector>#"
+    },
+    {
+      "name": "<type()>",
+      "syntax": "type( <syntax> )"
+    },
+    {
+      "name": "counter()",
+      "syntax": "counter( <counter-name>, <counter-style>? )"
+    },
+    {
+      "name": "anchor-size()",
+      "syntax": "anchor-size( [ <anchor-element> || <anchor-size> ]? , <length-percentage>? )"
+    },
+    {
+      "name": "skewY()",
+      "syntax": "skewY( [ <angle> | <zero> ] )"
+    },
+    {
+      "name": "<content-position>",
+      "syntax": "center | start | end | flex-start | flex-end"
+    },
+    {
+      "name": "<custom-params>",
+      "syntax": "<dashed-ident> [ <number> | <percentage> | none ]+"
+    },
+    {
+      "name": "<content-list>",
+      "syntax": "[ <string> | <counter()> | <counters()> | <content()> | <attr()> ]+"
+    },
+    {
+      "name": "<filter-value-list>",
+      "syntax": "[ <filter-function> | <url> ]+"
+    },
+    {
+      "name": "<font-src>",
+      "syntax": "<url> [ format(<font-format>)]? [ tech( <font-tech>#)]? | local(<family-name>)"
+    },
+    {
+      "name": "<linear-stop-length>",
+      "syntax": "<percentage>{1,2}"
+    },
+    {
+      "name": "<track-repeat>",
+      "syntax": "repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )"
+    },
+    {
+      "name": "<polar-color-space>",
+      "syntax": "hsl | hwb | lch | oklch"
+    },
+    {
+      "name": "<font-width-css3>",
+      "syntax": "[normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded]"
+    },
+    {
+      "name": "<paint-box>",
+      "syntax": "<visual-box> | fill-box | stroke-box"
+    },
+    {
+      "name": "cos()",
+      "syntax": "cos( <calc-sum> )"
+    },
+    {
+      "name": "<mf-gt>",
+      "syntax": "'>' '='?"
+    },
+    {
+      "name": "<bool-or>",
+      "syntax": "or <bool-in-parens>"
+    },
+    {
+      "name": "<predefined-rgb>",
+      "syntax": "srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | rec2100-pq | rec2100-hlg | rec2100-linear"
+    },
+    {
+      "name": "<overflow-position>",
+      "syntax": "unsafe | safe"
+    },
+    {
+      "name": "<relative-selector-list>",
+      "syntax": "<relative-selector>#"
+    },
+    {
+      "name": "path()",
+      "syntax": "path( <'fill-rule'>? , <string> )"
+    },
+    {
+      "name": "<generic-family>",
+      "syntax": "<generic-script-specific>| <generic-complete> | <generic-incomplete>"
+    },
+    {
+      "name": "<attr-modifier>",
+      "syntax": "i | s"
+    },
+    {
+      "name": "<media-in-parens>",
+      "syntax": "( <media-condition> ) | ( <media-feature> ) | <general-enclosed>"
+    },
+    {
+      "name": "<alpha-value>",
+      "syntax": "<number> | <percentage>"
+    },
+    {
+      "name": "<modern-rgb-syntax>",
+      "syntax": "rgb( [ <number> | <percentage> | none]{3} [ / [<alpha-value> | none] ]? )"
+    },
+    {
+      "name": "<radial-shape>",
+      "syntax": "circle | ellipse"
+    },
+    {
+      "name": "<final-bg-layer>",
+      "syntax": "<bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box> || <'background-color'>"
+    },
+    {
+      "name": "pow()",
+      "syntax": "pow( <calc-sum>, <calc-sum> )"
+    },
+    {
+      "name": "<system-family-name>",
+      "syntax": "caption | icon | menu | message-box | small-caption | status-bar"
+    },
+    {
+      "name": "<complex-selector>",
+      "syntax": "<complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*"
+    },
+    {
+      "name": "<xyz-space>",
+      "syntax": "xyz | xyz-d50 | xyz-d65"
+    },
+    {
+      "name": "polygon()",
+      "syntax": "polygon( <'fill-rule'>? , [<length-percentage> <length-percentage>]# )"
+    },
+    {
+      "name": "<animateable-feature>",
+      "syntax": "scroll-position | contents | <custom-ident>"
+    },
+    {
+      "name": "<layout-box>",
+      "syntax": "<visual-box> | margin-box"
+    },
+    {
+      "name": "<combinator>",
+      "syntax": "'>' | '+' | '~' | [ '|' '|' ]"
+    },
+    {
+      "name": "<track-breadth>",
+      "syntax": "<length-percentage [0,∞]> | <flex [0,∞]> | min-content | max-content | auto"
+    },
+    {
+      "name": "<line-names>",
+      "syntax": "'[' <custom-ident>* ']'"
+    },
+    {
+      "name": "<single-transition>",
+      "syntax": "[ none | <single-transition-property> ] || <time> || <easing-function> || <time>"
+    },
+    {
+      "name": "<numeric-fraction-values>",
+      "syntax": "[ diagonal-fractions | stacked-fractions ]"
+    },
+    {
+      "name": "<cubic-bezier-easing-function>",
+      "syntax": "ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)"
+    },
+    {
+      "name": "<media-and>",
+      "syntax": "and <media-in-parens>"
+    },
+    {
+      "name": "<mf-eq>",
+      "syntax": "'='"
+    },
+    {
+      "name": "<syntax-type>",
+      "syntax": "angle | color | custom-ident | image | integer | length | length-percentage | number | percentage | resolution | string | time | url | transform-function"
+    },
+    {
+      "name": "linear-gradient()",
+      "syntax": "linear-gradient( [ <linear-gradient-syntax> ] )"
+    },
+    {
+      "name": "<attribute-selector>",
+      "syntax": "'[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'"
+    },
+    {
+      "name": "<mf-lt>",
+      "syntax": "'<' '='?"
+    },
+    {
+      "name": "<generic-script-specific>",
+      "syntax": "generic(kai) | generic(fangsong) | generic(nastaliq)"
+    },
+    {
+      "name": "<compound-selector>",
+      "syntax": "[ <type-selector>? <subclass-selector>* ]!"
+    },
+    {
+      "name": "content()",
+      "syntax": "content( [ text | before | after | first-letter | marker ]? )"
+    },
+    {
+      "name": "hwb()",
+      "syntax": "hwb( [<hue> | none] [<percentage> | <number> | none] [<percentage> | <number> | none] [ / [<alpha-value> | none] ]? )"
+    },
+    {
+      "name": "<xyz-params>",
+      "syntax": "<xyz> [ <number> | <percentage> | none ]{3}"
+    },
+    {
+      "name": "<supports-decl>",
+      "syntax": "( <declaration> )"
+    },
+    {
+      "name": "<linear-color-stop>",
+      "syntax": "<color> <length-percentage>?"
+    },
+    {
+      "name": "translateY()",
+      "syntax": "translateY( <length-percentage> )"
+    },
+    {
+      "name": "<type-selector>",
+      "syntax": "<wq-name> | <ns-prefix>? '*'"
+    },
+    {
+      "name": "<angle-percentage>",
+      "syntax": "[ <angle> | <percentage> ]"
+    },
+    {
+      "name": "<modern-hsl-syntax>",
+      "syntax": "hsl( [<hue> | none] [<percentage> | <number> | none] [<percentage> | <number> | none] [ / [<alpha-value> | none] ]? )"
+    },
+    {
+      "name": "<color-space>",
+      "syntax": "<rectangular-color-space> | <polar-color-space>"
+    },
+    {
+      "name": "<text-edge>",
+      "syntax": "[ text | cap | ex | ideographic | ideographic-ink ] [ text | alphabetic | ideographic | ideographic-ink ]?"
+    },
+    {
+      "name": "<function-dependency-list>",
+      "syntax": "<function-parameter>#"
+    },
+    {
+      "name": "<syntax>",
+      "syntax": "'*' | <syntax-component> [ <syntax-combinator> <syntax-component> ]+"
+    },
+    {
+      "name": "<attr-matcher>",
+      "syntax": "[ '~' | '|' | '^' | '$' | '*' ]? '='"
+    },
+    {
+      "name": "<ray-size>",
+      "syntax": "closest-side | closest-corner | farthest-side | farthest-corner | sides"
+    },
+    {
+      "name": "<syntax-component>",
+      "syntax": "<syntax-component-name> <syntax-multiplier>? | '<' transform-list '>'"
+    },
+    {
+      "name": "<opentype-tag>",
+      "syntax": "<string>"
+    },
+    {
+      "name": "<layer-name>",
+      "syntax": "<ident> [ '.' <ident> ]*"
+    },
+    {
+      "name": "<mf-plain>",
+      "syntax": "<mf-name> : <mf-value>"
+    },
+    {
+      "name": "<media-condition>",
+      "syntax": "<media-not> | <media-in-parens> [ <media-and>* | <media-or>* ]"
+    },
+    {
+      "name": "<position>",
+      "syntax": "[ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]"
+    },
+    {
+      "name": "<rounding-strategy>",
+      "syntax": "nearest | up | down | to-zero"
+    },
+    {
+      "name": "<coord-box>",
+      "syntax": "<paint-box> | view-box"
+    },
+    {
+      "name": "<import-conditions>",
+      "syntax": "[ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?"
+    },
+    {
+      "name": "url()",
+      "syntax": "url( <string> <url-modifier>* ) | <url-token>"
+    },
+    {
+      "name": "<fixed-breadth>",
+      "syntax": "<length-percentage [0,∞]>"
+    },
+    {
+      "name": "<color>",
+      "syntax": "<color-base> | currentColor | <system-color>"
+    },
+    {
+      "name": "repeating-linear-gradient()",
+      "syntax": "repeating-linear-gradient( [ <linear-gradient-syntax> ] )"
+    },
+    {
+      "name": "repeating-radial-gradient()",
+      "syntax": "repeating-radial-gradient( [ <radial-gradient-syntax> ] )"
+    },
+    {
+      "name": "inset()",
+      "syntax": "inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )"
+    },
+    {
+      "name": "<keyframes-name>",
+      "syntax": "<custom-ident> | <string>"
+    },
+    {
+      "name": "<ns-prefix>",
+      "syntax": "[ <ident-token> | '*' ]? '|'"
+    },
+    {
+      "name": "<font-weight-absolute>",
+      "syntax": "[normal | bold | <number [1,1000]>]"
+    },
+    {
+      "name": "<common-lig-values>",
+      "syntax": "[ common-ligatures | no-common-ligatures ]"
+    },
+    {
+      "name": "<bool-in-parens>",
+      "syntax": "( <boolean> ) | <bool-test> | <general-enclosed>"
+    },
+    {
+      "name": "<name-repeat>",
+      "syntax": "repeat( [ <integer [1,∞]> | auto-fill ], <line-names>+)"
+    },
+    {
+      "name": "<radial-gradient-syntax>",
+      "syntax": "[ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>"
+    },
+    {
+      "name": "<bg-layer>",
+      "syntax": "<bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box>"
+    },
+    {
+      "name": "acos()",
+      "syntax": "acos( <calc-sum> )"
+    },
+    {
+      "name": "<url>",
+      "syntax": "<url()> | <src()>"
+    },
+    {
+      "name": "log()",
+      "syntax": "log( <calc-sum>, <calc-sum>? )"
+    },
+    {
+      "name": "<calc-sum>",
+      "syntax": "<calc-product> [ [ '+' | '-' ] <calc-product> ]*"
+    },
+    {
+      "name": "<syntax-multiplier>",
+      "syntax": "[ '#' | '+' ]"
+    },
+    {
+      "name": "circle()",
+      "syntax": "circle( <radial-size>? [ at <position> ]? )"
+    },
+    {
+      "name": "grayscale()",
+      "syntax": "grayscale( [ <number> | <percentage> ]? )"
+    },
+    {
+      "name": "<masking-mode>",
+      "syntax": "alpha | luminance | match-source"
+    },
+    {
+      "name": "<mf-value>",
+      "syntax": "<number> | <dimension> | <ident> | <ratio>"
+    },
+    {
+      "name": "<anchor-side>",
+      "syntax": "inside | outside | top | left | right | bottom | start | end | self-start | self-end | <percentage> | center"
+    },
+    {
+      "name": "<time-percentage>",
+      "syntax": "[ <time> | <percentage> ]"
+    },
+    {
+      "name": "<calc-product>",
+      "syntax": "<calc-value> [ [ '*' | '/' ] <calc-value> ]*"
+    },
+    {
+      "name": "<colorspace-params>",
+      "syntax": "[<custom-params> | <predefined-rgb-params> | <predefined-polar-params> | <predefined-rectangular-params> | <xyz-params>]"
+    },
+    {
+      "name": "<supports-condition>",
+      "syntax": "not <supports-in-parens> | <supports-in-parens> [ and <supports-in-parens> ]* | <supports-in-parens> [ or <supports-in-parens> ]*"
+    },
+    {
+      "name": "<relative-selector>",
+      "syntax": "<combinator>? <complex-selector>"
+    },
+    {
+      "name": "<relative-real-selector>",
+      "syntax": "<combinator>? <complex-real-selector>"
+    },
+    {
+      "name": "<baseline-position>",
+      "syntax": "[ first | last ]? && baseline"
+    },
+    {
+      "name": "<pseudo-compound-selector>",
+      "syntax": "<pseudo-element-selector> <pseudo-class-selector>*"
+    },
+    {
+      "name": "<line-name-list>",
+      "syntax": "[ <line-names> | <name-repeat> ]+"
+    },
+    {
+      "name": "hsl()",
+      "syntax": "[ <legacy-hsl-syntax> | <modern-hsl-syntax> ]"
+    },
+    {
+      "name": "leader()",
+      "syntax": "leader( <leader-type> )"
+    },
+    {
+      "name": "<axis>",
+      "syntax": "block | inline | x | y"
+    },
+    {
+      "name": "<line-style>",
+      "syntax": "none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset"
+    },
+    {
+      "name": "<clip-source>",
+      "syntax": "<url>"
+    },
+    {
+      "name": "calc()",
+      "syntax": "calc( <calc-sum> )"
+    },
+    {
+      "name": "invert()",
+      "syntax": "invert( [ <number> | <percentage> ]? )"
+    },
+    {
+      "name": "color()",
+      "syntax": "color( [from <color>]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )"
+    },
+    {
+      "name": "<source-size>",
+      "syntax": "<media-condition> <source-size-value> | auto"
+    },
+    {
+      "name": "<linear-stop-list>",
+      "syntax": "[ <linear-stop> ]#"
+    },
+    {
+      "name": "<compositing-operator>",
+      "syntax": "add | subtract | intersect | exclude"
+    }
+  ],
+  "atrules": [
+    {
+      "name": "@layer",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@bottom-right",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@bottom-right-corner",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@page",
+      "descriptors": [
+        {
+          "name": "size",
+          "syntax": "<length [0,∞]>{1,2} | auto | [ <page-size> || [ portrait | landscape ] ]",
+          "initial": "auto"
+        },
+        {
+          "name": "page-orientation",
+          "syntax": "upright | rotate-left | rotate-right",
+          "initial": "upright"
+        },
+        {
+          "name": "marks",
+          "syntax": "none | [ crop || cross ]",
+          "initial": ""
+        },
+        {
+          "name": "bleed",
+          "syntax": "auto | <length>",
+          "initial": "auto"
+        }
+      ],
+      "Values": [
+        {
+          "name": ":left",
+          "value": ":left",
+          "Values": null
+        },
+        {
+          "name": ":right",
+          "value": ":right",
+          "Values": null
+        },
+        {
+          "name": ":first",
+          "value": ":first",
+          "Values": null
+        },
+        {
+          "name": ":blank",
+          "value": ":blank",
+          "Values": null
+        }
+      ]
+    },
+    {
+      "name": "@counter-style",
+      "descriptors": [
+        {
+          "name": "system",
+          "syntax": "cyclic | numeric | alphabetic | symbolic | additive | [fixed <integer>?] | [ extends <counter-style-name> ]",
+          "initial": "symbolic"
+        },
+        {
+          "name": "negative",
+          "syntax": "<symbol> <symbol>?",
+          "initial": "\"-\""
+        },
+        {
+          "name": "prefix",
+          "syntax": "<symbol>",
+          "initial": "\"\""
+        },
+        {
+          "name": "suffix",
+          "syntax": "<symbol>",
+          "initial": "\". \""
+        },
+        {
+          "name": "range",
+          "syntax": "[ [ <integer> | infinite ]{2} ]# | auto",
+          "initial": "auto"
+        },
+        {
+          "name": "pad",
+          "syntax": "<integer [0,∞]> && <symbol>",
+          "initial": "0 \"\""
+        },
+        {
+          "name": "fallback",
+          "syntax": "<counter-style-name>",
+          "initial": "decimal"
+        },
+        {
+          "name": "symbols",
+          "syntax": "<symbol>+",
+          "initial": ""
+        },
+        {
+          "name": "additive-symbols",
+          "syntax": "[ <integer [0,∞]> && <symbol> ]#",
+          "initial": ""
+        },
+        {
+          "name": "speak-as",
+          "syntax": "auto | bullets | numbers | words | spell-out | <counter-style-name>",
+          "initial": "auto"
+        }
+      ],
+      "Values": null
+    },
+    {
+      "name": "@function",
+      "descriptors": [
+        {
+          "name": "result",
+          "syntax": "<declaration-value>?",
+          "initial": ""
+        }
+      ],
+      "Values": null
+    },
+    {
+      "name": "@charset",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@top-center",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@bottom-left",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@left-middle",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@left-bottom",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@right-bottom",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@font-feature-values",
+      "descriptors": [
+        {
+          "name": "font-display",
+          "syntax": "auto | block | swap | fallback | optional",
+          "initial": "auto"
+        },
+        {
+          "name": "@stylistic",
+          "syntax": "@stylistic { <declaration-list> }",
+          "initial": ""
+        },
+        {
+          "name": "@historical-forms",
+          "syntax": "@historical-forms { <declaration-list> }",
+          "initial": ""
+        },
+        {
+          "name": "@styleset",
+          "syntax": "@styleset { <declaration-list> }",
+          "initial": ""
+        },
+        {
+          "name": "@character-variant",
+          "syntax": "@character-variant { <declaration-list> }",
+          "initial": ""
+        },
+        {
+          "name": "@swash",
+          "syntax": "@swash { <declaration-list> }",
+          "initial": ""
+        },
+        {
+          "name": "@ornaments",
+          "syntax": "@ornaments { <declaration-list> }",
+          "initial": ""
+        },
+        {
+          "name": "@annotation",
+          "syntax": "@annotation { <declaration-list> }",
+          "initial": ""
+        }
+      ],
+      "Values": null
+    },
+    {
+      "name": "@font-palette-values",
+      "descriptors": [
+        {
+          "name": "font-family",
+          "syntax": "<family-name>#",
+          "initial": ""
+        },
+        {
+          "name": "base-palette",
+          "syntax": "light | dark | <integer [0,∞]>",
+          "initial": ""
+        },
+        {
+          "name": "override-colors",
+          "syntax": "[ <integer [0,∞]> <color> ]#",
+          "initial": ""
+        }
+      ],
+      "Values": null
+    },
+    {
+      "name": "@keyframes",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@namespace",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@left-top",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@media",
+      "descriptors": [
+        {
+          "name": "width",
+          "syntax": "<length>",
+          "initial": ""
+        },
+        {
+          "name": "height",
+          "syntax": "<length>",
+          "initial": ""
+        },
+        {
+          "name": "aspect-ratio",
+          "syntax": "<ratio>",
+          "initial": ""
+        },
+        {
+          "name": "orientation",
+          "syntax": "portrait | landscape",
+          "initial": ""
+        },
+        {
+          "name": "resolution",
+          "syntax": "<resolution> | infinite",
+          "initial": ""
+        },
+        {
+          "name": "scan",
+          "syntax": "interlace | progressive",
+          "initial": ""
+        },
+        {
+          "name": "grid",
+          "syntax": "<mq-boolean>",
+          "initial": ""
+        },
+        {
+          "name": "update",
+          "syntax": "none | slow | fast",
+          "initial": ""
+        },
+        {
+          "name": "overflow-block",
+          "syntax": "none | scroll | paged",
+          "initial": ""
+        },
+        {
+          "name": "overflow-inline",
+          "syntax": "none | scroll",
+          "initial": ""
+        },
+        {
+          "name": "color",
+          "syntax": "<integer>",
+          "initial": ""
+        },
+        {
+          "name": "color-index",
+          "syntax": "<integer>",
+          "initial": ""
+        },
+        {
+          "name": "monochrome",
+          "syntax": "<integer>",
+          "initial": ""
+        },
+        {
+          "name": "color-gamut",
+          "syntax": "srgb | p3 | rec2020",
+          "initial": ""
+        },
+        {
+          "name": "pointer",
+          "syntax": "none | coarse | fine",
+          "initial": ""
+        },
+        {
+          "name": "hover",
+          "syntax": "none | hover",
+          "initial": ""
+        },
+        {
+          "name": "any-pointer",
+          "syntax": "none | coarse | fine",
+          "initial": ""
+        },
+        {
+          "name": "any-hover",
+          "syntax": "none | hover",
+          "initial": ""
+        },
+        {
+          "name": "device-width",
+          "syntax": "<length>",
+          "initial": ""
+        },
+        {
+          "name": "device-height",
+          "syntax": "<length>",
+          "initial": ""
+        },
+        {
+          "name": "device-aspect-ratio",
+          "syntax": "<ratio>",
+          "initial": ""
+        },
+        {
+          "name": "-webkit-device-pixel-ratio",
+          "syntax": "<number>",
+          "initial": ""
+        },
+        {
+          "name": "-webkit-transform-3d",
+          "syntax": "<mq-boolean>",
+          "initial": ""
+        },
+        {
+          "name": "shape",
+          "syntax": "rect | round",
+          "initial": ""
+        }
+      ],
+      "Values": [
+        {
+          "name": "all",
+          "value": "all",
+          "Values": [
+            {
+              "name": "inherit",
+              "value": "inherit"
+            }
+          ]
+        },
+        {
+          "name": "braille",
+          "value": "braille",
+          "Values": null
+        },
+        {
+          "name": "embossed",
+          "value": "embossed",
+          "Values": null
+        },
+        {
+          "name": "handheld",
+          "value": "handheld",
+          "Values": null
+        },
+        {
+          "name": "print",
+          "value": "print",
+          "Values": null
+        },
+        {
+          "name": "projection",
+          "value": "projection",
+          "Values": null
+        },
+        {
+          "name": "screen",
+          "value": "screen",
+          "Values": null
+        },
+        {
+          "name": "speech",
+          "value": "speech",
+          "Values": null
+        },
+        {
+          "name": "tty",
+          "value": "tty",
+          "Values": null
+        },
+        {
+          "name": "tv",
+          "value": "tv",
+          "Values": null
+        },
+        {
+          "name": "not",
+          "value": "not",
+          "Values": null
+        },
+        {
+          "name": "only",
+          "value": "only",
+          "Values": null
+        },
+        {
+          "name": "all",
+          "value": "all",
+          "Values": null
+        },
+        {
+          "name": "print",
+          "value": "print",
+          "Values": null
+        },
+        {
+          "name": "screen",
+          "value": "screen",
+          "Values": null
+        },
+        {
+          "name": "tty",
+          "value": "tty",
+          "Values": null
+        },
+        {
+          "name": "tv",
+          "value": "tv",
+          "Values": null
+        },
+        {
+          "name": "projection",
+          "value": "projection",
+          "Values": null
+        },
+        {
+          "name": "handheld",
+          "value": "handheld",
+          "Values": null
+        },
+        {
+          "name": "braille",
+          "value": "braille",
+          "Values": null
+        },
+        {
+          "name": "embossed",
+          "value": "embossed",
+          "Values": null
+        },
+        {
+          "name": "aural",
+          "value": "aural",
+          "Values": null
+        },
+        {
+          "name": "speech",
+          "value": "speech",
+          "Values": null
+        }
+      ]
+    },
+    {
+      "name": "@property",
+      "descriptors": [
+        {
+          "name": "syntax",
+          "syntax": "<string>",
+          "initial": ""
+        },
+        {
+          "name": "inherits",
+          "syntax": "true | false",
+          "initial": ""
+        },
+        {
+          "name": "initial-value",
+          "syntax": "<declaration-value>?",
+          "initial": "the guaranteed-invalid value (but see prose)"
+        }
+      ],
+      "Values": null
+    },
+    {
+      "name": "@bottom-left-corner",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@font-face",
+      "descriptors": [
+        {
+          "name": "font-family",
+          "syntax": "<family-name>",
+          "initial": ""
+        },
+        {
+          "name": "src",
+          "syntax": "<font-src-list>",
+          "initial": ""
+        },
+        {
+          "name": "font-style",
+          "syntax": "auto | normal | italic | oblique [ <angle [-90deg,90deg]>{1,2} ]?",
+          "initial": "auto"
+        },
+        {
+          "name": "font-weight",
+          "syntax": "auto | <font-weight-absolute>{1,2}",
+          "initial": "auto"
+        },
+        {
+          "name": "font-width",
+          "syntax": "auto | <'font-width'>{1,2}",
+          "initial": "auto"
+        },
+        {
+          "name": "unicode-range",
+          "syntax": "<urange>#",
+          "initial": "U+0-10FFFF"
+        },
+        {
+          "name": "font-feature-settings",
+          "syntax": "normal | <feature-tag-value>#",
+          "initial": ""
+        },
+        {
+          "name": "font-variation-settings",
+          "syntax": "normal | [ <string> <number>]#",
+          "initial": ""
+        },
+        {
+          "name": "font-named-instance",
+          "syntax": "auto | <string>",
+          "initial": "auto"
+        },
+        {
+          "name": "font-display",
+          "syntax": "auto | block | swap | fallback | optional",
+          "initial": "auto"
+        },
+        {
+          "name": "font-language-override",
+          "syntax": "normal | <string>",
+          "initial": ""
+        },
+        {
+          "name": "ascent-override",
+          "syntax": "normal | <percentage [0,∞]>",
+          "initial": ""
+        },
+        {
+          "name": "descent-override",
+          "syntax": "normal | <percentage [0,∞]>",
+          "initial": ""
+        },
+        {
+          "name": "line-gap-override",
+          "syntax": "normal | <percentage [0,∞]>",
+          "initial": ""
+        }
+      ],
+      "Values": null
+    },
+    {
+      "name": "@-webkit-keyframes",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@position-try",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@right-middle",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@custom-selector",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@supports",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@top-left-corner",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@top-left",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@top-right-corner",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@right-top",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@import",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@viewport",
+      "descriptors": [
+        {
+          "name": "viewport-fit",
+          "syntax": "auto | contain | cover",
+          "initial": "auto"
+        }
+      ],
+      "Values": null
+    },
+    {
+      "name": "@top-right",
+      "descriptors": [],
+      "Values": null
+    },
+    {
+      "name": "@bottom-center",
+      "descriptors": [],
+      "Values": null
+    }
+  ],
+  "selectors": [
+    {
+      "name": ":volume-locked"
+    },
+    {
+      "name": ":last-child"
+    },
+    {
+      "name": ":hover"
+    },
+    {
+      "name": ":root"
+    },
+    {
+      "name": "::grammar-error"
+    },
+    {
+      "name": ":first-line"
+    },
+    {
+      "name": ":closed"
+    },
+    {
+      "name": ":enabled"
+    },
+    {
+      "name": ":invalid"
+    },
+    {
+      "name": ":fullscreen"
+    },
+    {
+      "name": "~"
+    },
+    {
+      "name": ":picture-in-picture"
+    },
+    {
+      "name": ":placeholder-shown"
+    },
+    {
+      "name": ":target-within"
+    },
+    {
+      "name": ":matches()"
+    },
+    {
+      "name": ":target"
+    },
+    {
+      "name": "::view-transition"
+    },
+    {
+      "name": ":lang"
+    },
+    {
+      "name": ":open"
+    },
+    {
+      "name": "::cue()"
+    },
+    {
+      "name": ":has()"
+    },
+    {
+      "name": ":blank"
+    },
+    {
+      "name": "::placeholder"
+    },
+    {
+      "name": ":not()"
+    },
+    {
+      "name": ":disabled"
+    },
+    {
+      "name": ":nth-child()"
+    },
+    {
+      "name": ":nth-of-type()"
+    },
+    {
+      "name": ":first-letter"
+    },
+    {
+      "name": ":is()"
+    },
+    {
+      "name": ":dir()"
+    },
+    {
+      "name": ":stalled"
+    },
+    {
+      "name": ":modal"
+    },
+    {
+      "name": ":read-write"
+    },
+    {
+      "name": ":nth-col()"
+    },
+    {
+      "name": "::marker"
+    },
+    {
+      "name": "&"
+    },
+    {
+      "name": ":optional"
+    },
+    {
+      "name": "::after"
+    },
+    {
+      "name": ":read-only"
+    },
+    {
+      "name": ":out-of-range"
+    },
+    {
+      "name": "::cue-region"
+    },
+    {
+      "name": ":defined"
+    },
+    {
+      "name": ":link"
+    },
+    {
+      "name": ":visited"
+    },
+    {
+      "name": ":current"
+    },
+    {
+      "name": "::selection"
+    },
+    {
+      "name": ":nth-last-col()"
+    },
+    {
+      "name": "::cue"
+    },
+    {
+      "name": ":where()"
+    },
+    {
+      "name": ":current()"
+    },
+    {
+      "name": ":nth-last-child()"
+    },
+    {
+      "name": ":lang()"
+    },
+    {
+      "name": ":focus"
+    },
+    {
+      "name": ":buffering"
+    },
+    {
+      "name": "::view-transition-old()"
+    },
+    {
+      "name": "::before"
+    },
+    {
+      "name": ":host"
+    },
+    {
+      "name": ":any-link"
+    },
+    {
+      "name": ":playing"
+    },
+    {
+      "name": ":in-range"
+    },
+    {
+      "name": "::view-transition-image-pair()"
+    },
+    {
+      "name": ":before"
+    },
+    {
+      "name": "::spelling-error"
+    },
+    {
+      "name": "::file-selector-button"
+    },
+    {
+      "name": ":muted"
+    },
+    {
+      "name": ":first-child"
+    },
+    {
+      "name": ":first-of-type"
+    },
+    {
+      "name": ">"
+    },
+    {
+      "name": "+"
+    },
+    {
+      "name": "::cue-region()"
+    },
+    {
+      "name": ":left"
+    },
+    {
+      "name": "::part()"
+    },
+    {
+      "name": ":host-context()"
+    },
+    {
+      "name": "::target-text"
+    },
+    {
+      "name": ":host()"
+    },
+    {
+      "name": ":after"
+    },
+    {
+      "name": ":default"
+    },
+    {
+      "name": ":only-child"
+    },
+    {
+      "name": "::first-letter"
+    },
+    {
+      "name": ":active"
+    },
+    {
+      "name": ":seeking"
+    },
+    {
+      "name": ":empty"
+    },
+    {
+      "name": "::slotted()"
+    },
+    {
+      "name": ":focus-visible"
+    },
+    {
+      "name": ":valid"
+    },
+    {
+      "name": ":only-of-type"
+    },
+    {
+      "name": "||"
+    },
+    {
+      "name": ":local-link"
+    },
+    {
+      "name": ":focus-within"
+    },
+    {
+      "name": "::details-content"
+    },
+    {
+      "name": ":right"
+    },
+    {
+      "name": ":scope"
+    },
+    {
+      "name": ":paused"
+    },
+    {
+      "name": ":user-valid"
+    },
+    {
+      "name": "::view-transition-new()"
+    },
+    {
+      "name": ":nth()"
+    },
+    {
+      "name": ":first"
+    },
+    {
+      "name": ":future"
+    },
+    {
+      "name": ":indeterminate"
+    },
+    {
+      "name": "::first-line"
+    },
+    {
+      "name": ":past"
+    },
+    {
+      "name": ":user-invalid"
+    },
+    {
+      "name": ":last-of-type"
+    },
+    {
+      "name": ":required"
+    },
+    {
+      "name": ":nth-last-of-type()"
+    },
+    {
+      "name": ":autofill"
+    },
+    {
+      "name": ":checked"
+    },
+    {
+      "name": "::highlight()"
+    },
+    {
+      "name": "::view-transition-group()"
+    }
+  ]
+}
diff --git a/crates/gosub_styling/resources/definitions/definitions_at-rules.json b/crates/gosub_styling/resources/definitions/definitions_at-rules.json
new file mode 100644
index 000000000..d91c29ccd
--- /dev/null
+++ b/crates/gosub_styling/resources/definitions/definitions_at-rules.json
@@ -0,0 +1,663 @@
+[
+  {
+    "name": "@layer",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@bottom-right",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@bottom-right-corner",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@page",
+    "descriptors": [
+      {
+        "name": "size",
+        "syntax": "<length [0,∞]>{1,2} | auto | [ <page-size> || [ portrait | landscape ] ]",
+        "initial": "auto"
+      },
+      {
+        "name": "page-orientation",
+        "syntax": "upright | rotate-left | rotate-right",
+        "initial": "upright"
+      },
+      {
+        "name": "marks",
+        "syntax": "none | [ crop || cross ]",
+        "initial": ""
+      },
+      {
+        "name": "bleed",
+        "syntax": "auto | <length>",
+        "initial": "auto"
+      }
+    ],
+    "Values": [
+      {
+        "name": ":left",
+        "value": ":left",
+        "Values": null
+      },
+      {
+        "name": ":right",
+        "value": ":right",
+        "Values": null
+      },
+      {
+        "name": ":first",
+        "value": ":first",
+        "Values": null
+      },
+      {
+        "name": ":blank",
+        "value": ":blank",
+        "Values": null
+      }
+    ]
+  },
+  {
+    "name": "@counter-style",
+    "descriptors": [
+      {
+        "name": "system",
+        "syntax": "cyclic | numeric | alphabetic | symbolic | additive | [fixed <integer>?] | [ extends <counter-style-name> ]",
+        "initial": "symbolic"
+      },
+      {
+        "name": "negative",
+        "syntax": "<symbol> <symbol>?",
+        "initial": "\"-\""
+      },
+      {
+        "name": "prefix",
+        "syntax": "<symbol>",
+        "initial": "\"\""
+      },
+      {
+        "name": "suffix",
+        "syntax": "<symbol>",
+        "initial": "\". \""
+      },
+      {
+        "name": "range",
+        "syntax": "[ [ <integer> | infinite ]{2} ]# | auto",
+        "initial": "auto"
+      },
+      {
+        "name": "pad",
+        "syntax": "<integer [0,∞]> && <symbol>",
+        "initial": "0 \"\""
+      },
+      {
+        "name": "fallback",
+        "syntax": "<counter-style-name>",
+        "initial": "decimal"
+      },
+      {
+        "name": "symbols",
+        "syntax": "<symbol>+",
+        "initial": ""
+      },
+      {
+        "name": "additive-symbols",
+        "syntax": "[ <integer [0,∞]> && <symbol> ]#",
+        "initial": ""
+      },
+      {
+        "name": "speak-as",
+        "syntax": "auto | bullets | numbers | words | spell-out | <counter-style-name>",
+        "initial": "auto"
+      }
+    ],
+    "Values": null
+  },
+  {
+    "name": "@function",
+    "descriptors": [
+      {
+        "name": "result",
+        "syntax": "<declaration-value>?",
+        "initial": ""
+      }
+    ],
+    "Values": null
+  },
+  {
+    "name": "@charset",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@top-center",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@bottom-left",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@left-middle",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@left-bottom",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@right-bottom",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@font-feature-values",
+    "descriptors": [
+      {
+        "name": "font-display",
+        "syntax": "auto | block | swap | fallback | optional",
+        "initial": "auto"
+      },
+      {
+        "name": "@stylistic",
+        "syntax": "@stylistic { <declaration-list> }",
+        "initial": ""
+      },
+      {
+        "name": "@historical-forms",
+        "syntax": "@historical-forms { <declaration-list> }",
+        "initial": ""
+      },
+      {
+        "name": "@styleset",
+        "syntax": "@styleset { <declaration-list> }",
+        "initial": ""
+      },
+      {
+        "name": "@character-variant",
+        "syntax": "@character-variant { <declaration-list> }",
+        "initial": ""
+      },
+      {
+        "name": "@swash",
+        "syntax": "@swash { <declaration-list> }",
+        "initial": ""
+      },
+      {
+        "name": "@ornaments",
+        "syntax": "@ornaments { <declaration-list> }",
+        "initial": ""
+      },
+      {
+        "name": "@annotation",
+        "syntax": "@annotation { <declaration-list> }",
+        "initial": ""
+      }
+    ],
+    "Values": null
+  },
+  {
+    "name": "@font-palette-values",
+    "descriptors": [
+      {
+        "name": "font-family",
+        "syntax": "<family-name>#",
+        "initial": ""
+      },
+      {
+        "name": "base-palette",
+        "syntax": "light | dark | <integer [0,∞]>",
+        "initial": ""
+      },
+      {
+        "name": "override-colors",
+        "syntax": "[ <integer [0,∞]> <color> ]#",
+        "initial": ""
+      }
+    ],
+    "Values": null
+  },
+  {
+    "name": "@keyframes",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@namespace",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@left-top",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@media",
+    "descriptors": [
+      {
+        "name": "width",
+        "syntax": "<length>",
+        "initial": ""
+      },
+      {
+        "name": "height",
+        "syntax": "<length>",
+        "initial": ""
+      },
+      {
+        "name": "aspect-ratio",
+        "syntax": "<ratio>",
+        "initial": ""
+      },
+      {
+        "name": "orientation",
+        "syntax": "portrait | landscape",
+        "initial": ""
+      },
+      {
+        "name": "resolution",
+        "syntax": "<resolution> | infinite",
+        "initial": ""
+      },
+      {
+        "name": "scan",
+        "syntax": "interlace | progressive",
+        "initial": ""
+      },
+      {
+        "name": "grid",
+        "syntax": "<mq-boolean>",
+        "initial": ""
+      },
+      {
+        "name": "update",
+        "syntax": "none | slow | fast",
+        "initial": ""
+      },
+      {
+        "name": "overflow-block",
+        "syntax": "none | scroll | paged",
+        "initial": ""
+      },
+      {
+        "name": "overflow-inline",
+        "syntax": "none | scroll",
+        "initial": ""
+      },
+      {
+        "name": "color",
+        "syntax": "<integer>",
+        "initial": ""
+      },
+      {
+        "name": "color-index",
+        "syntax": "<integer>",
+        "initial": ""
+      },
+      {
+        "name": "monochrome",
+        "syntax": "<integer>",
+        "initial": ""
+      },
+      {
+        "name": "color-gamut",
+        "syntax": "srgb | p3 | rec2020",
+        "initial": ""
+      },
+      {
+        "name": "pointer",
+        "syntax": "none | coarse | fine",
+        "initial": ""
+      },
+      {
+        "name": "hover",
+        "syntax": "none | hover",
+        "initial": ""
+      },
+      {
+        "name": "any-pointer",
+        "syntax": "none | coarse | fine",
+        "initial": ""
+      },
+      {
+        "name": "any-hover",
+        "syntax": "none | hover",
+        "initial": ""
+      },
+      {
+        "name": "device-width",
+        "syntax": "<length>",
+        "initial": ""
+      },
+      {
+        "name": "device-height",
+        "syntax": "<length>",
+        "initial": ""
+      },
+      {
+        "name": "device-aspect-ratio",
+        "syntax": "<ratio>",
+        "initial": ""
+      },
+      {
+        "name": "-webkit-device-pixel-ratio",
+        "syntax": "<number>",
+        "initial": ""
+      },
+      {
+        "name": "-webkit-transform-3d",
+        "syntax": "<mq-boolean>",
+        "initial": ""
+      },
+      {
+        "name": "shape",
+        "syntax": "rect | round",
+        "initial": ""
+      }
+    ],
+    "Values": [
+      {
+        "name": "all",
+        "value": "all",
+        "Values": [
+          {
+            "name": "inherit",
+            "value": "inherit"
+          }
+        ]
+      },
+      {
+        "name": "braille",
+        "value": "braille",
+        "Values": null
+      },
+      {
+        "name": "embossed",
+        "value": "embossed",
+        "Values": null
+      },
+      {
+        "name": "handheld",
+        "value": "handheld",
+        "Values": null
+      },
+      {
+        "name": "print",
+        "value": "print",
+        "Values": null
+      },
+      {
+        "name": "projection",
+        "value": "projection",
+        "Values": null
+      },
+      {
+        "name": "screen",
+        "value": "screen",
+        "Values": null
+      },
+      {
+        "name": "speech",
+        "value": "speech",
+        "Values": null
+      },
+      {
+        "name": "tty",
+        "value": "tty",
+        "Values": null
+      },
+      {
+        "name": "tv",
+        "value": "tv",
+        "Values": null
+      },
+      {
+        "name": "not",
+        "value": "not",
+        "Values": null
+      },
+      {
+        "name": "only",
+        "value": "only",
+        "Values": null
+      },
+      {
+        "name": "all",
+        "value": "all",
+        "Values": null
+      },
+      {
+        "name": "print",
+        "value": "print",
+        "Values": null
+      },
+      {
+        "name": "screen",
+        "value": "screen",
+        "Values": null
+      },
+      {
+        "name": "tty",
+        "value": "tty",
+        "Values": null
+      },
+      {
+        "name": "tv",
+        "value": "tv",
+        "Values": null
+      },
+      {
+        "name": "projection",
+        "value": "projection",
+        "Values": null
+      },
+      {
+        "name": "handheld",
+        "value": "handheld",
+        "Values": null
+      },
+      {
+        "name": "braille",
+        "value": "braille",
+        "Values": null
+      },
+      {
+        "name": "embossed",
+        "value": "embossed",
+        "Values": null
+      },
+      {
+        "name": "aural",
+        "value": "aural",
+        "Values": null
+      },
+      {
+        "name": "speech",
+        "value": "speech",
+        "Values": null
+      }
+    ]
+  },
+  {
+    "name": "@property",
+    "descriptors": [
+      {
+        "name": "syntax",
+        "syntax": "<string>",
+        "initial": ""
+      },
+      {
+        "name": "inherits",
+        "syntax": "true | false",
+        "initial": ""
+      },
+      {
+        "name": "initial-value",
+        "syntax": "<declaration-value>?",
+        "initial": "the guaranteed-invalid value (but see prose)"
+      }
+    ],
+    "Values": null
+  },
+  {
+    "name": "@bottom-left-corner",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@font-face",
+    "descriptors": [
+      {
+        "name": "font-family",
+        "syntax": "<family-name>",
+        "initial": ""
+      },
+      {
+        "name": "src",
+        "syntax": "<font-src-list>",
+        "initial": ""
+      },
+      {
+        "name": "font-style",
+        "syntax": "auto | normal | italic | oblique [ <angle [-90deg,90deg]>{1,2} ]?",
+        "initial": "auto"
+      },
+      {
+        "name": "font-weight",
+        "syntax": "auto | <font-weight-absolute>{1,2}",
+        "initial": "auto"
+      },
+      {
+        "name": "font-width",
+        "syntax": "auto | <'font-width'>{1,2}",
+        "initial": "auto"
+      },
+      {
+        "name": "unicode-range",
+        "syntax": "<urange>#",
+        "initial": "U+0-10FFFF"
+      },
+      {
+        "name": "font-feature-settings",
+        "syntax": "normal | <feature-tag-value>#",
+        "initial": ""
+      },
+      {
+        "name": "font-variation-settings",
+        "syntax": "normal | [ <string> <number>]#",
+        "initial": ""
+      },
+      {
+        "name": "font-named-instance",
+        "syntax": "auto | <string>",
+        "initial": "auto"
+      },
+      {
+        "name": "font-display",
+        "syntax": "auto | block | swap | fallback | optional",
+        "initial": "auto"
+      },
+      {
+        "name": "font-language-override",
+        "syntax": "normal | <string>",
+        "initial": ""
+      },
+      {
+        "name": "ascent-override",
+        "syntax": "normal | <percentage [0,∞]>",
+        "initial": ""
+      },
+      {
+        "name": "descent-override",
+        "syntax": "normal | <percentage [0,∞]>",
+        "initial": ""
+      },
+      {
+        "name": "line-gap-override",
+        "syntax": "normal | <percentage [0,∞]>",
+        "initial": ""
+      }
+    ],
+    "Values": null
+  },
+  {
+    "name": "@-webkit-keyframes",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@position-try",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@right-middle",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@custom-selector",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@supports",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@top-left-corner",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@top-left",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@top-right-corner",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@right-top",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@import",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@viewport",
+    "descriptors": [
+      {
+        "name": "viewport-fit",
+        "syntax": "auto | contain | cover",
+        "initial": "auto"
+      }
+    ],
+    "Values": null
+  },
+  {
+    "name": "@top-right",
+    "descriptors": [],
+    "Values": null
+  },
+  {
+    "name": "@bottom-center",
+    "descriptors": [],
+    "Values": null
+  }
+]
diff --git a/crates/gosub_styling/resources/definitions/definitions_properties.json b/crates/gosub_styling/resources/definitions/definitions_properties.json
new file mode 100644
index 000000000..40b5cb2fb
--- /dev/null
+++ b/crates/gosub_styling/resources/definitions/definitions_properties.json
@@ -0,0 +1,5604 @@
+[
+  {
+    "name": "border-clip-top",
+    "syntax": "normal | [ <length-percentage [0,∞]> | <flex> ]+",
+    "computed": [],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-mask-box-image-width",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-mask-image",
+    "syntax": "",
+    "computed": [
+      "absoluteURIOrNone"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "object-fit",
+    "syntax": "fill | contain | cover | none | scale-down",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "fill",
+    "inherited": false
+  },
+  {
+    "name": "outline",
+    "syntax": "[ <'outline-width'> || <'outline-style'> || <'outline-color'> ]",
+    "computed": [
+      "outline-color",
+      "outline-width",
+      "outline-style"
+    ],
+    "initial": [
+      "outline-color",
+      "outline-style",
+      "outline-width"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "white-space",
+    "syntax": "normal | pre | nowrap | pre-wrap | break-spaces | pre-line",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "text-indent",
+    "syntax": "[ <length-percentage> ] && hanging? && each-line?",
+    "computed": [
+      "percentageOrAbsoluteLengthPlusKeywords"
+    ],
+    "initial": "0",
+    "inherited": true
+  },
+  {
+    "name": "column-span",
+    "syntax": "none | all",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "shape-rendering",
+    "syntax": "auto | optimizeSpeed | crispEdges | geometricPrecision",
+    "computed": [],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "shape-outside",
+    "syntax": "none | [ <basic-shape> || <shape-box> ] | <image>",
+    "computed": [
+      "asDefinedForBasicShapeWithAbsoluteURIOtherwiseAsSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "min-height",
+    "syntax": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>) | <calc-size()>",
+    "computed": [
+      "percentageAsSpecifiedOrAbsoluteLength"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "fill-rule",
+    "syntax": "nonzero | evenodd",
+    "computed": [],
+    "initial": "nonzero",
+    "inherited": true
+  },
+  {
+    "name": "box-shadow",
+    "syntax": "<spread-shadow>#",
+    "computed": [
+      "absoluteLengthsSpecifiedColorAsSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "dominant-baseline",
+    "syntax": "auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top",
+    "computed": [],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "stroke-dash-justify",
+    "syntax": "none | [ stretch | compress ] || [ dashes || gaps ]",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "stroke-opacity",
+    "syntax": "<'opacity'>",
+    "computed": [],
+    "initial": "1",
+    "inherited": true
+  },
+  {
+    "name": "speak-as",
+    "syntax": "normal | spell-out || digits || [ literal-punctuation | no-punctuation ]",
+    "computed": [],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "column-rule-style",
+    "syntax": "<line-style>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "float-defer",
+    "syntax": "<integer> | last | none",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "right",
+    "syntax": "auto | <length-percentage>",
+    "computed": [
+      "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "cursor",
+    "syntax": "[ [ <url> | <url-set> ] [<x> <y>]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]",
+    "computed": [
+      "asSpecifiedURLsAbsolute"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "grid-row-start",
+    "syntax": "<grid-line>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "scroll-margin-top",
+    "syntax": "<length>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "zoom",
+    "syntax": "<number [0,∞]> || <percentage [0,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "flex-direction",
+    "syntax": "row | row-reverse | column | column-reverse",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "row",
+    "inherited": false
+  },
+  {
+    "name": "flex-flow",
+    "syntax": "<'flex-direction'> || <'flex-wrap'>",
+    "computed": [
+      "flex-direction",
+      "flex-wrap"
+    ],
+    "initial": [
+      "flex-direction",
+      "flex-wrap"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "offset-path",
+    "syntax": "none | <offset-path> || <coord-box>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "rest",
+    "syntax": "<'rest-before'> <'rest-after'>?",
+    "computed": [],
+    "initial": "N/A (see individual properties)",
+    "inherited": false
+  },
+  {
+    "name": "region-fragment",
+    "syntax": "auto | break",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "column-rule",
+    "syntax": "<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>",
+    "computed": [
+      "column-rule-color",
+      "column-rule-style",
+      "column-rule-width"
+    ],
+    "initial": [
+      "column-rule-width",
+      "column-rule-style",
+      "column-rule-color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "pause-before",
+    "syntax": "<time [0s,∞]> | none | x-weak | weak | medium | strong | x-strong",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "stroke-origin",
+    "syntax": "match-parent | fill-box | stroke-box | content-box | padding-box | border-box",
+    "computed": [],
+    "initial": "match-parent",
+    "inherited": false
+  },
+  {
+    "name": "mask-size",
+    "syntax": "<bg-size>#",
+    "computed": [
+      "asSpecifiedRelativeToAbsoluteLengths"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "flex-grow",
+    "syntax": "<number [0,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "border-bottom-right-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2}",
+    "computed": [
+      "twoAbsoluteLengthOrPercentages"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "voice-range",
+    "syntax": "<frequency [0Hz,∞]> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]]",
+    "computed": [],
+    "initial": "medium",
+    "inherited": true
+  },
+  {
+    "name": "border-collapse",
+    "syntax": "separate | collapse",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "separate",
+    "inherited": true
+  },
+  {
+    "name": "overflow-y",
+    "syntax": "visible | hidden | clip | scroll | auto",
+    "computed": [
+      "asSpecifiedButVisibleOrClipReplacedToAutoOrHiddenIfOtherValueDifferent"
+    ],
+    "initial": "visible",
+    "inherited": false
+  },
+  {
+    "name": "shape-margin",
+    "syntax": "<length-percentage [0,∞]>",
+    "computed": [
+      "asSpecifiedRelativeToAbsoluteLengths"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "overflow-wrap",
+    "syntax": "normal | break-word | anywhere",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "-webkit-text-stroke-color",
+    "syntax": "<color>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": true
+  },
+  {
+    "name": "-webkit-transition-delay",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "text-anchor",
+    "syntax": "start | middle | end",
+    "computed": [],
+    "initial": "start",
+    "inherited": true
+  },
+  {
+    "name": "counter-set",
+    "syntax": "[ <counter-name> <integer>? ]+ | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "top",
+    "syntax": "auto | <length-percentage>",
+    "computed": [
+      "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "animation-range-end",
+    "syntax": "[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#",
+    "computed": [
+      "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "animation-direction",
+    "syntax": "<single-animation-direction>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "page-break-inside",
+    "syntax": "avoid | auto | inherit",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "place-content",
+    "syntax": "<'align-content'> <'justify-content'>?",
+    "computed": [
+      "align-content",
+      "justify-content"
+    ],
+    "initial": [
+      "align-content",
+      "justify-content"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "grid-column-start",
+    "syntax": "<grid-line>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "inline-sizing",
+    "syntax": "normal | stretch",
+    "computed": [],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "cue-after",
+    "syntax": "<uri> <decibel>? | none",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "view-transition-name",
+    "syntax": "none | <custom-ident>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-mask-box-image-slice",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "nav-right",
+    "syntax": "auto | <id> [ current | root | <target-name> ]?",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "margin-left",
+    "syntax": "<length-percentage> | auto",
+    "computed": [
+      "percentageAsSpecifiedOrAbsoluteLength"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "mask-position",
+    "syntax": "<position>#",
+    "computed": [
+      "consistsOfTwoKeywordsForOriginAndOffsets"
+    ],
+    "initial": "0% 0%",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-text-stroke",
+    "syntax": "<line-width> || <color>",
+    "computed": [
+      "-webkit-text-stroke-width",
+      "-webkit-text-stroke-color"
+    ],
+    "initial": [
+      "-webkit-text-stroke-width",
+      "-webkit-text-stroke-color"
+    ],
+    "inherited": true
+  },
+  {
+    "name": "flow-into",
+    "syntax": "none | <ident> [element | content]?",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "rx",
+    "syntax": "<length-percentage> | auto",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "filter",
+    "syntax": "none | <filter-value-list>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "outline-width",
+    "syntax": "<line-width>",
+    "computed": [
+      "absoluteLength0ForNone"
+    ],
+    "initial": "medium",
+    "inherited": false
+  },
+  {
+    "name": "fill-origin",
+    "syntax": "match-parent | fill-box | stroke-box | content-box | padding-box | border-box",
+    "computed": [],
+    "initial": "match-parent",
+    "inherited": false
+  },
+  {
+    "name": "isolation",
+    "syntax": "<isolation-mode>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "border-block-start-style",
+    "syntax": "<line-style>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "voice-stress",
+    "syntax": "normal | strong | moderate | none | reduced",
+    "computed": [],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "image-orientation",
+    "syntax": "from-image | none | [ <angle> || flip ]",
+    "computed": [
+      "angleRoundedToNextQuarter"
+    ],
+    "initial": "from-image",
+    "inherited": true
+  },
+  {
+    "name": "text-decoration-color",
+    "syntax": "<color>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": false
+  },
+  {
+    "name": "padding-top",
+    "syntax": "<length-percentage [0,∞]>",
+    "computed": [
+      "percentageAsSpecifiedOrAbsoluteLength"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "border-top-color",
+    "syntax": "<color> | <image-1D>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-mask-box-image-source",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "text-decoration-style",
+    "syntax": "solid | double | dotted | dashed | wavy",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "solid",
+    "inherited": false
+  },
+  {
+    "name": "animation-timing-function",
+    "syntax": "<easing-function>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "ease",
+    "inherited": false
+  },
+  {
+    "name": "border-block-end-width",
+    "syntax": "<line-width>",
+    "computed": [
+      "absoluteLengthZeroIfBorderStyleNoneOrHidden"
+    ],
+    "initial": "medium",
+    "inherited": false
+  },
+  {
+    "name": "list-style-type",
+    "syntax": "<counter-style> | <string> | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "disc",
+    "inherited": true
+  },
+  {
+    "name": "border-left",
+    "syntax": "<line-width> || <line-style> || <color>",
+    "computed": [
+      "border-left-width",
+      "border-left-style",
+      "border-left-color"
+    ],
+    "initial": [
+      "border-left-width",
+      "border-left-style",
+      "border-left-color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "text-emphasis",
+    "syntax": "<'text-emphasis-style'> || <'text-emphasis-color'>",
+    "computed": [
+      "text-emphasis-style",
+      "text-emphasis-color"
+    ],
+    "initial": [
+      "text-emphasis-style",
+      "text-emphasis-color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "color-interpolation-filters",
+    "syntax": "auto | sRGB | linearRGB",
+    "computed": [],
+    "initial": "linearRGB",
+    "inherited": true
+  },
+  {
+    "name": "nav-up",
+    "syntax": "auto | <id> [ current | root | <target-name> ]?",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-transition-property",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "voice-rate",
+    "syntax": "[normal | x-slow | slow | medium | fast | x-fast] || <percentage [0,∞]>",
+    "computed": [],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "scroll-padding-inline",
+    "syntax": "[ auto | <length-percentage [0,∞]> ]{1,2}",
+    "computed": [
+      "scroll-padding-inline-start",
+      "scroll-padding-inline-end"
+    ],
+    "initial": [
+      "scroll-padding-inline-start",
+      "scroll-padding-inline-end"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "scroll-margin-left",
+    "syntax": "<length>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "text-decoration",
+    "syntax": "<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>",
+    "computed": [
+      "text-decoration-line",
+      "text-decoration-style",
+      "text-decoration-color",
+      "text-decoration-thickness"
+    ],
+    "initial": [
+      "text-decoration-color",
+      "text-decoration-style",
+      "text-decoration-line"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "line-snap",
+    "syntax": "none | baseline | contain",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "width",
+    "syntax": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>) | <calc-size()>",
+    "computed": [
+      "percentageAutoOrAbsoluteLength"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "stroke-position",
+    "syntax": "<position>#",
+    "computed": [],
+    "initial": "0% 0%",
+    "inherited": true
+  },
+  {
+    "name": "tab-size",
+    "syntax": "<number [0,∞]> | <length [0,∞]>",
+    "computed": [
+      "specifiedIntegerOrAbsoluteLength"
+    ],
+    "initial": "8",
+    "inherited": true
+  },
+  {
+    "name": "border-color",
+    "syntax": "[ <color> | <image-1D> ]{1,4}",
+    "computed": [
+      "border-bottom-color",
+      "border-left-color",
+      "border-right-color",
+      "border-top-color"
+    ],
+    "initial": [
+      "border-top-color",
+      "border-right-color",
+      "border-bottom-color",
+      "border-left-color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "border-block-end-style",
+    "syntax": "<line-style>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-animation-fill-mode",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-box-flex",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "speak",
+    "syntax": "auto | never | always",
+    "computed": [],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "cy",
+    "syntax": "<length-percentage>",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "visibility",
+    "syntax": "visible | hidden | collapse",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "visible",
+    "inherited": true
+  },
+  {
+    "name": "grid-auto-rows",
+    "syntax": "<track-size>+",
+    "computed": [
+      "percentageAsSpecifiedOrAbsoluteLength"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "border-bottom",
+    "syntax": "<line-width> || <line-style> || <color>",
+    "computed": [
+      "border-bottom-width",
+      "border-bottom-style",
+      "border-bottom-color"
+    ],
+    "initial": [
+      "border-bottom-width",
+      "border-bottom-style",
+      "border-bottom-color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "-webkit-box-pack",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "scroll-padding-inline-end",
+    "syntax": "auto | <length-percentage [0,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "min-width",
+    "syntax": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>) | <calc-size()>",
+    "computed": [
+      "percentageAsSpecifiedOrAbsoluteLength"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "grid-template-rows",
+    "syntax": "none | <track-list> | <auto-track-list> | subgrid <line-name-list>?",
+    "computed": [
+      "asSpecifiedRelativeToAbsoluteLengths"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "scroll-padding",
+    "syntax": "[ auto | <length-percentage [0,∞]> ]{1,4}",
+    "computed": [
+      "scroll-padding-bottom",
+      "scroll-padding-left",
+      "scroll-padding-right",
+      "scroll-padding-top"
+    ],
+    "initial": [
+      "scroll-padding-bottom",
+      "scroll-padding-left",
+      "scroll-padding-right",
+      "scroll-padding-top"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "margin-right",
+    "syntax": "<length-percentage> | auto",
+    "computed": [
+      "percentageAsSpecifiedOrAbsoluteLength"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "bottom",
+    "syntax": "auto | <length-percentage>",
+    "computed": [
+      "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "block-step-insert",
+    "syntax": "margin | padding",
+    "computed": [],
+    "initial": "margin",
+    "inherited": false
+  },
+  {
+    "name": "stroke-align",
+    "syntax": "center | inset | outset",
+    "computed": [],
+    "initial": "center",
+    "inherited": true
+  },
+  {
+    "name": "font-synthesis-small-caps",
+    "syntax": "auto | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "align-content",
+    "syntax": "normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "offset",
+    "syntax": "[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?",
+    "computed": [
+      "offset-position",
+      "offset-path",
+      "offset-distance",
+      "offset-anchor",
+      "offset-rotate"
+    ],
+    "initial": [
+      "offset-position",
+      "offset-path",
+      "offset-distance",
+      "offset-anchor",
+      "offset-rotate"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "writing-mode",
+    "syntax": "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "horizontal-tb",
+    "inherited": true
+  },
+  {
+    "name": "break-inside",
+    "syntax": "auto | avoid | avoid-page | avoid-column | avoid-region",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "border-block",
+    "syntax": "<'border-block-start'>",
+    "computed": [
+      "border-block-width",
+      "border-block-style",
+      "border-block-color"
+    ],
+    "initial": [
+      "border-block-width",
+      "border-block-style",
+      "border-block-color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "border-inline-end-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "border-radius",
+    "syntax": "<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?",
+    "computed": [
+      "border-bottom-left-radius",
+      "border-bottom-right-radius",
+      "border-top-left-radius",
+      "border-top-right-radius"
+    ],
+    "initial": [
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "border-image-slice",
+    "syntax": "[<number [0,∞]> | <percentage [0,∞]>]{1,4} && fill?",
+    "computed": [
+      "oneToFourPercentagesOrAbsoluteLengthsPlusFill"
+    ],
+    "initial": "100%",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-border-top-right-radius",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "marker-start",
+    "syntax": "none | <marker-ref>",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "pointer-events",
+    "syntax": "auto | bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "inset",
+    "syntax": "<'top'>{1,4}",
+    "computed": [
+      "top",
+      "bottom",
+      "left",
+      "right"
+    ],
+    "initial": [
+      "top",
+      "bottom",
+      "left",
+      "right"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "font-weight",
+    "syntax": "<font-weight-absolute> | bolder | lighter",
+    "computed": [
+      "keywordOrNumericalValueBolderLighterTransformedToRealValue"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "opacity",
+    "syntax": "<opacity-value>",
+    "computed": [
+      "specifiedValueNumberClipped0To1"
+    ],
+    "initial": "1",
+    "inherited": false
+  },
+  {
+    "name": "dynamic-range-limit",
+    "syntax": "standard | high | constrained-high",
+    "computed": [],
+    "initial": "high",
+    "inherited": false
+  },
+  {
+    "name": "columns",
+    "syntax": "<'column-width'> || <'column-count'>",
+    "computed": [
+      "column-width",
+      "column-count"
+    ],
+    "initial": [
+      "column-width",
+      "column-count"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "font-variation-settings",
+    "syntax": "normal | [ <opentype-tag> <number>]#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "mix-blend-mode",
+    "syntax": "<blend-mode> | plus-darker | plus-lighter",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "position",
+    "syntax": "static | relative | absolute | sticky | fixed | <running()>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "static",
+    "inherited": false
+  },
+  {
+    "name": "animation-delay",
+    "syntax": "<time>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0s",
+    "inherited": false
+  },
+  {
+    "name": "border-inline-style",
+    "syntax": "<'border-top-style'>{1,2}",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "border-inline-end-width",
+    "syntax": "<line-width>",
+    "computed": [
+      "absoluteLengthZeroIfBorderStyleNoneOrHidden"
+    ],
+    "initial": "medium",
+    "inherited": false
+  },
+  {
+    "name": "scroll-padding-block-end",
+    "syntax": "auto | <length-percentage [0,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "overscroll-behavior-y",
+    "syntax": "contain | none | auto",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "font-variant-position",
+    "syntax": "normal | sub | super",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "justify-content",
+    "syntax": "normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "border-inline-end",
+    "syntax": "<line-width> || <line-style> || <color>",
+    "computed": [
+      "border-width",
+      "border-style",
+      "border-inline-end-color"
+    ],
+    "initial": [
+      "border-width",
+      "border-style",
+      "color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "-webkit-text-size-adjust",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "font-optical-sizing",
+    "syntax": "auto | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "-webkit-background-size",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "transition-property",
+    "syntax": "none | <single-transition-property>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "all",
+    "inherited": false
+  },
+  {
+    "name": "scroll-timeline-name",
+    "syntax": "[ none | <dashed-ident> ]#",
+    "computed": [
+      "noneOrOrderedListOfIdentifiers"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "font-kerning",
+    "syntax": "auto | normal | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "padding",
+    "syntax": "<'padding-top'>{1,4}",
+    "computed": [
+      "padding-bottom",
+      "padding-left",
+      "padding-right",
+      "padding-top"
+    ],
+    "initial": [
+      "padding-bottom",
+      "padding-left",
+      "padding-right",
+      "padding-top"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "margin-inline-end",
+    "syntax": "<'margin-top'>",
+    "computed": [
+      "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "math-depth",
+    "syntax": "auto-add | add(<integer>) | <integer>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0",
+    "inherited": true
+  },
+  {
+    "name": "view-timeline-name",
+    "syntax": "[ none | <dashed-ident> ]#",
+    "computed": [
+      "noneOrOrderedListOfIdentifiers"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "stroke-color",
+    "syntax": "<color>#",
+    "computed": [],
+    "initial": "transparent",
+    "inherited": true
+  },
+  {
+    "name": "all",
+    "syntax": "initial | inherit | unset | revert | revert-layer",
+    "computed": [
+      "asSpecifiedAppliesToEachProperty"
+    ],
+    "initial": "noPracticalInitialValue",
+    "inherited": false
+  },
+  {
+    "name": "outline-color",
+    "syntax": "auto | [ <color> | <image-1D> ]",
+    "computed": [
+      "autoForTranslucentColorRGBAOtherwiseRGB"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-flex-basis",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "cx",
+    "syntax": "<length-percentage>",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "scroll-margin-right",
+    "syntax": "<length>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "float-offset",
+    "syntax": "<length> | <percentage>",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "mask-origin",
+    "syntax": "<coord-box>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "border-box",
+    "inherited": false
+  },
+  {
+    "name": "align-self",
+    "syntax": "auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position> | anchor-center",
+    "computed": [
+      "autoOnAbsolutelyPositionedElementsValueOfAlignItemsOnParent"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-mask-box-image-outset",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "contain",
+    "syntax": "none | strict | content | [ [size | inline-size] || layout || style || paint ]",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "max-block-size",
+    "syntax": "<'max-width'>",
+    "computed": [
+      "sameAsMaxWidthAndMaxHeight"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "margin-block-end",
+    "syntax": "<'margin-top'>",
+    "computed": [
+      "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "text-emphasis-position",
+    "syntax": "[ over | under ] && [ right | left ]?",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "over right",
+    "inherited": true
+  },
+  {
+    "name": "font-language-override",
+    "syntax": "normal | <string>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "border-style",
+    "syntax": "<line-style>{1,4}",
+    "computed": [
+      "border-bottom-style",
+      "border-left-style",
+      "border-right-style",
+      "border-top-style"
+    ],
+    "initial": [
+      "border-top-style",
+      "border-right-style",
+      "border-bottom-style",
+      "border-left-style"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "scroll-margin-inline-end",
+    "syntax": "<length>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "nav-down",
+    "syntax": "auto | <id> [ current | root | <target-name> ]?",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "height",
+    "syntax": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>) | <calc-size()>",
+    "computed": [
+      "percentageAutoOrAbsoluteLength"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "border-image-repeat",
+    "syntax": "[ stretch | repeat | round | space ]{1,2}",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "stretch",
+    "inherited": false
+  },
+  {
+    "name": "line-break",
+    "syntax": "auto | loose | normal | strict | anywhere",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "-webkit-align-content",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "scroll-padding-block-start",
+    "syntax": "auto | <length-percentage [0,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "font-variant-numeric",
+    "syntax": "normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "scrollbar-width",
+    "syntax": "auto | thin | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-box-orient",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "grid-row-gap",
+    "syntax": "",
+    "computed": [
+      "percentageAsSpecifiedOrAbsoluteLength"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "direction",
+    "syntax": "ltr | rtl",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "ltr",
+    "inherited": true
+  },
+  {
+    "name": "ruby-merge",
+    "syntax": "separate | merge | auto",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "separate",
+    "inherited": true
+  },
+  {
+    "name": "scroll-margin-inline-start",
+    "syntax": "<length>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "anchor-scope",
+    "syntax": "none | all | <dashed-ident>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "link-parameters",
+    "syntax": "none | <link-param>+",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "border-left-style",
+    "syntax": "<line-style>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "word-wrap",
+    "syntax": "normal | break-word | anywhere",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "border-block-end-color",
+    "syntax": "<color> | <image-1D>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": false
+  },
+  {
+    "name": "border-left-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-transform-style",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "vector-effect",
+    "syntax": "none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "scroll-margin",
+    "syntax": "<length>{1,4}",
+    "computed": [
+      "scroll-margin-bottom",
+      "scroll-margin-left",
+      "scroll-margin-right",
+      "scroll-margin-top"
+    ],
+    "initial": [
+      "scroll-margin-bottom",
+      "scroll-margin-left",
+      "scroll-margin-right",
+      "scroll-margin-top"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "page",
+    "syntax": "auto | <custom-ident>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "inset-inline",
+    "syntax": "<'top'>{1,2}",
+    "computed": [
+      "inset-inline-start",
+      "inset-inline-end"
+    ],
+    "initial": [
+      "inset-inline-start",
+      "inset-inline-end"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "margin",
+    "syntax": "<'margin-top'>{1,4}",
+    "computed": [
+      "margin-bottom",
+      "margin-left",
+      "margin-right",
+      "margin-top"
+    ],
+    "initial": [
+      "margin-bottom",
+      "margin-left",
+      "margin-right",
+      "margin-top"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "text-shadow",
+    "syntax": "none | [ <color>? && <length>{2,3} ]#",
+    "computed": [
+      "colorPlusThreeAbsoluteLengths"
+    ],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "justify-self",
+    "syntax": "auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | anchor-center",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "offset-anchor",
+    "syntax": "auto | <position>",
+    "computed": [
+      "forLengthAbsoluteValueOtherwisePercentage"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "grid-template-columns",
+    "syntax": "none | <track-list> | <auto-track-list> | subgrid <line-name-list>?",
+    "computed": [
+      "asSpecifiedRelativeToAbsoluteLengths"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "border-block-start-color",
+    "syntax": "<color> | <image-1D>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": false
+  },
+  {
+    "name": "border-bottom-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "column-rule-color",
+    "syntax": "<color>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": false
+  },
+  {
+    "name": "inset-block-start",
+    "syntax": "auto | <length-percentage>",
+    "computed": [
+      "sameAsBoxOffsets"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "border-inline-end-style",
+    "syntax": "<line-style>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "voice-family",
+    "syntax": "[[<family-name> | <generic-voice>],]* [<family-name> | <generic-voice>] | preserve",
+    "computed": [],
+    "initial": "implementation-dependent",
+    "inherited": true
+  },
+  {
+    "name": "spatial-navigation-action",
+    "syntax": "auto | focus | scroll",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "position-visibility",
+    "syntax": "always | [ anchors-valid || anchors-visible || no-overflow ]",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "anchors-visible",
+    "inherited": false
+  },
+  {
+    "name": "user-select",
+    "syntax": "auto | text | none | contain | all",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "stroke-width",
+    "syntax": "[<length-percentage> | <number>]#",
+    "computed": [],
+    "initial": "1px",
+    "inherited": true
+  },
+  {
+    "name": "-webkit-box-align",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "rest-before",
+    "syntax": "<time [0s,∞]> | none | x-weak | weak | medium | strong | x-strong",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "marker-end",
+    "syntax": "none | <marker-ref>",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "overflow-x",
+    "syntax": "visible | hidden | clip | scroll | auto",
+    "computed": [
+      "asSpecifiedButVisibleOrClipReplacedToAutoOrHiddenIfOtherValueDifferent"
+    ],
+    "initial": "visible",
+    "inherited": false
+  },
+  {
+    "name": "text-decoration-line",
+    "syntax": "none | [ underline || overline || line-through || blink ]",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "scrollbar-gutter",
+    "syntax": "auto | stable && both-edges?",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "fill-color",
+    "syntax": "<color>",
+    "computed": [],
+    "initial": "currentcolor",
+    "inherited": true
+  },
+  {
+    "name": "stroke-dasharray",
+    "syntax": "none | [<length-percentage> | <number>]+#",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "border-inline-start-width",
+    "syntax": "<line-width>",
+    "computed": [
+      "absoluteLengthZeroIfBorderStyleNoneOrHidden"
+    ],
+    "initial": "medium",
+    "inherited": false
+  },
+  {
+    "name": "scroll-margin-block-start",
+    "syntax": "<length>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "scroll-margin-inline",
+    "syntax": "<length>{1,2}",
+    "computed": [
+      "scroll-margin-inline-start",
+      "scroll-margin-inline-end"
+    ],
+    "initial": [
+      "scroll-margin-inline-start",
+      "scroll-margin-inline-end"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "font-variant-east-asian",
+    "syntax": "normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "box-decoration-break",
+    "syntax": "slice | clone",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "slice",
+    "inherited": false
+  },
+  {
+    "name": "border-top-right-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2}",
+    "computed": [
+      "twoAbsoluteLengthOrPercentages"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "pause",
+    "syntax": "<'pause-before'> <'pause-after'>?",
+    "computed": [],
+    "initial": "N/A (see individual properties)",
+    "inherited": false
+  },
+  {
+    "name": "voice-duration",
+    "syntax": "auto | <time [0s,∞]>",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "margin-block-start",
+    "syntax": "<'margin-top'>",
+    "computed": [
+      "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "grid-column-end",
+    "syntax": "<grid-line>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-animation-timing-function",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-border-bottom-left-radius",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "padding-inline-start",
+    "syntax": "<'padding-top'>",
+    "computed": [
+      "asLength"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "marker-side",
+    "syntax": "match-self | match-parent",
+    "computed": [],
+    "initial": "match-self",
+    "inherited": true
+  },
+  {
+    "name": "mask-border-mode",
+    "syntax": "luminance | alpha",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "alpha",
+    "inherited": false
+  },
+  {
+    "name": "flex-basis",
+    "syntax": "content | <'width'>",
+    "computed": [
+      "asSpecifiedRelativeToAbsoluteLengths"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "wrap-through",
+    "syntax": "wrap | none",
+    "computed": [],
+    "initial": "wrap",
+    "inherited": false
+  },
+  {
+    "name": "border-right-width",
+    "syntax": "<line-width>",
+    "computed": [
+      "absoluteLengthOr0IfBorderRightStyleNoneOrHidden"
+    ],
+    "initial": "medium",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-border-top-left-radius",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "bookmark-label",
+    "syntax": "<content-list>",
+    "computed": [],
+    "initial": "content(text)",
+    "inherited": false
+  },
+  {
+    "name": "max-inline-size",
+    "syntax": "<'max-width'>",
+    "computed": [
+      "sameAsMaxWidthAndMaxHeight"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "stroke-linejoin",
+    "syntax": "[ crop | arcs | miter ] || [ bevel | round | fallback ]",
+    "computed": [],
+    "initial": "miter",
+    "inherited": true
+  },
+  {
+    "name": "border-right-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "vertical-align",
+    "syntax": "[ first | last] || <'alignment-baseline'> || <'baseline-shift'>",
+    "computed": [
+      "absoluteLengthOrKeyword"
+    ],
+    "initial": "baseline",
+    "inherited": false
+  },
+  {
+    "name": "voice-pitch",
+    "syntax": "<frequency [0Hz,∞]> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]]",
+    "computed": [],
+    "initial": "medium",
+    "inherited": true
+  },
+  {
+    "name": "inset-inline-end",
+    "syntax": "auto | <length-percentage>",
+    "computed": [
+      "sameAsBoxOffsets"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "scroll-timeline",
+    "syntax": "[ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#",
+    "computed": [
+      "scroll-timeline-name",
+      "scroll-timeline-axis"
+    ],
+    "initial": [
+      "scroll-timeline-name",
+      "scroll-timeline-axis"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "border-image",
+    "syntax": "<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>",
+    "computed": [
+      "border-image-outset",
+      "border-image-repeat",
+      "border-image-slice",
+      "border-image-source",
+      "border-image-width"
+    ],
+    "initial": [
+      "border-image-source",
+      "border-image-slice",
+      "border-image-width",
+      "border-image-outset",
+      "border-image-repeat"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "transform-origin",
+    "syntax": "[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>? | [[ center | left | right ] && [ center | top | bottom ]] <length>?",
+    "computed": [
+      "forLengthAbsoluteValueOtherwisePercentage"
+    ],
+    "initial": "50% 50% 0",
+    "inherited": false
+  },
+  {
+    "name": "float",
+    "syntax": "block-start | block-end | inline-start | inline-end | snap-block | <snap-block()> | snap-inline | <snap-inline()> | left | right | top | bottom | none | footnote",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "scroll-padding-top",
+    "syntax": "auto | <length-percentage [0,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "font-synthesis-style",
+    "syntax": "auto | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "hanging-punctuation",
+    "syntax": "none | [ first || [ force-end | allow-end ] || last ]",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "-webkit-animation-duration",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-background-clip",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "alignment-baseline",
+    "syntax": "baseline | text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top",
+    "computed": [],
+    "initial": "baseline",
+    "inherited": false
+  },
+  {
+    "name": "box-sizing",
+    "syntax": "content-box | border-box",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "content-box",
+    "inherited": false
+  },
+  {
+    "name": "box-shadow-offset",
+    "syntax": "[ none | <length>{2} ]#",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "block-step",
+    "syntax": "<'block-step-size'> || <'block-step-insert'> || <'block-step-align'> || <'block-step-round'>",
+    "computed": [],
+    "initial": "see individual properties",
+    "inherited": false
+  },
+  {
+    "name": "nav-left",
+    "syntax": "auto | <id> [ current | root | <target-name> ]?",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "background-repeat",
+    "syntax": "<repeat-style>#",
+    "computed": [
+      "listEachItemHasTwoKeywordsOnePerDimension"
+    ],
+    "initial": "repeat",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-mask-composite",
+    "syntax": "",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "source-over",
+    "inherited": false
+  },
+  {
+    "name": "initial-letter-align",
+    "syntax": "[ border-box? [ alphabetic | ideographic | hanging | leading ]? ]!",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "object-position",
+    "syntax": "<position>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "50% 50%",
+    "inherited": false
+  },
+  {
+    "name": "transition-delay",
+    "syntax": "<time>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0s",
+    "inherited": false
+  },
+  {
+    "name": "border-block-width",
+    "syntax": "<'border-top-width'>{1,2}",
+    "computed": [
+      "absoluteLengthZeroIfBorderStyleNoneOrHidden"
+    ],
+    "initial": "medium",
+    "inherited": false
+  },
+  {
+    "name": "border-top-left-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2}",
+    "computed": [
+      "twoAbsoluteLengthOrPercentages"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "ruby-position",
+    "syntax": "[ alternate || [ over | under ] ] | inter-character",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "alternate",
+    "inherited": true
+  },
+  {
+    "name": "overflow-block",
+    "syntax": "visible | hidden | clip | scroll | auto",
+    "computed": [
+      "asSpecifiedButVisibleOrClipReplacedToAutoOrHiddenIfOtherValueDifferent"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-flex",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "marker",
+    "syntax": "none | <marker-ref>",
+    "computed": [],
+    "initial": "not defined for shorthand properties",
+    "inherited": true
+  },
+  {
+    "name": "order",
+    "syntax": "<integer>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-mask-origin",
+    "syntax": "",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "padding",
+    "inherited": false
+  },
+  {
+    "name": "table-layout",
+    "syntax": "auto | fixed",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "left",
+    "syntax": "auto | <length-percentage>",
+    "computed": [
+      "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "mask-type",
+    "syntax": "luminance | alpha",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "luminance",
+    "inherited": false
+  },
+  {
+    "name": "offset-rotate",
+    "syntax": "[ auto | reverse ] || <angle>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "letter-spacing",
+    "syntax": "normal | <length>",
+    "computed": [
+      "optimumValueOfAbsoluteLengthOrNormal"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "-webkit-animation-iteration-count",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "fill",
+    "syntax": "<paint>",
+    "computed": [],
+    "initial": "black",
+    "inherited": true
+  },
+  {
+    "name": "caret-animation",
+    "syntax": "auto | manual",
+    "computed": [],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "border-image-outset",
+    "syntax": "[ <length [0,∞]> | <number [0,∞]> ]{1,4}",
+    "computed": [
+      "asSpecifiedRelativeToAbsoluteLengths"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "text-align-all",
+    "syntax": "start | end | left | right | center | justify | match-parent",
+    "computed": [],
+    "initial": "start",
+    "inherited": true
+  },
+  {
+    "name": "widows",
+    "syntax": "<integer [1,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "2",
+    "inherited": true
+  },
+  {
+    "name": "initial-letter-wrap",
+    "syntax": "none | first | all | grid | <length-percentage>",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "cue",
+    "syntax": "<'cue-before'> <'cue-after'>?",
+    "computed": [],
+    "initial": "N/A (see individual properties)",
+    "inherited": false
+  },
+  {
+    "name": "overflow-anchor",
+    "syntax": "auto | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "animation-fill-mode",
+    "syntax": "<single-animation-fill-mode>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "border-block-style",
+    "syntax": "<'border-top-style'>{1,2}",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-flex-shrink",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-transition",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "scroll-padding-bottom",
+    "syntax": "auto | <length-percentage [0,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "inset-block-end",
+    "syntax": "auto | <length-percentage>",
+    "computed": [
+      "sameAsBoxOffsets"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-appearance",
+    "syntax": "",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "noneButOverriddenInUserAgentCSS",
+    "inherited": false
+  },
+  {
+    "name": "scroll-timeline-axis",
+    "syntax": "[ block | inline | x | y ]#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "block",
+    "inherited": false
+  },
+  {
+    "name": "view-timeline-axis",
+    "syntax": "[ block | inline | x | y ]#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "block",
+    "inherited": false
+  },
+  {
+    "name": "stroke-size",
+    "syntax": "<bg-size>#",
+    "computed": [],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "font-style",
+    "syntax": "normal | italic | oblique <angle [-90deg,90deg]>?",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "border-block-color",
+    "syntax": "<'border-top-color'>{1,2}",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-filter",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "column-rule-width",
+    "syntax": "<line-width>",
+    "computed": [
+      "absoluteLength0IfColumnRuleStyleNoneOrHidden"
+    ],
+    "initial": "medium",
+    "inherited": false
+  },
+  {
+    "name": "empty-cells",
+    "syntax": "show | hide",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "show",
+    "inherited": true
+  },
+  {
+    "name": "max-width",
+    "syntax": "none | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>) | <calc-size()>",
+    "computed": [
+      "percentageAsSpecifiedAbsoluteLengthOrNone"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "grid-template-areas",
+    "syntax": "none | <string>+",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "border-inline-color",
+    "syntax": "<'border-top-color'>{1,2}",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": false
+  },
+  {
+    "name": "border-bottom-width",
+    "syntax": "<line-width>",
+    "computed": [
+      "absoluteLengthOr0IfBorderBottomStyleNoneOrHidden"
+    ],
+    "initial": "medium",
+    "inherited": false
+  },
+  {
+    "name": "border-start-end-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2}",
+    "computed": [
+      "twoAbsoluteLengthOrPercentages"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "flood-opacity",
+    "syntax": "<'opacity'>",
+    "computed": [],
+    "initial": "1",
+    "inherited": false
+  },
+  {
+    "name": "font-stretch",
+    "syntax": "",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "border-top",
+    "syntax": "<line-width> || <line-style> || <color>",
+    "computed": [
+      "border-top-width",
+      "border-top-style",
+      "border-top-color"
+    ],
+    "initial": [
+      "border-top-width",
+      "border-top-style",
+      "border-top-color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "-webkit-animation-name",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "fill-repeat",
+    "syntax": "<repeat-style>#",
+    "computed": [],
+    "initial": "repeat",
+    "inherited": true
+  },
+  {
+    "name": "margin-trim",
+    "syntax": "none | [ block || inline ] | [ block-start || inline-start || block-end || inline-end ]",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-border-radius",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "stroke-dashcorner",
+    "syntax": "none | <length>",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "background-image",
+    "syntax": "<bg-image>#",
+    "computed": [
+      "asSpecifiedURLsAbsolute"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "mask-border-source",
+    "syntax": "none | <image>",
+    "computed": [
+      "asSpecifiedURLsAbsolute"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "quotes",
+    "syntax": "auto | none | match-parent | [ <string> <string> ]+",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "dependsOnUserAgent",
+    "inherited": true
+  },
+  {
+    "name": "overscroll-behavior-block",
+    "syntax": "contain | none | auto",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "timeline-scope",
+    "syntax": "none | all | <dashed-ident>#",
+    "computed": [
+      "noneOrOrderedListOfIdentifiers"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "border-image-source",
+    "syntax": "none | <image>",
+    "computed": [
+      "noneOrImageWithAbsoluteURI"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "border-bottom-left-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2}",
+    "computed": [
+      "twoAbsoluteLengthOrPercentages"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-justify-content",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "stroke-repeat",
+    "syntax": "<repeat-style>#",
+    "computed": [],
+    "initial": "repeat",
+    "inherited": true
+  },
+  {
+    "name": "font-feature-settings",
+    "syntax": "normal | <feature-tag-value>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "flex-wrap",
+    "syntax": "nowrap | wrap | wrap-reverse",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "nowrap",
+    "inherited": false
+  },
+  {
+    "name": "box-shadow-position",
+    "syntax": "[ outset | inset ]#",
+    "computed": [],
+    "initial": "outset",
+    "inherited": false
+  },
+  {
+    "name": "font-width",
+    "syntax": "normal | <percentage [0,∞]> | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded",
+    "computed": [],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "grid-gap",
+    "syntax": "",
+    "computed": [
+      "grid-row-gap",
+      "grid-column-gap"
+    ],
+    "initial": [
+      "grid-row-gap",
+      "grid-column-gap"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "scroll-snap-align",
+    "syntax": "[ none | start | end | center ]{1,2}",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "padding-left",
+    "syntax": "<length-percentage [0,∞]>",
+    "computed": [
+      "percentageAsSpecifiedOrAbsoluteLength"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "footnote-display",
+    "syntax": "block | inline | compact",
+    "computed": [],
+    "initial": "block",
+    "inherited": false
+  },
+  {
+    "name": "border-clip-right",
+    "syntax": "normal | [ <length-percentage [0,∞]> | <flex> ]+",
+    "computed": [],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "mask-border-outset",
+    "syntax": "[ <length> | <number> ]{1,4}",
+    "computed": [
+      "asSpecifiedRelativeToAbsoluteLengths"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "touch-action",
+    "syntax": "auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-animation-direction",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-mask-clip",
+    "syntax": "",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "border",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-transition-timing-function",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "scroll-margin-bottom",
+    "syntax": "<length>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "margin-inline-start",
+    "syntax": "<'margin-top'>",
+    "computed": [
+      "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "text-combine-upright",
+    "syntax": "none | all | [ digits <integer [2,4]>? ]",
+    "computed": [
+      "keywordPlusIntegerIfDigits"
+    ],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "text-rendering",
+    "syntax": "auto | optimizeSpeed | optimizeLegibility | geometricPrecision",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "text-size-adjust",
+    "syntax": "auto | none | <percentage [0,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "autoForSmartphoneBrowsersSupportingInflation",
+    "inherited": true
+  },
+  {
+    "name": "color-scheme",
+    "syntax": "normal | [ light | dark | <custom-ident> ]+ && only?",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "print-color-adjust",
+    "syntax": "economy | exact",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "economy",
+    "inherited": true
+  },
+  {
+    "name": "fill-break",
+    "syntax": "bounding-box | slice | clone",
+    "computed": [],
+    "initial": "bounding-box",
+    "inherited": false
+  },
+  {
+    "name": "fill-opacity",
+    "syntax": "<'opacity'>",
+    "computed": [],
+    "initial": "1",
+    "inherited": true
+  },
+  {
+    "name": "text-transform",
+    "syntax": "none | [capitalize | uppercase | lowercase ] || full-width || full-size-kana | math-auto",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "border-block-end-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "column-fill",
+    "syntax": "auto | balance | balance-all",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "balance",
+    "inherited": false
+  },
+  {
+    "name": "x",
+    "syntax": "<length-percentage>",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "caret-color",
+    "syntax": "auto | <color>",
+    "computed": [
+      "asAutoOrColor"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "unicode-bidi",
+    "syntax": "normal | embed | isolate | bidi-override | isolate-override | plaintext",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-flex-grow",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "font-synthesis",
+    "syntax": "none | [ weight || style || small-caps || position]",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "weight style small-caps position ",
+    "inherited": true
+  },
+  {
+    "name": "footnote-policy",
+    "syntax": "auto | line | block",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "box-shadow-spread",
+    "syntax": "<length>#",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "text-box",
+    "syntax": "normal | <'text-box-trim'> || <'text-box-edge'>",
+    "computed": [],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "flow-from",
+    "syntax": "<ident> | none",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "text-overflow",
+    "syntax": "clip | ellipsis",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "clip",
+    "inherited": false
+  },
+  {
+    "name": "anchor-name",
+    "syntax": "none | <dashed-ident>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "animation-range",
+    "syntax": "[ <'animation-range-start'> <'animation-range-end'>? ]#",
+    "computed": [
+      "animation-range-start",
+      "animation-range-end"
+    ],
+    "initial": [
+      "animation-range-start",
+      "animation-range-end"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "background-blend-mode",
+    "syntax": "<mix-blend-mode>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "animation-name",
+    "syntax": "[ none | <keyframes-name> ]#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "padding-block",
+    "syntax": "<'padding-top'>{1,2}",
+    "computed": [
+      "padding-block-start",
+      "padding-block-end"
+    ],
+    "initial": [
+      "padding-block-start",
+      "padding-block-end"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "counter-reset",
+    "syntax": "[ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+ | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "mask-image",
+    "syntax": "<mask-reference>#",
+    "computed": [
+      "asSpecifiedURLsAbsolute"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-transition-duration",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "content-visibility",
+    "syntax": "visible | auto | hidden",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "visible",
+    "inherited": false
+  },
+  {
+    "name": "position-area",
+    "syntax": "none | <position-area>",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "view-timeline",
+    "syntax": "[ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#",
+    "computed": [
+      "view-timeline-name",
+      "view-timeline-axis"
+    ],
+    "initial": [
+      "view-timeline-name",
+      "view-timeline-axis"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "padding-bottom",
+    "syntax": "<length-percentage [0,∞]>",
+    "computed": [
+      "percentageAsSpecifiedOrAbsoluteLength"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "border-inline-start",
+    "syntax": "<line-width> || <line-style> || <color>",
+    "computed": [
+      "border-width",
+      "border-style",
+      "border-inline-start-color"
+    ],
+    "initial": [
+      "border-width",
+      "border-style",
+      "color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "-webkit-flex-flow",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "line-height-step",
+    "syntax": "<length [0,∞]>",
+    "computed": [
+      "absoluteLength"
+    ],
+    "initial": "0",
+    "inherited": true
+  },
+  {
+    "name": "border-spacing",
+    "syntax": "<length>{1,2}",
+    "computed": [
+      "twoAbsoluteLengths"
+    ],
+    "initial": "0",
+    "inherited": true
+  },
+  {
+    "name": "text-underline-position",
+    "syntax": "auto | [ under || [ left | right ] ]",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "transform",
+    "syntax": "none | <transform-list>",
+    "computed": [
+      "asSpecifiedRelativeToAbsoluteLengths"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "transition-timing-function",
+    "syntax": "<easing-function>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "ease",
+    "inherited": false
+  },
+  {
+    "name": "scroll-margin-block-end",
+    "syntax": "<length>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "background-origin",
+    "syntax": "<visual-box>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "padding-box",
+    "inherited": false
+  },
+  {
+    "name": "animation-duration",
+    "syntax": "<time [0s,∞]>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0s",
+    "inherited": false
+  },
+  {
+    "name": "border-clip-bottom",
+    "syntax": "normal | [ <length-percentage [0,∞]> | <flex> ]+",
+    "computed": [],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-align-self",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "padding-block-end",
+    "syntax": "<'padding-top'>",
+    "computed": [
+      "asLength"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "overscroll-behavior-x",
+    "syntax": "contain | none | auto",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-user-select",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "font-variant-emoji",
+    "syntax": "normal | text | emoji | unicode",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "color",
+    "syntax": "<color>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "canvastext",
+    "inherited": true
+  },
+  {
+    "name": "-webkit-mask-size",
+    "syntax": "",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto auto",
+    "inherited": false
+  },
+  {
+    "name": "voice-volume",
+    "syntax": "silent | [[x-soft | soft | medium | loud | x-loud] || <decibel>]",
+    "computed": [],
+    "initial": "medium",
+    "inherited": true
+  },
+  {
+    "name": "background-clip",
+    "syntax": "<visual-box>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "border-box",
+    "inherited": false
+  },
+  {
+    "name": "border-right",
+    "syntax": "<line-width> || <line-style> || <color>",
+    "computed": [
+      "border-right-width",
+      "border-right-style",
+      "border-right-color"
+    ],
+    "initial": [
+      "border-right-width",
+      "border-right-style",
+      "border-right-color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "stroke-alignment",
+    "syntax": "center | inner | outer",
+    "computed": [],
+    "initial": "center",
+    "inherited": true
+  },
+  {
+    "name": "scroll-behavior",
+    "syntax": "auto | smooth",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "background-position",
+    "syntax": "<bg-position>#",
+    "computed": [
+      "background-position-x",
+      "background-position-y"
+    ],
+    "initial": "0% 0%",
+    "inherited": false
+  },
+  {
+    "name": "z-index",
+    "syntax": "auto | <integer> | inherit",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "column-gap",
+    "syntax": "normal | <length-percentage [0,∞]>",
+    "computed": [
+      "asSpecifiedWithLengthsAbsoluteAndNormalComputingToZeroExceptMultiColumn"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "break-after",
+    "syntax": "auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "line-height",
+    "syntax": "normal | <number [0,∞]> | <length-percentage [0,∞]>",
+    "computed": [
+      "absoluteLengthOrAsSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "mask-border-width",
+    "syntax": "[ <length-percentage> | <number> | auto ]{1,4}",
+    "computed": [
+      "asSpecifiedRelativeToAbsoluteLengths"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "bookmark-state",
+    "syntax": "open | closed",
+    "computed": [],
+    "initial": "open",
+    "inherited": false
+  },
+  {
+    "name": "background-size",
+    "syntax": "<bg-size>#",
+    "computed": [
+      "asSpecifiedRelativeToAbsoluteLengths"
+    ],
+    "initial": "auto auto",
+    "inherited": false
+  },
+  {
+    "name": "display",
+    "syntax": "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> | <display-outside> || [ <display-inside> | math ]",
+    "computed": [
+      "asSpecifiedExceptPositionedFloatingAndRootElementsKeywordMaybeDifferent"
+    ],
+    "initial": "inline",
+    "inherited": false
+  },
+  {
+    "name": "flex-shrink",
+    "syntax": "<number [0,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "1",
+    "inherited": false
+  },
+  {
+    "name": "border-right-style",
+    "syntax": "<line-style>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "baseline-source",
+    "syntax": "auto | first | last",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "text-orientation",
+    "syntax": "mixed | upright | sideways",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "mixed",
+    "inherited": true
+  },
+  {
+    "name": "text-align-last",
+    "syntax": "auto | start | end | left | right | center | justify | match-parent",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "orphans",
+    "syntax": "<integer [1,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "2",
+    "inherited": true
+  },
+  {
+    "name": "border-block-start-width",
+    "syntax": "<line-width>",
+    "computed": [
+      "absoluteLengthZeroIfBorderStyleNoneOrHidden"
+    ],
+    "initial": "medium",
+    "inherited": false
+  },
+  {
+    "name": "cue-before",
+    "syntax": "<uri> <decibel>? | none",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "y",
+    "syntax": "<length-percentage>",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "content",
+    "syntax": "normal | none | [ <content-replacement> | <content-list> ] [/ [ <string> | <counter> | <attr()> ]+ ]? | <element()>",
+    "computed": [
+      "normalOnElementsForPseudosNoneAbsoluteURIStringOrAsSpecified"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "break-before",
+    "syntax": "auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-text-stroke-width",
+    "syntax": "<line-width>",
+    "computed": [
+      "absoluteLength"
+    ],
+    "initial": "0",
+    "inherited": true
+  },
+  {
+    "name": "min-inline-size",
+    "syntax": "<'min-width'>",
+    "computed": [
+      "sameAsMinWidthAndMinHeight"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "clear",
+    "syntax": "inline-start | inline-end | block-start | block-end | left | right | top | bottom | both-inline | both-block | both | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "transition-duration",
+    "syntax": "<time [0s,∞]>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0s",
+    "inherited": false
+  },
+  {
+    "name": "border-block-start-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "voice-balance",
+    "syntax": "<number> | left | center | right | leftwards | rightwards",
+    "computed": [],
+    "initial": "center",
+    "inherited": true
+  },
+  {
+    "name": "color-adjust",
+    "syntax": "<'print-color-adjust'>",
+    "computed": [],
+    "initial": "see individual properties",
+    "inherited": false
+  },
+  {
+    "name": "stroke-miterlimit",
+    "syntax": "<number>",
+    "computed": [],
+    "initial": "4",
+    "inherited": true
+  },
+  {
+    "name": "border-image-width",
+    "syntax": "[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}",
+    "computed": [
+      "asSpecifiedRelativeToAbsoluteLengths"
+    ],
+    "initial": "1",
+    "inherited": false
+  },
+  {
+    "name": "mask-clip",
+    "syntax": "[ <coord-box> | no-clip ]#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "border-box",
+    "inherited": false
+  },
+  {
+    "name": "row-gap",
+    "syntax": "normal | <length-percentage [0,∞]>",
+    "computed": [
+      "asSpecifiedWithLengthsAbsoluteAndNormalComputingToZeroExceptMultiColumn"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "column-width",
+    "syntax": "auto | <length [0,∞]> | min-content | max-content | fit-content(<length-percentage>)",
+    "computed": [
+      "absoluteLengthZeroOrLarger"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "scroll-padding-left",
+    "syntax": "auto | <length-percentage [0,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "animation-range-start",
+    "syntax": "[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#",
+    "computed": [
+      "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "max-height",
+    "syntax": "none | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>) | <calc-size()>",
+    "computed": [
+      "percentageAsSpecifiedAbsoluteLengthOrNone"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "font-synthesis-position",
+    "syntax": "auto | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "border-top-width",
+    "syntax": "<line-width>",
+    "computed": [
+      "absoluteLengthOr0IfBorderTopStyleNoneOrHidden"
+    ],
+    "initial": "medium",
+    "inherited": false
+  },
+  {
+    "name": "border-inline-width",
+    "syntax": "<'border-top-width'>{1,2}",
+    "computed": [
+      "absoluteLengthZeroIfBorderStyleNoneOrHidden"
+    ],
+    "initial": "medium",
+    "inherited": false
+  },
+  {
+    "name": "grid-auto-columns",
+    "syntax": "<track-size>+",
+    "computed": [
+      "percentageAsSpecifiedOrAbsoluteLength"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "border-bottom-color",
+    "syntax": "<color> | <image-1D>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-text-fill-color",
+    "syntax": "<color>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": true
+  },
+  {
+    "name": "-webkit-backface-visibility",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-box-shadow",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-perspective",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "pause-after",
+    "syntax": "<time [0s,∞]> | none | x-weak | weak | medium | strong | x-strong",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "caption-side",
+    "syntax": "top | bottom",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "top",
+    "inherited": true
+  },
+  {
+    "name": "position-try-order",
+    "syntax": "normal | <try-size>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "offset-position",
+    "syntax": "normal | auto | <position>",
+    "computed": [
+      "forLengthAbsoluteValueOtherwisePercentage"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "border-clip-left",
+    "syntax": "normal | [ <length-percentage [0,∞]> | <flex> ]+",
+    "computed": [],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "r",
+    "syntax": "<length-percentage>",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "place-self",
+    "syntax": "<'align-self'> <'justify-self'>?",
+    "computed": [
+      "align-self",
+      "justify-self"
+    ],
+    "initial": [
+      "align-self",
+      "justify-self"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "scrollbar-color",
+    "syntax": "auto | <color>{2}",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "block-step-round",
+    "syntax": "up | down | nearest",
+    "computed": [],
+    "initial": "up",
+    "inherited": false
+  },
+  {
+    "name": "marker-mid",
+    "syntax": "none | <marker-ref>",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "inline-size",
+    "syntax": "<'width'>",
+    "computed": [
+      "sameAsWidthAndHeight"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "flood-color",
+    "syntax": "<color>",
+    "computed": [],
+    "initial": "black",
+    "inherited": false
+  },
+  {
+    "name": "caret",
+    "syntax": "<'caret-color'> || <'caret-animation'> || <'caret-shape'>",
+    "computed": [
+      "caret-color",
+      "caret-shape"
+    ],
+    "initial": [
+      "caret-color",
+      "caret-shape"
+    ],
+    "inherited": true
+  },
+  {
+    "name": "border-inline-start-color",
+    "syntax": "<color> | <image-1D>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": false
+  },
+  {
+    "name": "border-end-start-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2}",
+    "computed": [
+      "twoAbsoluteLengthOrPercentages"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "column-count",
+    "syntax": "auto | <integer [1,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "stop-opacity",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "math-style",
+    "syntax": "normal | compact",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "appearance",
+    "syntax": "none | auto | <compat-auto> | <compat-special>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "stroke-dash-corner",
+    "syntax": "none | <length>",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "font-palette",
+    "syntax": "normal | light | dark | <palette-identifier> | <palette-mix()>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "text-justify",
+    "syntax": "auto | none | inter-word | inter-character",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "-webkit-animation-delay",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "shape-subtract",
+    "syntax": "none | [ <basic-shape>| <uri> ]+",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "scroll-snap-stop",
+    "syntax": "normal | always",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "list-style",
+    "syntax": "<'list-style-position'> || <'list-style-image'> || <'list-style-type'>",
+    "computed": [
+      "list-style-image",
+      "list-style-position",
+      "list-style-type"
+    ],
+    "initial": [
+      "list-style-type",
+      "list-style-position",
+      "list-style-image"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "margin-break",
+    "syntax": "auto | keep | discard",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "border-left-width",
+    "syntax": "<line-width>",
+    "computed": [
+      "absoluteLengthOr0IfBorderLeftStyleNoneOrHidden"
+    ],
+    "initial": "medium",
+    "inherited": false
+  },
+  {
+    "name": "overflow-inline",
+    "syntax": "visible | hidden | clip | scroll | auto",
+    "computed": [
+      "asSpecifiedButVisibleOrClipReplacedToAutoOrHiddenIfOtherValueDifferent"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "block-size",
+    "syntax": "<'width'>",
+    "computed": [
+      "sameAsWidthAndHeight"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "overscroll-behavior",
+    "syntax": "[ contain | none | auto ]{1,2}",
+    "computed": [
+      "overscroll-behavior-x",
+      "overscroll-behavior-y"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "margin-bottom",
+    "syntax": "<length-percentage> | auto",
+    "computed": [
+      "percentageAsSpecifiedOrAbsoluteLength"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "padding-right",
+    "syntax": "<length-percentage [0,∞]>",
+    "computed": [
+      "percentageAsSpecifiedOrAbsoluteLength"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "page-break-before",
+    "syntax": "auto | always | avoid | left | right | inherit",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "box-shadow-blur",
+    "syntax": "<length [0,∞]>#",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-animation-play-state",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "fill-size",
+    "syntax": "<bg-size>#",
+    "computed": [],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "clip",
+    "syntax": "<rect()> | auto",
+    "computed": [
+      "autoOrRectangle"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "mask-composite",
+    "syntax": "<compositing-operator>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "add",
+    "inherited": false
+  },
+  {
+    "name": "border-inline-start-style",
+    "syntax": "<line-style>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "box-shadow-color",
+    "syntax": "<color>#",
+    "computed": [],
+    "initial": "currentcolor",
+    "inherited": false
+  },
+  {
+    "name": "stroke-image",
+    "syntax": "<paint>#",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "background-color",
+    "syntax": "<color>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "transparent",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-mask-position",
+    "syntax": "",
+    "computed": [
+      "absoluteLengthOrPercentage"
+    ],
+    "initial": "0% 0%",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-box-ordinal-group",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "initial-letter",
+    "syntax": "normal | <number [1,∞]> <integer [1,∞]> | <number [1,∞]> && [ drop | raise ]?",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "d",
+    "syntax": "none | <string>",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "list-style-position",
+    "syntax": "inside | outside",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "outside",
+    "inherited": true
+  },
+  {
+    "name": "float-reference",
+    "syntax": "inline | column | region | page",
+    "computed": [],
+    "initial": "inline",
+    "inherited": false
+  },
+  {
+    "name": "font-size",
+    "syntax": "<absolute-size> | <relative-size> | <length-percentage [0,∞]> | math",
+    "computed": [
+      "asSpecifiedRelativeToAbsoluteLengths"
+    ],
+    "initial": "medium",
+    "inherited": true
+  },
+  {
+    "name": "grid-row-end",
+    "syntax": "<grid-line>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "border-clip",
+    "syntax": "normal | [ <length-percentage [0,∞]> | <flex> ]+",
+    "computed": [],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "padding-inline",
+    "syntax": "<'padding-top'>{1,2}",
+    "computed": [
+      "padding-inline-start",
+      "padding-inline-end"
+    ],
+    "initial": [
+      "padding-inline-start",
+      "padding-inline-end"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "lighting-color",
+    "syntax": "<color>",
+    "computed": [],
+    "initial": "white",
+    "inherited": false
+  },
+  {
+    "name": "math-shift",
+    "syntax": "normal | compact",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "mask-border-slice",
+    "syntax": "[ <number> | <percentage> ]{1,4} fill?",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "scroll-snap-type",
+    "syntax": "none | [ x | y | block | inline | both ] [ mandatory | proximity ]?",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "transition",
+    "syntax": "<single-transition>#",
+    "computed": [
+      "transition-delay",
+      "transition-duration",
+      "transition-property",
+      "transition-timing-function",
+      "transition-behavior"
+    ],
+    "initial": [
+      "transition-delay",
+      "transition-duration",
+      "transition-property",
+      "transition-timing-function",
+      "transition-behavior"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "-webkit-animation",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "baseline-shift",
+    "syntax": "<length-percentage> | sub | super | top | center | bottom",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "stroke-break",
+    "syntax": "bounding-box | slice | clone",
+    "computed": [],
+    "initial": "bounding-box",
+    "inherited": false
+  },
+  {
+    "name": "stroke-dashoffset",
+    "syntax": "<length-percentage> | <number>",
+    "computed": [],
+    "initial": "0",
+    "inherited": true
+  },
+  {
+    "name": "animation-iteration-count",
+    "syntax": "<single-animation-iteration-count>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "1",
+    "inherited": false
+  },
+  {
+    "name": "align-items",
+    "syntax": "normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ] | anchor-center",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "grid-row",
+    "syntax": "<grid-line> [ / <grid-line> ]?",
+    "computed": [
+      "grid-row-start",
+      "grid-row-end"
+    ],
+    "initial": [
+      "grid-row-start",
+      "grid-row-end"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "paint-order",
+    "syntax": "normal | [ fill || stroke || markers ]",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "stop-color",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "padding-inline-end",
+    "syntax": "<'padding-top'>",
+    "computed": [
+      "asLength"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "animation-play-state",
+    "syntax": "<single-animation-play-state>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "running",
+    "inherited": false
+  },
+  {
+    "name": "word-spacing",
+    "syntax": "normal | <length>",
+    "computed": [
+      "absoluteLength"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "-webkit-mask",
+    "syntax": "",
+    "computed": [
+      "-webkit-mask-image",
+      "-webkit-mask-repeat",
+      "-webkit-mask-attachment",
+      "-webkit-mask-position",
+      "-webkit-mask-origin",
+      "-webkit-mask-clip"
+    ],
+    "initial": [
+      "-webkit-mask-image",
+      "-webkit-mask-repeat",
+      "-webkit-mask-attachment",
+      "-webkit-mask-position",
+      "-webkit-mask-origin",
+      "-webkit-mask-clip"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "ruby-overhang",
+    "syntax": "auto | none",
+    "computed": [],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "text-emphasis-color",
+    "syntax": "<color>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": true
+  },
+  {
+    "name": "position-try-fallbacks",
+    "syntax": "none | [ [<dashed-ident> || <try-tactic>] | <'position-area'> ]#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "inset-inline-start",
+    "syntax": "auto | <length-percentage>",
+    "computed": [
+      "sameAsBoxOffsets"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "will-change",
+    "syntax": "auto | <animateable-feature>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "font-family",
+    "syntax": "[ <family-name> | <generic-family> ]#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "dependsOnUserAgent",
+    "inherited": true
+  },
+  {
+    "name": "grid",
+    "syntax": "<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>",
+    "computed": [
+      "grid-template-rows",
+      "grid-template-columns",
+      "grid-template-areas",
+      "grid-auto-rows",
+      "grid-auto-columns",
+      "grid-auto-flow",
+      "grid-column-gap",
+      "grid-row-gap",
+      "column-gap",
+      "row-gap"
+    ],
+    "initial": [
+      "grid-template-rows",
+      "grid-template-columns",
+      "grid-template-areas",
+      "grid-auto-rows",
+      "grid-auto-columns",
+      "grid-auto-flow",
+      "grid-column-gap",
+      "grid-row-gap",
+      "column-gap",
+      "row-gap"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "position-anchor",
+    "syntax": "auto | <anchor-element>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "implicit",
+    "inherited": false
+  },
+  {
+    "name": "view-timeline-inset",
+    "syntax": "[ [ auto | <length-percentage> ]{1,2} ]#",
+    "computed": [
+      "listEachItemConsistingOfPairsOfAutoOrLengthPercentage"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "background-attachment",
+    "syntax": "<attachment>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "scroll",
+    "inherited": false
+  },
+  {
+    "name": "clip-rule",
+    "syntax": "nonzero | evenodd",
+    "computed": [],
+    "initial": "nonzero",
+    "inherited": true
+  },
+  {
+    "name": "-webkit-mask-box-image-repeat",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "min-block-size",
+    "syntax": "<'min-width'>",
+    "computed": [
+      "sameAsMinWidthAndMinHeight"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "font",
+    "syntax": "[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | <system-family-name>",
+    "computed": [
+      "font-style",
+      "font-variant",
+      "font-weight",
+      "font-stretch",
+      "font-size",
+      "line-height",
+      "font-family"
+    ],
+    "initial": [
+      "font-style",
+      "font-variant",
+      "font-weight",
+      "font-stretch",
+      "font-size",
+      "line-height",
+      "font-family"
+    ],
+    "inherited": true
+  },
+  {
+    "name": "animation",
+    "syntax": "<single-animation>#",
+    "computed": [
+      "animation-name",
+      "animation-duration",
+      "animation-timing-function",
+      "animation-delay",
+      "animation-direction",
+      "animation-iteration-count",
+      "animation-fill-mode",
+      "animation-play-state",
+      "animation-timeline"
+    ],
+    "initial": [
+      "animation-name",
+      "animation-duration",
+      "animation-timing-function",
+      "animation-delay",
+      "animation-iteration-count",
+      "animation-direction",
+      "animation-fill-mode",
+      "animation-play-state",
+      "animation-timeline"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "glyph-orientation-vertical",
+    "syntax": "auto | 0deg | 90deg | 0 | 90",
+    "computed": [],
+    "initial": "n/a",
+    "inherited": false
+  },
+  {
+    "name": "grid-area",
+    "syntax": "<grid-line> [ / <grid-line> ]{0,3}",
+    "computed": [
+      "grid-row-start",
+      "grid-column-start",
+      "grid-row-end",
+      "grid-column-end"
+    ],
+    "initial": [
+      "grid-row-start",
+      "grid-column-start",
+      "grid-row-end",
+      "grid-column-end"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "border-top-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-transform",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "block-step-align",
+    "syntax": "auto | center | start | end",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "scroll-padding-right",
+    "syntax": "auto | <length-percentage [0,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "field-sizing",
+    "syntax": "fixed | content",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "fixed",
+    "inherited": false
+  },
+  {
+    "name": "fill-position",
+    "syntax": "<position>#",
+    "computed": [],
+    "initial": "0% 0%",
+    "inherited": true
+  },
+  {
+    "name": "grid-column-gap",
+    "syntax": "",
+    "computed": [
+      "percentageAsSpecifiedOrAbsoluteLength"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "text-box-edge",
+    "syntax": "auto | <text-edge>",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "overflow",
+    "syntax": "<'overflow-block'>{1,2}",
+    "computed": [
+      "overflow-x",
+      "overflow-y"
+    ],
+    "initial": "visible",
+    "inherited": false
+  },
+  {
+    "name": "counter-increment",
+    "syntax": "[ <counter-name> <integer>? ]+ | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "caret-shape",
+    "syntax": "auto | bar | block | underscore",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "line-fit-edge",
+    "syntax": "leading | <text-edge>",
+    "computed": [],
+    "initial": "leading",
+    "inherited": true
+  },
+  {
+    "name": "-webkit-box-sizing",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-mask-box-image",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "spatial-navigation-contain",
+    "syntax": "auto | contain",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "margin-block",
+    "syntax": "<'margin-top'>{1,2}",
+    "computed": [
+      "margin-block-start",
+      "margin-block-end"
+    ],
+    "initial": [
+      "margin-block-start",
+      "margin-block-end"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "box-snap",
+    "syntax": "none | block-start | block-end | center | baseline | last-baseline",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "font-synthesis-weight",
+    "syntax": "auto | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "clip-path",
+    "syntax": "<clip-source> | [ <basic-shape> || <geometry-box> ] | none",
+    "computed": [
+      "asSpecifiedURLsAbsolute"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "mask-border-repeat",
+    "syntax": "[ stretch | repeat | round | space ]{1,2}",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "stretch",
+    "inherited": false
+  },
+  {
+    "name": "mask-border",
+    "syntax": "<'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>",
+    "computed": [
+      "mask-border-mode",
+      "mask-border-outset",
+      "mask-border-repeat",
+      "mask-border-slice",
+      "mask-border-source",
+      "mask-border-width"
+    ],
+    "initial": [
+      "mask-border-mode",
+      "mask-border-outset",
+      "mask-border-repeat",
+      "mask-border-slice",
+      "mask-border-source",
+      "mask-border-width"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "grid-column",
+    "syntax": "<grid-line> [ / <grid-line> ]?",
+    "computed": [
+      "grid-column-start",
+      "grid-column-end"
+    ],
+    "initial": [
+      "grid-column-start",
+      "grid-column-end"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "string-set",
+    "syntax": "none | [ <custom-ident> <string>+ ]#",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "border-bottom-style",
+    "syntax": "<line-style>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-flex-wrap",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "border-boundary",
+    "syntax": "none | parent | display",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "scroll-padding-inline-start",
+    "syntax": "auto | <length-percentage [0,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "list-style-image",
+    "syntax": "<image> | none",
+    "computed": [
+      "theKeywordListStyleImageNoneOrComputedValue"
+    ],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "mask-mode",
+    "syntax": "<masking-mode>#",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "match-source",
+    "inherited": false
+  },
+  {
+    "name": "wrap-flow",
+    "syntax": "auto | both | start | end | minimum | maximum | clear",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "border-right-color",
+    "syntax": "<color> | <image-1D>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": false
+  },
+  {
+    "name": "border-block-start",
+    "syntax": "<line-width> || <line-style> || <color>",
+    "computed": [
+      "border-width",
+      "border-style",
+      "border-block-start-color"
+    ],
+    "initial": [
+      "border-width",
+      "border-style",
+      "color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "bookmark-level",
+    "syntax": "none | <integer [1,∞]>",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "ruby-align",
+    "syntax": "start | center | space-between | space-around",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "space-around",
+    "inherited": true
+  },
+  {
+    "name": "font-variant-ligatures",
+    "syntax": "normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "font-variant-alternates",
+    "syntax": "normal | [ stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name>#) || character-variant(<feature-value-name>#) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) ]",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "block-step-size",
+    "syntax": "none | <length [0,∞]>",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "stroke-linecap",
+    "syntax": "butt | round | square",
+    "computed": [],
+    "initial": "butt",
+    "inherited": true
+  },
+  {
+    "name": "border-inline",
+    "syntax": "<'border-block-start'>",
+    "computed": [
+      "border-inline-width",
+      "border-inline-style",
+      "border-inline-color"
+    ],
+    "initial": [
+      "border-inline-width",
+      "border-inline-style",
+      "border-inline-color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "border-inline-start-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?",
+    "computed": [],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "text-box-trim",
+    "syntax": "none | trim-start | trim-end | trim-both",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "ry",
+    "syntax": "<length-percentage> | auto",
+    "computed": [],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "input-security",
+    "syntax": "auto | none",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "font-variant-caps",
+    "syntax": "normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "justify-items",
+    "syntax": "normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "legacy",
+    "inherited": false
+  },
+  {
+    "name": "offset-distance",
+    "syntax": "<length-percentage>",
+    "computed": [
+      "forLengthAbsoluteValueOtherwisePercentage"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "grid-auto-flow",
+    "syntax": "[ row | column ] || dense",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "row",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-transform-origin",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "line-grid",
+    "syntax": "match-parent | create",
+    "computed": [],
+    "initial": "match-parent",
+    "inherited": false
+  },
+  {
+    "name": "inset-block",
+    "syntax": "<'top'>{1,2}",
+    "computed": [
+      "inset-block-start",
+      "inset-block-end"
+    ],
+    "initial": [
+      "inset-block-start",
+      "inset-block-end"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "resize",
+    "syntax": "none | both | horizontal | vertical | block | inline",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "mask",
+    "syntax": "<mask-layer>#",
+    "computed": [
+      "mask-image",
+      "mask-mode",
+      "mask-repeat",
+      "mask-position",
+      "mask-clip",
+      "mask-origin",
+      "mask-size",
+      "mask-composite"
+    ],
+    "initial": [
+      "mask-image",
+      "mask-mode",
+      "mask-repeat",
+      "mask-position",
+      "mask-clip",
+      "mask-origin",
+      "mask-size",
+      "mask-composite"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "-webkit-background-origin",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "spatial-navigation-function",
+    "syntax": "normal | grid",
+    "computed": [],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "overflow-clip-margin",
+    "syntax": "<visual-box> || <length [0,∞]>",
+    "computed": [
+      "theComputedLengthAndVisualBox"
+    ],
+    "initial": "0px",
+    "inherited": false
+  },
+  {
+    "name": "margin-inline",
+    "syntax": "<'margin-top'>{1,2}",
+    "computed": [
+      "margin-inline-start",
+      "margin-inline-end"
+    ],
+    "initial": [
+      "margin-inline-start",
+      "margin-inline-end"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "border-width",
+    "syntax": "<line-width>{1,4}",
+    "computed": [
+      "border-bottom-width",
+      "border-left-width",
+      "border-right-width",
+      "border-top-width"
+    ],
+    "initial": [
+      "border-top-width",
+      "border-right-width",
+      "border-bottom-width",
+      "border-left-width"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "grid-template",
+    "syntax": "none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?",
+    "computed": [
+      "grid-template-columns",
+      "grid-template-rows",
+      "grid-template-areas"
+    ],
+    "initial": [
+      "grid-template-columns",
+      "grid-template-rows",
+      "grid-template-areas"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "border-left-color",
+    "syntax": "<color> | <image-1D>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": false
+  },
+  {
+    "name": "border-start-start-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2}",
+    "computed": [
+      "twoAbsoluteLengthOrPercentages"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "padding-block-start",
+    "syntax": "<'padding-top'>",
+    "computed": [
+      "asLength"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "position-try",
+    "syntax": "<'position-try-order'>? <'position-try-fallbacks'>",
+    "computed": [
+      "position-try-fallbacks",
+      "position-try-order"
+    ],
+    "initial": [
+      "position-try-fallbacks",
+      "position-try-order"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "overscroll-behavior-inline",
+    "syntax": "contain | none | auto",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "outline-style",
+    "syntax": "auto | <outline-line-style>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "outline-offset",
+    "syntax": "<length>",
+    "computed": [
+      "asSpecifiedRelativeToAbsoluteLengths"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "fill-image",
+    "syntax": "<paint>#",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "text-align",
+    "syntax": "start | end | left | right | center | justify | match-parent | justify-all",
+    "computed": [
+      "asSpecifiedExceptMatchParent"
+    ],
+    "initial": "startOrNamelessValueIfLTRRightIfRTL",
+    "inherited": true
+  },
+  {
+    "name": "stroke",
+    "syntax": "<paint>",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "-webkit-border-bottom-right-radius",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-order",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-perspective-origin",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "reading-flow",
+    "syntax": "normal | flex-visual | flex-flow | grid-rows | grid-columns | grid-order",
+    "computed": [],
+    "initial": "normal",
+    "inherited": false
+  },
+  {
+    "name": "flex",
+    "syntax": "none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]",
+    "computed": [
+      "flex-grow",
+      "flex-shrink",
+      "flex-basis"
+    ],
+    "initial": [
+      "flex-grow",
+      "flex-shrink",
+      "flex-basis"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "border-limit",
+    "syntax": "all | [ sides | corners ] <length-percentage [0,∞]>? | [ top | right | bottom | left ] <length-percentage [0,∞]>",
+    "computed": [],
+    "initial": "all",
+    "inherited": false
+  },
+  {
+    "name": "font-size-adjust",
+    "syntax": "none | <number [0,∞]>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "word-break",
+    "syntax": "normal | keep-all | break-all | break-word",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "border-top-style",
+    "syntax": "<line-style>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "corners",
+    "syntax": "<'corner-shape'> || <'border-radius'>",
+    "computed": [],
+    "initial": "see individual properties",
+    "inherited": false
+  },
+  {
+    "name": "shape-image-threshold",
+    "syntax": "<opacity-value>",
+    "computed": [
+      "specifiedValueNumberClipped0To1"
+    ],
+    "initial": "0.0",
+    "inherited": false
+  },
+  {
+    "name": "text-emphasis-style",
+    "syntax": "none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "transform-box",
+    "syntax": "content-box | border-box | fill-box | stroke-box | view-box",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "view-box",
+    "inherited": false
+  },
+  {
+    "name": "page-break-after",
+    "syntax": "auto | always | avoid | left | right | inherit",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": false
+  },
+  {
+    "name": "corner-shape",
+    "syntax": "[ round | angle ]{1,4}",
+    "computed": [],
+    "initial": "round",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-align-items",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-mask-repeat",
+    "syntax": "",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "repeat",
+    "inherited": false
+  },
+  {
+    "name": "image-rendering",
+    "syntax": "auto | smooth | high-quality | pixelated | crisp-edges",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "color-interpolation",
+    "syntax": "auto | sRGB | linearRGB",
+    "computed": [],
+    "initial": "sRGB",
+    "inherited": true
+  },
+  {
+    "name": "scroll-padding-block",
+    "syntax": "[ auto | <length-percentage [0,∞]> ]{1,2}",
+    "computed": [
+      "scroll-padding-block-start",
+      "scroll-padding-block-end"
+    ],
+    "initial": [
+      "scroll-padding-block-start",
+      "scroll-padding-block-end"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "mask-repeat",
+    "syntax": "<repeat-style>#",
+    "computed": [
+      "consistsOfTwoDimensionKeywords"
+    ],
+    "initial": "repeat",
+    "inherited": false
+  },
+  {
+    "name": "place-items",
+    "syntax": "<'align-items'> <'justify-items'>?",
+    "computed": [
+      "align-items",
+      "justify-items"
+    ],
+    "initial": [
+      "align-items",
+      "justify-items"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "hyphens",
+    "syntax": "none | manual | auto",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "manual",
+    "inherited": true
+  },
+  {
+    "name": "border-block-end",
+    "syntax": "<line-width> || <line-style> || <color>",
+    "computed": [
+      "border-top-width",
+      "border-top-style",
+      "border-top-color"
+    ],
+    "initial": [
+      "border-top-width",
+      "border-top-style",
+      "border-top-color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "rest-after",
+    "syntax": "<time [0s,∞]> | none | x-weak | weak | medium | strong | x-strong",
+    "computed": [],
+    "initial": "none",
+    "inherited": false
+  },
+  {
+    "name": "stroke-dashadjust",
+    "syntax": "none | [stretch | compress] [dashes | gaps]?",
+    "computed": [],
+    "initial": "none",
+    "inherited": true
+  },
+  {
+    "name": "forced-color-adjust",
+    "syntax": "auto | none | preserve-parent-color",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "auto",
+    "inherited": true
+  },
+  {
+    "name": "font-variant",
+    "syntax": "normal | none | [ [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name>#) || character-variant(<feature-value-name>#) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) ] || [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] || [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]",
+    "computed": [
+      "asSpecified"
+    ],
+    "initial": "normal",
+    "inherited": true
+  },
+  {
+    "name": "margin-top",
+    "syntax": "<length-percentage> | auto",
+    "computed": [
+      "percentageAsSpecifiedOrAbsoluteLength"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "gap",
+    "syntax": "<'row-gap'> <'column-gap'>?",
+    "computed": [
+      "row-gap",
+      "column-gap"
+    ],
+    "initial": [
+      "row-gap",
+      "column-gap"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "border-end-end-radius",
+    "syntax": "<length-percentage [0,∞]>{1,2}",
+    "computed": [
+      "twoAbsoluteLengthOrPercentages"
+    ],
+    "initial": "0",
+    "inherited": false
+  },
+  {
+    "name": "background",
+    "syntax": "<bg-layer>#? , <final-bg-layer>",
+    "computed": [
+      "background-image",
+      "background-position",
+      "background-size",
+      "background-repeat",
+      "background-origin",
+      "background-clip",
+      "background-attachment",
+      "background-color"
+    ],
+    "initial": [
+      "background-image",
+      "background-position",
+      "background-size",
+      "background-repeat",
+      "background-origin",
+      "background-clip",
+      "background-attachment",
+      "background-color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "border",
+    "syntax": "<line-width> || <line-style> || <color>",
+    "computed": [
+      "border-width",
+      "border-style",
+      "border-color"
+    ],
+    "initial": [
+      "border-width",
+      "border-style",
+      "border-color"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "border-inline-end-color",
+    "syntax": "<color> | <image-1D>",
+    "computed": [
+      "computedColor"
+    ],
+    "initial": "currentcolor",
+    "inherited": false
+  },
+  {
+    "name": "-webkit-flex-direction",
+    "syntax": "",
+    "computed": [],
+    "initial": "",
+    "inherited": false
+  },
+  {
+    "name": "scroll-margin-block",
+    "syntax": "<length>{1,2}",
+    "computed": [
+      "scroll-margin-block-start",
+      "scroll-margin-block-end"
+    ],
+    "initial": [
+      "scroll-margin-block-start",
+      "scroll-margin-block-end"
+    ],
+    "inherited": false
+  },
+  {
+    "name": "accent-color",
+    "syntax": "auto | <color>",
+    "computed": [
+      "asAutoOrColor"
+    ],
+    "initial": "auto",
+    "inherited": true
+  }
+]
diff --git a/crates/gosub_styling/resources/definitions/definitions_selectors.json b/crates/gosub_styling/resources/definitions/definitions_selectors.json
new file mode 100644
index 000000000..11454c3a3
--- /dev/null
+++ b/crates/gosub_styling/resources/definitions/definitions_selectors.json
@@ -0,0 +1,329 @@
+[
+  {
+    "name": ":volume-locked"
+  },
+  {
+    "name": ":last-child"
+  },
+  {
+    "name": ":hover"
+  },
+  {
+    "name": ":root"
+  },
+  {
+    "name": "::grammar-error"
+  },
+  {
+    "name": ":first-line"
+  },
+  {
+    "name": ":closed"
+  },
+  {
+    "name": ":enabled"
+  },
+  {
+    "name": ":invalid"
+  },
+  {
+    "name": ":fullscreen"
+  },
+  {
+    "name": "~"
+  },
+  {
+    "name": ":picture-in-picture"
+  },
+  {
+    "name": ":placeholder-shown"
+  },
+  {
+    "name": ":target-within"
+  },
+  {
+    "name": ":matches()"
+  },
+  {
+    "name": ":target"
+  },
+  {
+    "name": "::view-transition"
+  },
+  {
+    "name": ":lang"
+  },
+  {
+    "name": ":open"
+  },
+  {
+    "name": "::cue()"
+  },
+  {
+    "name": ":has()"
+  },
+  {
+    "name": ":blank"
+  },
+  {
+    "name": "::placeholder"
+  },
+  {
+    "name": ":not()"
+  },
+  {
+    "name": ":disabled"
+  },
+  {
+    "name": ":nth-child()"
+  },
+  {
+    "name": ":nth-of-type()"
+  },
+  {
+    "name": ":first-letter"
+  },
+  {
+    "name": ":is()"
+  },
+  {
+    "name": ":dir()"
+  },
+  {
+    "name": ":stalled"
+  },
+  {
+    "name": ":modal"
+  },
+  {
+    "name": ":read-write"
+  },
+  {
+    "name": ":nth-col()"
+  },
+  {
+    "name": "::marker"
+  },
+  {
+    "name": "&"
+  },
+  {
+    "name": ":optional"
+  },
+  {
+    "name": "::after"
+  },
+  {
+    "name": ":read-only"
+  },
+  {
+    "name": ":out-of-range"
+  },
+  {
+    "name": "::cue-region"
+  },
+  {
+    "name": ":defined"
+  },
+  {
+    "name": ":link"
+  },
+  {
+    "name": ":visited"
+  },
+  {
+    "name": ":current"
+  },
+  {
+    "name": "::selection"
+  },
+  {
+    "name": ":nth-last-col()"
+  },
+  {
+    "name": "::cue"
+  },
+  {
+    "name": ":where()"
+  },
+  {
+    "name": ":current()"
+  },
+  {
+    "name": ":nth-last-child()"
+  },
+  {
+    "name": ":lang()"
+  },
+  {
+    "name": ":focus"
+  },
+  {
+    "name": ":buffering"
+  },
+  {
+    "name": "::view-transition-old()"
+  },
+  {
+    "name": "::before"
+  },
+  {
+    "name": ":host"
+  },
+  {
+    "name": ":any-link"
+  },
+  {
+    "name": ":playing"
+  },
+  {
+    "name": ":in-range"
+  },
+  {
+    "name": "::view-transition-image-pair()"
+  },
+  {
+    "name": ":before"
+  },
+  {
+    "name": "::spelling-error"
+  },
+  {
+    "name": "::file-selector-button"
+  },
+  {
+    "name": ":muted"
+  },
+  {
+    "name": ":first-child"
+  },
+  {
+    "name": ":first-of-type"
+  },
+  {
+    "name": ">"
+  },
+  {
+    "name": "+"
+  },
+  {
+    "name": "::cue-region()"
+  },
+  {
+    "name": ":left"
+  },
+  {
+    "name": "::part()"
+  },
+  {
+    "name": ":host-context()"
+  },
+  {
+    "name": "::target-text"
+  },
+  {
+    "name": ":host()"
+  },
+  {
+    "name": ":after"
+  },
+  {
+    "name": ":default"
+  },
+  {
+    "name": ":only-child"
+  },
+  {
+    "name": "::first-letter"
+  },
+  {
+    "name": ":active"
+  },
+  {
+    "name": ":seeking"
+  },
+  {
+    "name": ":empty"
+  },
+  {
+    "name": "::slotted()"
+  },
+  {
+    "name": ":focus-visible"
+  },
+  {
+    "name": ":valid"
+  },
+  {
+    "name": ":only-of-type"
+  },
+  {
+    "name": "||"
+  },
+  {
+    "name": ":local-link"
+  },
+  {
+    "name": ":focus-within"
+  },
+  {
+    "name": "::details-content"
+  },
+  {
+    "name": ":right"
+  },
+  {
+    "name": ":scope"
+  },
+  {
+    "name": ":paused"
+  },
+  {
+    "name": ":user-valid"
+  },
+  {
+    "name": "::view-transition-new()"
+  },
+  {
+    "name": ":nth()"
+  },
+  {
+    "name": ":first"
+  },
+  {
+    "name": ":future"
+  },
+  {
+    "name": ":indeterminate"
+  },
+  {
+    "name": "::first-line"
+  },
+  {
+    "name": ":past"
+  },
+  {
+    "name": ":user-invalid"
+  },
+  {
+    "name": ":last-of-type"
+  },
+  {
+    "name": ":required"
+  },
+  {
+    "name": ":nth-last-of-type()"
+  },
+  {
+    "name": ":autofill"
+  },
+  {
+    "name": ":checked"
+  },
+  {
+    "name": "::highlight()"
+  },
+  {
+    "name": "::view-transition-group()"
+  }
+]
diff --git a/crates/gosub_styling/resources/definitions/definitions_values.json b/crates/gosub_styling/resources/definitions/definitions_values.json
new file mode 100644
index 000000000..7be764993
--- /dev/null
+++ b/crates/gosub_styling/resources/definitions/definitions_values.json
@@ -0,0 +1,1438 @@
+[
+  {
+    "name": "<basic-shape-rect>",
+    "syntax": "<inset()> | <rect()> | <xywh()>"
+  },
+  {
+    "name": "<shape-box>",
+    "syntax": "<visual-box> | margin-box"
+  },
+  {
+    "name": "drop-shadow()",
+    "syntax": "drop-shadow( [ <color>? && <length>{2,3} ] )"
+  },
+  {
+    "name": "<try-size>",
+    "syntax": "most-width | most-height | most-block-size | most-inline-size"
+  },
+  {
+    "name": "<color-interpolation-method>",
+    "syntax": "in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]"
+  },
+  {
+    "name": "<color-stop-list>",
+    "syntax": "<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?"
+  },
+  {
+    "name": "<function-name>",
+    "syntax": "<dashed-ident>"
+  },
+  {
+    "name": "<reversed-counter-name>",
+    "syntax": "reversed( <counter-name> )"
+  },
+  {
+    "name": "<color-font-tech>",
+    "syntax": "[color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]"
+  },
+  {
+    "name": "<mask-source>",
+    "syntax": "<url>"
+  },
+  {
+    "name": "atan()",
+    "syntax": "atan( <calc-sum> )"
+  },
+  {
+    "name": "<counter>",
+    "syntax": "<counter()> | <counters()>"
+  },
+  {
+    "name": "snap-inline()",
+    "syntax": "snap-inline( <length> , [ left | right | near ]? )"
+  },
+  {
+    "name": "<blend-mode>",
+    "syntax": "normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity"
+  },
+  {
+    "name": "<custom-selector>",
+    "syntax": "<custom-arg>? : <extension-name> [ ( <custom-arg>+#? ) ]? ;"
+  },
+  {
+    "name": "<pseudo-element-selector>",
+    "syntax": "':' <pseudo-class-selector> | <legacy-pseudo-element-selector>"
+  },
+  {
+    "name": "<frequency-percentage>",
+    "syntax": "[ <frequency> | <percentage> ]"
+  },
+  {
+    "name": "rgba()",
+    "syntax": "[ <legacy-rgba-syntax> | <modern-rgba-syntax> ]"
+  },
+  {
+    "name": "hsla()",
+    "syntax": "[ <legacy-hsla-syntax> | <modern-hsla-syntax> ]"
+  },
+  {
+    "name": "sepia()",
+    "syntax": "sepia( [ <number> | <percentage> ]? )"
+  },
+  {
+    "name": "<font-tech>",
+    "syntax": "[<font-features-tech> | <color-font-tech> | variations | palettes | incremental ]"
+  },
+  {
+    "name": "<single-animation-iteration-count>",
+    "syntax": "infinite | <number [0,∞]>"
+  },
+  {
+    "name": "<single-animation-play-state>",
+    "syntax": "running | paused"
+  },
+  {
+    "name": "target-counter()",
+    "syntax": "target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )"
+  },
+  {
+    "name": "rotate()",
+    "syntax": "rotate( [ <angle> | <zero> ] )"
+  },
+  {
+    "name": "<compat-auto>",
+    "syntax": "searchfield | textarea | checkbox | radio | menulist | listbox | meter | progress-bar | button"
+  },
+  {
+    "name": "<composite-mode>",
+    "syntax": "clear | copy | source-over | destination-over | source-in | destination-in | source-out | destination-out | source-atop | destination-atop | xor | lighter | plus-darker | plus-lighter"
+  },
+  {
+    "name": "mod()",
+    "syntax": "mod( <calc-sum>, <calc-sum> )"
+  },
+  {
+    "name": "<wq-name>",
+    "syntax": "<ns-prefix>? <ident-token>"
+  },
+  {
+    "name": "<fixed-size>",
+    "syntax": "<fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )"
+  },
+  {
+    "name": "<position-area>",
+    "syntax": "[ [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | x-self-start | x-self-end | span-x-self-start | span-x-self-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | y-self-start | y-self-end | span-y-self-start | span-y-self-end | span-all ] | [ block-start | center | block-end | span-block-start | span-block-end | span-all ] || [ inline-start | center | inline-end | span-inline-start | span-inline-end | span-all ] | [ self-block-start | center | self-block-end | span-self-block-start | span-self-block-end | span-all ] || [ self-inline-start | center | self-inline-end | span-self-inline-start | span-self-inline-end | span-all ] | [ start | center | end | span-start | span-end | span-all ]{1,2} | [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2} ]"
+  },
+  {
+    "name": "<display-outside>",
+    "syntax": "block | inline | run-in"
+  },
+  {
+    "name": "<simple-selector-list>",
+    "syntax": "<simple-selector>#"
+  },
+  {
+    "name": "<ratio>",
+    "syntax": "<number [0,∞]> [ / <number [0,∞]> ]?"
+  },
+  {
+    "name": "min()",
+    "syntax": "min( <calc-sum># )"
+  },
+  {
+    "name": "<legacy-rgba-syntax>",
+    "syntax": "rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )"
+  },
+  {
+    "name": "<side-or-corner>",
+    "syntax": "[left | right] || [top | bottom]"
+  },
+  {
+    "name": "<contextual-alt-values>",
+    "syntax": "[ contextual | no-contextual ]"
+  },
+  {
+    "name": "<step-position>",
+    "syntax": "jump-start | jump-end | jump-none | jump-both | start | end"
+  },
+  {
+    "name": "<single-animation-fill-mode>",
+    "syntax": "none | forwards | backwards | both"
+  },
+  {
+    "name": "symbols()",
+    "syntax": "symbols( <symbols-type>? [ <string> | <image> ]+ )"
+  },
+  {
+    "name": "<supports-in-parens>",
+    "syntax": "( <supports-condition> ) | <supports-feature> | <general-enclosed>"
+  },
+  {
+    "name": "<compat-special>",
+    "syntax": "textfield | menulist-button"
+  },
+  {
+    "name": "view()",
+    "syntax": "view( [ <axis> || <'view-timeline-inset'> ]? )"
+  },
+  {
+    "name": "<display-listitem>",
+    "syntax": "<display-outside>? && [ flow | flow-root ]? && list-item"
+  },
+  {
+    "name": "fit-content()",
+    "syntax": "fit-content( <length-percentage> )"
+  },
+  {
+    "name": "<relative-real-selector-list>",
+    "syntax": "<relative-real-selector>#"
+  },
+  {
+    "name": "<track-list>",
+    "syntax": "[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?"
+  },
+  {
+    "name": "<auto-track-list>",
+    "syntax": "[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?"
+  },
+  {
+    "name": "<symbol>",
+    "syntax": "<string> | <image> | <custom-ident>"
+  },
+  {
+    "name": "scale()",
+    "syntax": "scale( <number> , <number>? )"
+  },
+  {
+    "name": "<shadow>",
+    "syntax": "<color>? && [<length>{2} <length [0,∞]>? <length>?] && inset?"
+  },
+  {
+    "name": "<link-param>",
+    "syntax": "param( <custom-property-name> <declaration-value>? )"
+  },
+  {
+    "name": "<compound-selector-list>",
+    "syntax": "<compound-selector>#"
+  },
+  {
+    "name": "<radial-size>",
+    "syntax": "<radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}"
+  },
+  {
+    "name": "<font-features-tech>",
+    "syntax": "[features-opentype | features-aat | features-graphite]"
+  },
+  {
+    "name": "running()",
+    "syntax": "running( <custom-ident> )"
+  },
+  {
+    "name": "<keyframe-selector>",
+    "syntax": "from | to | <percentage [0,100]>"
+  },
+  {
+    "name": "<linear-gradient-syntax>",
+    "syntax": "[ <angle> | to <side-or-corner> ]? , <color-stop-list>"
+  },
+  {
+    "name": "<anchor-size>",
+    "syntax": "width | height | block | inline | self-block | self-inline"
+  },
+  {
+    "name": "<linear-stop>",
+    "syntax": "<number> && <linear-stop-length>?"
+  },
+  {
+    "name": "<css-type>",
+    "syntax": "<syntax-component> | <type()>"
+  },
+  {
+    "name": "<target>",
+    "syntax": "<target-counter()> | <target-counters()> | <target-text()>"
+  },
+  {
+    "name": "<easing-function>",
+    "syntax": "linear | <linear-easing-function> | <cubic-bezier-easing-function> | <step-easing-function>"
+  },
+  {
+    "name": "<legacy-hsla-syntax>",
+    "syntax": "hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )"
+  },
+  {
+    "name": "<modern-hsla-syntax>",
+    "syntax": "hsla( [<hue> | none] [<percentage> | <number> | none] [<percentage> | <number> | none] [ / [<alpha-value> | none] ]? )"
+  },
+  {
+    "name": "blur()",
+    "syntax": "blur( <length>? )"
+  },
+  {
+    "name": "filter()",
+    "syntax": "filter( [ <image> | <string> ], <filter-value-list> )"
+  },
+  {
+    "name": "<pt-name-selector>",
+    "syntax": "'*' | <custom-ident>"
+  },
+  {
+    "name": "<single-transition-property>",
+    "syntax": "all | <custom-ident>"
+  },
+  {
+    "name": "<visual-box>",
+    "syntax": "content-box | padding-box | border-box"
+  },
+  {
+    "name": "<length-percentage>",
+    "syntax": "[ <length> | <percentage> ]"
+  },
+  {
+    "name": "<spread-shadow>",
+    "syntax": "<'box-shadow-color'>? && [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] && <'box-shadow-position'>?"
+  },
+  {
+    "name": "<predefined-rgb-params>",
+    "syntax": "<predefined-rgb> [ <number> | <percentage> | none ]{3}"
+  },
+  {
+    "name": "<symbols-type>",
+    "syntax": "cyclic | numeric | alphabetic | symbolic | fixed"
+  },
+  {
+    "name": "<scroller>",
+    "syntax": "root | nearest | self"
+  },
+  {
+    "name": "<generic-complete>",
+    "syntax": "serif | sans-serif | system-ui | cursive | fantasy | math | monospace"
+  },
+  {
+    "name": "<east-asian-width-values>",
+    "syntax": "[ full-width | proportional-width ]"
+  },
+  {
+    "name": "<geometry-box>",
+    "syntax": "<shape-box> | fill-box | stroke-box | view-box"
+  },
+  {
+    "name": "<media-not>",
+    "syntax": "not <media-in-parens>"
+  },
+  {
+    "name": "<opacity-value>",
+    "syntax": "<number> | <percentage>"
+  },
+  {
+    "name": "<hue>",
+    "syntax": "<number> | <angle>"
+  },
+  {
+    "name": "tan()",
+    "syntax": "tan( <calc-sum> )"
+  },
+  {
+    "name": "<boolean>",
+    "syntax": "<bool-not> | <bool-in-parens> [ <bool-and>* | <bool-or>* ]"
+  },
+  {
+    "name": "snap-block()",
+    "syntax": "snap-block( <length> , [ start | end | near ]? )"
+  },
+  {
+    "name": "<paint>",
+    "syntax": "none | <image> | <svg-paint>"
+  },
+  {
+    "name": "<generic-incomplete>",
+    "syntax": "ui-serif | ui-sans-serif | ui-monospace | ui-rounded"
+  },
+  {
+    "name": "exp()",
+    "syntax": "exp( <calc-sum> )"
+  },
+  {
+    "name": "<pseudo-page>",
+    "syntax": "':' [ left | right | first | blank ]"
+  },
+  {
+    "name": "<track-size>",
+    "syntax": "<track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage [0,∞]> )"
+  },
+  {
+    "name": "<hue-interpolation-method>",
+    "syntax": "[ shorter | longer | increasing | decreasing ] hue"
+  },
+  {
+    "name": "<predefined-rectangular>",
+    "syntax": "jzazbz | ictcp"
+  },
+  {
+    "name": "contrast()",
+    "syntax": "contrast( [ <number> | <percentage> ]? )"
+  },
+  {
+    "name": "<svg-paint>",
+    "syntax": "child | child( <integer> )"
+  },
+  {
+    "name": "<single-animation>",
+    "syntax": "<time [0s,∞]> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]"
+  },
+  {
+    "name": "<media-query>",
+    "syntax": "<media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?"
+  },
+  {
+    "name": "<display-legacy>",
+    "syntax": "inline-block | inline-table | inline-flex | inline-grid"
+  },
+  {
+    "name": "<complex-real-selector>",
+    "syntax": "<compound-selector> [ <combinator>? <compound-selector> ]*"
+  },
+  {
+    "name": "<generic-voice>",
+    "syntax": "[<age>? <gender> <integer>?]"
+  },
+  {
+    "name": "<points>",
+    "syntax": "[ <number>+ ]#"
+  },
+  {
+    "name": "xywh()",
+    "syntax": "xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )"
+  },
+  {
+    "name": "<historical-lig-values>",
+    "syntax": "[ historical-ligatures | no-historical-ligatures ]"
+  },
+  {
+    "name": "<isolation-mode>",
+    "syntax": "auto | isolate"
+  },
+  {
+    "name": "<bg-size>",
+    "syntax": "[ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain"
+  },
+  {
+    "name": "<bool-not>",
+    "syntax": "not <bool-in-parens>"
+  },
+  {
+    "name": "<color-base>",
+    "syntax": "<hex-color> | <color-function> | <named-color> | transparent"
+  },
+  {
+    "name": "<image>",
+    "syntax": "<url> | <gradient>"
+  },
+  {
+    "name": "skew()",
+    "syntax": "skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )"
+  },
+  {
+    "name": "<mf-comparison>",
+    "syntax": "<mf-lt> | <mf-gt> | <mf-eq>"
+  },
+  {
+    "name": "asin()",
+    "syntax": "asin( <calc-sum> )"
+  },
+  {
+    "name": "paint()",
+    "syntax": "paint( <ident>, <declaration-value>? )"
+  },
+  {
+    "name": "<font-format>",
+    "syntax": "[<string> | collection | embedded-opentype | opentype | svg | truetype | woff | woff2 ]"
+  },
+  {
+    "name": "<pseudo-class-selector>",
+    "syntax": "':' <ident-token> | ':' <function-token> <any-value> ')'"
+  },
+  {
+    "name": "minmax()",
+    "syntax": "minmax(min, max)"
+  },
+  {
+    "name": "sign()",
+    "syntax": "sign( <calc-sum> )"
+  },
+  {
+    "name": "<legacy-rgb-syntax>",
+    "syntax": "rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )"
+  },
+  {
+    "name": "counters()",
+    "syntax": "counters( <counter-name>, <string>, <counter-style>? )"
+  },
+  {
+    "name": "<numeric-spacing-values>",
+    "syntax": "[ proportional-nums | tabular-nums ]"
+  },
+  {
+    "name": "<display-inside>",
+    "syntax": "flow | flow-root | table | flex | grid | ruby"
+  },
+  {
+    "name": "sqrt()",
+    "syntax": "sqrt( <calc-sum> )"
+  },
+  {
+    "name": "<dasharray>",
+    "syntax": "[ [ <length-percentage> | <number> ]+ ]#"
+  },
+  {
+    "name": "<an+b>",
+    "syntax": "odd | even | <integer> | <n-dimension> | '+'? n | -n | <ndashdigit-dimension> | '+'? <ndashdigit-ident> | <dashndashdigit-ident> | <n-dimension> <signed-integer> | '+'? n <signed-integer> | -n <signed-integer> | <ndash-dimension> <signless-integer> | '+'? n- <signless-integer> | -n- <signless-integer> | <n-dimension> ['+' | '-'] <signless-integer> | '+'? n ['+' | '-'] <signless-integer> | -n ['+' | '-'] <signless-integer>"
+  },
+  {
+    "name": "opacity()",
+    "syntax": "opacity( [ <number> | <percentage> ]? )"
+  },
+  {
+    "name": "<attachment>",
+    "syntax": "scroll | fixed | local"
+  },
+  {
+    "name": "<subclass-selector>",
+    "syntax": "<id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>"
+  },
+  {
+    "name": "atan2()",
+    "syntax": "atan2( <calc-sum>, <calc-sum> )"
+  },
+  {
+    "name": "saturate()",
+    "syntax": "saturate( [ <number> | <percentage> ]? )"
+  },
+  {
+    "name": "<filter-function>",
+    "syntax": "<blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>"
+  },
+  {
+    "name": "<number-optional-number>",
+    "syntax": "<number> <number>?"
+  },
+  {
+    "name": "<discretionary-lig-values>",
+    "syntax": "[ discretionary-ligatures | no-discretionary-ligatures ]"
+  },
+  {
+    "name": "<keyframe-block>",
+    "syntax": "<keyframe-selector># { <declaration-list> }"
+  },
+  {
+    "name": "<mask-layer>",
+    "syntax": "<mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>"
+  },
+  {
+    "name": "<grid-line>",
+    "syntax": "auto | <custom-ident> | [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] | [ span && [ <integer [1,∞]> || <custom-ident> ] ]"
+  },
+  {
+    "name": "<fixed-repeat>",
+    "syntax": "repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )"
+  },
+  {
+    "name": "lab()",
+    "syntax": "lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )"
+  },
+  {
+    "name": "<page-selector-list>",
+    "syntax": "<page-selector>#"
+  },
+  {
+    "name": "hue-rotate()",
+    "syntax": "hue-rotate( [ <angle> | <zero> ]? )"
+  },
+  {
+    "name": "<anchor-element>",
+    "syntax": "<dashed-ident>"
+  },
+  {
+    "name": "linear()",
+    "syntax": "linear(<linear-stop-list>)"
+  },
+  {
+    "name": "<bg-position>",
+    "syntax": "[ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]"
+  },
+  {
+    "name": "<source-size-list>",
+    "syntax": "<source-size>#? , <source-size-value>"
+  },
+  {
+    "name": "scaleX()",
+    "syntax": "scaleX( <number> )"
+  },
+  {
+    "name": "<transform-list>",
+    "syntax": "<transform-function>+"
+  },
+  {
+    "name": "<media-feature>",
+    "syntax": "[ <mf-plain> | <mf-boolean> | <mf-range> ]"
+  },
+  {
+    "name": "src()",
+    "syntax": "src( <string> <url-modifier>* )"
+  },
+  {
+    "name": "<explicit-track-list>",
+    "syntax": "[ <line-names>? <track-size> ]+ <line-names>?"
+  },
+  {
+    "name": "<inflexible-breadth>",
+    "syntax": "<length-percentage [0,∞]> | min-content | max-content | auto"
+  },
+  {
+    "name": "<step-easing-function>",
+    "syntax": "step-start | step-end | steps(<integer> , <step-position>?)"
+  },
+  {
+    "name": "<id-selector>",
+    "syntax": "<hash-token>"
+  },
+  {
+    "name": "<auto-repeat>",
+    "syntax": "repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )"
+  },
+  {
+    "name": "target-text()",
+    "syntax": "target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )"
+  },
+  {
+    "name": "abs()",
+    "syntax": "abs( <calc-sum> )"
+  },
+  {
+    "name": "<calc-value>",
+    "syntax": "<number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )"
+  },
+  {
+    "name": "<color-function>",
+    "syntax": "<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <oklab()> | <oklch()> | <color()>"
+  },
+  {
+    "name": "<source-size-value>",
+    "syntax": "<length> | auto"
+  },
+  {
+    "name": "<self-position>",
+    "syntax": "center | start | end | self-start | self-end | flex-start | flex-end"
+  },
+  {
+    "name": "<offset-path>",
+    "syntax": "<ray()> | <url> | <basic-shape>"
+  },
+  {
+    "name": "translate()",
+    "syntax": "translate( <length-percentage> , <length-percentage>? )"
+  },
+  {
+    "name": "<media-or>",
+    "syntax": "or <media-in-parens>"
+  },
+  {
+    "name": "<xyz>",
+    "syntax": "xyz | xyz-d50 | xyz-d65"
+  },
+  {
+    "name": "clamp()",
+    "syntax": "clamp( [ <calc-sum> | none ], <calc-sum>, [ <calc-sum> | none ] )"
+  },
+  {
+    "name": "<general-enclosed>",
+    "syntax": "[ <function-token> <any-value>? ) ] | [ ( <any-value>? ) ]"
+  },
+  {
+    "name": "<repeat-style>",
+    "syntax": "repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}"
+  },
+  {
+    "name": "<single-animation-direction>",
+    "syntax": "normal | reverse | alternate | alternate-reverse"
+  },
+  {
+    "name": "<bool-and>",
+    "syntax": "and <bool-in-parens>"
+  },
+  {
+    "name": "target-counters()",
+    "syntax": "target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )"
+  },
+  {
+    "name": "<legacy-pseudo-element-selector>",
+    "syntax": "':' [before | after | first-line | first-letter]"
+  },
+  {
+    "name": "max()",
+    "syntax": "max( <calc-sum># )"
+  },
+  {
+    "name": "<class-selector>",
+    "syntax": "'.' <ident-token>"
+  },
+  {
+    "name": "<mf-range>",
+    "syntax": "<mf-name> <mf-comparison> <mf-value> | <mf-value> <mf-comparison> <mf-name> | <mf-value> <mf-lt> <mf-name> <mf-lt> <mf-value> | <mf-value> <mf-gt> <mf-name> <mf-gt> <mf-value>"
+  },
+  {
+    "name": "<calc-keyword>",
+    "syntax": "e | pi | infinity | -infinity | NaN"
+  },
+  {
+    "name": "<modern-rgba-syntax>",
+    "syntax": "rgba( [ <number> | <percentage> | none]{3} [ / [<alpha-value> | none] ]? )"
+  },
+  {
+    "name": "lch()",
+    "syntax": "lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )"
+  },
+  {
+    "name": "oklch()",
+    "syntax": "oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )"
+  },
+  {
+    "name": "<linear-easing-function>",
+    "syntax": "linear(<linear-stop-list>)"
+  },
+  {
+    "name": "var()",
+    "syntax": "var( <custom-property-name> , <declaration-value>? )"
+  },
+  {
+    "name": "<marker-ref>",
+    "syntax": "<url>"
+  },
+  {
+    "name": "<feature-value-name>",
+    "syntax": "<ident>"
+  },
+  {
+    "name": "skewX()",
+    "syntax": "skewX( [ <angle> | <zero> ] )"
+  },
+  {
+    "name": "<predefined-polar-params>",
+    "syntax": "jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none]"
+  },
+  {
+    "name": "<linear-color-hint>",
+    "syntax": "<length-percentage>"
+  },
+  {
+    "name": "<predefined-rectangular-params>",
+    "syntax": "<predefined-rectangular> [ <number> | <percentage> | none ]{3}"
+  },
+  {
+    "name": "<quote>",
+    "syntax": "open-quote | close-quote | no-open-quote | no-close-quote"
+  },
+  {
+    "name": "<leader-type>",
+    "syntax": "dotted | solid | space | <string>"
+  },
+  {
+    "name": "<function-parameter-list>",
+    "syntax": "<function-parameter>#"
+  },
+  {
+    "name": "<radial-extent>",
+    "syntax": "closest-corner | closest-side | farthest-corner | farthest-side"
+  },
+  {
+    "name": "<numeric-figure-values>",
+    "syntax": "[ lining-nums | oldstyle-nums ]"
+  },
+  {
+    "name": "<bg-image>",
+    "syntax": "<image> | none"
+  },
+  {
+    "name": "ray()",
+    "syntax": "ray( <angle> && <ray-size>? && contain? && [at <position>]? )"
+  },
+  {
+    "name": "<east-asian-variant-values>",
+    "syntax": "[ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]"
+  },
+  {
+    "name": "rgb()",
+    "syntax": "[ <legacy-rgb-syntax> | <modern-rgb-syntax> ]"
+  },
+  {
+    "name": "<syntax-combinator>",
+    "syntax": "'|'"
+  },
+  {
+    "name": "<namespace-prefix>",
+    "syntax": "<ident>"
+  },
+  {
+    "name": "<page-selector>",
+    "syntax": "[ <ident-token>? <pseudo-page>* ]!"
+  },
+  {
+    "name": "cubic-bezier()",
+    "syntax": "cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)"
+  },
+  {
+    "name": "<complex-selector-unit>",
+    "syntax": "[ <compound-selector>? <pseudo-compound-selector>* ]!"
+  },
+  {
+    "name": "<media-condition-without-or>",
+    "syntax": "<media-not> | <media-in-parens> <media-and>*"
+  },
+  {
+    "name": "translateX()",
+    "syntax": "translateX( <length-percentage> )"
+  },
+  {
+    "name": "scaleY()",
+    "syntax": "scaleY( <number> )"
+  },
+  {
+    "name": "scroll()",
+    "syntax": "scroll( [ <scroller> || <axis> ]? )"
+  },
+  {
+    "name": "<font-variant-css2>",
+    "syntax": "[normal | small-caps]"
+  },
+  {
+    "name": "env()",
+    "syntax": "env( <custom-ident> <integer [0,∞]>*, <declaration-value>? )"
+  },
+  {
+    "name": "<selector-list>",
+    "syntax": "<complex-selector-list>"
+  },
+  {
+    "name": "<legacy-hsl-syntax>",
+    "syntax": "hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )"
+  },
+  {
+    "name": "<mask-reference>",
+    "syntax": "none | <image> | <mask-source>"
+  },
+  {
+    "name": "<custom-arg>",
+    "syntax": "$ <ident-token> ;"
+  },
+  {
+    "name": "<gradient>",
+    "syntax": "<linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>"
+  },
+  {
+    "name": "radial-gradient()",
+    "syntax": "radial-gradient( [ <radial-gradient-syntax> ] )"
+  },
+  {
+    "name": "brightness()",
+    "syntax": "brightness( [ <number> | <percentage> ]? )"
+  },
+  {
+    "name": "<family-name>",
+    "syntax": "<string> | <custom-ident>+"
+  },
+  {
+    "name": "steps()",
+    "syntax": "steps(<integer>, <step-position>?)"
+  },
+  {
+    "name": "<function-parameter>",
+    "syntax": "<custom-property-name> <css-type>? [ : <declaration-value> ]?"
+  },
+  {
+    "name": "<mq-boolean>",
+    "syntax": "<integer [0,1]>"
+  },
+  {
+    "name": "hypot()",
+    "syntax": "hypot( <calc-sum># )"
+  },
+  {
+    "name": "oklab()",
+    "syntax": "oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )"
+  },
+  {
+    "name": "<counter-style>",
+    "syntax": "<counter-style-name> | <symbols()>"
+  },
+  {
+    "name": "<supports-feature>",
+    "syntax": "<supports-decl>"
+  },
+  {
+    "name": "<try-tactic>",
+    "syntax": "flip-block || flip-inline || flip-start"
+  },
+  {
+    "name": "<line-width>",
+    "syntax": "<length [0,∞]> | thin | medium | thick"
+  },
+  {
+    "name": "<media-type>",
+    "syntax": "<ident>"
+  },
+  {
+    "name": "matrix()",
+    "syntax": "matrix( <number>#{6} )"
+  },
+  {
+    "name": "palette-mix()",
+    "syntax": "palette-mix(<color-interpolation-method> , [ [normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2})"
+  },
+  {
+    "name": "<complex-real-selector-list>",
+    "syntax": "<complex-real-selector>#"
+  },
+  {
+    "name": "<simple-selector>",
+    "syntax": "<type-selector> | <subclass-selector>"
+  },
+  {
+    "name": "<mf-boolean>",
+    "syntax": "<mf-name>"
+  },
+  {
+    "name": "<rectangular-color-space>",
+    "syntax": "srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65"
+  },
+  {
+    "name": "dynamic-range-limit-mix()",
+    "syntax": "dynamic-range-limit-mix( [ <ident> && <percentage [0,100]>? ]#{2})"
+  },
+  {
+    "name": "<content-replacement>",
+    "syntax": "<image>"
+  },
+  {
+    "name": "<display-internal>",
+    "syntax": "table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container"
+  },
+  {
+    "name": "<display-box>",
+    "syntax": "contents | none"
+  },
+  {
+    "name": "anchor()",
+    "syntax": "anchor( <anchor-element>? && <anchor-side>, <length-percentage>? )"
+  },
+  {
+    "name": "string()",
+    "syntax": "string( <custom-ident> , [ first | start | last | first-except ]? )"
+  },
+  {
+    "name": "<syntax-component-name>",
+    "syntax": "'<' <syntax-type> '>' | <custom-ident>"
+  },
+  {
+    "name": "round()",
+    "syntax": "round( <rounding-strategy>?, <calc-sum>, <calc-sum>? )"
+  },
+  {
+    "name": "rem()",
+    "syntax": "rem( <calc-sum>, <calc-sum> )"
+  },
+  {
+    "name": "sin()",
+    "syntax": "sin( <calc-sum> )"
+  },
+  {
+    "name": "<boolean-without-or>",
+    "syntax": "<bool-not> | <bool-in-parens> <bool-and>*"
+  },
+  {
+    "name": "<content-distribution>",
+    "syntax": "space-between | space-around | space-evenly | stretch"
+  },
+  {
+    "name": "<mf-name>",
+    "syntax": "<ident>"
+  },
+  {
+    "name": "ellipse()",
+    "syntax": "ellipse( <radial-size>? [ at <position> ]? )"
+  },
+  {
+    "name": "rect()",
+    "syntax": "rect( <top>, <right>, <bottom>, <left> )"
+  },
+  {
+    "name": "<complex-selector-list>",
+    "syntax": "<complex-selector>#"
+  },
+  {
+    "name": "<type()>",
+    "syntax": "type( <syntax> )"
+  },
+  {
+    "name": "counter()",
+    "syntax": "counter( <counter-name>, <counter-style>? )"
+  },
+  {
+    "name": "anchor-size()",
+    "syntax": "anchor-size( [ <anchor-element> || <anchor-size> ]? , <length-percentage>? )"
+  },
+  {
+    "name": "skewY()",
+    "syntax": "skewY( [ <angle> | <zero> ] )"
+  },
+  {
+    "name": "<content-position>",
+    "syntax": "center | start | end | flex-start | flex-end"
+  },
+  {
+    "name": "<custom-params>",
+    "syntax": "<dashed-ident> [ <number> | <percentage> | none ]+"
+  },
+  {
+    "name": "<content-list>",
+    "syntax": "[ <string> | <counter()> | <counters()> | <content()> | <attr()> ]+"
+  },
+  {
+    "name": "<filter-value-list>",
+    "syntax": "[ <filter-function> | <url> ]+"
+  },
+  {
+    "name": "<font-src>",
+    "syntax": "<url> [ format(<font-format>)]? [ tech( <font-tech>#)]? | local(<family-name>)"
+  },
+  {
+    "name": "<linear-stop-length>",
+    "syntax": "<percentage>{1,2}"
+  },
+  {
+    "name": "<track-repeat>",
+    "syntax": "repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )"
+  },
+  {
+    "name": "<polar-color-space>",
+    "syntax": "hsl | hwb | lch | oklch"
+  },
+  {
+    "name": "<font-width-css3>",
+    "syntax": "[normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded]"
+  },
+  {
+    "name": "<paint-box>",
+    "syntax": "<visual-box> | fill-box | stroke-box"
+  },
+  {
+    "name": "cos()",
+    "syntax": "cos( <calc-sum> )"
+  },
+  {
+    "name": "<mf-gt>",
+    "syntax": "'>' '='?"
+  },
+  {
+    "name": "<bool-or>",
+    "syntax": "or <bool-in-parens>"
+  },
+  {
+    "name": "<predefined-rgb>",
+    "syntax": "srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | rec2100-pq | rec2100-hlg | rec2100-linear"
+  },
+  {
+    "name": "<overflow-position>",
+    "syntax": "unsafe | safe"
+  },
+  {
+    "name": "<relative-selector-list>",
+    "syntax": "<relative-selector>#"
+  },
+  {
+    "name": "path()",
+    "syntax": "path( <'fill-rule'>? , <string> )"
+  },
+  {
+    "name": "<generic-family>",
+    "syntax": "<generic-script-specific>| <generic-complete> | <generic-incomplete>"
+  },
+  {
+    "name": "<attr-modifier>",
+    "syntax": "i | s"
+  },
+  {
+    "name": "<media-in-parens>",
+    "syntax": "( <media-condition> ) | ( <media-feature> ) | <general-enclosed>"
+  },
+  {
+    "name": "<alpha-value>",
+    "syntax": "<number> | <percentage>"
+  },
+  {
+    "name": "<modern-rgb-syntax>",
+    "syntax": "rgb( [ <number> | <percentage> | none]{3} [ / [<alpha-value> | none] ]? )"
+  },
+  {
+    "name": "<radial-shape>",
+    "syntax": "circle | ellipse"
+  },
+  {
+    "name": "<final-bg-layer>",
+    "syntax": "<bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box> || <'background-color'>"
+  },
+  {
+    "name": "pow()",
+    "syntax": "pow( <calc-sum>, <calc-sum> )"
+  },
+  {
+    "name": "<system-family-name>",
+    "syntax": "caption | icon | menu | message-box | small-caption | status-bar"
+  },
+  {
+    "name": "<complex-selector>",
+    "syntax": "<complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*"
+  },
+  {
+    "name": "<xyz-space>",
+    "syntax": "xyz | xyz-d50 | xyz-d65"
+  },
+  {
+    "name": "polygon()",
+    "syntax": "polygon( <'fill-rule'>? , [<length-percentage> <length-percentage>]# )"
+  },
+  {
+    "name": "<animateable-feature>",
+    "syntax": "scroll-position | contents | <custom-ident>"
+  },
+  {
+    "name": "<layout-box>",
+    "syntax": "<visual-box> | margin-box"
+  },
+  {
+    "name": "<combinator>",
+    "syntax": "'>' | '+' | '~' | [ '|' '|' ]"
+  },
+  {
+    "name": "<track-breadth>",
+    "syntax": "<length-percentage [0,∞]> | <flex [0,∞]> | min-content | max-content | auto"
+  },
+  {
+    "name": "<line-names>",
+    "syntax": "'[' <custom-ident>* ']'"
+  },
+  {
+    "name": "<single-transition>",
+    "syntax": "[ none | <single-transition-property> ] || <time> || <easing-function> || <time>"
+  },
+  {
+    "name": "<numeric-fraction-values>",
+    "syntax": "[ diagonal-fractions | stacked-fractions ]"
+  },
+  {
+    "name": "<cubic-bezier-easing-function>",
+    "syntax": "ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)"
+  },
+  {
+    "name": "<media-and>",
+    "syntax": "and <media-in-parens>"
+  },
+  {
+    "name": "<mf-eq>",
+    "syntax": "'='"
+  },
+  {
+    "name": "<syntax-type>",
+    "syntax": "angle | color | custom-ident | image | integer | length | length-percentage | number | percentage | resolution | string | time | url | transform-function"
+  },
+  {
+    "name": "linear-gradient()",
+    "syntax": "linear-gradient( [ <linear-gradient-syntax> ] )"
+  },
+  {
+    "name": "<attribute-selector>",
+    "syntax": "'[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'"
+  },
+  {
+    "name": "<mf-lt>",
+    "syntax": "'<' '='?"
+  },
+  {
+    "name": "<generic-script-specific>",
+    "syntax": "generic(kai) | generic(fangsong) | generic(nastaliq)"
+  },
+  {
+    "name": "<compound-selector>",
+    "syntax": "[ <type-selector>? <subclass-selector>* ]!"
+  },
+  {
+    "name": "content()",
+    "syntax": "content( [ text | before | after | first-letter | marker ]? )"
+  },
+  {
+    "name": "hwb()",
+    "syntax": "hwb( [<hue> | none] [<percentage> | <number> | none] [<percentage> | <number> | none] [ / [<alpha-value> | none] ]? )"
+  },
+  {
+    "name": "<xyz-params>",
+    "syntax": "<xyz> [ <number> | <percentage> | none ]{3}"
+  },
+  {
+    "name": "<supports-decl>",
+    "syntax": "( <declaration> )"
+  },
+  {
+    "name": "<linear-color-stop>",
+    "syntax": "<color> <length-percentage>?"
+  },
+  {
+    "name": "translateY()",
+    "syntax": "translateY( <length-percentage> )"
+  },
+  {
+    "name": "<type-selector>",
+    "syntax": "<wq-name> | <ns-prefix>? '*'"
+  },
+  {
+    "name": "<angle-percentage>",
+    "syntax": "[ <angle> | <percentage> ]"
+  },
+  {
+    "name": "<modern-hsl-syntax>",
+    "syntax": "hsl( [<hue> | none] [<percentage> | <number> | none] [<percentage> | <number> | none] [ / [<alpha-value> | none] ]? )"
+  },
+  {
+    "name": "<color-space>",
+    "syntax": "<rectangular-color-space> | <polar-color-space>"
+  },
+  {
+    "name": "<text-edge>",
+    "syntax": "[ text | cap | ex | ideographic | ideographic-ink ] [ text | alphabetic | ideographic | ideographic-ink ]?"
+  },
+  {
+    "name": "<function-dependency-list>",
+    "syntax": "<function-parameter>#"
+  },
+  {
+    "name": "<syntax>",
+    "syntax": "'*' | <syntax-component> [ <syntax-combinator> <syntax-component> ]+"
+  },
+  {
+    "name": "<attr-matcher>",
+    "syntax": "[ '~' | '|' | '^' | '$' | '*' ]? '='"
+  },
+  {
+    "name": "<ray-size>",
+    "syntax": "closest-side | closest-corner | farthest-side | farthest-corner | sides"
+  },
+  {
+    "name": "<syntax-component>",
+    "syntax": "<syntax-component-name> <syntax-multiplier>? | '<' transform-list '>'"
+  },
+  {
+    "name": "<opentype-tag>",
+    "syntax": "<string>"
+  },
+  {
+    "name": "<layer-name>",
+    "syntax": "<ident> [ '.' <ident> ]*"
+  },
+  {
+    "name": "<mf-plain>",
+    "syntax": "<mf-name> : <mf-value>"
+  },
+  {
+    "name": "<media-condition>",
+    "syntax": "<media-not> | <media-in-parens> [ <media-and>* | <media-or>* ]"
+  },
+  {
+    "name": "<position>",
+    "syntax": "[ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]"
+  },
+  {
+    "name": "<rounding-strategy>",
+    "syntax": "nearest | up | down | to-zero"
+  },
+  {
+    "name": "<coord-box>",
+    "syntax": "<paint-box> | view-box"
+  },
+  {
+    "name": "<import-conditions>",
+    "syntax": "[ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?"
+  },
+  {
+    "name": "url()",
+    "syntax": "url( <string> <url-modifier>* ) | <url-token>"
+  },
+  {
+    "name": "<fixed-breadth>",
+    "syntax": "<length-percentage [0,∞]>"
+  },
+  {
+    "name": "<color>",
+    "syntax": "<color-base> | currentColor | <system-color>"
+  },
+  {
+    "name": "repeating-linear-gradient()",
+    "syntax": "repeating-linear-gradient( [ <linear-gradient-syntax> ] )"
+  },
+  {
+    "name": "repeating-radial-gradient()",
+    "syntax": "repeating-radial-gradient( [ <radial-gradient-syntax> ] )"
+  },
+  {
+    "name": "inset()",
+    "syntax": "inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )"
+  },
+  {
+    "name": "<keyframes-name>",
+    "syntax": "<custom-ident> | <string>"
+  },
+  {
+    "name": "<ns-prefix>",
+    "syntax": "[ <ident-token> | '*' ]? '|'"
+  },
+  {
+    "name": "<font-weight-absolute>",
+    "syntax": "[normal | bold | <number [1,1000]>]"
+  },
+  {
+    "name": "<common-lig-values>",
+    "syntax": "[ common-ligatures | no-common-ligatures ]"
+  },
+  {
+    "name": "<bool-in-parens>",
+    "syntax": "( <boolean> ) | <bool-test> | <general-enclosed>"
+  },
+  {
+    "name": "<name-repeat>",
+    "syntax": "repeat( [ <integer [1,∞]> | auto-fill ], <line-names>+)"
+  },
+  {
+    "name": "<radial-gradient-syntax>",
+    "syntax": "[ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>"
+  },
+  {
+    "name": "<bg-layer>",
+    "syntax": "<bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box>"
+  },
+  {
+    "name": "acos()",
+    "syntax": "acos( <calc-sum> )"
+  },
+  {
+    "name": "<url>",
+    "syntax": "<url()> | <src()>"
+  },
+  {
+    "name": "log()",
+    "syntax": "log( <calc-sum>, <calc-sum>? )"
+  },
+  {
+    "name": "<calc-sum>",
+    "syntax": "<calc-product> [ [ '+' | '-' ] <calc-product> ]*"
+  },
+  {
+    "name": "<syntax-multiplier>",
+    "syntax": "[ '#' | '+' ]"
+  },
+  {
+    "name": "circle()",
+    "syntax": "circle( <radial-size>? [ at <position> ]? )"
+  },
+  {
+    "name": "grayscale()",
+    "syntax": "grayscale( [ <number> | <percentage> ]? )"
+  },
+  {
+    "name": "<masking-mode>",
+    "syntax": "alpha | luminance | match-source"
+  },
+  {
+    "name": "<mf-value>",
+    "syntax": "<number> | <dimension> | <ident> | <ratio>"
+  },
+  {
+    "name": "<anchor-side>",
+    "syntax": "inside | outside | top | left | right | bottom | start | end | self-start | self-end | <percentage> | center"
+  },
+  {
+    "name": "<time-percentage>",
+    "syntax": "[ <time> | <percentage> ]"
+  },
+  {
+    "name": "<calc-product>",
+    "syntax": "<calc-value> [ [ '*' | '/' ] <calc-value> ]*"
+  },
+  {
+    "name": "<colorspace-params>",
+    "syntax": "[<custom-params> | <predefined-rgb-params> | <predefined-polar-params> | <predefined-rectangular-params> | <xyz-params>]"
+  },
+  {
+    "name": "<supports-condition>",
+    "syntax": "not <supports-in-parens> | <supports-in-parens> [ and <supports-in-parens> ]* | <supports-in-parens> [ or <supports-in-parens> ]*"
+  },
+  {
+    "name": "<relative-selector>",
+    "syntax": "<combinator>? <complex-selector>"
+  },
+  {
+    "name": "<relative-real-selector>",
+    "syntax": "<combinator>? <complex-real-selector>"
+  },
+  {
+    "name": "<baseline-position>",
+    "syntax": "[ first | last ]? && baseline"
+  },
+  {
+    "name": "<pseudo-compound-selector>",
+    "syntax": "<pseudo-element-selector> <pseudo-class-selector>*"
+  },
+  {
+    "name": "<line-name-list>",
+    "syntax": "[ <line-names> | <name-repeat> ]+"
+  },
+  {
+    "name": "hsl()",
+    "syntax": "[ <legacy-hsl-syntax> | <modern-hsl-syntax> ]"
+  },
+  {
+    "name": "leader()",
+    "syntax": "leader( <leader-type> )"
+  },
+  {
+    "name": "<axis>",
+    "syntax": "block | inline | x | y"
+  },
+  {
+    "name": "<line-style>",
+    "syntax": "none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset"
+  },
+  {
+    "name": "<clip-source>",
+    "syntax": "<url>"
+  },
+  {
+    "name": "calc()",
+    "syntax": "calc( <calc-sum> )"
+  },
+  {
+    "name": "invert()",
+    "syntax": "invert( [ <number> | <percentage> ]? )"
+  },
+  {
+    "name": "color()",
+    "syntax": "color( [from <color>]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )"
+  },
+  {
+    "name": "<source-size>",
+    "syntax": "<media-condition> <source-size-value> | auto"
+  },
+  {
+    "name": "<linear-stop-list>",
+    "syntax": "[ <linear-stop> ]#"
+  },
+  {
+    "name": "<compositing-operator>",
+    "syntax": "add | subtract | intersect | exclude"
+  }
+]
diff --git a/resources/useragent.css b/crates/gosub_styling/resources/useragent.css
similarity index 100%
rename from resources/useragent.css
rename to crates/gosub_styling/resources/useragent.css
diff --git a/crates/gosub_styling/src/css_definitions.rs b/crates/gosub_styling/src/css_definitions.rs
new file mode 100644
index 000000000..b4122ab51
--- /dev/null
+++ b/crates/gosub_styling/src/css_definitions.rs
@@ -0,0 +1,851 @@
+use crate::syntax::GroupCombinators::Juxtaposition;
+use crate::syntax::{CssSyntax, SyntaxComponent};
+use crate::syntax_matcher::CssSyntaxTree;
+use gosub_css3::stylesheet::CssValue;
+use log::warn;
+use memoize::memoize;
+use std::collections::HashMap;
+
+/// List of elements that are built-in data types in the CSS specification. These will be handled
+/// by the syntax matcher as built-in types.
+const BUILTIN_DATA_TYPES: [&str; 41] = [
+    "absolute-size",
+    "age",
+    "angle",
+    "basic-shape",
+    "calc-size()",
+    "counter-name",
+    "counter-style-name",
+    "custom-ident",
+    "dashed-ident",
+    "decibel",
+    "feature-tag-value",
+    "flex",
+    "frequency",
+    "gender",
+    "hex-color",
+    "id",
+    "ident",
+    "image-1D",
+    "integer",
+    "length",
+    "number",
+    "named-color",
+    "semitones",
+    "system-color",
+    "outline-line-style",
+    "palette-identifier",
+    "percentage",
+    "relative-size",
+    "string",
+    "target-name",
+    "time",
+    "timeline-range-name",
+    "transform-function",
+    "uri",
+    "url-set",
+    "url-token",
+    "x",
+    "y",
+    "color()",
+    "attr()",    //TODO: this is not a builtin!
+    "element()", //TODO: this is not a builtin!
+];
+
+/// A CSS property definition including its type and initial value and optional expanded values if it's a shorthand property
+#[derive(Debug, Clone)]
+pub struct PropertyDefinition {
+    /// Name of the property (ie: color, background etc)
+    pub name: String,
+    /// List of expanded (computed) properties if this property is a shorthand property
+    pub computed: Vec<String>,
+    /// Syntax tree of the property. This is a tree that describes the valid values for this property.
+    pub syntax: CssSyntaxTree,
+    /// True when the property inherits from parent nodes if not set
+    pub inherited: bool,
+    /// Initial value of the property, if any
+    pub initial_value: Option<CssValue>,
+    // True when this element is resolved
+    pub resolved: bool,
+}
+
+impl PropertyDefinition {
+    pub fn name(self) -> String {
+        self.name.clone()
+    }
+
+    pub fn expanded_properties(self) -> Vec<String> {
+        self.computed.clone()
+    }
+
+    pub fn syntax(self) -> CssSyntaxTree {
+        self.syntax
+    }
+
+    pub fn inherited(self) -> bool {
+        self.inherited
+    }
+
+    /// Returns true when this definition has an initial value
+    pub fn has_initial_value(self) -> bool {
+        self.initial_value.is_some()
+    }
+
+    /// Returns the initial value
+    pub fn initial_value(self) -> CssValue {
+        self.initial_value.clone().unwrap_or(CssValue::None)
+    }
+
+    /// Matches a list of values against the current definition
+    pub fn matches(self, input: Vec<CssValue>) -> bool {
+        self.syntax.matches(input)
+    }
+
+    pub fn check_expanded_properties(&self, _values: &[CssValue]) -> bool {
+        // if values.len() != self.expanded_properties.len() {
+        //     return false;
+        // }
+        //
+        // for (i, value) in values.iter().enumerate() {
+        //     let prop = self.expanded_properties.get(i).unwrap();
+        //     let prop_def = parse_definition_file().find(prop).unwrap();
+        //     if !prop_def.matches(&vec![value.clone()]) {
+        //         return false;
+        //     }
+        // }
+
+        true
+    }
+}
+
+/// A syntax definition that can be used to resolve a property definition
+#[derive(Debug, Clone)]
+pub struct SyntaxDefinition {
+    /// Actual syntax
+    syntax: CssSyntaxTree,
+    /// True when the element has already been resolved
+    resolved: bool,
+}
+
+/// Defines a list of CSS properties and its syntax.
+#[derive(Debug, Clone)]
+pub struct CssDefinitions {
+    // List of all resolved properties
+    pub resolved_properties: HashMap<String, PropertyDefinition>,
+    /// All defined properties
+    pub properties: HashMap<String, PropertyDefinition>,
+    /// List of syntax elements for resolving the properties
+    pub syntax: HashMap<String, SyntaxDefinition>,
+}
+
+impl Default for CssDefinitions {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl CssDefinitions {
+    pub fn new() -> Self {
+        CssDefinitions {
+            resolved_properties: HashMap::new(),
+            properties: HashMap::new(),
+            syntax: HashMap::new(),
+        }
+    }
+
+    /// Load the CSS definitions resource files
+    pub fn load() {
+        parse_definition_files();
+    }
+
+    /// Add a new property definition
+    pub fn add_property(&mut self, name: &str, property: PropertyDefinition) {
+        self.properties.insert(name.to_string(), property);
+    }
+
+    /// Add a new syntax definition
+    pub fn add_syntax(&mut self, name: &str, syntax: SyntaxDefinition) {
+        self.syntax.insert(name.to_string(), syntax);
+    }
+
+    /// Find a specific property
+    pub fn find_property(&self, name: &str) -> Option<PropertyDefinition> {
+        self.resolved_properties.get(name).cloned()
+    }
+
+    /// Returns the length of the property definitions
+    pub fn len(&self) -> usize {
+        self.resolved_properties.len()
+    }
+
+    /// Returns true when the properties definitions are empty
+    pub fn is_empty(&self) -> bool {
+        self.resolved_properties.is_empty()
+    }
+
+    /// Resolves all elements in the definitions
+    pub fn resolve(&mut self) {
+        let mut names = self.properties.keys().cloned().collect::<Vec<String>>();
+        names.sort();
+
+        for name in names {
+            self.resolve_property(&name);
+        }
+    }
+
+    /// Resolves a property definition (recursively)
+    fn resolve_property(&mut self, name: &str) {
+        if self.resolved_properties.contains_key(name) {
+            // Property already resolved
+            return;
+        }
+
+        if !self.properties.contains_key(name) {
+            // Property not found to resolve
+            return;
+        }
+
+        // Resolve the element
+        let mut element = self.properties.get_mut(name).unwrap().clone();
+        let mut resolved_components = vec![];
+        for component in &element.syntax.components {
+            let component = self.resolve_component(component, name);
+            resolved_components.push(component);
+        }
+
+        element.syntax.components = resolved_components;
+        element.resolved = true;
+        self.resolved_properties.insert(name.to_string(), element);
+    }
+
+    /// Resolve a syntax component
+    fn resolve_component(
+        &mut self,
+        component: &SyntaxComponent,
+        prop_name: &str,
+    ) -> SyntaxComponent {
+        match component {
+            SyntaxComponent::Definition {
+                datatype,
+                multipliers,
+                ..
+            } => {
+                // First step: Resolve by looking the definition up in the syntax defintions.
+                if let Some(syntax_element) = self.syntax.get(datatype) {
+                    let mut syntax_element = syntax_element.clone();
+                    if !syntax_element.resolved {
+                        syntax_element.syntax =
+                            self.resolve_syntax(&syntax_element.syntax, prop_name);
+                        syntax_element.resolved = true;
+                        self.syntax.insert(datatype.clone(), syntax_element.clone());
+                    }
+
+                    return SyntaxComponent::Group {
+                        components: syntax_element.syntax.components.clone(),
+                        combinator: Juxtaposition,
+                        multipliers: multipliers.clone(),
+                    };
+                }
+
+                // Second step: Resolve by looking the definition up in the properties
+
+                // Don't resolve in properties when the datatype is the same as the
+                // property name (for instance: inset-area)
+                if datatype != prop_name {
+                    // This datatype is not resolved yet.
+                    if !self.resolved_properties.contains_key(datatype) {
+                        if let Some(property_element) = self.properties.get(datatype) {
+                            let name = property_element.name.clone();
+                            self.resolve_property(name.as_str());
+                        }
+                    }
+
+                    if let Some(resolved_prop) = self.resolved_properties.get(datatype) {
+                        // If the resolved syntax is just a single element (be it a group, or a single element),
+                        // return that component.
+                        if resolved_prop.syntax.components.len() == 1 {
+                            return resolved_prop.syntax.components[0].clone();
+                        }
+
+                        // Otherwise, we return a group with the components
+                        return SyntaxComponent::Group {
+                            components: resolved_prop.syntax.components.clone(),
+                            combinator: Juxtaposition,
+                            multipliers: multipliers.clone(),
+                        };
+                    }
+                }
+
+                // Last step: check if the data type is a built-in datatype
+                if BUILTIN_DATA_TYPES.contains(&datatype.as_str()) {
+                    return SyntaxComponent::Builtin {
+                        datatype: datatype.clone(),
+                        multipliers: multipliers.clone(),
+                    };
+                }
+
+                panic!("Unknown datatype encountered: {:?}", datatype);
+            }
+            SyntaxComponent::Group {
+                components,
+                combinator,
+                multipliers,
+            } => {
+                // Resolve this group and return a new group with resolved components
+                let mut resolved_components = vec![];
+                for component in components {
+                    resolved_components.push(self.resolve_component(component, prop_name));
+                }
+
+                SyntaxComponent::Group {
+                    components: resolved_components,
+                    combinator: combinator.clone(),
+                    multipliers: multipliers.clone(),
+                }
+            }
+            _ => {
+                // This component does not need any resolving
+                component.clone()
+            }
+        }
+    }
+
+    // Resolve all the components from a given syntax tree
+    fn resolve_syntax(&mut self, syntax: &CssSyntaxTree, prop_name: &str) -> CssSyntaxTree {
+        let mut resolved_components = vec![];
+
+        for component in &syntax.components {
+            resolved_components.push(self.resolve_component(component, prop_name));
+        }
+
+        CssSyntaxTree {
+            components: resolved_components,
+        }
+    }
+}
+
+/// Parses the internal CSS definition file
+#[memoize]
+pub fn parse_definition_files() -> CssDefinitions {
+    // parse all syntax, so we can use them in the properties
+    let contents = include_str!("../resources/definitions/definitions_values.json");
+    let json: serde_json::Value =
+        serde_json::from_str(contents).expect("JSON was not well-formatted");
+    let syntax = parse_syntax_file(json);
+
+    // Parse property definitions
+    let contents = include_str!("../resources/definitions/definitions_properties.json");
+    let json: serde_json::Value =
+        serde_json::from_str(contents).expect("JSON was not well-formatted");
+    let properties = parse_property_file(json);
+
+    // Create definition structure, and resolve all definitions
+    let mut definitions = CssDefinitions {
+        resolved_properties: HashMap::new(),
+        properties,
+        syntax,
+    };
+    definitions.resolve();
+
+    definitions
+}
+
+/// Main function to return the definitions. THis will automatically load the definition files
+/// and caches them if needed.
+pub fn get_css_definitions() -> CssDefinitions {
+    parse_definition_files()
+}
+
+/// Parses a syntax JSON import file
+fn parse_syntax_file(json: serde_json::Value) -> HashMap<String, SyntaxDefinition> {
+    let mut syntaxes = HashMap::new();
+
+    let entries = json.as_array().unwrap();
+    for entry in entries.iter() {
+        match CssSyntax::new(entry.get("syntax").unwrap().as_str().unwrap()).compile() {
+            Ok(ast) => {
+                let mut name = entry.get("name").unwrap().to_string();
+
+                if name.starts_with('"') {
+                    name = name[1..].to_string();
+                }
+
+                if name.starts_with('<') {
+                    name = name[1..].to_string();
+                }
+
+                if name.ends_with('"') {
+                    name.pop();
+                }
+
+                if name.ends_with('>') {
+                    name.pop();
+                }
+
+                syntaxes.insert(
+                    name.clone(),
+                    SyntaxDefinition {
+                        // name,
+                        syntax: ast.clone(),
+                        resolved: false,
+                    },
+                );
+            }
+            Err(e) => {
+                log::warn!(
+                    "Could not compile syntax for syntax {:?}: {:?}",
+                    entry.get("name").unwrap().to_string(),
+                    e
+                );
+            }
+        }
+    }
+
+    // Resolve all typedefs since we now have loaded them all
+    // typedef_resolve_all(&mut typedefs);
+    syntaxes
+}
+
+/// Parses the JSON input into a CSS property definitions structure
+fn parse_property_file(json: serde_json::Value) -> HashMap<String, PropertyDefinition> {
+    let mut properties = HashMap::new();
+
+    for obj in json.as_array().unwrap() {
+        let name = obj["name"].as_str().unwrap().to_string();
+
+        // Compile syntax
+        let syntax = obj.get("syntax").unwrap().as_str().unwrap();
+        let syntax = CssSyntax::new(syntax)
+            .compile()
+            .unwrap_or_else(|_| panic!("Could not compile syntax for {name}: {syntax:?}"));
+
+        //
+        let computed = if obj["computed"].is_array() {
+            obj["computed"]
+                .as_array()
+                .unwrap()
+                .iter()
+                .map(|v| v.as_str().unwrap().to_string())
+                .collect()
+        } else if obj["computed"].is_string() {
+            vec![obj["computed"].as_str().unwrap().to_string()]
+        } else {
+            warn!("Computed property is not a string or array {:?}", obj);
+            vec![]
+        };
+
+        let initial_value = if obj["initial_value"].is_array() {
+            warn!("Initial value is an array, not supported {:?}", obj);
+            // obj["initial_value"]
+            //     .as_array()
+            //     .unwrap()
+            //     .iter()
+            //     .map(|v| CssValue::from(v))
+            //     .collect()
+            None
+        } else if obj["initial_value"].is_string() {
+            match CssValue::parse_str(obj["initial_value"].as_str().unwrap()) {
+                Ok(value) => Some(value),
+                Err(e) => {
+                    warn!("Could not parse initial value: {:?}", e);
+                    None
+                }
+            }
+        } else {
+            warn!("Initial value is not a string or array {:?}", obj);
+            None
+        };
+
+        properties.insert(
+            name.clone(),
+            PropertyDefinition {
+                name: name.clone(),
+                syntax,
+                computed,
+                initial_value,
+                inherited: obj["inherited"].as_bool().unwrap(),
+                resolved: false,
+            },
+        );
+    }
+
+    properties
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use gosub_css3::colors::RgbColor;
+
+    macro_rules! assert_false {
+        ($e:expr) => {
+            assert_eq!(false, $e);
+        };
+    }
+
+    macro_rules! assert_true {
+        ($e:expr) => {
+            assert_eq!(true, $e);
+        };
+    }
+
+    macro_rules! str {
+        ($s:expr) => {
+            CssValue::String($s.to_string())
+        };
+    }
+
+    macro_rules! unit {
+        ($v:expr, $u:expr) => {
+            CssValue::Unit($v, $u.to_string())
+        };
+    }
+
+    #[test]
+    fn test_parse_definition_file() {
+        let definitions = parse_definition_files();
+        assert_eq!(definitions.len(), 620);
+    }
+
+    #[test]
+    fn test_prop_border() {
+        let definitions = parse_definition_files();
+        let prop = definitions.find_property("border").unwrap();
+
+        assert!(
+            prop.clone().matches(vec![
+                unit!(1.0, "px"),
+                str!("solid"),
+                CssValue::Color(RgbColor::from("black")),
+            ])
+        );
+        assert!(
+            prop.clone().matches(vec![
+                CssValue::Color(RgbColor::from("black")),
+                str!("solid"),
+                unit!(1.0, "px"),
+            ])
+        );
+        assert!(
+            prop.clone().matches(vec![
+                str!("solid"),
+                CssValue::Color(RgbColor::from("black")),
+                unit!(1.0, "px"),
+            ])
+        );
+        assert!(prop.clone().matches(vec![unit!(1.0, "px"),]));
+        assert!(prop.clone().matches(vec![str!("solid")]));
+        assert!(
+            prop.clone().matches(vec![
+                str!("solid"),
+                CssValue::Color(RgbColor::from("black")),
+            ])
+        );
+        assert!(
+            prop.clone().matches(vec![
+                str!("solid"),
+                CssValue::Color(RgbColor::from("black")),
+            ])
+        );
+        assert_true!(prop.clone().matches(vec![str!("solid")]));
+        assert_false!(prop.clone().matches(vec![str!("not-solid")]));
+        assert_false!(prop
+            .clone()
+            .matches(vec![str!("solid"), str!("solid"), unit!(1.0, "px"),]));
+    }
+
+    #[test]
+    fn test_property_definitions() {
+        let mut definitions = CssDefinitions::new();
+        definitions.add_property(
+            "color",
+            PropertyDefinition {
+                name: "color".to_string(),
+                computed: vec![],
+                syntax: CssSyntax::new("color()")
+                    .compile()
+                    .expect("Could not compile syntax"),
+                inherited: false,
+                initial_value: None,
+                resolved: false,
+            },
+        );
+        definitions.resolve();
+
+        assert_eq!(definitions.len(), 1);
+        assert!(definitions.find_property("color").is_some());
+        assert!(definitions.find_property("border-top-style").is_none());
+
+        definitions.add_property(
+            "border-style",
+            PropertyDefinition {
+                name: "border-style".to_string(),
+                computed: vec![
+                    "border-top-style".to_string(),
+                    "border-right-style".to_string(),
+                    "border-bottom-style".to_string(),
+                    "border-left-style".to_string(),
+                ],
+                syntax: CssSyntax::new("")
+                    .compile()
+                    .expect("Could not compile syntax"),
+                inherited: false,
+                initial_value: Some(str!("thick".to_string())),
+                resolved: false,
+            },
+        );
+
+        assert_eq!(definitions.len(), 2);
+        assert!(definitions.find_property("border-style").is_some());
+    }
+
+    /*
+    #[test]
+    fn test_azimuth() {
+        let definitions = parse_definition_files();
+        let def = definitions.find_property("azimuth").unwrap();
+
+        assert_true!(def.clone().matches(vec![unit!(361.0, "deg")]));
+
+        assert_false!(def.clone().matches(vec![unit!(20.0, "blaat")]));
+
+        assert_true!(def
+            .clone()
+            .matches(vec![unit!(std::f32::consts::FRAC_PI_2, "rad")]));
+        assert_true!(def.clone().matches(vec![CssValue::Zero]));
+
+        assert_true!(def.clone().matches(vec![unit!(360.0, "deg")]));
+        assert_true!(def.clone().matches(vec![unit!(360.0, "grad")]));
+        assert_true!(def.clone().matches(vec![unit!(2.0, "grad")]));
+        assert_true!(def.clone().matches(vec![unit!(-360.0, "grad")]));
+
+        assert_false!(def.clone().matches(vec![str!("leftside")]));
+
+        assert_true!(def.clone().matches(vec![str!("left-side")]));
+        assert_true!(def.clone().matches(vec![str!("left")]));
+        assert_true!(def.clone().matches(vec![str!("center")]));
+        assert_true!(def.clone().matches(vec![str!("rightwards")]));
+        assert_true!(def
+            .clone()
+            .matches(vec![str!("far-right"), str!("behind"),]));
+        assert_true!(def.clone().matches(vec![str!("behind")]));
+    }
+     */
+
+    #[test]
+    fn test_background_color() {
+        let definitions = parse_definition_files();
+        let def = definitions.find_property("background-color").unwrap();
+
+        // assert_some!(def.clone().matches(&CssValue::Inherit));
+        assert_true!(def.clone().matches(vec![str!("transparent")]));
+
+        assert_true!(def.clone().matches(vec![str!("red")]));
+        // System colors
+        assert_true!(def.clone().matches(vec![str!("Canvas")]));
+        assert_true!(def.clone().matches(vec![str!("CanvasText")]));
+        assert_true!(def.clone().matches(vec![str!("CanvasText")]));
+        assert_true!(def.clone().matches(vec![str!("Menu")]));
+
+        assert_true!(def.clone().matches(vec![str!("blue")]));
+        assert_true!(def
+            .clone()
+            .matches(vec![CssValue::Color(RgbColor::from("#ff0000"))]));
+        assert_true!(def.clone().matches(vec![str!("rebeccapurple")]));
+
+        assert_false!(def.clone().matches(vec![str!("thiscolordoesnotexist")]));
+    }
+
+    #[test]
+    fn test_background_attachments() {
+        let definitions = parse_definition_files();
+        let def = definitions.find_property("background-attachment").unwrap();
+
+        // assert_true!(def.clone().matches(&CssValue::Inherit));
+        assert_true!(def.clone().matches(vec![str!("scroll")]));
+        assert_true!(def.clone().matches(vec![str!("fixed")]));
+
+        assert_false!(def.clone().matches(vec![str!("incorrect")]));
+        assert_false!(def.clone().matches(vec![str!("rebeccapurple")]));
+        assert_false!(def.clone().matches(vec![CssValue::Zero]));
+    }
+
+    #[test]
+    fn test_background_position() {
+        let definitions = parse_definition_files();
+        let def = definitions.find_property("background-position").unwrap();
+
+        // background-position: left 10px;
+        assert_true!(def.clone().matches(vec![str!("left"), unit!(10.0, "px"),]));
+
+        // background-position: left 10px top 20px;
+        assert_true!(def.clone().matches(vec![
+            str!("left"),
+            unit!(10.0, "px"),
+            str!("top"),
+            unit!(20.0, "px"),
+        ]));
+
+        // background-position: right 15% bottom 5%;
+        assert_true!(def.clone().matches(vec![
+            str!("right"),
+            CssValue::Percentage(15.0),
+            str!("bottom"),
+            CssValue::Percentage(5.0),
+        ]));
+
+        // background-position: center center;
+        assert_true!(def.clone().matches(vec![str!("center"), str!("center"),]));
+
+        // background-position: 75% 50%;
+        assert_true!(def
+            .clone()
+            .matches(vec![CssValue::Percentage(75.0), CssValue::Percentage(50.0),]));
+
+        // background-position: 75%;
+        assert_true!(def.clone().matches(vec![CssValue::Percentage(75.0),]));
+
+        // background-position: top 10px center;
+        assert_true!(def
+            .clone()
+            .matches(vec![str!("top"), unit!(10.0, "px"), str!("center"),]));
+
+        // background-position: bottom 20px right 30px;
+        assert_true!(def.clone().matches(vec![
+            str!("bottom"),
+            unit!(20.0, "px"),
+            str!("right"),
+            unit!(30.0, "px"),
+        ]));
+
+        // background-position: 20% 80%;
+        assert_true!(def
+            .clone()
+            .matches(vec![CssValue::Percentage(20.0), CssValue::Percentage(80.0),]));
+
+        // background-position: left 5px bottom 15px, right 10px top 20px;
+        assert_true!(def.clone().matches(vec![
+            str!("left"),
+            unit!(5.0, "px"),
+            str!("bottom"),
+            unit!(15.0, "px"),
+            CssValue::Comma,
+            str!("right"),
+            unit!(10.0, "px"),
+            str!("top"),
+            unit!(20.0, "px"),
+        ]));
+
+        // background-position: center top 35px;
+        assert_true!(def
+            .clone()
+            .matches(vec![str!("center"), str!("top"), unit!(35.0, "px"),]));
+
+        // background-position: left 45% bottom 25%;
+        assert_true!(def.clone().matches(vec![
+            str!("left"),
+            CssValue::Percentage(45.0),
+            str!("bottom"),
+            CssValue::Percentage(25.0),
+        ]));
+
+        // background-position: right 10% top 50px;
+        assert_true!(def.clone().matches(vec![
+            str!("right"),
+            CssValue::Percentage(10.0),
+            str!("top"),
+            unit!(50.0, "px"),
+        ]));
+
+        // // background-position: 0% 0%, 100% 100%;
+        assert_true!(def.clone().matches(vec![
+            CssValue::Percentage(0.0),
+            CssValue::Percentage(0.0),
+            CssValue::Comma,
+            CssValue::Percentage(100.0),
+            CssValue::Percentage(100.0),
+        ]));
+
+        // background-position: left top, right bottom;
+        assert_true!(def.clone().matches(vec![
+            str!("left"),
+            str!("top"),
+            CssValue::Comma,
+            str!("right"),
+            str!("bottom"),
+        ]));
+
+        // background-position: 100% 0, 0 100%;
+        assert_true!(def.clone().matches(vec![
+            CssValue::Percentage(100.0),
+            CssValue::Zero,
+            CssValue::Comma,
+            CssValue::Zero,
+            CssValue::Percentage(100.0),
+        ]));
+
+        // background-position: left 25px bottom, center top;
+        assert_true!(def.clone().matches(vec![
+            str!("left"),
+            unit!(25.0, "px"),
+            str!("bottom"),
+            CssValue::Comma,
+            str!("center"),
+            str!("top"),
+        ]));
+
+        // background-position: top 10% left 20%, bottom 10% right 20%;
+        assert_true!(def.clone().matches(vec![
+            str!("top"),
+            CssValue::Percentage(10.0),
+            str!("left"),
+            CssValue::Percentage(20.0),
+            CssValue::Comma,
+            str!("bottom"),
+            CssValue::Percentage(10.0),
+            str!("right"),
+            CssValue::Percentage(20.0),
+        ]));
+
+        // background-position: 10px 30px, 90% 10%;
+        assert_true!(def.clone().matches(vec![
+            unit!(10.0, "px"),
+            unit!(30.0, "px"),
+            CssValue::Comma,
+            CssValue::Percentage(90.0),
+            CssValue::Percentage(10.0),
+        ]));
+
+        // background-position: top right, bottom left 15px;
+        assert_true!(def.clone().matches(vec![
+            str!("top"),
+            str!("right"),
+            CssValue::Comma,
+            str!("bottom"),
+            str!("left"),
+            unit!(15.0, "px"),
+        ]));
+
+        // background-position: 50% 25%, 25% 75%;
+        assert_true!(def.clone().matches(vec![
+            CssValue::Percentage(50.0),
+            CssValue::Percentage(25.0),
+            CssValue::Comma,
+            CssValue::Percentage(25.0),
+            CssValue::Percentage(75.0),
+        ]));
+
+        // background-position: right 5% bottom 5%, left 5% top 5%;
+        assert_true!(def.clone().matches(vec![
+            str!("right"),
+            CssValue::Percentage(5.0),
+            str!("bottom"),
+            CssValue::Percentage(5.0),
+            CssValue::Comma,
+            str!("left"),
+            CssValue::Percentage(5.0),
+            str!("top"),
+            CssValue::Percentage(5.0),
+        ]));
+    }
+}
diff --git a/crates/gosub_styling/src/errors.rs b/crates/gosub_styling/src/errors.rs
new file mode 100644
index 000000000..3e3187039
--- /dev/null
+++ b/crates/gosub_styling/src/errors.rs
@@ -0,0 +1,8 @@
+//! Error results that can be returned from the Gosub styling module
+use thiserror::Error;
+
+#[derive(Debug, Error)]
+pub enum Error {
+    #[error("css: compilation error: {0}")]
+    CssCompile(String),
+}
diff --git a/crates/gosub_styling/src/lib.rs b/crates/gosub_styling/src/lib.rs
index 49085931f..572536c17 100644
--- a/crates/gosub_styling/src/lib.rs
+++ b/crates/gosub_styling/src/lib.rs
@@ -3,32 +3,30 @@
 //! This crate connects CSS3 and HTML5 into a styling pipeline
 //!
 
-use std::fs;
-
 use gosub_css3::convert::ast_converter::convert_ast_to_stylesheet;
 use gosub_css3::parser_config::ParserConfig;
 use gosub_css3::stylesheet::{CssOrigin, CssStylesheet};
 use gosub_css3::Css3;
 
-pub mod css_colors;
-pub mod css_values;
-// pub mod prerender_text;
-mod property_list;
+pub mod css_definitions;
+mod errors;
 pub mod render_tree;
+pub mod styling;
+mod syntax;
+mod syntax_matcher;
 
 /// Loads the default user agent stylesheet
 pub fn load_default_useragent_stylesheet() -> anyhow::Result<CssStylesheet> {
-    // @todo: we should be able to browse to gosub://useragent.css and see the actual useragent css file
-    let location = "gosub://useragent.css";
+    // @todo: we should be able to browse to gosub:useragent.css and see the actual useragent css file
+    let location = "gosub:useragent.css";
     let config = ParserConfig {
         source: Some(String::from(location)),
         ignore_errors: true,
         ..Default::default()
     };
 
-    let css =
-        fs::read_to_string("resources/useragent.css").expect("Could not load useragent stylesheet");
-    let css_ast = Css3::parse(css.as_str(), config).expect("Could not parse useragent stylesheet");
+    let css = include_str!("../resources/useragent.css");
+    let css_ast = Css3::parse(css, config).expect("Could not parse useragent stylesheet");
 
     convert_ast_to_stylesheet(&css_ast, CssOrigin::UserAgent, location)
 }
diff --git a/crates/gosub_styling/src/property_list.rs b/crates/gosub_styling/src/property_list.rs
deleted file mode 100644
index 0a2f9b587..000000000
--- a/crates/gosub_styling/src/property_list.rs
+++ /dev/null
@@ -1,577 +0,0 @@
-use lazy_static::lazy_static;
-
-use crate::css_values::CssValue;
-
-// Values for this table is taken from https://www.w3.org/TR/CSS21/propidx.html
-// Probably not the complete list, but it will do for now
-
-pub struct PropertyTableEntry {
-    pub(crate) name: &'static str,
-    pub(crate) initial: CssValue,
-    pub(crate) inheritable: bool,
-}
-
-lazy_static! {
-    pub static ref PROPERTY_TABLE: Vec<PropertyTableEntry> = vec![
-        PropertyTableEntry {
-            name: "azimuth",
-            initial: CssValue::String("center".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "background-attachment",
-            initial: CssValue::String("scroll".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "background-color",
-            initial: CssValue::String("transparent".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "background-image",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "background-position",
-            initial: CssValue::String("0% 0%".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "background-repeat",
-            initial: CssValue::String("repeat".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-collapse",
-            initial: CssValue::String("separate".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-color",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-spacing",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-style",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-top",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-right",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-bottom",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-left",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-top-color",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-right-color",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-bottom-color",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-left-color",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-top-style",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-right-style",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-bottom-style",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-left-style",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-top-width",
-            initial: CssValue::String("medium".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-right-width",
-            initial: CssValue::String("medium".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-bottom-width",
-            initial: CssValue::String("medium".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-left-width",
-            initial: CssValue::String("medium".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "border-width",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "bottom",
-            initial: CssValue::String("auto".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "caption-side",
-            initial: CssValue::String("top".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "clear",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "clip",
-            initial: CssValue::String("auto".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "color",
-            initial: CssValue::String("initial".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "content",
-            initial: CssValue::String("normal".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "counter-increment",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "counter-reset",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "cue",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "cue-after",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "cue-before",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "cursor",
-            initial: CssValue::String("auto".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "direction",
-            initial: CssValue::String("ltr".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "display",
-            initial: CssValue::String("inline".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "elevation",
-            initial: CssValue::String("level".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "empty-cells",
-            initial: CssValue::String("show".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "float",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "font",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "font-family",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "font-size",
-            initial: CssValue::String("medium".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "font-style",
-            initial: CssValue::String("normal".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "font-variant",
-            initial: CssValue::String("normal".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "font-weight",
-            initial: CssValue::String("normal".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "height",
-            initial: CssValue::String("auto".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "left",
-            initial: CssValue::String("auto".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "letter-spacing",
-            initial: CssValue::String("normal".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "line-height",
-            initial: CssValue::String("normal".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "list-style",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "list-style-image",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "list-style-position",
-            initial: CssValue::String("outside".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "list-style-type",
-            initial: CssValue::String("disc".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "margin",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "margin-top",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "margin-right",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "margin-bottom",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "margin-left",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "max-height",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "max-width",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "min-height",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "min-width",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "orphans",
-            initial: CssValue::Number(2_f32),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "outline",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "outline-color",
-            initial: CssValue::String("invert".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "outline-style",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "outline-width",
-            initial: CssValue::String("medium".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "overflow",
-            initial: CssValue::String("visible".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "padding",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "padding-top",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "padding-right",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "padding-bottom",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "padding-left",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "page-break-after",
-            initial: CssValue::String("auto".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "page-break-before",
-            initial: CssValue::String("auto".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "page-break-inside",
-            initial: CssValue::String("auto".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "pause-after",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "pause-before",
-            initial: CssValue::Number(0_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "pitch",
-            initial: CssValue::String("medium".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "pitch-range",
-            initial: CssValue::Number(50_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "play-during",
-            initial: CssValue::String("auto".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "position",
-            initial: CssValue::String("static".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "quotes",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "richness",
-            initial: CssValue::Number(50_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "right",
-            initial: CssValue::String("auto".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "speak",
-            initial: CssValue::String("normal".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "speak-header",
-            initial: CssValue::String("once".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "speak-numeral",
-            initial: CssValue::String("continuous".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "speak-punctuation",
-            initial: CssValue::String("none".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "speech-rate",
-            initial: CssValue::String("medium".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "stress",
-            initial: CssValue::Number(50_f32),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "table-layout",
-            initial: CssValue::String("auto".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "text-align",
-            initial: CssValue::String("initial".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "text-decoration",
-            initial: CssValue::String("none".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "text-indent",
-            initial: CssValue::Number(0_f32),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "text-transform",
-            initial: CssValue::String("none".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "top",
-            initial: CssValue::String("auto".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "unicode-bidi",
-            initial: CssValue::String("normal".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "vertical-align",
-            initial: CssValue::String("baseline".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "visibility",
-            initial: CssValue::String("visible".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "voice-family",
-            initial: CssValue::String("initial".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "volume",
-            initial: CssValue::String("medium".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "white-space",
-            initial: CssValue::String("normal".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "widows",
-            initial: CssValue::Number(2_f32),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "width",
-            initial: CssValue::String("auto".into()),
-            inheritable: false,
-        },
-        PropertyTableEntry {
-            name: "word-spacing",
-            initial: CssValue::String("normal".into()),
-            inheritable: true,
-        },
-        PropertyTableEntry {
-            name: "z-index",
-            initial: CssValue::String("auto".into()),
-            inheritable: false,
-        },
-    ];
-}
diff --git a/crates/gosub_styling/src/render_tree.rs b/crates/gosub_styling/src/render_tree.rs
index 0f12d1a06..2f3fdacbe 100644
--- a/crates/gosub_styling/src/render_tree.rs
+++ b/crates/gosub_styling/src/render_tree.rs
@@ -1,8 +1,8 @@
 mod desc;
 
-use std::collections::HashMap;
-use std::fmt::Debug;
-
+use crate::css_definitions::get_css_definitions;
+use crate::styling::{match_selector, CssProperties, CssProperty, DeclarationProperty};
+use gosub_css3::stylesheet::{CssDeclaration, CssSelector, CssStylesheet, CssValue};
 use gosub_html5::node::data::element::ElementData;
 use gosub_html5::node::{NodeData, NodeId};
 use gosub_html5::parser::document::{DocumentHandle, TreeIterator};
@@ -11,10 +11,9 @@ use gosub_render_backend::layout::{LayoutTree, Layouter, Node};
 use gosub_render_backend::{PreRenderText, RenderBackend};
 use gosub_shared::types::Result;
 use gosub_typeface::DEFAULT_FS;
-
-use crate::css_values::{
-    match_selector, CssProperties, CssProperty, CssValue, DeclarationProperty,
-};
+use log::warn;
+use std::collections::HashMap;
+use std::fmt::Debug;
 
 /// Map of all declared values for all nodes in the document
 #[derive(Debug)]
@@ -244,6 +243,8 @@ impl<B: RenderBackend, L: Layouter> RenderTree<B, L> {
                 .get_node_by_id(current_node_id)
                 .expect("node not found");
 
+            let definitions = get_css_definitions();
+
             for sheet in document.get().stylesheets.iter() {
                 for rule in sheet.rules.iter() {
                     for selector in rule.selectors().iter() {
@@ -257,26 +258,33 @@ impl<B: RenderBackend, L: Layouter> RenderTree<B, L> {
 
                         // Selector matched, so we add all declared values to the map
                         for declaration in rule.declarations().iter() {
-                            let prop_name = declaration.property.clone();
+                            // Step 1: find the property in our CSS definition list
+                            let definition = definitions.find_property(&declaration.property);
+                            // If not found, we skip this declaration
+                            if definition.is_none() {
+                                warn!(
+                                    "Definition is not found for property {:?}",
+                                    declaration.property
+                                );
+                                continue;
+                            }
+
+                            // Check if the declaration matches the definition and return the "expanded" order
+                            let res = definition.unwrap().matches(declaration.value.clone());
+                            if !res {
+                                warn!("Declaration does not match definition: {:?}", declaration);
+                                continue;
+                            }
 
-                            let declaration = DeclarationProperty {
-                                value: CssValue::String(declaration.value.clone()), // @TODO: parse the value into the correct CSSValue
-                                origin: sheet.origin.clone(),
+                            // create property for the given values
+                            let property_name = declaration.property.clone();
+                            let decl = CssDeclaration {
+                                property: property_name.to_string(),
+                                value: declaration.value.clone(),
                                 important: declaration.important,
-                                location: sheet.location.clone(),
-                                specificity: selector.specificity(),
                             };
 
-                            if let std::collections::hash_map::Entry::Vacant(e) =
-                                css_map_entry.properties.entry(prop_name.clone())
-                            {
-                                let mut entry = CssProperty::new(prop_name.as_str());
-                                entry.declared.push(declaration);
-                                e.insert(entry);
-                            } else {
-                                let entry = css_map_entry.properties.get_mut(&prop_name).unwrap();
-                                entry.declared.push(declaration);
-                            }
+                            add_property_to_map(&mut css_map_entry, sheet, selector, &decl);
                         }
                     }
                 }
@@ -304,7 +312,7 @@ impl<B: RenderBackend, L: Layouter> RenderTree<B, L> {
                 ControlFlow::Ok(data) => data,
                 ControlFlow::Drop => continue,
                 ControlFlow::Error(e) => {
-                    eprintln!("Failed to create node data for node: {current_node_id:?} ({e}");
+                    log::error!("Failed to create node data for node: {current_node_id:?} ({e}");
                     continue;
                 }
             };
@@ -478,6 +486,53 @@ impl<B: RenderBackend, L: Layouter> RenderTree<B, L> {
     }
 }
 
+// Generates a declaration property and adds it to the css_map_entry
+fn add_property_to_map(
+    css_map_entry: &mut CssProperties,
+    sheet: &CssStylesheet,
+    selector: &CssSelector,
+    declaration: &CssDeclaration,
+) {
+    let property_name = declaration.property.clone();
+    let entry = CssProperty::new(property_name.as_str());
+
+    // If the property is a shorthand css property, we need fetch the individual properties
+    // It's possible that need to recurse here as these individual properties can be shorthand as well
+    if entry.is_shorthand() {
+        for property_name in entry.get_props_from_shorthand() {
+            let decl = CssDeclaration {
+                property: property_name.to_string(),
+                value: declaration.value.clone(),
+                important: declaration.important,
+            };
+
+            add_property_to_map(css_map_entry, sheet, selector, &decl);
+        }
+    }
+
+    let declaration = DeclarationProperty {
+        // @todo: this seems wrong. We only get the first values from the declared values
+        value: declaration.value.first().unwrap().clone(),
+        origin: sheet.origin.clone(),
+        important: declaration.important,
+        location: sheet.location.clone(),
+        specificity: selector.specificity(),
+    };
+
+    if let std::collections::hash_map::Entry::Vacant(e) =
+        css_map_entry.properties.entry(property_name.clone())
+    {
+        // Generate new property in the css map
+        let mut entry = CssProperty::new(property_name.as_str());
+        entry.declared.push(declaration);
+        e.insert(entry);
+    } else {
+        // Just add the declaration to the existing property
+        let entry = css_map_entry.properties.get_mut(&property_name).unwrap();
+        entry.declared.push(declaration);
+    }
+}
+
 #[derive(Debug)]
 pub enum RenderNodeData<B: RenderBackend> {
     Document,
diff --git a/crates/gosub_styling/src/shorthands.rs b/crates/gosub_styling/src/shorthands.rs
deleted file mode 100644
index b67b82a3b..000000000
--- a/crates/gosub_styling/src/shorthands.rs
+++ /dev/null
@@ -1,312 +0,0 @@
-/// This file contains the shorthand properties and their expanded properties.
-use lazy_static::lazy_static;
-use std::collections::HashMap;
-
-lazy_static! {
-    static ref SHORTHAND_PROPERTIES: HashMap<&'static str, Vec<&'static str>> = {
-        let mut m = HashMap::new();
-        m.insert(
-            "background",
-            vec![
-                "background-color",
-                "background-image",
-                "background-repeat",
-                "background-attachment",
-                "background-position",
-                "background-size",
-            ],
-        );
-        m.insert(
-            "border",
-            vec!["border-width", "border-style", "border-color"],
-        );
-        m.insert(
-            "border-radius",
-            vec![
-                "border-top-left-radius",
-                "border-top-right-radius",
-                "border-bottom-right-radius",
-                "border-bottom-left-radius",
-            ],
-        );
-        m.insert(
-            "border-width",
-            vec![
-                "border-top-width",
-                "border-right-width",
-                "border-bottom-width",
-                "border-left-width",
-            ],
-        );
-        m.insert(
-            "border-style",
-            vec![
-                "border-top-style",
-                "border-right-style",
-                "border-bottom-style",
-                "border-left-style",
-            ],
-        );
-        m.insert(
-            "border-color",
-            vec![
-                "border-top-color",
-                "border-right-color",
-                "border-bottom-color",
-                "border-left-color",
-            ],
-        );
-        m.insert(
-            "margin",
-            vec!["margin-top", "margin-right", "margin-bottom", "margin-left"],
-        );
-        m.insert(
-            "padding",
-            vec![
-                "padding-top",
-                "padding-right",
-                "padding-bottom",
-                "padding-left",
-            ],
-        );
-        m.insert(
-            "font",
-            vec![
-                "font-style",
-                "font-variant",
-                "font-weight",
-                "font-size",
-                "line-height",
-                "font-family",
-            ],
-        );
-        m.insert(
-            "list-style",
-            vec!["list-style-type", "list-style-position", "list-style-image"],
-        );
-        m.insert(
-            "outline",
-            vec!["outline-width", "outline-style", "outline-color"],
-        );
-        m.insert("overflow", vec!["overflow-x", "overflow-y"]);
-        m.insert(
-            "text-decoration",
-            vec![
-                "text-decoration-line",
-                "text-decoration-style",
-                "text-decoration-color",
-                "text-decoration-thickness",
-                "text-underline-position",
-            ],
-        );
-        m.insert(
-            "transition",
-            vec![
-                "transition-property",
-                "transition-duration",
-                "transition-timing-function",
-                "transition-delay",
-            ],
-        );
-        m.insert(
-            "border-block-end",
-            vec![
-                "border-block-end-width",
-                "border-block-end-style",
-                "border-block-end-color",
-            ],
-        );
-        m.insert(
-            "border-block-start",
-            vec![
-                "border-block-start-width",
-                "border-block-start-style",
-                "border-block-start-color",
-            ],
-        );
-        m.insert(
-            "border-bottom",
-            vec![
-                "border-bottom-width",
-                "border-bottom-style",
-                "border-bottom-color",
-            ],
-        );
-        m.insert(
-            "border-image",
-            vec![
-                "border-image-source",
-                "border-image-slice",
-                "border-image-width",
-                "border-image-outset",
-                "border-image-repeat",
-            ],
-        );
-        m.insert(
-            "border-inline-end",
-            vec![
-                "border-inline-end-width",
-                "border-inline-end-style",
-                "border-inline-end-color",
-            ],
-        );
-        m.insert(
-            "border-inline-start",
-            vec![
-                "border-inline-start-width",
-                "border-inline-start-style",
-                "border-inline-start-color",
-            ],
-        );
-        m.insert(
-            "border-left",
-            vec![
-                "border-left-width",
-                "border-left-style",
-                "border-left-color",
-            ],
-        );
-        m.insert(
-            "border-right",
-            vec![
-                "border-right-width",
-                "border-right-style",
-                "border-right-color",
-            ],
-        );
-        m.insert(
-            "border-top",
-            vec!["border-top-width", "border-top-style", "border-top-color"],
-        );
-        m.insert(
-            "column-rule",
-            vec![
-                "column-rule-width",
-                "column-rule-style",
-                "column-rule-color",
-            ],
-        );
-        m.insert("columns", vec!["column-width", "column-count"]);
-        m.insert("container", vec!["container-type", "container-name"]);
-        m.insert("contain-intrinsic-size", vec!["width", "height"]);
-        m.insert("flex", vec!["flex-grow", "flex-shrink", "flex-basis"]);
-        m.insert("flex-flow", vec!["flex-direction", "flex-wrap"]);
-        m.insert(
-            "font-synthesis",
-            vec![
-                "font-synthesis-weight",
-                "font-synthesis-style",
-                "font-synthesis-small-caps",
-            ],
-        );
-        m.insert(
-            "font-variant",
-            vec![
-                "font-variant-ligatures",
-                "font-variant-caps",
-                "font-variant-numeric",
-                "font-variant-east-asian",
-            ],
-        );
-        m.insert("gap", vec!["row-gap", "column-gap"]);
-        m.insert(
-            "grid",
-            vec![
-                "grid-template-rows",
-                "grid-template-columns",
-                "grid-template-areas",
-                "grid-auto-rows",
-                "grid-auto-columns",
-                "grid-auto-flow",
-            ],
-        );
-        m.insert(
-            "grid-area",
-            vec![
-                "grid-row-start",
-                "grid-column-start",
-                "grid-row-end",
-                "grid-column-end",
-            ],
-        );
-        m.insert("grid-column", vec!["grid-column-start", "grid-column-end"]);
-        m.insert("grid-row", vec!["grid-row-start", "grid-row-end"]);
-        m.insert(
-            "grid-template",
-            vec![
-                "grid-template-columns",
-                "grid-template-rows",
-                "grid-template-areas",
-            ],
-        );
-        m.insert("inset", vec!["top", "right", "bottom", "left"]);
-        m.insert(
-            "mask",
-            vec![
-                "mask-image",
-                "mask-mode",
-                "mask-position",
-                "mask-size",
-                "mask-repeat",
-                "mask-origin",
-                "mask-clip",
-            ],
-        );
-        m.insert(
-            "mask-border",
-            vec![
-                "mask-border-source",
-                "mask-border-slice",
-                "mask-border-width",
-                "mask-border-outset",
-                "mask-border-repeat",
-                "mask-border-mode",
-            ],
-        );
-        m.insert(
-            "offset",
-            vec![
-                "offset-position",
-                "offset-path",
-                "offset-distance",
-                "offset-rotate",
-                "offset-anchor",
-            ],
-        );
-        m.insert("place-content", vec!["align-content", "justify-content"]);
-        m.insert("place-items", vec!["align-items", "justify-items"]);
-        m.insert("place-self", vec!["align-self", "justify-self"]);
-        m.insert(
-            "scroll-margin",
-            vec![
-                "scroll-margin-top",
-                "scroll-margin-right",
-                "scroll-margin-bottom",
-                "scroll-margin-left",
-            ],
-        );
-        m.insert(
-            "scroll-padding",
-            vec![
-                "scroll-padding-top",
-                "scroll-padding-right",
-                "scroll-padding-bottom",
-                "scroll-padding-left",
-            ],
-        );
-        m.insert(
-            "scroll-timeline",
-            vec![
-                "timeline-name",
-                "timeline-axis",
-                "timeline-range",
-                "timeline-progress",
-            ],
-        );
-        m.insert(
-            "text-emphasis",
-            vec!["text-emphasis-style", "text-emphasis-color"],
-        );
-        m
-    };
-}
diff --git a/crates/gosub_styling/src/css_values.rs b/crates/gosub_styling/src/styling.rs
similarity index 76%
rename from crates/gosub_styling/src/css_values.rs
rename to crates/gosub_styling/src/styling.rs
index e47a2fcb9..a389f0301 100644
--- a/crates/gosub_styling/src/css_values.rs
+++ b/crates/gosub_styling/src/styling.rs
@@ -1,16 +1,14 @@
 use core::fmt::Debug;
 use std::cmp::Ordering;
 use std::collections::HashMap;
-use std::fmt::Display;
 
+use crate::css_definitions::get_css_definitions;
 use gosub_css3::stylesheet::{
-    CssOrigin, CssSelector, CssSelectorPart, CssSelectorType, MatcherType, Specificity,
+    CssOrigin, CssSelector, CssSelectorPart, CssSelectorType, CssValue, MatcherType, Specificity,
 };
 use gosub_html5::node::NodeId;
 use gosub_html5::parser::document::DocumentHandle;
 
-use crate::css_colors::RgbColor;
-
 // Matches a complete selector (all parts) against the given node(id)
 pub(crate) fn match_selector(
     document: DocumentHandle,
@@ -195,7 +193,7 @@ fn match_selector_part(
 /// origin, importance, location and specificity of the declaration.
 #[derive(Debug, Clone)]
 pub struct DeclarationProperty {
-    /// The actual value of the property
+    /// The actual value of the property (@todo: should this be a vec? or do we need to (re-)implement CssValue::List?)
     pub value: CssValue,
     /// Origin of the declaration (user stylesheet, author stylesheet etc.)
     pub origin: CssOrigin,
@@ -370,21 +368,45 @@ impl CssProperty {
         }
     }
 
-    // Returns true when the property is inheritable, false otherwise
+    // // Returns true when the property is inheritable, false otherwise
     fn is_inheritable(&self) -> bool {
-        crate::property_list::PROPERTY_TABLE
-            .iter()
-            .find(|entry| entry.name == self.name)
-            .map(|entry| entry.inheritable)
-            .unwrap_or(false)
+        let defs = get_css_definitions();
+        match defs.find_property(&self.name) {
+            Some(def) => def.inherited(),
+            None => false,
+        }
+    }
+
+    // /// Returns true if the given property is a shorthand property (ie: border, margin etc)
+    pub fn is_shorthand(&self) -> bool {
+        let defs = get_css_definitions();
+        match defs.find_property(&self.name) {
+            Some(def) => def.expanded_properties().len() > 1,
+            None => false,
+        }
+    }
+
+    /// Returns the list of properties from a shorthand property, or just the property itself if it isn't a shorthand property.
+    pub fn get_props_from_shorthand(&self) -> Vec<String> {
+        let defs = get_css_definitions();
+        match defs.find_property(&self.name) {
+            Some(def) => {
+                let props = def.expanded_properties();
+                if props.len() == 1 {
+                    vec![]
+                } else {
+                    props
+                }
+            }
+            None => vec![],
+        }
     }
 
-    // Returns the initial value for the property, if any
+    // // Returns the initial value for the property, if any
     fn get_initial_value(&self) -> Option<CssValue> {
-        crate::property_list::PROPERTY_TABLE
-            .iter()
-            .find(|entry| entry.name == self.name)
-            .map(|entry| entry.initial.clone())
+        let defs = get_css_definitions();
+        defs.find_property(&self.name)
+            .map(|def| def.initial_value())
     }
 }
 
@@ -413,74 +435,72 @@ impl CssProperties {
     }
 }
 
-/// Actual CSS value, can be a color, length, percentage, string or unit. Some relative values will be computed
-/// from other values (ie: Percent(50) will convert to Length(100) when the parent width is 200)
-#[derive(Debug, Clone, PartialEq)]
-pub enum CssValue {
-    None,
-    Color(RgbColor),
-    Number(f32),
-    Percentage(f32),
-    String(String),
-    Unit(f32, String),
-}
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use gosub_css3::colors::RgbColor;
 
-impl Display for CssValue {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        match self {
-            CssValue::None => write!(f, "none"),
-            CssValue::Color(col) => {
-                write!(
-                    f,
-                    "#{:02x}{:02x}{:02x}{:02x}",
-                    col.r as u8, col.g as u8, col.b as u8, col.a as u8
-                )
-            }
-            CssValue::Number(num) => write!(f, "{}", num),
-            CssValue::Percentage(p) => write!(f, "{}%", p),
-            CssValue::String(s) => write!(f, "{}", s),
-            CssValue::Unit(val, unit) => write!(f, "{}{}", val, unit),
-        }
-    }
-}
+    #[test]
+    fn css_props() {
+        let mut props = CssProperties::new();
+        let prop = CssProperty::new("color");
+        props.properties.insert("color".into(), prop);
 
-impl CssValue {
-    pub fn to_color(&self) -> Option<RgbColor> {
-        match self {
-            CssValue::Color(col) => Some(*col),
-            CssValue::String(s) => Some(RgbColor::from(s.as_str())),
-            _ => None,
-        }
+        let prop = props.get("color").unwrap();
+        assert_eq!(prop.name, "color");
+
+        let prop = props.get("not-exists");
+        assert!(prop.is_none());
     }
 
-    pub fn unit_to_px(&self) -> f32 {
-        //TODO: Implement the rest of the units
-        match self {
-            CssValue::Unit(val, unit) => match unit.as_str() {
-                "px" => *val,
-                "em" => *val * 16.0,
-                "rem" => *val * 16.0,
-                _ => *val,
-            },
-            CssValue::String(value) => {
-                if value.ends_with("px") {
-                    value.trim_end_matches("px").parse::<f32>().unwrap_or(0.0)
-                } else if value.ends_with("rem") {
-                    value.trim_end_matches("rem").parse::<f32>().unwrap_or(0.0) * 16.0
-                } else if value.ends_with("em") {
-                    value.trim_end_matches("em").parse::<f32>().unwrap_or(0.0) * 16.0
-                } else {
-                    0.0
-                }
-            }
-            _ => 0.0,
-        }
+    #[test]
+    fn border_prop_test() {
+        let mut prop = CssProperty::new("border");
+
+        prop.declared.push(DeclarationProperty {
+            value: CssValue::List(vec![
+                CssValue::Unit(1.0, "px".into()),
+                CssValue::String("solid".into()),
+                CssValue::Color(RgbColor::new(255.0, 0.0, 0.0, 255.0)),
+            ]),
+            origin: CssOrigin::Author,
+            important: false,
+            location: "".into(),
+            specificity: Specificity::new(1, 0, 0),
+        });
+
+        assert_eq!(
+            prop.compute_value(),
+            &CssValue::List(vec![
+                CssValue::Unit(1.0, "px".into()),
+                CssValue::String("solid".into()),
+                CssValue::Color("red".into()),
+            ])
+        );
+        assert!(prop.is_shorthand());
+        assert_eq!(prop.name, "border");
+        assert_eq!(prop.get_initial_value(), Some(CssValue::None));
+        assert!(!prop.is_inheritable());
     }
-}
 
-#[cfg(test)]
-mod tests {
-    use super::*;
+    #[test]
+    fn color_prop_test() {
+        let mut prop = CssProperty::new("color");
+
+        prop.declared.push(DeclarationProperty {
+            value: CssValue::String("red".into()),
+            origin: CssOrigin::Author,
+            important: false,
+            location: "".into(),
+            specificity: Specificity::new(1, 0, 0),
+        });
+
+        assert_eq!(prop.compute_value(), &CssValue::String("red".into()));
+        assert!(!prop.is_shorthand());
+        assert_eq!(prop.name, "color");
+        assert_eq!(prop.get_initial_value(), Some(&CssValue::None).cloned());
+        assert!(prop.is_inheritable());
+    }
 
     #[test]
     fn compare_declared() {
@@ -547,4 +567,48 @@ mod tests {
         assert_eq!(c, c);
         assert_eq!(d, d);
     }
+
+    #[test]
+    fn is_inheritable() {
+        let prop = CssProperty::new("border");
+        assert!(!prop.is_inheritable());
+
+        let prop = CssProperty::new("color");
+        assert!(prop.is_inheritable());
+
+        let prop = CssProperty::new("font");
+        assert!(prop.is_inheritable());
+
+        let prop = CssProperty::new("border-top-color");
+        assert!(!prop.is_inheritable());
+    }
+
+    #[test]
+    fn shorthand_props() {
+        let prop = CssProperty::new("border");
+        assert!(prop.is_shorthand());
+        assert_eq!(
+            prop.get_props_from_shorthand(),
+            vec!["border-width", "border-style", "border-color"]
+        );
+        let prop = CssProperty::new("window");
+        assert!(!prop.is_shorthand());
+        assert!(prop.get_props_from_shorthand().is_empty());
+
+        let prop = CssProperty::new("border-color");
+        assert!(prop.is_shorthand());
+        assert_eq!(
+            prop.get_props_from_shorthand(),
+            vec![
+                "border-bottom-color",
+                "border-left-color",
+                "border-right-color",
+                "border-top-color",
+            ]
+        );
+
+        let prop = CssProperty::new("border-top-color");
+        assert!(!prop.is_shorthand());
+        assert!(prop.get_props_from_shorthand().is_empty());
+    }
 }
diff --git a/crates/gosub_styling/src/syntax.rs b/crates/gosub_styling/src/syntax.rs
new file mode 100644
index 000000000..8ae3122a1
--- /dev/null
+++ b/crates/gosub_styling/src/syntax.rs
@@ -0,0 +1,2445 @@
+use std::fmt::{Debug, Display, Formatter};
+
+use nom::branch::alt;
+use nom::bytes::complete::{tag, tag_no_case, take_while};
+use nom::character::complete::{
+    alpha1, alphanumeric1, char, digit0, digit1, multispace0, one_of, space0,
+};
+use nom::combinator::{map, map_res, opt, recognize};
+use nom::multi::{fold_many1, many0, many1, separated_list0, separated_list1};
+use nom::number::complete::float;
+use nom::sequence::{delimited, pair, preceded, separated_pair, tuple};
+use nom::Err;
+use nom::IResult;
+
+use gosub_css3::stylesheet::CssValue;
+use gosub_shared::types::Result;
+
+use crate::errors::Error;
+use crate::syntax_matcher::CssSyntaxTree;
+
+// When debugging the parser, it's nice to have some additional information ready. This should maybe
+// be inside a cfg setting, but for now (un)commenting the appropriate line is good enough.
+macro_rules! debug_print {
+    // ($($x:tt)*) => { println!($($x)*) }
+    ($($x:tt)*) => {{}};
+}
+
+#[derive(Clone, Debug, PartialEq)]
+pub struct Group {
+    /// Combinator of this group (what should we match from this group?)
+    pub combinator: GroupCombinators,
+    /// Components in this group
+    pub components: Vec<SyntaxComponent>,
+}
+
+#[derive(PartialEq, Debug, Clone)]
+pub enum GroupCombinators {
+    /// All elements must be matched in order (space delimited)
+    Juxtaposition,
+    /// &&   (all elements must be matched in any order)
+    AllAnyOrder,
+    /// ||   (at least one element must be matched in any order)
+    AtLeastOneAnyOrder,
+    /// |    (exactly one element must be matched)
+    ExactlyOne,
+}
+
+/// Multiplier for a syntax component that defines how many times this component is allowed to appear
+#[derive(PartialEq, Debug, Clone)]
+pub enum SyntaxComponentMultiplier {
+    /// Default case
+    Once,
+    /// Zero or more: *
+    ZeroOrMore,
+    /// One or more +
+    OneOrMore,
+    /// Optional ?
+    Optional,
+    /// Between (range) {}
+    Between(usize, usize),
+    /// !
+    AtLeastOneValue,
+    /// Comma seperated repeat (# with optional {})
+    CommaSeparatedRepeat(usize, usize),
+}
+
+impl Display for SyntaxComponentMultiplier {
+    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+        match self {
+            SyntaxComponentMultiplier::Once => write!(f, ""),
+            SyntaxComponentMultiplier::ZeroOrMore => write!(f, "*"),
+            SyntaxComponentMultiplier::OneOrMore => write!(f, "+"),
+            SyntaxComponentMultiplier::Optional => write!(f, "?"),
+            SyntaxComponentMultiplier::Between(min, max) => write!(f, "{{{}, {}}}", min, max),
+            SyntaxComponentMultiplier::AtLeastOneValue => write!(f, "!"),
+            SyntaxComponentMultiplier::CommaSeparatedRepeat(min, max) => {
+                write!(f, "#{{{}, {}}}", min, max)
+            }
+        }
+    }
+}
+
+/// Represent either a number (i64) or infinity
+#[derive(Debug, PartialEq, Clone)]
+enum NumberOrInfinity {
+    /// Nothing defined (no min or max)
+    None,
+    // Finite number (in i64 range)
+    FiniteI64(i64),
+    // ∞
+    Infinity,
+    // -∞
+    NegativeInfinity,
+}
+
+/// Represents an optional min and/or max range for a type definition
+#[derive(Clone, Debug, PartialEq)]
+pub struct RangeType {
+    /// Mininum value
+    min: NumberOrInfinity,
+    /// Maximum value
+    max: NumberOrInfinity,
+}
+
+impl RangeType {
+    /// Returns an empty range
+    fn empty() -> Self {
+        RangeType {
+            min: NumberOrInfinity::None,
+            max: NumberOrInfinity::None,
+        }
+    }
+}
+
+/// Syntax components. These are the elements that make up the css declaration syntax.
+#[derive(PartialEq, Debug, Clone)]
+pub enum SyntaxComponent {
+    /// Generic keyword strings like 'left', 'right', 'ease-in' etc
+    GenericKeyword {
+        keyword: String,
+        multipliers: Vec<SyntaxComponentMultiplier>,
+    },
+    /// Quoted string that indicates css property
+    Property {
+        property: String,
+        multipliers: Vec<SyntaxComponentMultiplier>,
+    },
+    /// Functions like color(), length() etc
+    Function {
+        name: String,
+        arguments: Option<Box<SyntaxComponent>>,
+        multipliers: Vec<SyntaxComponentMultiplier>,
+    },
+    /// Internal data definition like <length>, <color>, or quoted like <'background-color'>. Can include
+    /// ranges like <percentage [0, 100]> etc.
+    Definition {
+        datatype: String,
+        quoted: bool,
+        range: RangeType,
+        multipliers: Vec<SyntaxComponentMultiplier>,
+    },
+    /// Inherit keyword
+    Inherit {
+        multipliers: Vec<SyntaxComponentMultiplier>,
+    },
+    /// Initial keyword
+    Initial {
+        multipliers: Vec<SyntaxComponentMultiplier>,
+    },
+    /// Unset keyword
+    Unset {
+        multipliers: Vec<SyntaxComponentMultiplier>,
+    },
+    /// Literal character ',' or '/'
+    Literal {
+        literal: String,
+        multipliers: Vec<SyntaxComponentMultiplier>,
+    },
+    /// CSS Value
+    Value {
+        value: CssValue,
+        multipliers: Vec<SyntaxComponentMultiplier>,
+    },
+    /// Group of components surrounded by []
+    Group {
+        components: Vec<SyntaxComponent>,
+        combinator: GroupCombinators,
+        multipliers: Vec<SyntaxComponentMultiplier>,
+    },
+    /// special unit() function case (@todo: figure out if we need this special case)
+    Unit {
+        from: Option<f32>,
+        to: Option<f32>,
+        unit: Vec<String>,
+        multipliers: Vec<SyntaxComponentMultiplier>,
+    },
+    Builtin {
+        datatype: String,
+        multipliers: Vec<SyntaxComponentMultiplier>,
+    },
+}
+
+impl SyntaxComponent {
+    pub fn is_group(&self) -> bool {
+        matches!(self, SyntaxComponent::Group { .. })
+    }
+
+    pub fn get_multipliers(&self) -> Vec<SyntaxComponentMultiplier> {
+        match self {
+            SyntaxComponent::Group { multipliers, .. } => multipliers.clone(),
+            SyntaxComponent::Function { multipliers, .. } => multipliers.clone(),
+            SyntaxComponent::Property { multipliers, .. } => multipliers.clone(),
+            SyntaxComponent::GenericKeyword { multipliers, .. } => multipliers.clone(),
+            SyntaxComponent::Definition { multipliers, .. } => multipliers.clone(),
+            SyntaxComponent::Unit { multipliers, .. } => multipliers.clone(),
+            SyntaxComponent::Literal { multipliers, .. } => multipliers.clone(),
+            SyntaxComponent::Inherit { multipliers, .. } => multipliers.clone(),
+            SyntaxComponent::Initial { multipliers, .. } => multipliers.clone(),
+            SyntaxComponent::Unset { multipliers, .. } => multipliers.clone(),
+            SyntaxComponent::Value { multipliers, .. } => multipliers.clone(),
+            SyntaxComponent::Builtin { multipliers, .. } => multipliers.clone(),
+        }
+    }
+
+    pub fn update_multipliers(&mut self, new_multipliers: Vec<SyntaxComponentMultiplier>) {
+        match self {
+            SyntaxComponent::Group { multipliers, .. } => {
+                *multipliers = new_multipliers;
+            }
+            SyntaxComponent::Function { multipliers, .. } => {
+                *multipliers = new_multipliers;
+            }
+            SyntaxComponent::Property { multipliers, .. } => {
+                *multipliers = new_multipliers;
+            }
+            SyntaxComponent::GenericKeyword { multipliers, .. } => {
+                *multipliers = new_multipliers;
+            }
+            SyntaxComponent::Definition { multipliers, .. } => {
+                *multipliers = new_multipliers;
+            }
+            SyntaxComponent::Unit { multipliers, .. } => {
+                *multipliers = new_multipliers;
+            }
+            SyntaxComponent::Literal { multipliers, .. } => {
+                *multipliers = new_multipliers;
+            }
+            SyntaxComponent::Inherit { multipliers, .. } => {
+                *multipliers = new_multipliers;
+            }
+            SyntaxComponent::Initial { multipliers, .. } => {
+                *multipliers = new_multipliers;
+            }
+            SyntaxComponent::Unset { multipliers, .. } => {
+                *multipliers = new_multipliers;
+            }
+            SyntaxComponent::Value { multipliers, .. } => {
+                *multipliers = new_multipliers;
+            }
+            SyntaxComponent::Builtin { multipliers, .. } => {
+                *multipliers = new_multipliers;
+            }
+        }
+    }
+}
+
+/// A value definition syntax structure. See https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax
+pub(crate) struct CssSyntax {
+    /// Source string of the syntax
+    source: String,
+}
+
+impl CssSyntax {
+    /// Generates a new syntax instance
+    pub fn new(source: &str) -> Self {
+        CssSyntax {
+            source: source.to_string(),
+        }
+    }
+
+    /// Compiles the current syntax into a list of components or Err on compilation error
+    pub fn compile(self) -> Result<CssSyntaxTree> {
+        if self.source.is_empty() {
+            return Ok(CssSyntaxTree::new(vec![]));
+        }
+
+        let p = parse(self.source.as_str());
+        match p {
+            Ok((input, components)) => {
+                if !input.trim().is_empty() {
+                    return Err(Error::CssCompile(format!(
+                        "Failed to parse all input (left: '{}')",
+                        input
+                    ))
+                    .into());
+                }
+                Ok(CssSyntaxTree::new(vec![components]))
+            }
+            Err(err) => Err(Error::CssCompile(err.to_string()).into()),
+        }
+    }
+}
+
+/// Parse a unit input
+fn parse_unit(input: &str) -> IResult<&str, SyntaxComponent> {
+    let (input, value) = float(input)?;
+    let (input, suffix) = opt(alpha1)(input)?;
+
+    if suffix.is_none() {
+        return if value == 0.0 {
+            // 0 is a special case as it doesn't need a unit
+            Ok((
+                input,
+                SyntaxComponent::Value {
+                    value: CssValue::Zero,
+                    multipliers: vec![SyntaxComponentMultiplier::Once],
+                },
+            ))
+        } else {
+            Err(Err::Error(nom::error::Error::new(
+                input,
+                nom::error::ErrorKind::Alpha,
+            )))
+        };
+    }
+
+    Ok((
+        input,
+        SyntaxComponent::Value {
+            value: CssValue::Unit(value, suffix.unwrap().to_string()),
+            multipliers: vec![SyntaxComponentMultiplier::Once],
+        },
+    ))
+}
+
+/// Removes preceding whitespace from a parser
+fn ws<'a, F, O>(inner: F) -> impl FnMut(&'a str) -> IResult<&'a str, O>
+where
+    F: FnMut(&'a str) -> IResult<&'a str, O>,
+{
+    delimited(multispace0, inner, multispace0)
+    // preceded(multispace0, inner)
+}
+
+/// Parse a keyword (alphanumeric characters and dashes)
+fn parse_keyword(input: &str) -> IResult<&str, &str> {
+    let alpha_or_dash = alt((alphanumeric1, recognize(many1(one_of("-")))));
+    recognize(fold_many1(alpha_or_dash, || (), |_, _| ()))(input)
+}
+
+/// Parse an integer
+fn integer(input: &str) -> IResult<&str, u32> {
+    map_res(digit0, |s: &str| s.parse::<u32>())(input)
+}
+
+fn parse_curly_braces_multiplier(input: &str) -> IResult<&str, SyntaxComponentMultiplier> {
+    let range = alt((
+        separated_pair(ws(integer), ws(tag(",")), ws(integer)),
+        map(ws(integer), |num| (num, num)),
+    ));
+    let (input, range) = delimited(tag("{"), range, tag("}"))(input)?;
+
+    Ok((
+        input,
+        SyntaxComponentMultiplier::Between(range.0 as usize, range.1 as usize),
+    ))
+}
+
+fn parse_comma_separated_multiplier(input: &str) -> IResult<&str, SyntaxComponentMultiplier> {
+    let range = alt((
+        separated_pair(ws(integer), ws(tag(",")), ws(integer)),
+        map(ws(integer), |num| (num, num)),
+    ));
+
+    let (input, minmax) = alt((
+        map(
+            delimited(ws(tag("#{")), range, ws(tag("}"))),
+            |(min, max)| (min, max),
+        ),
+        // No range means one or more values
+        map(ws(tag("#")), |_| (1, u32::MAX)),
+    ))(input)?;
+
+    Ok((
+        input,
+        SyntaxComponentMultiplier::CommaSeparatedRepeat(minmax.0 as usize, minmax.1 as usize),
+    ))
+}
+
+/// Parses any optional multipliers for a group
+fn parse_multipliers(input: &str) -> IResult<&str, Vec<SyntaxComponentMultiplier>> {
+    debug_print!("Parsing multipliers: '{}'", input);
+
+    let (input, multipliers) = many0(alt((
+        map(tag("*"), |_| SyntaxComponentMultiplier::ZeroOrMore),
+        map(tag("+"), |_| SyntaxComponentMultiplier::OneOrMore),
+        map(tag("?"), |_| SyntaxComponentMultiplier::Optional),
+        map(tag("!"), |_| SyntaxComponentMultiplier::AtLeastOneValue),
+        parse_comma_separated_multiplier,
+        parse_curly_braces_multiplier,
+    )))(input)?;
+
+    if multipliers.is_empty() {
+        return Ok((input, vec![SyntaxComponentMultiplier::Once]));
+    }
+
+    Ok((input, multipliers))
+}
+
+/// Parse a group ([])
+fn parse_group(input: &str) -> IResult<&str, SyntaxComponent> {
+    debug_print!("Parsing group: {}", input);
+
+    let (input, components) =
+        delimited(ws(tag("[")), parse_component_singlebar_list, ws(tag("]")))(input)?;
+
+    Ok((input, components))
+}
+
+fn parse_component_singlebar_list(input: &str) -> IResult<&str, SyntaxComponent> {
+    debug_print!("Parsing component singlebar list: {}", input);
+
+    let (input, components) = separated_list1(ws(tag("|")), parse_component_doublebar_list)(input)?;
+
+    if components.len() == 1 {
+        return Ok((input, components[0].clone()));
+    }
+
+    let group = SyntaxComponent::Group {
+        components,
+        combinator: GroupCombinators::ExactlyOne,
+        multipliers: vec![SyntaxComponentMultiplier::Once],
+    };
+
+    debug_print!("<- parse_component_singlebar_list: {:#?}", group);
+    debug_print!("<- Remaining input: '{}'", input);
+    Ok((input, group))
+}
+
+fn parse_component_doublebar_list(input: &str) -> IResult<&str, SyntaxComponent> {
+    debug_print!("Parsing component doublebar list: {}", input);
+
+    let (input, components) =
+        separated_list1(ws(tag("||")), parse_component_doubleampersand_list)(input)?;
+
+    if components.len() == 1 {
+        return Ok((input, components[0].clone()));
+    }
+
+    let group = SyntaxComponent::Group {
+        components,
+        combinator: GroupCombinators::AtLeastOneAnyOrder,
+        multipliers: vec![SyntaxComponentMultiplier::Once],
+    };
+
+    debug_print!("<- parse_component_doublebar_list: {:#?}", group);
+    debug_print!("<- Remaining input: '{}'", input);
+    Ok((input, group))
+}
+
+fn parse_component_doubleampersand_list(input: &str) -> IResult<&str, SyntaxComponent> {
+    debug_print!("Parsing component doubleampersand list: {}", input);
+
+    let (input, components) =
+        separated_list1(ws(tag("&&")), parse_component_juxtaposition_list)(input)?;
+
+    if components.len() == 1 {
+        return Ok((input, components[0].clone()));
+    }
+
+    let group = SyntaxComponent::Group {
+        components,
+        combinator: GroupCombinators::AllAnyOrder,
+        multipliers: vec![SyntaxComponentMultiplier::Once],
+    };
+
+    debug_print!("<- parse_component_doubleampersand_list: {:#?}", group);
+    debug_print!("<- Remaining input: '{}'", input);
+    Ok((input, group))
+}
+
+/// Find a separator for juxtaposition group. Or actually, find a separator that isn't for
+/// a juxtaposition group. If we remove the spaces, then we can check for the next non-space
+/// character. If it's a |, or a &, it's part of another group separator (|, || or &&). OR,
+/// as another case, when we find a ], we are at the end of a group, so that will also be the
+/// end of this juxtaposition group. The only extra check we need to do if we reach the end
+/// of the input. If so, then we are also at the end of the group.
+///
+/// This function will return the input with leading spaces removed, but keeps the next separator
+/// or char for the parser to pick up. Finally, it will return a boolean true if it's not the end
+/// of the juxtaposition group, or false when the end is found.
+fn juxtaseparator(input: &str) -> IResult<&str, bool> {
+    let (input, _) = space0(input)?;
+
+    // Special case when there is no more input
+    if input.is_empty() {
+        return Ok((input, false));
+    }
+
+    // Any of these chars means we found the end of the juxaposition group
+    let (_, end_of_group) = opt(alt((
+        char(']'), // End of a group
+        char(')'), // End of a function argument list
+        char('|'), // Start of a separator for non-juxtaposition group
+        char('&'), // Start of a separator for non-juxtaposition group
+    )))(input)?;
+
+    // If we didn't find any of the above chars, we return true, as we seem to have found a
+    // next juxtaposition element.
+    Ok((input, end_of_group.is_none()))
+}
+
+// We need to use a custom separated_list1 for this, as that function MUST capture a separator
+// (even if it's just a space). Since juxtaposition is only spaces, and we remove them anyway,
+// we cannot use that function (it will fail when the output length is the same as the input length)
+// We might be able to rewrite this function.
+fn juxtaposition_or_separated_list(input: &str) -> IResult<&str, Vec<SyntaxComponent>> {
+    let mut elements = Vec::new();
+    let mut input = input;
+
+    loop {
+        let (next_input, _) = space0(input)?;
+
+        // Parse an element
+        let (next_input, elem) = parse_component(next_input)?;
+        elements.push(elem);
+
+        // Check for a separator
+        let result = juxtaseparator(next_input);
+
+        // If errored, we return what we've got
+        if result.is_err() {
+            return Ok((next_input, elements));
+        }
+
+        // If found, the sep boolean determines if we are done or not.
+        let (next_input, sep) = result.unwrap();
+        if !sep {
+            return Ok((next_input, elements));
+        }
+
+        input = next_input;
+    }
+}
+
+fn parse_component_juxtaposition_list(input: &str) -> IResult<&str, SyntaxComponent> {
+    let (input, components) = juxtaposition_or_separated_list(input)?;
+    if components.len() == 1 {
+        return Ok((input, components[0].clone()));
+    }
+
+    let group = SyntaxComponent::Group {
+        components,
+        combinator: GroupCombinators::Juxtaposition,
+        multipliers: vec![SyntaxComponentMultiplier::Once],
+    };
+
+    debug_print!("<- parse_component_juxtaposition_list: {:#?}", group);
+    debug_print!("<- Remaining input: '{}'", input);
+    Ok((input, group))
+}
+
+fn int_as_float(input: &str) -> IResult<&str, f32> {
+    map(integer, |i| i as f32)(input)
+}
+
+fn parse_unit_inner(input: &str) -> IResult<&str, SyntaxComponent> {
+    debug_print!("Parsing parse_unit_inner: {}", input);
+
+    let single_int = map(integer, |i| (Some(i as f32), None));
+    let paired_int = separated_pair(opt(int_as_float), tag(".."), opt(int_as_float));
+
+    let (input, range) = opt(alt((paired_int, single_int)))(input)?;
+
+    // Find any optional suffixes
+    let (input, _) = multispace0(input)?;
+    let (input, suffixes) = opt(separated_list0(ws(tag("|")), alpha1))(input)?;
+
+    if suffixes.is_none() {
+        // No suffixes, just a range
+        return Ok((
+            input,
+            SyntaxComponent::Unit {
+                from: range.unwrap_or((None, None)).0,
+                to: range.unwrap_or((None, None)).1,
+                unit: vec![],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            },
+        ));
+    }
+
+    // Convert the suffixes to a vector of strings
+    let suffixes: Vec<String> = suffixes.unwrap().iter().map(|s| s.to_string()).collect();
+    Ok((
+        input,
+        SyntaxComponent::Unit {
+            from: range.unwrap_or((None, None)).0,
+            to: range.unwrap_or((None, None)).1,
+            unit: suffixes,
+            multipliers: vec![SyntaxComponentMultiplier::Once],
+        },
+    ))
+}
+
+fn parse_unit_function(input: &str) -> IResult<&str, SyntaxComponent> {
+    debug_print!("Parsing unit_function: {}", input);
+    let (input, unit) = delimited(tag("unit("), parse_unit_inner, tag(")"))(input)?;
+
+    Ok((input, unit))
+}
+
+fn parse_function(input: &str) -> IResult<&str, SyntaxComponent> {
+    debug_print!("Parsing function: {}", input);
+
+    let empty_arglist = delimited(
+        tuple((space0, char('('), space0)),
+        space0,
+        tuple((space0, char(')'), space0)),
+    );
+    let arglist = delimited(
+        ws(tag("(")),
+        ws(parse_component_singlebar_list),
+        ws(tag(")")),
+    );
+
+    let (input, name) = parse_keyword(input)?;
+    let (input, arglist) = alt((map(empty_arglist, |_| None), map(arglist, Some)))(input)?;
+
+    match arglist {
+        Some(arglist) => Ok((
+            input,
+            SyntaxComponent::Function {
+                name: name.to_string(),
+                arguments: Some(Box::new(arglist)),
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            },
+        )),
+        None => Ok((
+            input,
+            SyntaxComponent::Function {
+                name: name.to_string(),
+                arguments: None,
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            },
+        )),
+    }
+}
+
+fn parse_property(input: &str) -> IResult<&str, SyntaxComponent> {
+    debug_print!("Parsing property: {}", input);
+
+    let (input, property) = delimited(
+        tag("'"),
+        map(parse_keyword, |s: &str| SyntaxComponent::Property {
+            property: s.to_string(),
+            multipliers: vec![SyntaxComponentMultiplier::Once],
+        }),
+        tag("'"),
+    )(input)?;
+
+    Ok((input, property))
+}
+
+fn parse_generic_keyword(input: &str) -> IResult<&str, SyntaxComponent> {
+    debug_print!("Parsing generic keyword: '{}'", input);
+
+    map(parse_keyword, |s: &str| SyntaxComponent::GenericKeyword {
+        keyword: s.to_string(),
+        multipliers: vec![SyntaxComponentMultiplier::Once],
+    })(input)
+}
+
+/// Parses an infinity symbol and returns NumberOrInfinity::Infinity
+fn parse_infinity(input: &str) -> IResult<&str, NumberOrInfinity> {
+    alt((
+        map(tag_no_case("inf"), |_| NumberOrInfinity::Infinity),
+        map(tag_no_case("∞"), |_| NumberOrInfinity::Infinity),
+        map(tag_no_case("-inf"), |_| NumberOrInfinity::NegativeInfinity),
+        map(tag_no_case("-∞"), |_| NumberOrInfinity::NegativeInfinity),
+    ))(input)
+}
+
+/// Parses an integer (signed or unsigned) and returns NumberOrInfinity::FiniteI64, or errors when the integer is invalid
+fn parse_signed_integer(input: &str) -> IResult<&str, NumberOrInfinity> {
+    map_res(
+        pair(opt(char('-')), digit1),
+        |(sign, digits): (Option<char>, &str)| {
+            let neg_multiplier = if sign == Some('-') { -1 } else { 1 };
+            let num = digits.parse::<i64>().map(|num| num * neg_multiplier);
+            if let Ok(num) = num {
+                Ok(NumberOrInfinity::FiniteI64(num))
+            } else {
+                Err(nom::Err::Error(nom::error::Error::new(
+                    input,
+                    nom::error::ErrorKind::Digit,
+                )))
+            }
+        },
+    )(input)
+}
+
+fn parse_unit_range(input: &str) -> IResult<&str, NumberOrInfinity> {
+    let out = parse_unit(input)?;
+    if let SyntaxComponent::Value { value, .. } = out.1 {
+        let val = match value {
+            CssValue::Unit(v, _) => v as i64,
+            CssValue::Zero => 0,
+            CssValue::Number(v) => v as i64,
+            v => {
+                panic!("Invalid value: {:?}", v);
+            }
+        };
+
+        let val = NumberOrInfinity::FiniteI64(val);
+
+        return Ok((out.0, val));
+    }
+
+    todo!("parse_unit_rang is not implemented for non-values")
+}
+
+/// Parses a range for a type definition  (ie: the square bracket part of: <function [1, 10]>)
+fn datatype_range(input: &str) -> IResult<&str, RangeType> {
+    let range = separated_pair(
+        opt(ws(alt((
+            parse_infinity,
+            parse_unit_range,
+            parse_signed_integer,
+        )))),
+        tag(","),
+        opt(ws(alt((
+            parse_infinity,
+            parse_unit_range,
+            parse_signed_integer,
+        )))),
+    );
+
+    let range = map(range, |(min, max)| RangeType {
+        min: min.unwrap_or(NumberOrInfinity::None),
+        max: max.unwrap_or(NumberOrInfinity::None),
+    });
+
+    let (input, r) = delimited(ws(tag("[")), range, ws(tag("]")))(input)?;
+
+    Ok((input, r))
+}
+
+fn keyword_or_function(input: &str) -> IResult<&str, &str> {
+    recognize(pair(parse_keyword, opt(tag("()"))))(input)
+}
+
+fn parse_datatype(input: &str) -> IResult<&str, SyntaxComponent> {
+    debug_print!("Parsing datatype: {}", input);
+
+    let (input, (name, quoted, range)) = delimited(
+        ws(tag("<")),
+        alt((
+            map(
+                pair(keyword_or_function, opt(datatype_range)),
+                |(name, range)| (name, false, range),
+            ),
+            map(
+                pair(
+                    delimited(ws(tag("'")), keyword_or_function, ws(tag("'"))),
+                    opt(datatype_range),
+                ),
+                |(name, range)| (name, true, range),
+            ),
+        )),
+        ws(tag(">")),
+    )(input)?;
+
+    Ok((
+        input,
+        SyntaxComponent::Definition {
+            datatype: name.to_string(),
+            quoted,
+            range: range.unwrap_or(RangeType::empty()),
+            multipliers: vec![SyntaxComponentMultiplier::Once],
+        },
+    ))
+}
+
+fn parse_specific_keyword(input: &str) -> IResult<&str, SyntaxComponent> {
+    debug_print!("Parsing specific keyword: {}", input);
+
+    alt((
+        map(tag("inherit"), |_| SyntaxComponent::Inherit {
+            multipliers: vec![SyntaxComponentMultiplier::Once],
+        }),
+        map(tag("initial"), |_| SyntaxComponent::Initial {
+            multipliers: vec![SyntaxComponentMultiplier::Once],
+        }),
+        map(tag("unset"), |_| SyntaxComponent::Unset {
+            multipliers: vec![SyntaxComponentMultiplier::Once],
+        }),
+    ))(input)
+}
+
+fn parse_literal(input: &str) -> IResult<&str, SyntaxComponent> {
+    debug_print!("Parsing literal: {}", input);
+
+    alt((
+        map(ws(tag("/")), |_| SyntaxComponent::Literal {
+            literal: "/".to_string(),
+            multipliers: vec![SyntaxComponentMultiplier::Once],
+        }),
+        map(ws(tag(",")), |_| SyntaxComponent::Literal {
+            literal: ",".to_string(),
+            multipliers: vec![SyntaxComponentMultiplier::Once],
+        }),
+        map(
+            delimited(tag("'"), take_while(|c| c != '\''), tag("'")),
+            |s: &str| SyntaxComponent::Literal {
+                literal: s.to_string(),
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            },
+        ),
+    ))(input)
+}
+
+fn parse_component(input: &str) -> IResult<&str, SyntaxComponent> {
+    debug_print!("Parsing component: {}", input);
+
+    let (input, mut component) = alt((
+        parse_unit_function,
+        parse_function,
+        parse_property,
+        parse_specific_keyword,
+        parse_literal,
+        parse_group,
+        parse_unit,
+        parse_datatype,
+        parse_generic_keyword, // This is more of a catch-all
+    ))(input)?;
+    let (input, multipliers) = parse_multipliers(input)?;
+
+    component.update_multipliers(multipliers.clone());
+
+    debug_print!("<- Parsed component_type: {:#?} {}", component, multipliers);
+
+    Ok((input, component))
+}
+
+fn parse(input: &str) -> IResult<&str, SyntaxComponent> {
+    debug_print!("Parsing: {}", input);
+    let (input, component) = preceded(multispace0, parse_component_singlebar_list)(input)?;
+    debug_print!("<- Parsed: {:#?}", component);
+
+    Ok((input, component))
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::css_definitions::get_css_definitions;
+
+    use super::*;
+
+    #[test]
+    fn test_compile_empty() {
+        assert!(CssSyntax::new("").compile().is_ok());
+    }
+
+    #[test]
+    fn test_compile_all_definitions() {
+        // Fetching the definitions will automatically compile all definitions on the first run
+        let defs = get_css_definitions();
+        assert!(!defs.is_empty());
+    }
+
+    #[test]
+    fn test_generic() {
+        let parts = CssSyntax::new("ease-in").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::GenericKeyword {
+                keyword: "ease-in".to_string(),
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let parts = CssSyntax::new("color").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::GenericKeyword {
+                keyword: "color".into(),
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+    }
+
+    #[test]
+    fn test_unit() {
+        let parts = CssSyntax::new("unit()").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Unit {
+                from: None,
+                to: None,
+                unit: vec![],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let parts = CssSyntax::new("unit(khz)").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Unit {
+                from: None,
+                to: None,
+                unit: vec!["khz".into()],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let parts = CssSyntax::new("unit(ms|s)").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Unit {
+                from: None,
+                to: None,
+                unit: vec!["ms".into(), "s".into()],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let parts = CssSyntax::new("unit(10..10000 khz)").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Unit {
+                from: Some(10.0),
+                to: Some(10000.0),
+                unit: vec!["khz".into()],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let parts = CssSyntax::new("unit(0.. ms|s)").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Unit {
+                from: Some(0.0),
+                to: None,
+                unit: vec!["ms".into(), "s".into()],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let parts = CssSyntax::new("unit(..10000 khz)").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Unit {
+                from: None,
+                to: Some(10000.0),
+                unit: vec!["khz".into()],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let parts = CssSyntax::new("unit(10..10000)").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Unit {
+                from: Some(10.0),
+                to: Some(10000.0),
+                unit: vec![],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+    }
+
+    #[test]
+    fn test_multipliers() {
+        let parts = CssSyntax::new("color").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::GenericKeyword {
+                keyword: "color".to_string(),
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let parts = CssSyntax::new("color*").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::GenericKeyword {
+                keyword: "color".to_string(),
+                multipliers: vec![SyntaxComponentMultiplier::ZeroOrMore],
+            }])
+        );
+
+        let parts = CssSyntax::new("color+").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::GenericKeyword {
+                keyword: "color".to_string(),
+                multipliers: vec![SyntaxComponentMultiplier::OneOrMore],
+            }])
+        );
+
+        let parts = CssSyntax::new("color?").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::GenericKeyword {
+                keyword: "color".to_string(),
+                multipliers: vec![SyntaxComponentMultiplier::Optional],
+            }])
+        );
+
+        let parts = CssSyntax::new("color{3,5}").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::GenericKeyword {
+                keyword: "color".to_string(),
+                multipliers: vec![SyntaxComponentMultiplier::Between(3, 5)],
+            }])
+        );
+
+        let parts = CssSyntax::new("color#").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::GenericKeyword {
+                keyword: "color".to_string(),
+                multipliers: vec![SyntaxComponentMultiplier::CommaSeparatedRepeat(
+                    1,
+                    u32::MAX as usize
+                )],
+            }])
+        );
+
+        let parts = CssSyntax::new("color#{3,6}").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::GenericKeyword {
+                keyword: "color".to_string(),
+                multipliers: vec![SyntaxComponentMultiplier::CommaSeparatedRepeat(3, 6)],
+            }])
+        );
+
+        let parts = CssSyntax::new("color!").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::GenericKeyword {
+                keyword: "color".to_string(),
+                multipliers: vec![SyntaxComponentMultiplier::AtLeastOneValue],
+            }])
+        );
+    }
+
+    #[test]
+    fn test_function() {
+        let parts = CssSyntax::new("length(){2,4}").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Function {
+                name: "length".into(),
+                arguments: None,
+                multipliers: vec![SyntaxComponentMultiplier::Between(2, 4)],
+            }])
+        );
+
+        let parts = CssSyntax::new("color()").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Function {
+                name: "color".into(),
+                arguments: None,
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let parts = CssSyntax::new("color(top?){2,4}").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Function {
+                name: "color".into(),
+                arguments: Some(Box::new(SyntaxComponent::GenericKeyword {
+                    keyword: "top".into(),
+                    multipliers: vec![SyntaxComponentMultiplier::Optional],
+                })),
+                multipliers: vec![SyntaxComponentMultiplier::Between(2, 4)],
+            }])
+        );
+    }
+
+    #[test]
+    fn test_literal() {
+        let parts = CssSyntax::new("/").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Literal {
+                literal: "/".into(),
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let parts = CssSyntax::new(",").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Literal {
+                literal: ",".into(),
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+    }
+
+    #[test]
+    fn test_special_keywords() {
+        let parts = CssSyntax::new("unset").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Unset {
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let parts = CssSyntax::new("initial").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Initial {
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let parts = CssSyntax::new("unset").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap(),
+            CssSyntaxTree::new(vec![SyntaxComponent::Unset {
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+    }
+
+    #[test]
+    fn test_compile_unit() {
+        let parts = CssSyntax::new("10px").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap().components,
+            vec![SyntaxComponent::Value {
+                value: CssValue::Unit(10.0, "px".to_string()),
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }]
+        );
+
+        let parts = CssSyntax::new("10.43px").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap().components,
+            vec![SyntaxComponent::Value {
+                value: CssValue::Unit(10.43, "px".to_string()),
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }]
+        );
+
+        let parts = CssSyntax::new("-10.43px").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap().components,
+            vec![SyntaxComponent::Value {
+                value: CssValue::Unit(-10.43, "px".to_string()),
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }]
+        );
+
+        let parts = CssSyntax::new("0").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap().components,
+            vec![SyntaxComponent::Value {
+                value: CssValue::Zero,
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }]
+        );
+    }
+
+    #[test]
+    fn test_compile_datatype() {
+        let parts = CssSyntax::new("<foo> | <bar()> | <'quoted'>").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap().components,
+            vec![SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::Definition {
+                        datatype: "foo".to_string(),
+                        quoted: false,
+                        range: RangeType::empty(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Definition {
+                        datatype: "bar()".to_string(),
+                        quoted: false,
+                        range: RangeType::empty(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Definition {
+                        datatype: "quoted".to_string(),
+                        quoted: true,
+                        range: RangeType::empty(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }]
+        );
+
+        let parts = CssSyntax::new("<foo>#").compile();
+        assert!(parts.is_ok());
+        assert_eq!(
+            parts.unwrap().components,
+            vec![SyntaxComponent::Definition {
+                datatype: "foo".to_string(),
+                quoted: false,
+                range: RangeType::empty(),
+                multipliers: vec![SyntaxComponentMultiplier::CommaSeparatedRepeat(
+                    1,
+                    u32::MAX as usize
+                )],
+            }]
+        );
+    }
+
+    #[test]
+    fn test_parse_unit() {
+        assert!(parse_unit("10px").is_ok());
+        assert!(parse_unit("0").is_ok());
+        assert!(parse_unit("52").is_err());
+        assert!(parse_unit("0.0").is_ok());
+        assert!(parse_unit("0.1px").is_ok());
+        assert!(parse_unit("0.1foobar").is_ok());
+    }
+
+    #[test]
+    fn test_precedence() {
+        let c = CssSyntax::new("left | right").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "left".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "right".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("left | right && top").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "left".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AllAnyOrder,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "top".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("left && right | top").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AllAnyOrder,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "left".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "top".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("left && right || top").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Group {
+                combinator: GroupCombinators::AtLeastOneAnyOrder,
+                components: vec![
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AllAnyOrder,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "left".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "top".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("left || right | top").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AtLeastOneAnyOrder,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "left".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "top".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("left | right || top").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "left".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AtLeastOneAnyOrder,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "top".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("left | right || top && bottom")
+            .compile()
+            .unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "left".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AtLeastOneAnyOrder,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::Group {
+                                combinator: GroupCombinators::AllAnyOrder,
+                                components: vec![
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "top".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "bottom".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                ],
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("left || right | top && bottom")
+            .compile()
+            .unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AtLeastOneAnyOrder,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "left".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AllAnyOrder,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "top".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "bottom".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("left && right || top | bottom")
+            .compile()
+            .unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AtLeastOneAnyOrder,
+                        components: vec![
+                            SyntaxComponent::Group {
+                                combinator: GroupCombinators::AllAnyOrder,
+                                components: vec![
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "left".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "right".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                ],
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "top".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "bottom".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("left  right || top | bottom")
+            .compile()
+            .unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AtLeastOneAnyOrder,
+                        components: vec![
+                            SyntaxComponent::Group {
+                                combinator: GroupCombinators::Juxtaposition,
+                                components: vec![
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "left".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "right".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                ],
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "top".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "bottom".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("left | right || top | bottom")
+            .compile()
+            .unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "left".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AtLeastOneAnyOrder,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "top".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "bottom".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("left || right | top || bottom")
+            .compile()
+            .unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AtLeastOneAnyOrder,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "left".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AtLeastOneAnyOrder,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "top".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "bottom".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("left right | top bottom").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::Juxtaposition,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "left".into(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::Juxtaposition,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "top".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "bottom".into(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+    }
+
+    #[test]
+    fn test_datatype_ranges() {
+        let c = CssSyntax::new("<function [1, 2]>").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Definition {
+                datatype: "function".to_string(),
+                quoted: false,
+                range: RangeType {
+                    min: NumberOrInfinity::FiniteI64(1),
+                    max: NumberOrInfinity::FiniteI64(2),
+                },
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("<function>").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Definition {
+                datatype: "function".to_string(),
+                quoted: false,
+                range: RangeType {
+                    min: NumberOrInfinity::None,
+                    max: NumberOrInfinity::None,
+                },
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("<function [1,]>").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Definition {
+                datatype: "function".to_string(),
+                quoted: false,
+                range: RangeType {
+                    min: NumberOrInfinity::FiniteI64(1),
+                    max: NumberOrInfinity::None,
+                },
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("<function [,1]>").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Definition {
+                datatype: "function".to_string(),
+                quoted: false,
+                range: RangeType {
+                    min: NumberOrInfinity::None,
+                    max: NumberOrInfinity::FiniteI64(1),
+                },
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("<function [-360,360]>").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Definition {
+                datatype: "function".to_string(),
+                quoted: false,
+                range: RangeType {
+                    min: NumberOrInfinity::FiniteI64(-360),
+                    max: NumberOrInfinity::FiniteI64(360),
+                },
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+
+        let c = CssSyntax::new("<function [0,inf]>").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Definition {
+                datatype: "function".to_string(),
+                quoted: false,
+                range: RangeType {
+                    min: NumberOrInfinity::FiniteI64(0),
+                    max: NumberOrInfinity::Infinity,
+                },
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+        let c = CssSyntax::new("<function [-inf, 0]>").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Definition {
+                datatype: "function".to_string(),
+                quoted: false,
+                range: RangeType {
+                    min: NumberOrInfinity::NegativeInfinity,
+                    max: NumberOrInfinity::FiniteI64(0),
+                },
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+        let c = CssSyntax::new("<function [-inf,inf]>").compile().unwrap();
+        assert_eq!(
+            c.components[0],
+            SyntaxComponent::Definition {
+                datatype: "function".to_string(),
+                quoted: false,
+                range: RangeType {
+                    min: NumberOrInfinity::NegativeInfinity,
+                    max: NumberOrInfinity::Infinity,
+                },
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }
+        );
+    }
+
+    #[test]
+    fn test_specific_precedence_configurations() {
+        // @todo: These tests should also check if the syntax is correct, not only if it can
+        // compile. The output could still be wrong.
+        assert!(CssSyntax::new("le, ri ,co , bt,tp").compile().is_ok());
+        assert!(CssSyntax::new("left | right | center && top")
+            .compile()
+            .is_ok());
+        assert!(CssSyntax::new("left , right color()").compile().is_ok());
+        assert!(CssSyntax::new("left , right color() ").compile().is_ok());
+        assert!(CssSyntax::new("le, ri ,co , bt,tp").compile().is_ok());
+        assert!(CssSyntax::new("left, right color()").compile().is_ok());
+        assert!(CssSyntax::new("left | right | center && top")
+            .compile()
+            .is_ok());
+        assert!(CssSyntax::new("left | right | center && top <length>")
+            .compile()
+            .is_ok());
+        assert!(CssSyntax::new("[ [ <length-percentage>? ]]")
+            .compile()
+            .is_ok());
+        assert!(CssSyntax::new("[ [ center | [ top | bottom ]  ]]")
+            .compile()
+            .is_ok());
+        assert!(CssSyntax::new("[ <length-percentage>? ]").compile().is_ok());
+        assert!(CssSyntax::new("[ center <length-percentage>? ]")
+            .compile()
+            .is_ok());
+        assert!(
+            CssSyntax::new("center | [ top | bottom ] <length-percentage>")
+                .compile()
+                .is_ok()
+        );
+        assert!(
+            CssSyntax::new("[ center | [ top | bottom ] <length-percentage> ]")
+                .compile()
+                .is_ok()
+        );
+        assert!(
+            CssSyntax::new("[ center | [ top | bottom ] <length-percentage>? ]")
+                .compile()
+                .is_ok()
+        );
+        assert!(
+            CssSyntax::new("[ [ center | [ top | bottom ] <length-percentage>? ]]")
+                .compile()
+                .is_ok()
+        );
+        assert!(CssSyntax::new("[ [ top | center | bottom | <length-percentage> ]| [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]").compile().is_ok());
+        assert!(CssSyntax::new("[ [ left | center | right | top | bottom | <length-percentage> ]| [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]| [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]").compile().is_ok());
+    }
+
+    #[test]
+    fn test_anchor_with_arguments() {
+        let c = CssSyntax::new("anchor( <anchor-element>? <anchor-side>, <length-percentage>? )")
+            .compile()
+            .unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::Function {
+                name: "anchor".to_string(),
+                arguments: Some(Box::new(SyntaxComponent::Group {
+                    combinator: GroupCombinators::Juxtaposition,
+                    components: vec![
+                        SyntaxComponent::Definition {
+                            datatype: "anchor-element".to_string(),
+                            quoted: false,
+                            range: RangeType::empty(),
+                            multipliers: vec![SyntaxComponentMultiplier::Optional],
+                        },
+                        SyntaxComponent::Definition {
+                            datatype: "anchor-side".to_string(),
+                            quoted: false,
+                            range: RangeType::empty(),
+                            multipliers: vec![SyntaxComponentMultiplier::Once],
+                        },
+                        SyntaxComponent::Literal {
+                            literal: ",".to_string(),
+                            multipliers: vec![SyntaxComponentMultiplier::Once],
+                        },
+                        SyntaxComponent::Definition {
+                            datatype: "length-percentage".to_string(),
+                            quoted: false,
+                            range: RangeType {
+                                min: NumberOrInfinity::None,
+                                max: NumberOrInfinity::None,
+                            },
+                            multipliers: vec![SyntaxComponentMultiplier::Optional],
+                        },
+                    ],
+                    multipliers: vec![SyntaxComponentMultiplier::Once],
+                })),
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+    }
+
+    #[test]
+    fn test_grouping_precedence() {
+        let c = CssSyntax::new("left").compile().unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::GenericKeyword {
+                keyword: "left".to_string(),
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let c = CssSyntax::new("left right").compile().unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::Group {
+                combinator: GroupCombinators::Juxtaposition,
+                components: vec![
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "left".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "right".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let c = CssSyntax::new("left right | top bottom").compile().unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::Juxtaposition,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "left".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::Juxtaposition,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "top".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "bottom".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let c = CssSyntax::new("left && right | foo || bar baz")
+            .compile()
+            .unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AllAnyOrder,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "left".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AtLeastOneAnyOrder,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "foo".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::Group {
+                                combinator: GroupCombinators::Juxtaposition,
+                                components: vec![
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "bar".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "baz".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                ],
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let c = CssSyntax::new("[ left ] [ right ] [ top ]")
+            .compile()
+            .unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::Group {
+                combinator: GroupCombinators::Juxtaposition,
+                components: vec![
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "left".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "right".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "top".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let c = CssSyntax::new("[ left right top ]").compile().unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::Group {
+                combinator: GroupCombinators::Juxtaposition,
+                components: vec![
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "left".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "right".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "top".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let c = CssSyntax::new("[ [ left ] ]").compile().unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::GenericKeyword {
+                keyword: "left".to_string(),
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let c = CssSyntax::new("[ left right ]").compile().unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::Group {
+                combinator: GroupCombinators::Juxtaposition,
+                components: vec![
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "left".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "right".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let c = CssSyntax::new("[left right]").compile().unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::Group {
+                combinator: GroupCombinators::Juxtaposition,
+                components: vec![
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "left".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "right".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let c = CssSyntax::new("[ [ left ] ] right ").compile().unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::Group {
+                combinator: GroupCombinators::Juxtaposition,
+                components: vec![
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "left".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "right".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let c = CssSyntax::new("[ [ left ] [ right ] [ top ] ] a")
+            .compile()
+            .unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::Group {
+                combinator: GroupCombinators::Juxtaposition,
+                components: vec![
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::Juxtaposition,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "left".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "top".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "a".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let c = CssSyntax::new("[ [ left ] | [ right ] [ top ] ]")
+            .compile()
+            .unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "left".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::Juxtaposition,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "top".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let c = CssSyntax::new("[ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]").compile().unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::ExactlyOne,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "left".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "center".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "right".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "top".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "bottom".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::Definition {
+                                datatype: "length-percentage".into(),
+                                quoted: false,
+                                range: RangeType {
+                                    min: NumberOrInfinity::None,
+                                    max: NumberOrInfinity::None,
+                                },
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::Juxtaposition,
+                        components: vec![
+                            SyntaxComponent::Group {
+                                combinator: GroupCombinators::ExactlyOne,
+                                components: vec![
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "left".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "center".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "right".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                    SyntaxComponent::Definition {
+                                        datatype: "length-percentage".into(),
+                                        quoted: false,
+                                        range: RangeType {
+                                            min: NumberOrInfinity::None,
+                                            max: NumberOrInfinity::None,
+                                        },
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                ],
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::Group {
+                                combinator: GroupCombinators::ExactlyOne,
+                                components: vec![
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "top".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "center".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "bottom".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                    SyntaxComponent::Definition {
+                                        datatype: "length-percentage".into(),
+                                        quoted: false,
+                                        range: RangeType {
+                                            min: NumberOrInfinity::None,
+                                            max: NumberOrInfinity::None,
+                                        },
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                ],
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AllAnyOrder,
+                        components: vec![
+                            SyntaxComponent::Group {
+                                combinator: GroupCombinators::ExactlyOne,
+                                components: vec![
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "center".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                    SyntaxComponent::Group {
+                                        combinator: GroupCombinators::Juxtaposition,
+                                        components: vec![
+                                            SyntaxComponent::Group {
+                                                combinator: GroupCombinators::ExactlyOne,
+                                                components: vec![
+                                                    SyntaxComponent::GenericKeyword {
+                                                        keyword: "left".to_string(),
+                                                        multipliers: vec![
+                                                            SyntaxComponentMultiplier::Once
+                                                        ],
+                                                    },
+                                                    SyntaxComponent::GenericKeyword {
+                                                        keyword: "right".to_string(),
+                                                        multipliers: vec![
+                                                            SyntaxComponentMultiplier::Once
+                                                        ],
+                                                    },
+                                                ],
+                                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                                            },
+                                            SyntaxComponent::Definition {
+                                                datatype: "length-percentage".into(),
+                                                quoted: false,
+                                                range: RangeType {
+                                                    min: NumberOrInfinity::None,
+                                                    max: NumberOrInfinity::None,
+                                                },
+                                                multipliers: vec![
+                                                    SyntaxComponentMultiplier::Optional
+                                                ],
+                                            },
+                                        ],
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                ],
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::Group {
+                                combinator: GroupCombinators::ExactlyOne,
+                                components: vec![
+                                    SyntaxComponent::GenericKeyword {
+                                        keyword: "center".to_string(),
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                    SyntaxComponent::Group {
+                                        combinator: GroupCombinators::Juxtaposition,
+                                        components: vec![
+                                            SyntaxComponent::Group {
+                                                combinator: GroupCombinators::ExactlyOne,
+                                                components: vec![
+                                                    SyntaxComponent::GenericKeyword {
+                                                        keyword: "top".to_string(),
+                                                        multipliers: vec![
+                                                            SyntaxComponentMultiplier::Once
+                                                        ],
+                                                    },
+                                                    SyntaxComponent::GenericKeyword {
+                                                        keyword: "bottom".to_string(),
+                                                        multipliers: vec![
+                                                            SyntaxComponentMultiplier::Once
+                                                        ],
+                                                    },
+                                                ],
+                                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                                            },
+                                            SyntaxComponent::Definition {
+                                                datatype: "length-percentage".into(),
+                                                quoted: false,
+                                                range: RangeType {
+                                                    min: NumberOrInfinity::None,
+                                                    max: NumberOrInfinity::None,
+                                                },
+                                                multipliers: vec![
+                                                    SyntaxComponentMultiplier::Optional
+                                                ],
+                                            },
+                                        ],
+                                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                                    },
+                                ],
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::Once],
+            }])
+        );
+
+        let c = CssSyntax::new(
+            "[ [ left+ ] | [ center? ] [ top# ]{1,3} | [ center1 ]? && [ center2 ] ]*",
+        )
+        .compile()
+        .unwrap();
+        assert_eq!(
+            c,
+            CssSyntaxTree::new(vec![SyntaxComponent::Group {
+                combinator: GroupCombinators::ExactlyOne,
+                components: vec![
+                    SyntaxComponent::GenericKeyword {
+                        keyword: "left".to_string(),
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::Juxtaposition,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "center".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "top".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Between(1, 3)],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                    SyntaxComponent::Group {
+                        combinator: GroupCombinators::AllAnyOrder,
+                        components: vec![
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "center1".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Optional],
+                            },
+                            SyntaxComponent::GenericKeyword {
+                                keyword: "center2".to_string(),
+                                multipliers: vec![SyntaxComponentMultiplier::Once],
+                            },
+                        ],
+                        multipliers: vec![SyntaxComponentMultiplier::Once],
+                    },
+                ],
+                multipliers: vec![SyntaxComponentMultiplier::ZeroOrMore],
+            }])
+        );
+    }
+}
diff --git a/crates/gosub_styling/src/syntax_matcher.rs b/crates/gosub_styling/src/syntax_matcher.rs
new file mode 100644
index 000000000..7ca63c432
--- /dev/null
+++ b/crates/gosub_styling/src/syntax_matcher.rs
@@ -0,0 +1,1486 @@
+use crate::syntax::{GroupCombinators, SyntaxComponent, SyntaxComponentMultiplier};
+use gosub_css3::colors::{is_named_color, is_system_color};
+use gosub_css3::stylesheet::CssValue;
+
+/// Structure to return from a matching function.
+#[derive(Debug, Clone)]
+pub struct MatchResult {
+    /// The remainder of the values that are not matched.
+    pub remainder: Vec<CssValue>,
+    /// True when this matched did some matching (todo: we might remove this and check for matched_values.is_empty)
+    pub matched: bool,
+    /// List of the matched values
+    pub matched_values: Vec<CssValue>,
+}
+
+#[allow(dead_code)]
+const LENGTH_UNITS: [&str; 31] = [
+    "cap", "ch", "em", "ex", "ic", "lh", "rcap", "rch", "rem", "rex", "ric", "rlh", "vh", "vw",
+    "vmax", "vmin", "vb", "vi", "cqw", "cqh", "cqi", "cqb", "cqmin", "cqmax", "px", "cm", "mm",
+    "Q", "in", "pc", "pt",
+];
+
+/// A CSS Syntax Tree is a tree sof CSS syntax components that can be used to match against CSS values.
+#[derive(Clone, Debug, PartialEq)]
+pub struct CssSyntaxTree {
+    /// The components of the syntax tree
+    pub components: Vec<SyntaxComponent>,
+}
+
+impl CssSyntaxTree {
+    /// Creates a new CSS Syntax tree from the given components
+    pub fn new(components: Vec<SyntaxComponent>) -> Self {
+        CssSyntaxTree { components }
+    }
+
+    /// Matches a CSS value (or set of values) against the syntax tree. Will return a normalized version of the value(s) if it matches.
+    pub fn matches(&self, input: Vec<CssValue>) -> bool {
+        if self.components.len() != 1 {
+            panic!("Syntax tree must have exactly one root component");
+        }
+
+        let res = match_component(&input, &self.components[0]);
+        res.matched && res.remainder.is_empty()
+    }
+}
+
+fn match_component_inner(raw_input: &Vec<CssValue>, component: &SyntaxComponent) -> MatchResult {
+    let _gid = rand::random::<u8>();
+
+    let mut input = raw_input.clone();
+    let mut matched_values = vec![];
+
+    // Loop through the input values and try to match them against the component. It's possible
+    // that we need to loop multiple times in case we have a multiplier that allows this. (ie: 'foo*' or 'foo{1,3}')
+    let mut multiplier_count = 0;
+    loop {
+        if input.is_empty() {
+            // We don't have anything in the input stream. We do need to check if this component
+            // allows for optional values. If so, the component matches.
+            let mff = multiplier_fulfilled(component, 0);
+            if mff == Fulfillment::Fulfilled || mff == Fulfillment::FulfilledButMoreAllowed {
+                return MatchResult {
+                    remainder: vec![],
+                    matched: true,
+                    matched_values: vec![],
+                };
+            }
+
+            // Seems this component needs at least one value. We don't have any, so it's no match
+            return no_match(raw_input);
+        }
+
+        // Check either single or group component
+        let res = if component.is_group() {
+            match_component_group(&input, component)
+        } else {
+            match_component_single(&input, component)
+        };
+
+        if res.matched {
+            // The element matched, so we keep track on how many times it did (in case of multipliers)
+            multiplier_count += 1;
+
+            matched_values.append(&mut res.matched_values.clone());
+
+            // Check if we fulfilled the multiplier for this component
+            let mff = multiplier_fulfilled(component, multiplier_count);
+            match mff {
+                Fulfillment::NotYetFulfilled => {
+                    // The multiplier is not yet fulfilled. Probably a range multiplier, so we need more
+                    // values. Loop to the next value.
+                    input = res.remainder.clone();
+                    continue;
+                }
+                Fulfillment::FulfilledButMoreAllowed => {
+                    // More elements are allowed. Let's check if we have one
+                    input = res.remainder.clone();
+
+                    // No more input to check, so we can just return this match
+                    if input.is_empty() {
+                        return res;
+                    }
+                }
+                Fulfillment::Fulfilled => {
+                    // no more values are allowed.
+                    return res;
+                }
+                Fulfillment::NotFulfilled => {
+                    // The multiplier is not fulfilled.
+                    return no_match(raw_input);
+                }
+            }
+        } else {
+            let mff = multiplier_fulfilled(component, multiplier_count);
+            match mff {
+                Fulfillment::NotYetFulfilled => {
+                    // Don't know about this case
+                    return res;
+                }
+                Fulfillment::Fulfilled => {
+                    return res;
+                }
+                Fulfillment::FulfilledButMoreAllowed => {
+                    return MatchResult {
+                        remainder: input.clone(),
+                        matched: true,
+                        matched_values,
+                    };
+                }
+                Fulfillment::NotFulfilled => {
+                    return no_match(raw_input);
+                }
+            }
+        }
+    }
+}
+
+/// Matches a component against the input values. After the match, there might be remaining
+/// elements in the input. This is passed back in the MatchResult structure.
+fn match_component(raw_input: &Vec<CssValue>, component: &SyntaxComponent) -> MatchResult {
+    let _gid = rand::random::<u8>();
+
+    let mut input = raw_input.clone();
+
+    // Set some additional values when we are dealing with a comma separated lists (the # multiplier)
+    let mut comma_separated = false;
+    let mut csv_cnt = 0;
+    let mut csv_min = 0;
+    let mut csv_max = 0;
+    let mut matched_values = vec![];
+    for multiplier in component.get_multipliers() {
+        match multiplier {
+            SyntaxComponentMultiplier::CommaSeparatedRepeat(min, max) => {
+                comma_separated = true;
+                csv_min = min;
+                csv_max = max;
+            }
+            _ => {}
+        }
+    }
+
+    // CSV loop
+    loop {
+        let inner_result = match_component_inner(&input, component);
+        if !comma_separated {
+            // We don't need to check for comma separated values, so just return this result
+            return inner_result;
+        }
+
+        if !inner_result.matched {
+            // Not matched, so break the loop
+            break;
+        }
+
+        csv_cnt += 1;
+        matched_values.append(&mut inner_result.matched_values.clone());
+
+        input = inner_result.remainder.clone();
+
+        // It's the end, do doo doo doo.
+        if input.is_empty() {
+            break;
+        }
+
+        // Make sure the next value from input is a comma
+        if input.first() != Some(&CssValue::Comma) {
+            return no_match(raw_input);
+        }
+
+        // Remove the comma, and continue matching
+        input = input[1..input.len()].to_owned();
+
+        if input.is_empty() {
+            // We have a comma at the end of the input. This is not allowed.
+            return no_match(raw_input);
+        }
+    }
+
+    // If we are in a comma separated list, we need to check if we have the correct amount of values
+    if comma_separated && csv_cnt >= csv_min && csv_cnt <= csv_max {
+        return MatchResult {
+            remainder: input.clone(),
+            matched: true,
+            matched_values,
+        };
+    }
+
+    no_match(raw_input)
+}
+
+/// Matches a component group
+fn match_component_group(input: &Vec<CssValue>, component: &SyntaxComponent) -> MatchResult {
+    match &component {
+        SyntaxComponent::Group {
+            components,
+            combinator,
+            ..
+        } => {
+            // println!("We need to do a group match on {:?}, our value is: {:?}", combinator, input);
+
+            
+
+            match combinator {
+                GroupCombinators::Juxtaposition => match_group_juxtaposition(input, components),
+                GroupCombinators::AllAnyOrder => match_group_all_any_order(input, components),
+                GroupCombinators::AtLeastOneAnyOrder => {
+                    match_group_at_least_one_any_order(input, components)
+                }
+                GroupCombinators::ExactlyOne => match_group_exactly_one(input, components),
+            }
+        }
+        e => {
+            panic!("Unknown syntax component group: {:?}", e);
+        }
+    }
+}
+
+/// Matches a single component value
+fn match_component_single(input: &Vec<CssValue>, component: &SyntaxComponent) -> MatchResult {
+    // Get the first value from the input which we will use for matching
+    let value = input.first().unwrap();
+
+    // println!("\n\nmatch_component: {:?} against {:?}", value, component);
+
+    match &component {
+        SyntaxComponent::GenericKeyword { keyword, .. } => match value {
+            CssValue::None if keyword.eq_ignore_ascii_case("none") => {
+                return first_match(input);
+            }
+            CssValue::String(v) if v.eq_ignore_ascii_case(keyword) => {
+                // println!("keyword {:?} match!", v);
+                return first_match(input);
+            }
+            _ => {}
+        },
+        SyntaxComponent::Definition { .. } => {
+            //dbg!(&component);
+            todo!("Definition not implemented yet");
+        }
+        SyntaxComponent::Builtin { datatype, .. } => match datatype.as_str() {
+            "percentage" => match value {
+                CssValue::Percentage(_) => return first_match(input),
+                _ => {}
+            },
+            "angle" => match value {
+                CssValue::Zero => return first_match(input),
+                CssValue::Unit(_, u) if u.eq_ignore_ascii_case("deg") => return first_match(input),
+                CssValue::Unit(_, u) if u.eq_ignore_ascii_case("grad") => {
+                    return first_match(input)
+                }
+                CssValue::Unit(_, u) if u.eq_ignore_ascii_case("rad") => return first_match(input),
+                CssValue::Unit(_, u) if u.eq_ignore_ascii_case("turn") => {
+                    return first_match(input)
+                }
+                _ => {}
+            },
+            "length" => match value {
+                CssValue::Zero => return first_match(input),
+                CssValue::Unit(_, u) if LENGTH_UNITS.contains(&u.as_str()) => {
+                    return first_match(input)
+                }
+                _ => {}
+            },
+            "system-color" => match value {
+                CssValue::String(v) => {
+                    if is_system_color(v) {
+                        return first_match(input);
+                    }
+                }
+                _ => {}
+            },
+            "named-color" => match value {
+                CssValue::String(v) => {
+                    if is_named_color(v) {
+                        return first_match(input);
+                    }
+                }
+                _ => {}
+            },
+            "color()" => match value {
+                // @TODO: fix this according to what the spec says
+                CssValue::Color(_) => return first_match(input),
+                CssValue::String(v) if v.starts_with('#') => return first_match(input),
+                _ => {}
+            },
+            "hex-color" => match value {
+                CssValue::Color(_) => return first_match(input),
+                CssValue::String(v) if v.starts_with('#') => return first_match(input),
+                _ => {}
+            },
+            _ => panic!("Unknown built-in datatype: {:?}", datatype),
+        },
+        SyntaxComponent::Inherit { .. } => match value {
+            CssValue::Inherit => return first_match(input),
+            CssValue::String(v) if v.eq_ignore_ascii_case("inherit") => return first_match(input),
+            _ => {}
+        },
+        SyntaxComponent::Initial { .. } => match value {
+            CssValue::Initial => return first_match(input),
+            CssValue::String(v) if v.eq_ignore_ascii_case("initial") => return first_match(input),
+            _ => {}
+        },
+        SyntaxComponent::Unset { .. } => match value {
+            CssValue::String(v) if v.eq_ignore_ascii_case("unset") => return first_match(input),
+            _ => {}
+        },
+        SyntaxComponent::Unit { from, to, unit, .. } => {
+            let f32min = f32::MIN;
+            let f32max = f32::MAX;
+
+            match value {
+                CssValue::Number(n) if *n == 0.0 => return first_match(input),
+                CssValue::Unit(n, u) => {
+                    if unit.contains(u)
+                        && *n >= from.unwrap_or(f32min)
+                        && *n <= to.unwrap_or(f32max)
+                    {
+                        return first_match(input);
+                    }
+                }
+                _ => {}
+            };
+        }
+        SyntaxComponent::Literal { literal, .. } => match value {
+            CssValue::String(v) if v.eq(literal) => return first_match(input),
+            CssValue::String(v) if v.eq_ignore_ascii_case(literal) => {
+                log::warn!("Case insensitive literal matched");
+                return first_match(input);
+            }
+            _ => {}
+        },
+        SyntaxComponent::Function { name, .. } => {
+            let CssValue::Function(c_name, c_args) = value else {
+                return no_match(input);
+            };
+
+            if !name.eq_ignore_ascii_case(c_name) {
+                return no_match(input);
+            }
+
+            if c_args.is_empty() {
+                return first_match(input);
+            }
+
+            todo!("Function not implemented yet. We must match the arguments");
+            // let list = CssValue::List(c_args.clone());
+            // return match_internal(&list, arguments);
+        }
+        SyntaxComponent::Value {
+            value: css_value, ..
+        } => {
+            if value == css_value {
+                return first_match(input);
+            }
+        }
+        e => {
+            panic!("Unknown syntax component: {:?}", e);
+        }
+    }
+
+    no_match(input)
+}
+
+/// Returns element if exactly one element matches in the group
+fn match_group_exactly_one(
+    raw_input: &Vec<CssValue>,
+    components: &Vec<SyntaxComponent>,
+) -> MatchResult {
+    let _gid = rand::random::<u8>();
+
+    let input = raw_input.to_vec();
+    let mut matched_values = vec![];
+    let mut components_matched = vec![];
+
+    let mut c_idx = 0;
+    while c_idx < components.len() {
+        if input.is_empty() {
+            break;
+        }
+
+        let component = &components[c_idx];
+
+        let res = match_component(&input, component);
+        if res.matched {
+            matched_values.append(&mut res.matched_values.clone());
+
+            // input = res.remainder.clone();
+
+            components_matched.push((c_idx, res.matched_values, res.remainder));
+        } else {
+            // No match. That's all right.
+        }
+
+        c_idx += 1;
+    }
+
+    if components_matched.is_empty() {
+        return no_match(&input);
+    }
+
+    if components_matched.len() > 1 {
+        let mut shortest_remainder_idx = 0;
+        let mut shortest_remainder_len = components_matched.first().unwrap().2.len();
+
+        for (idx, (_, _, remainder)) in components_matched.iter().enumerate() {
+            if remainder.len() < shortest_remainder_len {
+                shortest_remainder_len = remainder.len();
+                shortest_remainder_idx = idx;
+            }
+        }
+
+        return MatchResult {
+            remainder: components_matched[shortest_remainder_idx].2.clone(),
+            matched: true,
+            matched_values: components_matched[shortest_remainder_idx].1.clone(),
+        };
+    }
+
+    MatchResult {
+        remainder: components_matched[0].2.clone(),
+        matched: true,
+        matched_values: components_matched[0].1.clone(),
+    }
+}
+
+/// Returns element, when at least one of the elements in the group matches
+fn match_group_at_least_one_any_order(
+    raw_input: &Vec<CssValue>,
+    components: &Vec<SyntaxComponent>,
+) -> MatchResult {
+    let mut input = raw_input.to_vec();
+    let mut matched_values = vec![];
+    let mut components_matched = vec![];
+
+    let mut c_idx = 0;
+    while c_idx < components.len() {
+        if input.is_empty() {
+            break;
+        }
+
+        let component = &components[c_idx];
+
+        let res = match_component(&input, component);
+        if res.matched {
+            matched_values.append(&mut res.matched_values.clone());
+            components_matched.push(c_idx);
+
+            input = res.remainder.clone();
+
+            // Found a match, so loop around for new matches
+            c_idx = 0;
+            while components_matched.contains(&c_idx) {
+                c_idx += 1;
+            }
+        } else {
+            // Element didn't match. That might be allright, and we continue with the next unmatched component
+            c_idx += 1;
+            while components_matched.contains(&c_idx) {
+                c_idx += 1;
+            }
+        }
+    }
+
+    if components_matched.is_empty() {
+        return no_match(&input);
+    }
+
+    MatchResult {
+        remainder: input.clone(),
+        matched: true,
+        matched_values,
+    }
+}
+
+fn match_group_all_any_order(
+    raw_input: &Vec<CssValue>,
+    components: &Vec<SyntaxComponent>,
+) -> MatchResult {
+    let mut input = raw_input.to_vec();
+    let mut matched_values = vec![];
+    let mut components_matched = vec![];
+
+    let mut c_idx = 0;
+    while c_idx < components.len() {
+        if input.is_empty() {
+            break;
+        }
+
+        let component = &components[c_idx];
+
+        let res = match_component(&input, component);
+        if res.matched {
+            matched_values.append(&mut res.matched_values.clone());
+            components_matched.push(c_idx);
+
+            input = res.remainder.clone();
+
+            // Found a match, so loop around for new matches
+            c_idx = 0;
+            while components_matched.contains(&c_idx) {
+                c_idx += 1;
+            }
+        } else {
+            // Element didn't match. That might be allright, and we continue with the next unmatched component
+            c_idx += 1;
+            while components_matched.contains(&c_idx) {
+                c_idx += 1;
+            }
+        }
+    }
+
+    if components_matched.len() != components.len() {
+        return no_match(&input);
+    }
+
+    MatchResult {
+        remainder: input.clone(),
+        matched: true,
+        matched_values,
+    }
+}
+
+fn match_group_juxtaposition(
+    raw_input: &Vec<CssValue>,
+    components: &Vec<SyntaxComponent>,
+) -> MatchResult {
+    let mut input = raw_input.to_vec();
+    let mut matched_values = vec![];
+
+    let mut c_idx = 0;
+    while c_idx < components.len() {
+        let component = &components[c_idx];
+
+        let res = match_component(&input, component);
+        if res.matched {
+            matched_values.append(&mut res.matched_values.clone());
+            input = res.remainder.clone();
+        } else {
+            break;
+        }
+
+        c_idx += 1;
+    }
+
+    if c_idx != components.len() {
+        return no_match(&input);
+    }
+
+    MatchResult {
+        remainder: input.clone(),
+        matched: true,
+        matched_values,
+    }
+}
+
+/// Fulfillment is a result returned by the multiplier_fulfilled function. This is used to determine
+/// if a multiplier is fulfilled or not and how.
+#[derive(Debug, PartialEq)]
+enum Fulfillment {
+    /// The multiplier is not yet fulfilled. There must be more values
+    NotYetFulfilled,
+    /// The multiplier is fulfilled. There cannot be any more values
+    Fulfilled,
+    /// The multiplied is fulfilled, but there may be more values added
+    FulfilledButMoreAllowed,
+    /// The multiplier is not fulfilled (ie: too many values).
+    NotFulfilled,
+}
+
+/// Returns fulfillment enum given the cnt and the actual multiplier of the component
+fn multiplier_fulfilled(component: &SyntaxComponent, cnt: usize) -> Fulfillment {
+    // Filter out the multipliers that are not relevant for this check
+    let binding = component.get_multipliers();
+    let mut filtered_multipliers: Vec<_> = binding
+        .iter()
+        .filter(|m| match m {
+            SyntaxComponentMultiplier::AtLeastOneValue => false,
+            SyntaxComponentMultiplier::CommaSeparatedRepeat(_, _) => false,
+            _ => true,
+        })
+        .collect();
+
+    // Make sure that whenever we do not find a (primary) multiplier, we use the default "Once".
+    if filtered_multipliers.is_empty() {
+        filtered_multipliers.push(&SyntaxComponentMultiplier::Once);
+    }
+
+    match filtered_multipliers.first().unwrap() {
+        SyntaxComponentMultiplier::Once => match cnt {
+            0 => Fulfillment::NotYetFulfilled,
+            1 => Fulfillment::Fulfilled,
+            _ => Fulfillment::NotFulfilled,
+        },
+        SyntaxComponentMultiplier::ZeroOrMore => Fulfillment::FulfilledButMoreAllowed,
+        SyntaxComponentMultiplier::OneOrMore => match cnt {
+            0 => Fulfillment::NotYetFulfilled,
+            _ => Fulfillment::FulfilledButMoreAllowed,
+        },
+        SyntaxComponentMultiplier::Optional => match cnt {
+            0 => Fulfillment::FulfilledButMoreAllowed,
+            1 => Fulfillment::Fulfilled,
+            _ => Fulfillment::NotFulfilled,
+        },
+        SyntaxComponentMultiplier::Between(from, to) => match cnt {
+            _ if cnt < *from => Fulfillment::NotYetFulfilled,
+            _ if cnt >= *from && cnt <= *to => Fulfillment::FulfilledButMoreAllowed,
+            _ => Fulfillment::NotFulfilled,
+        },
+        _ => Fulfillment::NotFulfilled,
+    }
+}
+
+/// Helper function to return no matches
+fn no_match(input: &Vec<CssValue>) -> MatchResult {
+    MatchResult {
+        remainder: input.clone(),
+        matched: false,
+        matched_values: vec![],
+    }
+}
+
+/// Helper function to return the first element from input in a match result, as we need this a lot
+fn first_match(input: &Vec<CssValue>) -> MatchResult {
+    MatchResult {
+        remainder: input.iter().skip(1).cloned().collect(),
+        matched: true,
+        matched_values: vec![input.first().unwrap().clone()],
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use gosub_css3::stylesheet::CssValue;
+
+    use crate::css_definitions::{parse_definition_files, PropertyDefinition};
+    use crate::syntax::CssSyntax;
+
+    use super::*;
+
+    macro_rules! str {
+        ($s:expr) => {
+            CssValue::String($s.to_string())
+        };
+    }
+
+    macro_rules! assert_match {
+        ($e:expr) => {
+            println!("\n\n-------- ASSERT MATCH --------");
+            let res = $e.clone();
+            dbg!(&res);
+            assert_eq!(true, res.matched);
+            println!("------------------------------\n\n");
+        };
+    }
+
+    macro_rules! assert_not_match {
+        ($e:expr) => {
+            println!("\n\n------- ASSERT NOT MATCH ------");
+            let res = $e;
+            dbg!(&res);
+            assert_eq!(false, res.matched);
+            println!("------------------------------\n\n");
+        };
+    }
+
+    macro_rules! assert_true {
+        ($e:expr) => {
+            assert_eq!(true, $e);
+        };
+    }
+
+    macro_rules! assert_false {
+        ($e:expr) => {
+            assert_eq!(false, $e);
+        };
+    }
+
+    #[test]
+    fn test_match_group1() {
+        // Exactly one
+        let tree = CssSyntax::new("auto | none | block").compile().unwrap();
+        assert_true!(tree.matches(vec![str!("auto")]));
+        assert_true!(tree.matches(vec![CssValue::None]));
+        assert_true!(tree.matches(vec![str!("block")]));
+        assert_false!(tree.matches(vec![str!("inline")]));
+        assert_false!(tree.matches(vec![str!("")]));
+        assert_false!(tree.matches(vec![str!("foobar")]));
+        assert_false!(tree.matches(vec![str!("foo"), CssValue::None]));
+        assert_false!(tree.matches(vec![CssValue::None, str!("foo")]));
+        assert_false!(tree.matches(vec![str!("auto"), CssValue::None]));
+        assert_false!(tree.matches(vec![str!("auto"), CssValue::Comma, str!("none"),]));
+        assert_false!(tree.matches(vec![
+            str!("auto"),
+            CssValue::Comma,
+            CssValue::None,
+            CssValue::Comma,
+            str!("block"),
+        ]));
+    }
+
+    #[test]
+    fn test_match_group2() {
+        // juxtaposition
+        let tree = CssSyntax::new("auto none block").compile().unwrap();
+        assert_false!(tree.matches(vec![str!("auto")]));
+        assert_false!(tree.matches(vec![CssValue::None]));
+        assert_false!(tree.matches(vec![str!("block")]));
+        assert_true!(tree.matches(vec![str!("auto"), CssValue::None, str!("block"),]));
+        assert_false!(tree.matches(vec![str!("block"), CssValue::None, str!("block"),]));
+        assert_false!(tree.matches(vec![str!("auto"), CssValue::None, str!("auto"),]));
+    }
+
+    #[test]
+    fn test_match_group3() {
+        // all any order
+        let tree = CssSyntax::new("auto && none && block").compile().unwrap();
+        assert_false!(tree.matches(vec![str!("auto")]));
+        assert_false!(tree.matches(vec![CssValue::None]));
+        assert_false!(tree.matches(vec![str!("block")]));
+        assert_false!(tree.matches(vec![str!("inline")]));
+        assert_false!(tree.matches(vec![str!("")]));
+        assert_false!(tree.matches(vec![str!("foobar")]));
+        assert_false!(tree.matches(vec![str!("foo"), CssValue::None]));
+        assert_false!(tree.matches(vec![CssValue::None, str!("foo")]));
+        assert_false!(tree.matches(vec![str!("auto"), CssValue::None]));
+        assert_false!(tree.matches(vec![str!("auto"), CssValue::Comma, str!("none")]));
+        assert_false!(tree.matches(vec![
+            str!("auto"),
+            CssValue::Comma,
+            CssValue::None,
+            CssValue::Comma,
+            str!("block")
+        ]));
+        assert_true!(tree.matches(vec![str!("block"), str!("auto"), CssValue::None]));
+        assert_true!(tree.matches(vec![str!("auto"), str!("block"), CssValue::None]));
+        assert_true!(tree.matches(vec![str!("block"), CssValue::None, str!("auto")]));
+        assert_true!(tree.matches(vec![CssValue::None, str!("auto"), str!("block")]));
+        assert_false!(tree.matches(vec![str!("auto"), str!("block")]));
+        assert_false!(tree.matches(vec![CssValue::None, str!("block")]));
+        assert_false!(tree.matches(vec![
+            str!("block"),
+            str!("block"),
+            CssValue::None,
+            CssValue::None
+        ]));
+    }
+
+    #[test]
+    fn test_match_group4() {
+        // At least one in any order
+        let tree = CssSyntax::new("auto || none || block").compile().unwrap();
+        assert_true!(tree.matches(vec![str!("auto")]));
+        assert_true!(tree.matches(vec![CssValue::None]));
+        assert_true!(tree.matches(vec![str!("block")]));
+        assert_true!(tree.matches(vec![str!("auto"), CssValue::None]));
+        assert_true!(tree.matches(vec![str!("block"), str!("auto"), CssValue::None,]));
+
+        assert_false!(tree.matches(vec![str!("inline")]));
+        assert_false!(tree.matches(vec![str!("")]));
+        assert_false!(tree.matches(vec![str!("foo"), CssValue::None]));
+        assert_false!(tree.matches(vec![CssValue::None, str!("foo")]));
+        assert_false!(tree.matches(vec![CssValue::None, CssValue::None,]));
+        assert_false!(tree.matches(vec![str!("auto"), CssValue::Comma, str!("none"),]));
+        assert_false!(tree.matches(vec![
+            str!("auto"),
+            CssValue::Comma,
+            CssValue::None,
+            CssValue::Comma,
+            str!("block"),
+        ]));
+        assert_false!(tree.matches(vec![
+            str!("block"),
+            str!("block"),
+            CssValue::None,
+            CssValue::None,
+        ]));
+    }
+
+    #[test]
+    fn test_match_group_juxtaposition() {
+        let tree = CssSyntax::new("auto none block").compile().unwrap();
+        if let SyntaxComponent::Group { components, .. } = &tree.components[0] {
+            let res = match_group_juxtaposition(&vec![str!("auto")], components);
+            assert_not_match!(res);
+
+            let res = match_group_juxtaposition(&vec![str!("auto"), str!("none")], components);
+            assert_not_match!(res);
+
+            let res = match_group_juxtaposition(
+                &vec![str!("auto"), str!("none"), str!("block")],
+                components,
+            );
+            assert_match!(res);
+
+            let res = match_group_juxtaposition(
+                &vec![str!("none"), str!("block"), str!("auto")],
+                components,
+            );
+            assert_not_match!(res);
+
+            let res = match_group_juxtaposition(
+                &vec![
+                    str!("none"),
+                    str!("block"),
+                    str!("block"),
+                    str!("auto"),
+                    str!("none"),
+                ],
+                components,
+            );
+            assert_not_match!(res);
+
+            let res = match_group_juxtaposition(
+                &vec![str!("none"), str!("banana"), str!("car"), str!("block")],
+                components,
+            );
+            assert_not_match!(res);
+        }
+    }
+
+    #[test]
+    fn test_match_group_juxtaposition_with_groups() {
+        // Test if groups are working icw juxtaposition
+        let tree = CssSyntax::new("[top | bottom] [ up | down ] [ charm | strange] ")
+            .compile()
+            .unwrap();
+        if let SyntaxComponent::Group { components, .. } = &tree.components[0] {
+            let res = match_group_juxtaposition(
+                &vec![str!("top"), str!("up"), str!("strange")],
+                components,
+            );
+            assert_match!(res);
+
+            let res = match_group_juxtaposition(
+                &vec![str!("bottom"), str!("up"), str!("strange")],
+                components,
+            );
+            assert_match!(res);
+
+            let res = match_group_juxtaposition(
+                &vec![str!("bottom"), str!("down"), str!("charm")],
+                components,
+            );
+            assert_match!(res);
+        }
+    }
+
+    #[test]
+    fn test_match_group_all_any_order() {
+        let tree = CssSyntax::new("auto none block").compile().unwrap();
+        if let SyntaxComponent::Group { components, .. } = &tree.components[0] {
+            let res = match_group_all_any_order(&vec![str!("auto")], components);
+            assert_not_match!(res);
+
+            let res = match_group_all_any_order(&vec![str!("auto"), str!("none")], components);
+            assert_not_match!(res);
+
+            let res = match_group_all_any_order(
+                &vec![str!("auto"), str!("none"), str!("block")],
+                components,
+            );
+            assert_match!(res);
+
+            let res = match_group_all_any_order(
+                &vec![str!("none"), str!("block"), str!("auto")],
+                components,
+            );
+            assert_match!(res);
+
+            let res = match_group_all_any_order(
+                &vec![
+                    str!("none"),
+                    str!("block"),
+                    str!("block"),
+                    str!("auto"),
+                    str!("none"),
+                ],
+                components,
+            );
+            assert_not_match!(res);
+
+            let res = match_group_all_any_order(
+                &vec![str!("none"), str!("banana"), str!("car"), str!("block")],
+                components,
+            );
+            assert_not_match!(res);
+        }
+    }
+
+    #[test]
+    fn test_match_group_at_least_one_any_order() {
+        let tree = CssSyntax::new("auto none block").compile().unwrap();
+        if let SyntaxComponent::Group { components, .. } = &tree.components[0] {
+            let res = match_group_at_least_one_any_order(&vec![str!("auto")], components);
+            assert_match!(res);
+
+            let res =
+                match_group_at_least_one_any_order(&vec![str!("auto"), str!("none")], components);
+            assert_match!(res);
+
+            let res = match_group_at_least_one_any_order(
+                &vec![str!("auto"), str!("none"), str!("block")],
+                components,
+            );
+            assert_match!(res);
+
+            let res = match_group_at_least_one_any_order(
+                &vec![str!("none"), str!("block"), str!("auto")],
+                components,
+            );
+            assert_match!(res);
+
+            let res = match_group_at_least_one_any_order(
+                &vec![str!("none"), str!("block"), str!("auto")],
+                components,
+            );
+            assert_match!(res);
+
+            let res = match_group_at_least_one_any_order(
+                &vec![
+                    str!("none"),
+                    str!("block"),
+                    str!("none"),
+                    str!("block"),
+                    str!("auto"),
+                    str!("none"),
+                ],
+                components,
+            );
+            assert_match!(res);
+            assert_eq!(vec![str!("none"), str!("block")], res.matched_values);
+
+            let res = match_group_at_least_one_any_order(
+                &vec![str!("none"), str!("block"), str!("banana"), str!("auto")],
+                components,
+            );
+            assert_match!(res);
+            assert_eq!(vec![str!("none"), str!("block")], res.matched_values);
+            assert_eq!(vec![str!("banana"), str!("auto")], res.remainder);
+
+            let res = match_group_at_least_one_any_order(&vec![], components);
+            assert_not_match!(res);
+        }
+    }
+
+    #[test]
+    fn test_multipliers_optional() {
+        let tree = CssSyntax::new("foo bar baz").compile().unwrap();
+        assert_false!(tree.clone().matches(vec![str!("foo")]));
+        assert_false!(tree.clone().matches(vec![str!("foo")]));
+        assert_true!(tree
+            .clone()
+            .matches(vec![str!("foo"), str!("bar"), str!("baz"),]));
+        assert_false!(tree.clone().matches(vec![str!("foo"), str!("baz"),]));
+
+        let tree = CssSyntax::new("foo bar?").compile().unwrap();
+        dbg!(&tree);
+        assert_true!(tree.clone().matches(vec![str!("foo")]));
+        assert_true!(tree.clone().matches(vec![str!("foo"), str!("bar"),]));
+        assert_false!(tree
+            .clone()
+            .matches(vec![str!("foo"), str!("bar"), str!("bar"),]));
+        assert_false!(tree.clone().matches(vec![str!("bar"), str!("foo"),]));
+
+        let tree = CssSyntax::new("foo bar? baz").compile().unwrap();
+        assert_false!(tree.clone().matches(vec![str!("foo")]));
+        assert_true!(tree.clone().matches(vec![str!("foo"), str!("baz"),]));
+        assert_true!(tree
+            .clone()
+            .matches(vec![str!("foo"), str!("bar"), str!("baz"),]));
+
+        assert_false!(tree.clone().matches(vec![
+            str!("foo"),
+            str!("bar"),
+            str!("bar"),
+            str!("baz"),
+        ]));
+
+        assert_false!(tree.clone().matches(vec![
+            str!("foo"),
+            str!("bar"),
+            str!("baz"),
+            str!("baz"),
+        ]));
+    }
+
+    #[test]
+    fn test_multipliers_zero_or_more() {
+        let tree = CssSyntax::new("foo bar* baz").compile().unwrap();
+        assert_false!(tree.clone().matches(vec![str!("foo")]));
+        assert_false!(tree.clone().matches(vec![str!("foo")]));
+        assert_true!(tree
+            .clone()
+            .matches(vec![str!("foo"), str!("bar"), str!("baz"),]));
+        assert_true!(tree.clone().matches(vec![str!("foo"), str!("baz"),]));
+        assert_true!(tree.clone().matches(vec![
+            str!("foo"),
+            str!("bar"),
+            str!("bar"),
+            str!("bar"),
+            str!("bar"),
+            str!("baz"),
+        ]));
+        assert_false!(tree.clone().matches(vec![
+            str!("foo"),
+            str!("bar"),
+            str!("bar"),
+            str!("bar"),
+            str!("baz"),
+            str!("bar"),
+        ]));
+
+        let tree = CssSyntax::new("foo bar*").compile().unwrap();
+        assert_true!(tree.clone().matches(vec![str!("foo")]));
+        assert_true!(tree.clone().matches(vec![str!("foo")]));
+        assert_true!(tree.clone().matches(vec![str!("foo"), str!("bar"),]));
+        assert_true!(tree
+            .clone()
+            .matches(vec![str!("foo"), str!("bar"), str!("bar"),]));
+        assert_false!(tree.clone().matches(vec![str!("bar"), str!("foo"),]));
+    }
+
+    #[test]
+    fn test_multipliers_one_or_more() {
+        let tree = CssSyntax::new("foo bar+ baz").compile().unwrap();
+        assert_false!(tree.clone().matches(vec![str!("foo")]));
+        assert_false!(tree.clone().matches(vec![str!("foo")]));
+        assert_true!(tree
+            .clone()
+            .matches(vec![str!("foo"), str!("bar"), str!("baz"),]));
+        assert_false!(tree.clone().matches(vec![str!("foo"), str!("baz"),]));
+        assert_true!(tree.clone().matches(vec![
+            str!("foo"),
+            str!("bar"),
+            str!("bar"),
+            str!("bar"),
+            str!("bar"),
+            str!("baz"),
+        ]));
+        assert_false!(tree.clone().matches(vec![
+            str!("foo"),
+            str!("bar"),
+            str!("bar"),
+            str!("bar"),
+            str!("baz"),
+            str!("bar"),
+        ]));
+
+        let tree = CssSyntax::new("foo bar+").compile().unwrap();
+        assert_false!(tree.clone().matches(vec![str!("foo")]));
+        assert_false!(tree.clone().matches(vec![str!("bar")]));
+        assert_true!(tree.clone().matches(vec![str!("foo"), str!("bar"),]));
+        assert_true!(tree
+            .clone()
+            .matches(vec![str!("foo"), str!("bar"), str!("bar"),]));
+        assert_false!(tree.clone().matches(vec![str!("bar"), str!("foo"),]));
+
+        let tree = CssSyntax::new("foo+ bar+").compile().unwrap();
+        assert_false!(tree.clone().matches(vec![str!("foo")]));
+        assert_false!(tree.clone().matches(vec![str!("bar")]));
+        assert_true!(tree.clone().matches(vec![str!("foo"), str!("bar"),]));
+        assert_true!(tree
+            .clone()
+            .matches(vec![str!("foo"), str!("bar"), str!("bar"),]));
+        assert_true!(tree.clone().matches(vec![
+            str!("foo"),
+            str!("foo"),
+            str!("bar"),
+            str!("bar"),
+        ]));
+
+        assert_false!(tree.clone().matches(vec![str!("bar"), str!("foo"),]));
+    }
+
+    #[test]
+    fn test_multipliers_between() {
+        let tree = CssSyntax::new("foo bar{1,3} baz").compile().unwrap();
+        assert_false!(tree.clone().matches(vec![str!("foo")]));
+        assert_false!(tree.clone().matches(vec![str!("foo")]));
+        assert_true!(tree
+            .clone()
+            .matches(vec![str!("foo"), str!("bar"), str!("baz"),]));
+        assert_false!(tree.clone().matches(vec![str!("foo"), str!("baz"),]));
+        assert_true!(tree.clone().matches(vec![
+            str!("foo"),
+            str!("bar"),
+            str!("bar"),
+            str!("baz"),
+        ]));
+        assert_true!(tree.clone().matches(vec![
+            str!("foo"),
+            str!("bar"),
+            str!("bar"),
+            str!("bar"),
+            str!("baz"),
+        ]));
+        assert_false!(tree.clone().matches(vec![
+            str!("foo"),
+            str!("bar"),
+            str!("bar"),
+            str!("bar"),
+            str!("bar"),
+            str!("baz"),
+        ]));
+        assert_false!(tree.clone().matches(vec![
+            str!("foo"),
+            str!("bar"),
+            str!("bar"),
+            str!("baz"),
+            str!("bar"),
+            str!("bar"),
+        ]));
+
+        let tree = CssSyntax::new("foo bar{0,3}").compile().unwrap();
+        assert_true!(tree.clone().matches(vec![str!("foo")]));
+        assert_true!(tree.clone().matches(vec![str!("foo")]));
+        assert_true!(tree.clone().matches(vec![str!("foo"), str!("bar"),]));
+        assert_true!(tree
+            .clone()
+            .matches(vec![str!("foo"), str!("bar"), str!("bar"),]));
+        assert_false!(tree.clone().matches(vec![
+            str!("foo"),
+            str!("bar"),
+            str!("bar"),
+            str!("bar"),
+            str!("bar"),
+        ]));
+        assert_false!(tree.clone().matches(vec![str!("bar"), str!("foo"),]));
+    }
+
+    #[test]
+    fn test_matcher() {
+        let mut definitions = parse_definition_files();
+        definitions.add_property(
+            "testprop",
+            PropertyDefinition {
+                name: "testprop".to_string(),
+                computed: vec![],
+                syntax: CssSyntax::new(
+                    "[ left | right ] <length>? | [ top | bottom ] <length> | [ top | bottom ]",
+                )
+                .compile()
+                .unwrap(),
+                inherited: false,
+                initial_value: None,
+                resolved: false,
+            },
+        );
+        definitions.resolve();
+
+        let prop = definitions.find_property("testprop").unwrap();
+
+        assert_true!(prop
+            .clone()
+            .matches(vec![str!("left"), CssValue::Unit(5.0, "px".into()),]));
+        assert_true!(prop
+            .clone()
+            .matches(vec![str!("top"), CssValue::Unit(5.0, "px".into()),]));
+        assert_true!(prop
+            .clone()
+            .matches(vec![str!("bottom"), CssValue::Unit(5.0, "px".into()),]));
+        assert_true!(prop
+            .clone()
+            .matches(vec![str!("right"), CssValue::Unit(5.0, "px".into()),]));
+        assert_true!(prop.clone().matches(vec![str!("left")]));
+        assert_true!(prop.clone().matches(vec![str!("top")]));
+        assert_true!(prop.clone().matches(vec![str!("bottom")]));
+        assert_true!(prop.clone().matches(vec![str!("right")]));
+
+        assert_false!(prop
+            .clone()
+            .matches(vec![CssValue::Unit(5.0, "px".into()), str!("right"),]));
+        assert_false!(prop.clone().matches(vec![
+            CssValue::Unit(5.0, "px".into()),
+            CssValue::Unit(10.0, "px".into()),
+            str!("right"),
+        ]));
+    }
+
+    #[test]
+    fn test_matcher_2() {
+        let mut definitions = parse_definition_files();
+        definitions.add_property(
+            "testprop",
+            PropertyDefinition {
+                name: "testprop".to_string(),
+                computed: vec![],
+                syntax: CssSyntax::new("[ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] ]").compile().unwrap(),
+                inherited: false,
+                initial_value: None,
+                resolved: false,
+            },
+        );
+        definitions.resolve();
+
+        let prop = definitions.find_property("testprop").unwrap();
+
+        assert_true!(prop.clone().matches(vec![str!("left"),]));
+        assert_true!(prop.clone().matches(vec![str!("left"), str!("top"),]));
+        assert_true!(prop.clone().matches(vec![str!("center"), str!("top"),]));
+        assert_false!(prop.clone().matches(vec![str!("top"), str!("top"),]));
+        assert_false!(prop.clone().matches(vec![str!("top"), str!("center"),]));
+        assert_true!(prop.clone().matches(vec![str!("center"), str!("top"),]));
+        assert_true!(prop.clone().matches(vec![str!("center"), str!("center"),]));
+        assert_true!(prop
+            .clone()
+            .matches(vec![CssValue::Percentage(10.0), CssValue::Percentage(20.0),]));
+        assert_true!(prop.clone().matches(vec![
+            CssValue::Unit(10.0, "px".into()),
+            CssValue::Percentage(20.0),
+        ]));
+        assert_true!(prop
+            .clone()
+            .matches(vec![str!("left"), CssValue::Percentage(20.0),]));
+
+        assert_true!(prop
+            .clone()
+            .matches(vec![CssValue::Unit(10.0, "px".into()), str!("center"),]));
+
+        assert_true!(prop
+            .clone()
+            .matches(vec![CssValue::Percentage(10.0), str!("top"),]));
+
+        assert_true!(prop.clone().matches(vec![str!("right")]));
+
+        assert_true!(prop.clone().matches(vec![str!("top")]));
+    }
+
+    #[test]
+    fn test_matcher_3() {
+        let mut definitions = parse_definition_files();
+        definitions.add_property(
+            "testprop",
+            PropertyDefinition {
+                name: "testprop".to_string(),
+                computed: vec![],
+                syntax: CssSyntax::new("foo | [ foo [ foo | bar ] ]")
+                    .compile()
+                    .unwrap(),
+                inherited: false,
+                initial_value: None,
+                resolved: false,
+            },
+        );
+        definitions.resolve();
+
+        let prop = definitions.find_property("testprop").unwrap();
+
+        assert_true!(prop.clone().matches(vec![str!("foo"),]));
+        assert_true!(prop.clone().matches(vec![str!("foo"), str!("foo"),]));
+        assert_true!(prop.clone().matches(vec![str!("foo"), str!("bar"),]));
+
+        assert_false!(prop.clone().matches(vec![str!("bar"),]));
+        assert_false!(prop.clone().matches(vec![str!("bar"), str!("foo"),]));
+    }
+
+    #[test]
+    fn test_fulfillment() {
+        assert_eq!(
+            multiplier_fulfilled(
+                &SyntaxComponent::Group {
+                    components: vec![],
+                    combinator: GroupCombinators::Juxtaposition,
+                    multipliers: vec![SyntaxComponentMultiplier::Once],
+                },
+                0
+            ),
+            Fulfillment::NotYetFulfilled
+        );
+
+        assert_eq!(
+            multiplier_fulfilled(
+                &SyntaxComponent::Group {
+                    components: vec![],
+                    combinator: GroupCombinators::Juxtaposition,
+                    multipliers: vec![SyntaxComponentMultiplier::Once],
+                },
+                1
+            ),
+            Fulfillment::Fulfilled
+        );
+
+        assert_eq!(
+            multiplier_fulfilled(
+                &SyntaxComponent::Group {
+                    components: vec![],
+                    combinator: GroupCombinators::Juxtaposition,
+                    multipliers: vec![SyntaxComponentMultiplier::Once],
+                },
+                2
+            ),
+            Fulfillment::NotFulfilled
+        );
+
+        assert_eq!(
+            multiplier_fulfilled(
+                &SyntaxComponent::Group {
+                    components: vec![],
+                    combinator: GroupCombinators::Juxtaposition,
+                    multipliers: vec![SyntaxComponentMultiplier::ZeroOrMore],
+                },
+                0
+            ),
+            Fulfillment::FulfilledButMoreAllowed
+        );
+
+        assert_eq!(
+            multiplier_fulfilled(
+                &SyntaxComponent::Group {
+                    components: vec![],
+                    combinator: GroupCombinators::Juxtaposition,
+                    multipliers: vec![SyntaxComponentMultiplier::ZeroOrMore],
+                },
+                1
+            ),
+            Fulfillment::FulfilledButMoreAllowed
+        );
+
+        assert_eq!(
+            multiplier_fulfilled(
+                &SyntaxComponent::Group {
+                    components: vec![],
+                    combinator: GroupCombinators::Juxtaposition,
+                    multipliers: vec![SyntaxComponentMultiplier::ZeroOrMore],
+                },
+                2
+            ),
+            Fulfillment::FulfilledButMoreAllowed
+        );
+
+        assert_eq!(
+            multiplier_fulfilled(
+                &SyntaxComponent::Group {
+                    components: vec![],
+                    combinator: GroupCombinators::Juxtaposition,
+                    multipliers: vec![SyntaxComponentMultiplier::OneOrMore],
+                },
+                0
+            ),
+            Fulfillment::NotYetFulfilled
+        );
+
+        assert_eq!(
+            multiplier_fulfilled(
+                &SyntaxComponent::Group {
+                    components: vec![],
+                    combinator: GroupCombinators::Juxtaposition,
+                    multipliers: vec![SyntaxComponentMultiplier::OneOrMore],
+                },
+                1
+            ),
+            Fulfillment::FulfilledButMoreAllowed
+        );
+
+        assert_eq!(
+            multiplier_fulfilled(
+                &SyntaxComponent::Group {
+                    components: vec![],
+                    combinator: GroupCombinators::Juxtaposition,
+                    multipliers: vec![SyntaxComponentMultiplier::OneOrMore],
+                },
+                2
+            ),
+            Fulfillment::FulfilledButMoreAllowed
+        );
+
+        assert_eq!(
+            multiplier_fulfilled(
+                &SyntaxComponent::Group {
+                    components: vec![],
+                    combinator: GroupCombinators::Juxtaposition,
+                    multipliers: vec![SyntaxComponentMultiplier::Optional],
+                },
+                0
+            ),
+            Fulfillment::FulfilledButMoreAllowed
+        );
+    }
+
+    #[test]
+    fn test_match_with_subgroups() {
+        let tree = CssSyntax::new("[a b ] | [a c]").compile().unwrap();
+        assert_true!(tree.matches(vec![str!("a"), str!("b"),]));
+        assert_true!(tree.matches(vec![str!("a"), str!("c"),]));
+        assert_false!(tree.matches(vec![str!("b"), str!("b"),]));
+    }
+
+    #[test]
+    fn test_matcher_4() {
+        let mut definitions = parse_definition_files();
+        definitions.add_property(
+            "testprop",
+            PropertyDefinition {
+                name: "testprop".to_string(),
+                computed: vec![],
+                syntax: CssSyntax::new(
+                    "[ left | right ] <length>? | [ top | bottom ] <length> | [ top | bottom ]", // "left <length>? | top <length> | top"
+                )
+                .compile()
+                .unwrap(),
+                inherited: false,
+                initial_value: None,
+                resolved: false,
+            },
+        );
+        definitions.resolve();
+
+        let prop = definitions.find_property("testprop").unwrap();
+
+        assert_true!(prop
+            .clone()
+            .matches(vec![str!("left"), CssValue::Unit(10.0, "px".into()),]));
+        assert_true!(prop
+            .clone()
+            .matches(vec![str!("right"), CssValue::Unit(10.0, "px".into()),]));
+        assert_true!(prop.clone().matches(vec![str!("left"),]));
+        assert_true!(prop.clone().matches(vec![str!("right"),]));
+
+        assert_true!(prop
+            .clone()
+            .matches(vec![str!("top"), CssValue::Unit(10.0, "px".into()),]));
+        assert_true!(prop
+            .clone()
+            .matches(vec![str!("bottom"), CssValue::Unit(10.0, "px".into()),]));
+
+        assert_true!(prop.clone().matches(vec![str!("top"),]));
+        assert_true!(prop.clone().matches(vec![str!("bottom"),]));
+    }
+
+    #[test]
+    fn test_comma_separated() {
+        let tree = CssSyntax::new("[foo | bar | baz]#").compile().unwrap();
+        assert_true!(tree.matches(vec![str!("foo")]));
+        assert_true!(tree.matches(vec![str!("foo"), CssValue::Comma, str!("foo")]));
+        assert_true!(tree.matches(vec![
+            str!("foo"),
+            CssValue::Comma,
+            str!("foo"),
+            CssValue::Comma,
+            str!("foo")
+        ]));
+        assert_true!(tree.matches(vec![str!("foo"), CssValue::Comma, str!("bar")]));
+        assert_true!(tree.matches(vec![str!("foo"), CssValue::Comma, str!("baz")]));
+        assert_true!(tree.matches(vec![
+            str!("foo"),
+            CssValue::Comma,
+            str!("bar"),
+            CssValue::Comma,
+            str!("baz")
+        ]));
+
+        assert_false!(tree.matches(vec![str!("foo"), CssValue::Comma]));
+        assert_false!(tree.matches(vec![
+            str!("foo"),
+            CssValue::Comma,
+            str!("bar"),
+            CssValue::Comma
+        ]));
+        assert_false!(tree.matches(vec![
+            str!("foo"),
+            CssValue::Comma,
+            CssValue::Comma,
+            str!("bar")
+        ]));
+    }
+}
diff --git a/crates/gosub_styling/tools/generate_definitions/go.mod b/crates/gosub_styling/tools/generate_definitions/go.mod
new file mode 100644
index 000000000..7e03c5fb1
--- /dev/null
+++ b/crates/gosub_styling/tools/generate_definitions/go.mod
@@ -0,0 +1,3 @@
+module generate_definitions
+
+go 1.22
diff --git a/crates/gosub_styling/tools/generate_definitions/main.go b/crates/gosub_styling/tools/generate_definitions/main.go
new file mode 100644
index 000000000..584d4fcba
--- /dev/null
+++ b/crates/gosub_styling/tools/generate_definitions/main.go
@@ -0,0 +1,159 @@
+package main
+
+import (
+	"bytes"
+	"encoding/json"
+	"generate_definitions/mdn"
+	"generate_definitions/utils"
+	"generate_definitions/webref"
+	"log"
+	"os"
+	"path"
+)
+
+type ExportType int
+
+const (
+	Both ExportType = iota
+	SingleFile
+	MultiFile
+)
+
+const (
+	exportType      = Both
+	ResourcePath    = "crates/gosub_styling/resources/definitions"
+	SingleFilePath  = ResourcePath + "/definitions.json"
+	MultiFileDir    = ResourcePath
+	MultiFilePrefix = "definitions_"
+)
+
+func main() {
+	webrefData := webref.GetWebRefData()
+
+	webref.DetectDuplicates(&webrefData)
+
+	mdnData := mdn.GetMdnData()
+
+	var data utils.Data
+
+	log.Printf(
+		"Webref data: %d properties, %d values, %d at-rules, %d selectors",
+		len(webrefData.Properties), len(webrefData.Values), len(webrefData.AtRules), len(webrefData.Selectors),
+	)
+
+	for _, property := range webrefData.Properties {
+		prop := utils.Property{
+			Name:      property.Name,
+			Syntax:    property.Syntax,
+			Computed:  []string{},
+			Initial:   property.Initial,
+			Inherited: property.Inherited == "yes",
+		}
+
+		mdnProp, ok := mdnData[property.Name]
+		if ok {
+			if len(mdnProp.Computed.Array) == 0 {
+				prop.Computed = []string{mdnProp.Computed.String}
+			} else {
+				prop.Computed = mdnProp.Computed.Array
+			}
+
+			prop.Initial = mdnProp.Initial
+		}
+
+		data.Properties = append(data.Properties, prop)
+	}
+
+	for _, value := range webrefData.Values {
+		data.Values = append(data.Values, utils.Value{
+			Name:   value.Name,
+			Syntax: value.Syntax,
+		})
+	}
+
+	for _, atRule := range webrefData.AtRules {
+		descriptors := make([]utils.AtRuleDescriptor, len(atRule.Descriptors))
+
+		for i, descriptor := range atRule.Descriptors {
+
+			initial := descriptor.Initial
+			{
+				// remove "n/a" or "N/A" initial values
+				if len(initial) >= 3 {
+					if initial[0] == 'n' || initial[0] == 'N' &&
+						initial[1] == '/' &&
+						initial[2] == 'a' || initial[2] == 'A' {
+						initial = ""
+					}
+				}
+			}
+
+			descriptors[i] = utils.AtRuleDescriptor{
+				Name:    descriptor.Name,
+				Syntax:  descriptor.Syntax,
+				Initial: initial,
+			}
+		}
+
+		data.AtRules = append(data.AtRules, utils.AtRule{
+			Name:        atRule.Name,
+			Descriptors: descriptors,
+			Values:      atRule.Values,
+		})
+	}
+
+	data.Selectors = webrefData.Selectors
+
+	log.Printf(
+		"Collected data: %d properties, %d values, %d at-rules, %d selectors",
+		len(data.Properties), len(data.Values), len(data.AtRules), len(data.Selectors),
+	)
+
+	switch exportType {
+	case SingleFile:
+		ExportSingleFile(&data)
+		break
+
+	case MultiFile:
+		ExportMultiFile(&data)
+		break
+
+	case Both:
+		ExportMultiFile(&data)
+		ExportSingleFile(&data)
+		break
+	}
+}
+
+func ExportSingleFile(data *utils.Data) {
+	ExportData(data, SingleFilePath)
+}
+
+func ExportMultiFile(data *utils.Data) {
+	if _, err := os.Stat(MultiFileDir); os.IsNotExist(err) {
+		if err := os.MkdirAll(MultiFileDir, 0755); err != nil {
+			log.Panic(err)
+		}
+	}
+
+	ExportData(data.Properties, path.Join(MultiFileDir, MultiFilePrefix+"properties.json"))
+	ExportData(data.Values, path.Join(MultiFileDir, MultiFilePrefix+"values.json"))
+	ExportData(data.AtRules, path.Join(MultiFileDir, MultiFilePrefix+"at-rules.json"))
+	ExportData(data.Selectors, path.Join(MultiFileDir, MultiFilePrefix+"selectors.json"))
+
+}
+
+func ExportData(data any, path string) {
+	var buf bytes.Buffer
+	enc := json.NewEncoder(&buf)
+	enc.SetEscapeHTML(false)
+	enc.SetIndent("", "  ")
+
+	if err := enc.Encode(data); err != nil {
+		log.Panic(err)
+	}
+
+	if err := os.WriteFile(path, buf.Bytes(), 0644); err != nil {
+		log.Panic(err)
+	}
+}
diff --git a/crates/gosub_styling/tools/generate_definitions/mdn/mdn.go b/crates/gosub_styling/tools/generate_definitions/mdn/mdn.go
new file mode 100644
index 000000000..57ade1ac6
--- /dev/null
+++ b/crates/gosub_styling/tools/generate_definitions/mdn/mdn.go
@@ -0,0 +1,41 @@
+package mdn
+
+import (
+	"encoding/json"
+	"generate_definitions/utils"
+	"io"
+	"log"
+	"net/http"
+)
+
+const (
+	MDN_PROPERTIES = "https://raw.githubusercontent.com/mdn/data/main/css/properties.json"
+)
+
+type MdnItem struct {
+	Syntax   string                 `json:"syntax"`
+	Initial  utils.StringMaybeArray `json:"initial"`
+	Computed utils.StringMaybeArray `json:"computed"`
+}
+
+func GetMdnData() map[string]MdnItem {
+	mdnResp, err := http.Get(MDN_PROPERTIES) //TODO: this should probably also be cached
+	if err != nil {
+		log.Panic(err)
+	}
+
+	defer mdnResp.Body.Close()
+
+	body, err := io.ReadAll(mdnResp.Body)
+	if err != nil {
+		log.Panic(err)
+	}
+
+	var mdnData map[string]MdnItem
+
+	if err := json.Unmarshal(body, &mdnData); err != nil {
+		log.Panic(err)
+	}
+
+	return mdnData
+}
diff --git a/crates/gosub_styling/tools/generate_definitions/patch/patch_darwin.go b/crates/gosub_styling/tools/generate_definitions/patch/patch_darwin.go
new file mode 100644
index 000000000..0efadb8f2
--- /dev/null
+++ b/crates/gosub_styling/tools/generate_definitions/patch/patch_darwin.go
@@ -0,0 +1,5 @@
+package patch
+
+func PatchFile(name string, patchPath string) (string, error) {
+	panic("Darwin is not supported yet!")
+}
diff --git a/crates/gosub_styling/tools/generate_definitions/patch/patch_linux.go b/crates/gosub_styling/tools/generate_definitions/patch/patch_linux.go
new file mode 100644
index 000000000..cbde49693
--- /dev/null
+++ b/crates/gosub_styling/tools/generate_definitions/patch/patch_linux.go
@@ -0,0 +1,29 @@
+package patch
+
+import (
+	"fmt"
+	"generate_definitions/utils"
+	"os"
+	"os/exec"
+)
+
+func PatchFile(path string, patchPath string) (string, error) {
+	cmd := exec.Command("patch", path, patchPath)
+
+	output, err := cmd.CombinedOutput()
+	if err != nil {
+		return "", fmt.Errorf("Failed to apply patch %v: %v\nOUTPUT:\n%v", path, err, string(output))
+	}
+
+	if _, err := os.Stat(path); os.IsNotExist(err) {
+
+		if os.WriteFile(path, []byte("<deleted>"), 0644) != nil {
+			return "", fmt.Errorf("Failed to create del file %v: %v", path, err)
+		}
+
+		return "<deleted>", nil
+	}
+
+	return utils.ComputeGitBlobSHA1(path)
+
+}
diff --git a/crates/gosub_styling/tools/generate_definitions/patch/patch_windows.go b/crates/gosub_styling/tools/generate_definitions/patch/patch_windows.go
new file mode 100644
index 000000000..9da3ae3db
--- /dev/null
+++ b/crates/gosub_styling/tools/generate_definitions/patch/patch_windows.go
@@ -0,0 +1,5 @@
+package patch
+
+func PatchFile(name string, patchPath string) (string, error) {
+	panic("Windows is not supported yet!")
+}
diff --git a/crates/gosub_styling/tools/generate_definitions/patch/patcher.go b/crates/gosub_styling/tools/generate_definitions/patch/patcher.go
new file mode 100644
index 000000000..561d8b897
--- /dev/null
+++ b/crates/gosub_styling/tools/generate_definitions/patch/patcher.go
@@ -0,0 +1,376 @@
+package patch
+
+import (
+	"encoding/json"
+	"fmt"
+	"generate_definitions/utils"
+	"log"
+	"os"
+	"path"
+	"strings"
+)
+
+var (
+	PATHS = []string{
+		utils.CACHE_DIR + "/patches",
+		utils.CUSTOM_PATCH_DIR,
+	}
+)
+
+type PatchedFile struct {
+	Name      string  `json:"name"`
+	Sha       string  `json:"sha"`
+	Patches   []Patch `json:"patches"`
+	ResultSha string  `json:"resultSha"`
+}
+
+type Patch struct {
+	FilePath string `json:"path"`
+	Name     string `json:"name"`
+	Sha      string `json:"sha"`
+}
+
+type FileListing struct {
+	Files   *[]PatchedFile
+	Patches *[]Patch
+}
+
+func (fl FileListing) Save() error {
+	file, err := json.Marshal(fl.Files)
+	if err != nil {
+		return err
+	}
+
+	if err = os.WriteFile(path.Join(utils.CACHE_INDEX_FILE, "index.json"), file, 0644); err != nil {
+		return err
+
+	}
+
+	return nil
+}
+
+func (fl FileListing) FileNeedsReset(name string) bool {
+	for _, file := range *fl.Files {
+		if file.Name == name {
+			return FileNeedsReset(&file, fl.Patches)
+		}
+	}
+	return false
+}
+
+func (fl FileListing) FileNeedsPatch(name string) bool {
+	for _, patch := range *fl.Patches {
+		forFile := strings.TrimSuffix(patch.Name, ".patch")
+		if forFile == name {
+			return true
+		}
+	}
+	return false
+}
+
+func (fl FileListing) FilePatchesApplied(name string) bool {
+	var neededPatches []Patch
+	for _, patch := range *fl.Patches {
+		forFile := strings.TrimSuffix(patch.Name, ".patch")
+		if forFile == name {
+			neededPatches = append(neededPatches, patch)
+		}
+	}
+
+	for _, file := range *fl.Files {
+		if file.Name == name {
+			if len(file.Patches) == len(neededPatches) {
+				return true
+			}
+			if len(file.Patches) == 0 {
+				return false
+			}
+
+			log.Panic("File has been patched, but not all patches have been applied")
+		}
+	}
+
+	if len(neededPatches) == 0 {
+		return true
+	}
+
+	return false
+
+}
+
+func (fl FileListing) PatchFile(name string) error {
+	log.Println("Patching file", name)
+
+	for _, patch := range *fl.Patches {
+		forFile := strings.TrimSuffix(patch.Name, ".patch")
+		if forFile == name {
+			filePath := path.Join(utils.CACHE_DIR, name)
+
+			if err := ApplyPatch(fl.Files, forFile, filePath, patch.FilePath, patch.Name); err != nil {
+				return err
+			}
+		}
+	}
+	return nil
+}
+
+func GetFileListing() FileListing {
+	patchedFiles, err := GetCachedPatches()
+	if err != nil {
+		log.Panic(err)
+	}
+
+	patches, err := GetPatches()
+	if err != nil {
+		log.Panic(err)
+	}
+
+	for _, p := range patches {
+		log.Println(p.FilePath, p.Sha)
+	}
+
+	return FileListing{
+		Files:   &patchedFiles,
+		Patches: &patches,
+	}
+}
+
+func GetPatches() ([]Patch, error) {
+	var patches []Patch
+
+	for _, dir := range PATHS {
+		p, err := os.ReadDir(dir)
+		if err != nil {
+			return nil, err
+		}
+
+		for _, patch := range p {
+			if patch.IsDir() {
+				continue
+			}
+
+			if !strings.HasSuffix(patch.Name(), ".patch") {
+				continue
+			}
+
+			patchPath := path.Join(dir, patch.Name())
+
+			sha, err := utils.ComputeGitBlobSHA1(patchPath)
+			if err != nil {
+				return nil, err
+			}
+
+			patches = append(patches, Patch{
+				FilePath: patchPath,
+				Name:     patch.Name(),
+				Sha:      sha,
+			})
+		}
+	}
+
+	return patches, nil
+}
+
+func GetCachedPatches() ([]PatchedFile, error) {
+	var patchedFiles []PatchedFile
+	file, err := os.ReadFile(utils.CACHE_INDEX_FILE)
+	if os.IsNotExist(err) {
+		return patchedFiles, nil
+	}
+	if err != nil {
+		return nil, err
+	}
+
+	if err = json.Unmarshal(file, &patchedFiles); err != nil {
+		return nil, err
+	}
+
+	return patchedFiles, nil
+}
+
+// PatchFilesWithCache
+// If you call this function, you need to already have checked if you need to reset a file with the [FileNeedsReset] function
+func PatchFilesWithCache(patchedFiles *[]PatchedFile) error {
+	for _, dir := range PATHS {
+		err := ApplyPatches(patchedFiles, dir)
+		if err != nil {
+			return err
+		}
+
+	}
+
+	return nil
+}
+
+func PatchFiles() error {
+	patchedFiles, err := GetCachedPatches()
+	if err != nil {
+		return err
+	}
+
+	err = PatchFilesWithCache(&patchedFiles)
+	if err != nil {
+		return err
+	}
+
+	marshaled, err := json.Marshal(patchedFiles)
+	if err != nil {
+		return err
+	}
+
+	if err = os.WriteFile(path.Join(utils.CACHE_INDEX_FILE), marshaled, 0644); err != nil {
+		return err
+	}
+
+	return nil
+
+}
+
+func ApplyPatches(patchedFiles *[]PatchedFile, dir string) error {
+	//TODO: This function should take the [FileListing] struct as an argument, so we can't get out of sync with the cache
+	//but this is really really unlikely to happen, so I'm not going to bother with it for now
+	patches, err := os.ReadDir(dir)
+	if err != nil {
+		return err
+	}
+
+	for _, patch := range patches {
+		if patch.IsDir() {
+			log.Println("Skipping directory", patch.Name())
+			continue
+		}
+
+		if !strings.HasSuffix(patch.Name(), ".patch") {
+			log.Println("Skipping non-patch file", patch.Name())
+			continue
+		}
+
+		forFile := strings.TrimSuffix(patch.Name(), ".patch")
+
+		filePath := path.Join(utils.CACHE_DIR, "patched", forFile)
+
+		{
+			cacheFilePath := path.Join(utils.CACHE_DIR, "specs2", forFile)
+			content, err := os.ReadFile(cacheFilePath)
+			if err != nil {
+				return err
+			}
+
+			if err = os.WriteFile(filePath, content, 0644); err != nil {
+				return err
+			}
+		}
+
+		patchPath := path.Join(dir, patch.Name())
+
+		if err := ApplyPatch(patchedFiles, forFile, filePath, patchPath, patch.Name()); err != nil {
+			return err
+		}
+	}
+
+	return nil
+}
+
+func ApplyPatch(patchedFiles *[]PatchedFile, forFile, file, patch, patchName string) error {
+	sha, err := utils.ComputeGitBlobSHA1(file)
+	if os.IsNotExist(err) {
+		log.Printf("Failed to patch file %v: file does not exist", file)
+		return nil
+	}
+	if err != nil {
+		return fmt.Errorf("Failed to compute SHA1 for %v: %v", file, err)
+	}
+	shaPatch, err := utils.ComputeGitBlobSHA1(patch)
+	if os.IsNotExist(err) {
+		log.Printf("Failed to patch file %v: patch does not exist", patch)
+		return nil
+	}
+	if err != nil {
+		return fmt.Errorf("Failed to compute SHA1 for %v: %v", patch, err)
+	}
+
+	shaPatched, err := PatchFile(file, patch)
+	if os.IsNotExist(err) {
+		log.Printf("Failed to patch file %v: file does not exist", file)
+		return nil
+	}
+	if err != nil {
+		return fmt.Errorf("Failed to apply patch %v to %v: %v", patch, file, err)
+	}
+
+	appendPatch(patchedFiles, forFile, sha, shaPatched, Patch{
+		FilePath: patch,
+		Name:     patchName,
+		Sha:      shaPatch,
+	})
+
+	return nil
+}
+
+func isAlreadyApplied(patchedFiles *[]PatchedFile, forFile, sha, patchFile, patchSha string) bool {
+	for _, patchedFile := range *patchedFiles {
+		if patchedFile.Name == forFile {
+			if patchedFile.Sha == sha {
+				return false // the file has not been modified, so we haven't applied any patches
+			}
+
+			for _, patch := range patchedFile.Patches {
+				if patch.FilePath == patchFile {
+					//The patch has been applied
+					if patch.Sha != patchSha {
+						// The patch has been applied, but its hash has changed
+						log.Panicf("Patch file %v has been modified", patchFile)
+					}
+
+					return true
+				}
+			}
+
+			return false
+		}
+	}
+
+	return false
+}
+
+func FileNeedsReset(file *PatchedFile, availablePatches *[]Patch) bool {
+	sha, err := utils.ComputeGitBlobSHA1(path.Join(utils.CACHE_DIR, file.Name))
+	if err != nil {
+		log.Println("Failed to compute SHA1 for", file.Name)
+		return true
+	}
+
+	if sha != file.ResultSha {
+		return true
+	}
+
+	for _, patch := range file.Patches {
+		for _, availablePatch := range *availablePatches {
+			if patch.FilePath == availablePatch.FilePath {
+				if patch.Sha != availablePatch.Sha {
+					return true
+				}
+			}
+		}
+	}
+
+	return false
+}
+
+func appendPatch(patchedFiles *[]PatchedFile, forFile string, sha string, shaPatched string, patch Patch) {
+	for _, patchedFile := range *patchedFiles {
+		if patchedFile.Name == forFile {
+			patchedFile.Patches = append(patchedFile.Patches, patch)
+			patchedFile.ResultSha = shaPatched
+			return
+		}
+	}
+
+	*patchedFiles = append(*patchedFiles, PatchedFile{
+		Name:      forFile,
+		Sha:       sha,
+		Patches:   []Patch{patch},
+		ResultSha: shaPatched,
+	})
+
+}
diff --git a/crates/gosub_styling/tools/generate_definitions/specs/specs.go b/crates/gosub_styling/tools/generate_definitions/specs/specs.go
new file mode 100644
index 000000000..a577a1b68
--- /dev/null
+++ b/crates/gosub_styling/tools/generate_definitions/specs/specs.go
@@ -0,0 +1,116 @@
+package specs
+
+import (
+	"encoding/json"
+	"generate_definitions/utils"
+	"io"
+	"log"
+	"net/http"
+	"os"
+)
+
+const (
+	SPEC_INDEX = "ed/index.json"
+	CACHE_FILE = utils.CACHE_DIR + "/specs2/index.json"
+)
+
+type W3CSpec struct {
+	Url       string `json:"url"`
+	Shortname string `json:"shortname"`
+	Series    struct {
+		Shortname string `json:"shortname"`
+	}
+	Release struct {
+		Url      string `json:"url"`
+		Status   string `json:"status"`
+		Filename string `json:"filename"`
+	} `json:"release"`
+	Title string `json:"title"`
+}
+
+type SpecList struct {
+	Specs map[string]struct{}
+}
+
+func (s *SpecList) Contains(spec string) bool {
+	_, ok := s.Specs[spec]
+	return ok
+}
+
+func GetSpecifications() SpecList {
+	specList := SpecList{
+		Specs: make(map[string]struct{}),
+	}
+
+	specFile, err := GetSpecFileContent()
+	if err != nil {
+		log.Panic(err)
+	}
+
+	var spec struct {
+		Results []W3CSpec `json:"results"`
+	}
+
+	if err := json.Unmarshal(specFile, &spec); err != nil {
+		log.Panic(err)
+	}
+
+	for _, spec := range spec.Results {
+		if spec.Release.Status == "" || spec.Release.Url == "" || spec.Release.Filename == "" {
+			continue
+		}
+
+		specList.Specs[spec.Shortname] = struct{}{}
+		specList.Specs[spec.Series.Shortname] = struct{}{}
+	}
+
+	return specList
+}
+
+func GetSpecFileContent() ([]byte, error) {
+	if content, err := os.ReadFile(CACHE_FILE); err == nil {
+		resp, err := http.Get("https://api.github.com/repos/w3c/webref/contents/" + SPEC_INDEX)
+		if err != nil {
+			return nil, err
+		}
+
+		defer resp.Body.Close()
+
+		body, err := io.ReadAll(resp.Body)
+		if err != nil {
+			return nil, err
+		}
+
+		var item utils.DirectoryListItem
+
+		if err := json.Unmarshal(body, &item); err != nil {
+			return nil, err
+		}
+
+		sha := utils.ComputeGitBlobSHA1Content(body)
+
+		if sha == item.Sha {
+			return content, nil
+		}
+	}
+
+	downloadUrl := "https://raw.githubusercontent.com/w3c/webref/main/" + SPEC_INDEX
+
+	resp, err := http.Get(downloadUrl)
+	if err != nil {
+		return nil, err
+	}
+
+	defer resp.Body.Close()
+
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return nil, err
+	}
+
+	if err := os.WriteFile(CACHE_FILE, body, 0644); err != nil {
+		return nil, err
+	}
+
+	return body, nil
+}
diff --git a/crates/gosub_styling/tools/generate_definitions/utils/stringmaybearray.go b/crates/gosub_styling/tools/generate_definitions/utils/stringmaybearray.go
new file mode 100644
index 000000000..3a284f631
--- /dev/null
+++ b/crates/gosub_styling/tools/generate_definitions/utils/stringmaybearray.go
@@ -0,0 +1,22 @@
+package utils
+
+import "encoding/json"
+
+type StringMaybeArray struct {
+	String string
+	Array  []string
+}
+
+func (s *StringMaybeArray) UnmarshalJSON(data []byte) error {
+	if data[0] == '[' {
+		return json.Unmarshal(data, &s.Array)
+	}
+	return json.Unmarshal(data, &s.String)
+}
+
+func (s *StringMaybeArray) MarshalJSON() ([]byte, error) {
+	if len(s.Array) > 0 {
+		return json.Marshal(s.Array)
+	}
+	return json.Marshal(s.String)
+}
diff --git a/crates/gosub_styling/tools/generate_definitions/utils/types.go b/crates/gosub_styling/tools/generate_definitions/utils/types.go
new file mode 100644
index 000000000..b4b08e943
--- /dev/null
+++ b/crates/gosub_styling/tools/generate_definitions/utils/types.go
@@ -0,0 +1,44 @@
+package utils
+
+type Data struct {
+	Properties []Property `json:"properties"`
+	Values     []Value    `json:"values"`
+	AtRules    []AtRule   `json:"atrules"`
+	Selectors  []Selector `json:"selectors"`
+}
+
+type Value struct {
+	Name   string `json:"name"`
+	Syntax string `json:"syntax"`
+}
+
+type Property struct {
+	Name      string           `json:"name"`
+	Syntax    string           `json:"syntax"`
+	Computed  []string         `json:"computed"`
+	Initial   StringMaybeArray `json:"initial"`
+	Inherited bool             `json:"inherited"`
+}
+
+type AtRule struct {
+	Name        string             `json:"name"`
+	Descriptors []AtRuleDescriptor `json:"descriptors"`
+	Values      []struct {
+		Name   string `json:"name"`
+		Value  string `json:"value,omitempty"`
+		Values []struct {
+			Name  string `json:"name"`
+			Value string `json:"value"`
+		}
+	}
+}
+
+type AtRuleDescriptor struct {
+	Name    string `json:"name"`
+	Syntax  string `json:"syntax"`
+	Initial string `json:"initial"`
+}
+
+type Selector struct {
+	Name string `json:"name"`
+}
diff --git a/crates/gosub_styling/tools/generate_definitions/utils/utils.go b/crates/gosub_styling/tools/generate_definitions/utils/utils.go
new file mode 100644
index 000000000..3599e0866
--- /dev/null
+++ b/crates/gosub_styling/tools/generate_definitions/utils/utils.go
@@ -0,0 +1,54 @@
+package utils
+
+import (
+	"crypto/sha1"
+	"fmt"
+	"os"
+)
+
+const (
+	REPO             = "w3c/webref"
+	LOCATION         = "ed/css"
+	PATCH_LOCATION   = "ed/csspatches"
+	CACHE_DIR        = "crates/gosub_styling/resources/cache"
+	CACHE_INDEX_FILE = CACHE_DIR + "/index/cache_index.json"
+	CUSTOM_PATCH_DIR = "crates/gosub_styling/resources/patches"
+	BRANCH           = "curated"
+)
+
+func ComputeGitBlobSHA1(filePath string) (string, error) {
+	content, err := os.ReadFile(filePath)
+	if err != nil {
+		return "", err
+	}
+
+	return ComputeGitBlobSHA1Content(content), nil
+}
+
+func ComputeGitBlobSHA1Content(content []byte) string {
+
+	header := fmt.Sprintf("blob %d\000", len(content))
+
+	data := append([]byte(header), content...)
+
+	hash := sha1.Sum(data)
+
+	return fmt.Sprintf("%x", hash)
+}
+
+type DirectoryListItem struct {
+	Name        string `json:"name"`
+	Path        string `json:"path"`
+	Sha         string `json:"sha"`
+	Size        int    `json:"size"`
+	DownloadUrl string `json:"download_url"`
+	Type        string `json:"type"`
+}
+
+func MapToSlice[K comparable, V any](m map[K]V) []V {
+	slice := make([]V, 0, len(m))
+	for _, v := range m {
+		slice = append(slice, v)
+	}
+	return slice
+}
diff --git a/crates/gosub_styling/tools/generate_definitions/webref/webref.go b/crates/gosub_styling/tools/generate_definitions/webref/webref.go
new file mode 100644
index 000000000..d86472301
--- /dev/null
+++ b/crates/gosub_styling/tools/generate_definitions/webref/webref.go
@@ -0,0 +1,446 @@
+package webref
+
+import (
+	"encoding/json"
+	"generate_definitions/utils"
+	"io"
+	"log"
+	"net/http"
+	"os"
+	"path"
+	"regexp"
+	"strings"
+	"sync"
+)
+
+var (
+	skipList []string
+)
+
+type Data struct {
+	Spec       Spec               `json:"spec"`
+	Properties []WebRefProperties `json:"properties"`
+	Values     []WebRefValue      `json:"values"`
+	AtRules    []WebRefAtRule     `json:"atrules"`
+	Selectors  []utils.Selector   `json:"selectors"`
+}
+
+type ParseData struct {
+	Properties map[string]WebRefProperties
+	Values     map[string]WebRefValue
+	AtRules    map[string]WebRefAtRule
+	Selectors  map[string]utils.Selector
+}
+
+type Spec struct {
+	Title string `json:"title"`
+	Url   string `json:"url"`
+}
+
+type WebRefValue struct {
+	Name   string        `json:"name"`
+	Syntax string        `json:"value"`
+	Type   string        `json:"type"`   // Type of the value
+	Values []WebRefValue `json:"values"` // Additional accompanied values
+}
+
+type WebRefProperties struct {
+	Name      string                 `json:"name"`
+	Syntax    string                 `json:"value"`
+	NewSyntax string                 `json:"newValues"`
+	Computed  []string               `json:"computed"`
+	Initial   utils.StringMaybeArray `json:"initial"`
+	Inherited string                 `json:"inherited"`
+	Values    []WebRefValue          `json:"values"` // Additional accompanied values for this property
+}
+
+type WebRefAtRule struct {
+	Name        string `json:"name"`
+	Descriptors []struct {
+		Name    string `json:"name"`
+		Syntax  string `json:"value"`
+		Initial string `json:"initial"`
+	} `json:"descriptors"`
+	Syntax string `json:"value"`
+	Values []struct {
+		Name   string `json:"name"`
+		Value  string `json:"value,omitempty"`
+		Values []struct {
+			Name  string `json:"name"`
+			Value string `json:"value"`
+		}
+	}
+}
+
+func GetWebRefFiles() []utils.DirectoryListItem {
+	filesResp, err := http.Get("https://api.github.com/repos/" + utils.REPO + "/contents/" + utils.LOCATION + "?ref=" + utils.BRANCH)
+	if err != nil {
+		log.Panic(err)
+	}
+
+	defer filesResp.Body.Close()
+
+	body, err := io.ReadAll(filesResp.Body)
+	if err != nil {
+		log.Panic(err)
+	}
+
+	var files []utils.DirectoryListItem
+	if err := json.Unmarshal(body, &files); err != nil {
+		log.Panic(err)
+	}
+
+	return files
+}
+
+func GetWebRefData() Data {
+	//DownloadPatches() This is no longer needed
+	files := GetWebRefFiles()
+
+	wg := new(sync.WaitGroup)
+
+	//s := specs2.GetSpecifications()
+
+	parseData := ParseData{
+		Properties: make(map[string]WebRefProperties),
+		Values:     make(map[string]WebRefValue),
+		AtRules:    make(map[string]WebRefAtRule),
+		Selectors:  make(map[string]utils.Selector),
+	}
+
+	mu := new(sync.Mutex)
+
+	for _, file := range files {
+		if file.Type != "file" || !strings.HasSuffix(file.Name, ".json") {
+			continue
+		}
+
+		wg.Add(1)
+		go func() {
+			defer wg.Done()
+			content := DownloadFileContent(&file)
+			if content == nil {
+				return
+			}
+
+			shortname := strings.TrimSuffix(file.Name, ".json")
+			if matched, err := regexp.Match(`\d+$`, []byte(shortname)); err != nil || matched {
+				log.Println("Not matched our regexp: ", shortname)
+				return
+			}
+
+			if !skip(shortname) {
+				log.Println("Skipping non-W3C spec", shortname)
+				return
+			}
+
+			mu.Lock()
+			defer mu.Unlock()
+
+			DecodeFileContent(content, &parseData)
+		}()
+	}
+
+	wg.Wait()
+
+	return Data{
+		Properties: utils.MapToSlice(parseData.Properties),
+		Values:     utils.MapToSlice(parseData.Values),
+		AtRules:    utils.MapToSlice(parseData.AtRules),
+		Selectors:  utils.MapToSlice(parseData.Selectors),
+	}
+}
+
+func GetFileContent(file *utils.DirectoryListItem) ([]byte, error) {
+	patchedPath := path.Join(utils.CACHE_DIR, "patched", file.Name)
+	content, err := os.ReadFile(patchedPath)
+	if err == nil {
+		return content, nil
+	}
+	if !os.IsNotExist(err) {
+		return nil, err
+	}
+
+	cachePath := path.Join(utils.CACHE_DIR, "specs2", file.Name)
+	content, err = os.ReadFile(cachePath)
+	if err != nil {
+		return nil, err
+	}
+
+	return content, nil
+}
+
+func DownloadFileContent(file *utils.DirectoryListItem) []byte {
+	cachePath := path.Join(utils.CACHE_DIR, "specs", file.Name)
+
+	hash := ""
+	content, err := os.ReadFile(cachePath)
+	unexist := false
+	if os.IsNotExist(err) {
+		content = []byte{}
+		unexist = true
+	} else if err != nil {
+		return nil
+	} else {
+		hash = utils.ComputeGitBlobSHA1Content(content)
+	}
+
+	if unexist || hash != file.Sha {
+		log.Println("Cache file is outdated, downloading", file.Path)
+		resp, err := http.Get(file.DownloadUrl)
+		if err != nil {
+			log.Panic(file.Path, " ", err)
+		}
+
+		body, err := io.ReadAll(resp.Body)
+		resp.Body.Close()
+		if err != nil {
+			return nil
+		}
+
+		if err := os.WriteFile(cachePath, body, 0644); err != nil {
+			log.Panic("Failed to write cache file ", cachePath, err)
+		}
+
+		return body
+	}
+
+	return content
+}
+
+func DownloadPatches() {
+	patchesResp, err := http.Get("https://api.github.com/repos/" + utils.REPO + "/contents/" + utils.PATCH_LOCATION)
+	if err != nil {
+		log.Panic(err)
+	}
+
+	defer patchesResp.Body.Close()
+
+	body, err := io.ReadAll(patchesResp.Body)
+	if err != nil {
+		log.Panic(err)
+	}
+
+	var patches []utils.DirectoryListItem
+	if err := json.Unmarshal(body, &patches); err != nil {
+		log.Println(string(body))
+		log.Panic(err)
+	}
+
+	for _, p := range patches {
+		if p.Type != "file" || !strings.HasSuffix(p.Name, ".patch") {
+			continue
+		}
+
+		patchPath := path.Join(utils.CACHE_DIR, "patches", p.Name)
+		content, err := os.ReadFile(patchPath)
+		if err == nil {
+			hash := utils.ComputeGitBlobSHA1Content(content)
+			if hash == p.Sha {
+				continue
+			}
+		}
+
+		resp, err := http.Get(p.DownloadUrl)
+		if err != nil {
+			log.Panic(err)
+		}
+
+		body, err := io.ReadAll(resp.Body)
+		resp.Body.Close()
+		if err != nil {
+			log.Panic(err)
+		}
+
+		if err := os.WriteFile(patchPath, body, 0644); err != nil {
+			log.Panic(err)
+		}
+	}
+}
+
+func DetectDuplicates(data *Data) {
+	properties := make(map[string]WebRefProperties)
+	values := make(map[string]WebRefValue)
+	atRules := make(map[string]WebRefAtRule)
+	selectors := make(map[string]utils.Selector)
+
+	for _, property := range data.Properties {
+		if p, ok := properties[property.Name]; ok {
+			if p.Syntax != property.Syntax {
+				log.Println("Different syntax for duplicated property", property.Name)
+				log.Println("Old:", p.Syntax)
+				log.Println("New:", property.Syntax)
+			}
+		}
+		properties[property.Name] = property
+	}
+
+	for _, value := range data.Values {
+		if _, ok := values[value.Name]; ok {
+			log.Println("Duplicate value", value.Name)
+		}
+		values[value.Name] = value
+	}
+
+	for _, atRule := range data.AtRules {
+		if _, ok := atRules[atRule.Name]; ok {
+			log.Println("Duplicate at-rule", atRule.Name)
+		}
+		atRules[atRule.Name] = atRule
+	}
+
+	for _, selector := range data.Selectors {
+		if _, ok := selectors[selector.Name]; ok {
+			log.Println("Duplicate selector", selector.Name)
+		}
+		selectors[selector.Name] = selector
+	}
+}
+
+func skip(shortname string) bool {
+	for _, s := range skipList {
+		if s == shortname {
+			return false
+		}
+	}
+	return true
+}
+
+// ProcessValue will process a single value (from either root values or propertt values) and add it
+// to the ParseData if possible.
+func ProcessValue(name string, type_ string, syntax string, pd *ParseData) {
+	if name == syntax {
+		//log.Println("name == syntax for ", name)
+
+		return
+	}
+
+	// If value already exists, update the syntax if possible
+	if v, ok := pd.Values[name]; ok {
+		if v.Syntax == "" {
+			v.Syntax = syntax
+		}
+
+		// Skip built-in values ie: (<integer> has syntax "<integer>", which results in a loop when resolving)
+		if v.Syntax == v.Name {
+			log.Println("name == syntax, skipping as this is an built-in value: ", name)
+			return
+		}
+
+		// Not all values have the same syntax. It can change. We ignore this and get the latest one
+		if v.Syntax != "" && syntax != "" && v.Syntax != syntax {
+			log.Println("Different syntax for duplicated value", name)
+			log.Println("Old:", v.Syntax)
+			log.Println("New:", syntax)
+			//log.Panic("Syntax mismatch")
+		}
+
+		pd.Values[name] = v
+		return
+	}
+
+	// Values are always skipped
+	if type_ == "value" {
+		println("value type. Skipping: ", name)
+		return
+	}
+
+	// Skip <integer> = syntax("<integer>")
+	if syntax == name {
+		println("value==name. Skipping: ", name)
+		return
+	}
+
+	if syntax == "" {
+		log.Println("empty value/syntax: ", name)
+		return
+	}
+
+	pd.Values[name] = WebRefValue{
+		Name:   name,
+		Syntax: syntax,
+	}
+}
+
+func DecodeFileContent(content []byte, pd *ParseData) {
+	var fileData Data
+	if err := json.Unmarshal(content, &fileData); err != nil {
+		log.Panic(err)
+	}
+
+	for _, property := range fileData.Properties {
+		//log.Println("Processing property: ", property.Name)
+
+		for _, v := range property.Values {
+			ProcessValue(v.Name, v.Type, v.Syntax, pd)
+
+			ProcessExtraValues(v.Values, pd)
+		}
+
+		if p, ok := pd.Properties[property.Name]; ok {
+			if p.Syntax == "" {
+				p.Syntax = property.Syntax
+			} else if p.Syntax != property.Syntax && property.Syntax != "" {
+				log.Println("Different syntax for duplicated property", property.Name)
+				log.Println("Old:", p.Syntax)
+				log.Println("New:", property.Syntax)
+				//log.Panic("Syntax mismatch")
+			}
+
+			if p.NewSyntax != "" && p.Syntax != "" {
+				p.Syntax += " | " + p.NewSyntax
+				p.NewSyntax = ""
+			}
+
+			if property.NewSyntax != "" {
+				if p.Syntax != "" {
+					p.Syntax += " | " + property.NewSyntax
+				} else if p.NewSyntax != "" {
+					p.NewSyntax += " | " + property.NewSyntax
+				} else {
+					p.NewSyntax = property.NewSyntax
+				}
+			}
+
+			pd.Properties[p.Name] = p
+			continue
+		}
+
+		pd.Properties[property.Name] = property
+	}
+
+	ProcessExtraValues(fileData.Values, pd)
+
+	for _, atRule := range fileData.AtRules {
+		if a, ok := pd.AtRules[atRule.Name]; ok {
+			if a.Syntax == "" {
+				a.Syntax = atRule.Syntax
+			}
+
+			if a.Syntax != "" && atRule.Syntax != "" && a.Syntax != atRule.Syntax {
+				log.Println("Different syntax for duplicated at-rule", atRule.Name)
+				log.Println("Old:", a.Syntax)
+				log.Println("New:", atRule.Syntax)
+				//log.Panic("Syntax mismatch")
+			}
+
+			a.Values = append(a.Values, atRule.Values...)
+			a.Descriptors = append(a.Descriptors, atRule.Descriptors...)
+
+			pd.AtRules[a.Name] = a
+			continue
+		}
+		pd.AtRules[atRule.Name] = atRule
+	}
+
+	for _, selector := range fileData.Selectors {
+		pd.Selectors[selector.Name] = selector
+	}
+}
+
+func ProcessExtraValues(values []WebRefValue, pd *ParseData) {
+	for _, value := range values {
+		ProcessValue(value.Name, value.Type, value.Syntax, pd)
+		ProcessExtraValues(value.Values, pd)
+	}
+}
diff --git a/crates/gosub_taffy/src/style/parse_properties.rs b/crates/gosub_taffy/src/style/parse_properties.rs
index 2f92c0bdd..4105ff40f 100644
--- a/crates/gosub_taffy/src/style/parse_properties.rs
+++ b/crates/gosub_taffy/src/style/parse_properties.rs
@@ -3,6 +3,9 @@ use taffy::prelude::*;
 use taffy::{Overflow, Point};
 
 use gosub_render_backend::layout::{CssProperty, Node};
+use gosub_css3::stylesheet::CssValue;
+use gosub_render_backend::RenderBackend;
+use gosub_styling::render_tree::{RenderNodeData, RenderTreeNode};
 
 use crate::style::parse::{
     parse_align_c, parse_align_i, parse_dimension, parse_grid_auto, parse_grid_placement,
diff --git a/docs/css_properties.md b/docs/css_properties.md
new file mode 100644
index 000000000..ecb451c43
--- /dev/null
+++ b/docs/css_properties.md
@@ -0,0 +1,107 @@
+# CSS properties and parsing
+
+CSS is not easy.. It looks deceivingly simple from the outside, but there are a lot of things to consider when parsing 
+and calculating CSS properties. This document will explain how the CSS properties are parsed and calculated in the 
+engine. 
+
+First of all, we need to convert stylesheets (inline stylesheets, external stylesheets
+and even style attributes on elements) from a textual representation into a structured representation. This is done by
+parsing the CSS data into an Abstract Syntax Tree (AST). The AST is then converted into a `CSSStylesheet` structure that
+allows easy usage in the code later on.
+
+A `CssStylesheet` consists of a set of CSS rules, and some information about where this stylesheet is loaded from (is 
+it an external stylesheet, and if so, what is its url etc.).
+
+Css rules are contained in a list of `CssRule` structures. A rule has a list of selectors, and a list of declarations.
+The selectors are used to match elements in the HTML document, and the declarations are the actual CSS properties that
+are applied to the matched elements.
+
+The `CssSelector` itself consists of a list of `CssSelectorParts` structures, and a `CssDeclaration` consists of the 
+property name, the value as a `CssValue` struct and a boolean to represent if the importanct flag has been set on this 
+property (ie: `color: black !important`)
+
+
+## CSS Values
+When the engine deals with CSS properties, it will only handle `CSSValue` structures. It doesn't handle strings so 
+if there are strings they must be converted to `CSSValue` structures first.
+
+The `CSSValue` struct has some functions to parse strings or even AST nodes from stylesheets into a `CSSValue` struct.
+For this you can use the `parse_ast_node()` and `parse_str()` functions.
+
+There are many different CssValue types:
+
+```
+    None,
+    Color(RgbColor),
+    Number(f32),
+    Percentage(f32),
+    String(String),
+    Unit(f32, String),
+    Function(String, Vec<CssValue>),
+    List(Vec<CssValue>),
+    Initial,
+    Inherit,
+```
+
+The parser functions will parse any value to their correct type. Note that when there are multiple values in a property
+(ie: `border: 1px solid black`) the parser will return a `List` of `CssValue` structures.
+
+
+# Syntax checking
+At this point, we can convert a stylesheet to a rust structure. But this doesn't mean that the stylesheet is correct.
+For instance, the following will happily be parsed by the system:
+
+```
+    div {
+        color: thisisnotacolor;
+        border: 5%;
+        background-color: 10deg 20px solid;
+    }
+```
+
+So, in order to understand if a stylesheet is correct, we need to do some syntax checking. For this we need some 
+external help. Each CSS property has a list of possible values that it can accept. For instance, the `color` property
+can accept a color value, but also the `initial` and `inherit` values. A color value by itself can be a hex value, a
+rgb value, a hsl value, a keyword etc.
+
+With the help of the CSS specifications, we extracted all possible values for each CSS property and put them in a
+definition file. This file is used to check if a value is correct for a certain property. These possible values are 
+a language on its own, and we have a parser for this language that can parse a string into a structure that represents
+the syntax.
+
+This is done in the `syntax.rs` file and we use a nom parser to compile this language into a `CssSyntaxTree` structure.
+
+Specification of the "language" can be found at: https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax
+
+So for instance:
+
+```
+    <color> | transparent | currentcolor | <image>
+```
+
+means it a value can only match if its either be a color (a typedef), the word `transparent`, the word `currentcolor` 
+or an image (another typedef). These typedefs are also defined in the CSS specifications.
+
+### Typedefs
+The CSS specifications also define some typedefs. For instance, the `color` typedef is defined as:
+
+```
+    "<color>": "<color-base> | currentColor | <system-color> ",
+```
+
+where `color-base`, and `system-color` are again typedefs. The system resolves all typedefs when compiling a property 
+syntax.
+
+Browsing the CSS specifications for typedefs is no fun. Fortunately, there is a page
+https://www.w3.org/Style/CSS/all-properties.en.json that contains all CSS properties and where their syntax and 
+typedefs are defined. We have an external repository (https://github.com/gosub-browser/css-definition-generator) that
+parses this file and generates the `css_definitions.json` and `css_typedefs.json` files for us.
+
+
+ 
+
+
+
+
+
+