LibWeb/CSS: Add tokenize() method to style values, to get a list of CVs

A couple of arbitrary substitution functions require us to get or
produce some style value, and then substitute its ComponentValues into
the original ComponentValue list. So this commit gives CSSStyleValue a
tokenize() method that does so.

Apart from a couple of unusual cases like the guaranteed-invalid value,
style values can all be converted into ComponentValues by serializing
them as a string, and then parsing that as a list of component values.
That feels unnecessarily inefficient in most cases though, so I've
implemented faster overrides for a lot of the basic style value
classes, but left that serialize-and-reparse method as the fallback.

Libraries/LibWeb/CSS/CSSStyleValue.cpp

@@ -11,6 +11,7 @@
 #include <LibGfx/Font/FontStyleMapping.h>
 #include <LibGfx/Font/FontWeight.h>
 #include <LibWeb/CSS/CSSStyleValue.h>
+#include <LibWeb/CSS/Parser/Parser.h>
 #include <LibWeb/CSS/StyleValues/AbstractImageStyleValue.h>
 #include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BackgroundRepeatStyleValue.h>
@@ -428,6 +429,13 @@ bool CSSStyleValue::has_auto() const
     return is_keyword() && as_keyword().keyword() == Keyword::Auto;
 }
 
+Vector<Parser::ComponentValue> CSSStyleValue::tokenize() const
+{
+    // This is an inefficient way of producing ComponentValues, but it's guaranteed to work for types that round-trip.
+    // FIXME: Implement better versions in the subclasses.
+    return Parser::Parser::create(Parser::ParsingParams {}, to_string(SerializationMode::Normal)).parse_as_list_of_component_values();
+}
+
 int CSSStyleValue::to_font_weight() const
 {
     if (is_keyword()) {

Libraries/LibWeb/CSS/CSSStyleValue.h

@@ -397,6 +397,7 @@ public:
     Keyword to_keyword() const;
 
     virtual String to_string(SerializationMode) const = 0;
+    virtual Vector<Parser::ComponentValue> tokenize() const;
 
     [[nodiscard]] int to_font_weight() const;
     [[nodiscard]] int to_font_slope() const;

Libraries/LibWeb/CSS/StyleValues/CSSKeywordValue.cpp

@@ -1,7 +1,7 @@
 /*
  * Copyright (c) 2018-2020, Andreas Kling <andreas@ladybird.org>
  * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
- * Copyright (c) 2021-2024, Sam Atkins <sam@ladybird.org>
+ * Copyright (c) 2021-2025, Sam Atkins <sam@ladybird.org>
  * Copyright (c) 2022-2023, MacDue <macdue@dueutil.tech>
  *
  * SPDX-License-Identifier: BSD-2-Clause
@@ -349,4 +349,9 @@ Optional<Color> CSSKeywordValue::to_color(Optional<Layout::NodeWithStyle const&>
     }
 }
 
+Vector<Parser::ComponentValue> CSSKeywordValue::tokenize() const
+{
+    return { Parser::Token::create_ident(FlyString::from_utf8_without_validation(string_from_keyword(m_keyword).bytes())) };
+}
+
 }

Libraries/LibWeb/CSS/StyleValues/CSSKeywordValue.h

@@ -1,7 +1,7 @@
 /*
  * Copyright (c) 2018-2020, Andreas Kling <andreas@ladybird.org>
  * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
- * Copyright (c) 2021-2024, Sam Atkins <sam@ladybird.org>
+ * Copyright (c) 2021-2025, Sam Atkins <sam@ladybird.org>
  * Copyright (c) 2022-2023, MacDue <macdue@dueutil.tech>
  *
  * SPDX-License-Identifier: BSD-2-Clause
@@ -53,6 +53,7 @@ public:
     virtual bool has_color() const override;
     virtual Optional<Color> to_color(Optional<Layout::NodeWithStyle const&> node, CalculationResolutionContext const&) const override;
     virtual String to_string(SerializationMode) const override;
+    virtual Vector<Parser::ComponentValue> tokenize() const override;
 
     bool properties_equal(CSSKeywordValue const& other) const { return m_keyword == other.m_keyword; }
 

Libraries/LibWeb/CSS/StyleValues/CSSUnitValue.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2024, Sam Atkins <sam@ladybird.org>
+ * Copyright (c) 2024-2025, Sam Atkins <sam@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -7,6 +7,8 @@
 #pragma once
 
 #include <AK/FlyString.h>
+#include <LibWeb/CSS/Parser/ComponentValue.h>
+#include <LibWeb/CSS/Parser/Token.h>
 #include <LibWeb/CSS/StyleValues/CSSNumericValue.h>
 
 namespace Web::CSS {
@@ -18,6 +20,10 @@ public:
 
     virtual double value() const = 0;
     virtual StringView unit() const = 0;
+    virtual Vector<Parser::ComponentValue> tokenize() const override
+    {
+        return { Parser::Token::create_dimension(value(), FlyString::from_utf8_without_validation(unit().bytes())) };
+    }
 
 protected:
     explicit CSSUnitValue(Type type)

Libraries/LibWeb/CSS/StyleValues/CustomIdentStyleValue.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2023-2025, Sam Atkins <sam@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -8,6 +8,7 @@
 
 #include <AK/FlyString.h>
 #include <LibWeb/CSS/CSSStyleValue.h>
+#include <LibWeb/CSS/Parser/ComponentValue.h>
 
 namespace Web::CSS {
 
@@ -23,6 +24,10 @@ public:
     FlyString const& custom_ident() const { return m_custom_ident; }
 
     virtual String to_string(SerializationMode) const override { return m_custom_ident.to_string(); }
+    virtual Vector<Parser::ComponentValue> tokenize() const override
+    {
+        return { Parser::Token::create_ident(m_custom_ident) };
+    }
 
     bool properties_equal(CustomIdentStyleValue const& other) const { return m_custom_ident == other.m_custom_ident; }
 

Libraries/LibWeb/CSS/StyleValues/GuaranteedInvalidStyleValue.h

@@ -20,6 +20,10 @@ public:
     }
     virtual ~GuaranteedInvalidStyleValue() override = default;
     virtual String to_string(SerializationMode) const override { return {}; }
+    virtual Vector<Parser::ComponentValue> tokenize() const override
+    {
+        return { Parser::ComponentValue { Parser::GuaranteedInvalidValue {} } };
+    }
 
     bool properties_equal(GuaranteedInvalidStyleValue const&) const { return true; }
 

Libraries/LibWeb/CSS/StyleValues/IntegerStyleValue.cpp

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2023-2025, Sam Atkins <sam@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -13,4 +13,9 @@ String IntegerStyleValue::to_string(SerializationMode) const
     return String::number(m_value);
 }
 
+Vector<Parser::ComponentValue> IntegerStyleValue::tokenize() const
+{
+    return { Parser::Token::create_number(Number { Number::Type::Integer, value() }) };
+}
+
 }

Libraries/LibWeb/CSS/StyleValues/IntegerStyleValue.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023-2024, Sam Atkins <sam@ladybird.org>
+ * Copyright (c) 2023-2025, Sam Atkins <sam@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -22,6 +22,7 @@ public:
     virtual StringView unit() const override { return "number"sv; }
 
     virtual String to_string(SerializationMode) const override;
+    virtual Vector<Parser::ComponentValue> tokenize() const override;
 
     bool equals(CSSStyleValue const& other) const override
     {

Libraries/LibWeb/CSS/StyleValues/NumberStyleValue.cpp

@@ -1,7 +1,7 @@
 /*
  * Copyright (c) 2018-2020, Andreas Kling <andreas@ladybird.org>
  * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
- * Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2021-2025, Sam Atkins <sam@ladybird.org>
  * Copyright (c) 2022-2023, MacDue <macdue@dueutil.tech>
  *
  * SPDX-License-Identifier: BSD-2-Clause
@@ -16,4 +16,9 @@ String NumberStyleValue::to_string(SerializationMode) const
     return String::number(m_value);
 }
 
+Vector<Parser::ComponentValue> NumberStyleValue::tokenize() const
+{
+    return { Parser::Token::create_number(Number { Number::Type::Number, m_value }) };
+}
+
 }

Libraries/LibWeb/CSS/StyleValues/NumberStyleValue.h

@@ -1,7 +1,7 @@
 /*
  * Copyright (c) 2018-2020, Andreas Kling <andreas@ladybird.org>
  * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
- * Copyright (c) 2021-2024, Sam Atkins <sam@ladybird.org>
+ * Copyright (c) 2021-2025, Sam Atkins <sam@ladybird.org>
  * Copyright (c) 2022-2023, MacDue <macdue@dueutil.tech>
  *
  * SPDX-License-Identifier: BSD-2-Clause
@@ -25,6 +25,7 @@ public:
     virtual StringView unit() const override { return "number"sv; }
 
     virtual String to_string(SerializationMode) const override;
+    virtual Vector<Parser::ComponentValue> tokenize() const override;
 
     bool equals(CSSStyleValue const& other) const override
     {

Libraries/LibWeb/CSS/StyleValues/PendingSubstitutionStyleValue.h

@@ -20,6 +20,11 @@ public:
     }
     virtual ~PendingSubstitutionStyleValue() override = default;
     virtual String to_string(SerializationMode) const override { return {}; }
+    virtual Vector<Parser::ComponentValue> tokenize() const override
+    {
+        // Not sure what to do here, but this isn't valid so returning GIV seems the most correct.
+        return { Parser::ComponentValue { Parser::GuaranteedInvalidValue {} } };
+    }
 
     // We shouldn't need to compare these, but in case we do: The nature of them is that their value is unknown, so
     // consider them all to be unique.

Libraries/LibWeb/CSS/StyleValues/RatioStyleValue.h

@@ -23,6 +23,16 @@ public:
     Ratio& ratio() { return m_ratio; }
 
     virtual String to_string(SerializationMode) const override { return m_ratio.to_string(); }
+    Vector<Parser::ComponentValue> tokenize() const override
+    {
+        return {
+            Parser::Token::create_number(Number { Number::Type::Number, m_ratio.numerator() }),
+            Parser::Token::create_whitespace(" "_string),
+            Parser::Token::create_delim('/'),
+            Parser::Token::create_whitespace(" "_string),
+            Parser::Token::create_number(Number { Number::Type::Number, m_ratio.denominator() }),
+        };
+    }
 
     bool properties_equal(RatioStyleValue const& other) const { return m_ratio == other.m_ratio; }
 

Libraries/LibWeb/CSS/StyleValues/StringStyleValue.h

@@ -22,6 +22,10 @@ public:
 
     FlyString const& string_value() const { return m_string; }
     virtual String to_string(SerializationMode) const override { return serialize_a_string(m_string); }
+    virtual Vector<Parser::ComponentValue> tokenize() const override
+    {
+        return { Parser::Token::create_string(m_string) };
+    }
 
     bool properties_equal(StringStyleValue const& other) const { return m_string == other.m_string; }
 

Libraries/LibWeb/CSS/StyleValues/StyleValueList.cpp

@@ -8,6 +8,7 @@
  */
 
 #include "StyleValueList.h"
+#include <LibWeb/CSS/Parser/ComponentValue.h>
 
 namespace Web::CSS {
 
@@ -46,4 +47,22 @@ void StyleValueList::set_style_sheet(GC::Ptr<CSSStyleSheet> style_sheet)
         const_cast<CSSStyleValue&>(*value).set_style_sheet(style_sheet);
 }
 
+Vector<Parser::ComponentValue> StyleValueList::tokenize() const
+{
+    Vector<Parser::ComponentValue> component_values;
+    bool first = true;
+    for (auto const& value : m_properties.values) {
+        if (first) {
+            first = false;
+        } else {
+            if (m_properties.separator == Separator::Comma)
+                component_values.empend(Parser::Token::create(Parser::Token::Type::Comma));
+            component_values.empend(Parser::Token::create_whitespace(" "_string));
+        }
+        component_values.extend(value->tokenize());
+    }
+
+    return component_values;
+}
+
 }

Libraries/LibWeb/CSS/StyleValues/StyleValueList.h

@@ -34,6 +34,7 @@ public:
     }
 
     virtual String to_string(SerializationMode) const override;
+    virtual Vector<Parser::ComponentValue> tokenize() const override;
 
     bool properties_equal(StyleValueList const& other) const { return m_properties == other.m_properties; }
 

Libraries/LibWeb/CSS/StyleValues/UnresolvedStyleValue.h

@@ -24,6 +24,7 @@ public:
     virtual ~UnresolvedStyleValue() override = default;
 
     virtual String to_string(SerializationMode) const override;
+    virtual Vector<Parser::ComponentValue> tokenize() const override { return m_values; }
 
     Vector<Parser::ComponentValue> const& values() const { return m_values; }
     bool contains_arbitrary_substitution_function() const { return m_contains_arbitrary_substitution_function; }