diff --git a/components/style/properties/helpers/animated_properties.mako.rs b/components/style/properties/helpers/animated_properties.mako.rs
index 7a34cc4ade4..d4a96e1f177 100644
--- a/components/style/properties/helpers/animated_properties.mako.rs
+++ b/components/style/properties/helpers/animated_properties.mako.rs
@@ -207,8 +207,8 @@ impl AnimatedProperty {
             % for prop in data.longhands:
             % if prop.animatable:
                 LonghandId::${prop.camel_case} => {
-                    let old_computed = old_style.get_${prop.style_struct.ident.strip("_")}().clone_${prop.ident}();
-                    let new_computed = new_style.get_${prop.style_struct.ident.strip("_")}().clone_${prop.ident}();
+                    let old_computed = old_style.clone_${prop.ident}();
+                    let new_computed = new_style.clone_${prop.ident}();
                     AnimatedProperty::${prop.camel_case}(
                     % if prop.is_animatable_with_computed_value:
                         old_computed,
@@ -546,15 +546,13 @@ impl AnimationValue {
     /// Get an AnimationValue for an AnimatableLonghand from a given computed values.
     pub fn from_computed_values(
         property: LonghandId,
-        computed_values: &ComputedValues
+        style: &ComputedValues,
     ) -> Option<Self> {
         Some(match property {
             % for prop in data.longhands:
             % if prop.animatable:
             LonghandId::${prop.camel_case} => {
-                let computed = computed_values
-                    .get_${prop.style_struct.ident.strip("_")}()
-                    .clone_${prop.ident}();
+                let computed = style.clone_${prop.ident}();
                 AnimationValue::${prop.camel_case}(
                 % if prop.is_animatable_with_computed_value:
                     computed
diff --git a/components/style/properties/properties.mako.rs b/components/style/properties/properties.mako.rs
index 3e51c1a6c71..11b7f8b0807 100644
--- a/components/style/properties/properties.mako.rs
+++ b/components/style/properties/properties.mako.rs
@@ -2615,6 +2615,22 @@ impl ComputedValues {
         self.custom_properties.as_ref()
     }
 
+% for prop in data.longhands:
+    /// Gets the computed value of a given property.
+    #[inline(always)]
+    #[allow(non_snake_case)]
+    pub fn clone_${prop.ident}(
+        &self,
+    ) -> longhands::${prop.ident}::computed_value::T {
+        self.get_${prop.style_struct.ident.strip("_")}()
+        % if prop.logical:
+            .clone_${prop.ident}(self.writing_mode)
+        % else:
+            .clone_${prop.ident}()
+        % endif
+    }
+% endfor
+
     /// Writes the value of the given longhand as a string in `dest`.
     ///
     /// Note that the value will usually be the computed value, except for
@@ -2635,20 +2651,10 @@ impl ComputedValues {
         match property_id {
             % for prop in data.longhands:
             LonghandId::${prop.camel_case} => {
-                let style_struct =
-                    self.get_${prop.style_struct.ident.strip("_")}();
-                let value =
-                    style_struct
-                    % if prop.logical:
-                    .clone_${prop.ident}(self.writing_mode);
-                    % else:
-                    .clone_${prop.ident}();
-                    % endif
-
+                let value = self.clone_${prop.ident}();
                 % if prop.predefined_type == "Color":
                 let value = self.resolve_color(value);
                 % endif
-
                 value.to_css(dest)
             }
             % endfor