From cc4243c9ea84487218fd283af9004f83d2a5242e Mon Sep 17 00:00:00 2001
From: Mateusz Krzeszowiak <mateusz.krzeszowiak@gmail.com>
Date: Fri, 27 Jan 2023 11:52:24 +0100
Subject: [PATCH] Remove async CSS pattern where it may introduce layout shifts

---
 sections/collage.liquid                      |  3 +--
 sections/collection-list.liquid              |  4 +---
 sections/featured-blog.liquid                | 12 +++---------
 sections/featured-collection.liquid          |  8 +++-----
 sections/footer.liquid                       | 16 +++++-----------
 sections/main-collection-product-grid.liquid |  2 +-
 sections/main-page.liquid                    |  4 +---
 sections/main-product.liquid                 |  2 +-
 sections/multicolumn.liquid                  |  4 +---
 sections/page.liquid                         |  4 +---
 sections/related-products.liquid             | 11 +++--------
 sections/rich-text.liquid                    |  4 +---
 snippets/pagination.liquid                   |  3 +--
 13 files changed, 23 insertions(+), 54 deletions(-)

diff --git a/sections/collage.liquid b/sections/collage.liquid
index 50b51698f76..65019957952 100644
--- a/sections/collage.liquid
+++ b/sections/collage.liquid
@@ -2,6 +2,7 @@
 {{ 'component-card.css' | asset_url | stylesheet_tag }}
 {{ 'component-price.css' | asset_url | stylesheet_tag }}
 {{ 'component-modal-video.css' | asset_url | stylesheet_tag }}
+{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
 
 {%- style -%}
   .section-{{ section.id }}-padding {
@@ -17,8 +18,6 @@
   }
 {%- endstyle -%}
 
-<link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}" media="print" onload="this.media='all'">
-
 <div class="color-{{ section.settings.color_scheme }} gradient isolate">
   <div class="page-width{% if section.settings.heading == blank %} no-heading{% endif %} section-{{ section.id }}-padding">
     <h2 class="collage-wrapper-title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.heading }}</h2>
diff --git a/sections/collection-list.liquid b/sections/collection-list.liquid
index cd44e8fa40a..6ffc166e553 100644
--- a/sections/collection-list.liquid
+++ b/sections/collection-list.liquid
@@ -1,8 +1,6 @@
 {{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
 {{ 'component-card.css' | asset_url | stylesheet_tag }}
-
-<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
-<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
+{{ 'component-slider.css' | asset_url | stylesheet_tag }}
 
 {%- style -%}
   .section-{{ section.id }}-padding {
diff --git a/sections/featured-blog.liquid b/sections/featured-blog.liquid
index 37172f585cf..aa42798a565 100644
--- a/sections/featured-blog.liquid
+++ b/sections/featured-blog.liquid
@@ -1,12 +1,6 @@
-<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
-<link rel="stylesheet" href="{{ 'component-card.css' | asset_url }}" media="print" onload="this.media='all'">
-<link rel="stylesheet" href="{{ 'component-article-card.css' | asset_url }}" media="print" onload="this.media='all'">
-<link rel="stylesheet" href="{{ 'section-featured-blog.css' | asset_url }}" media="print" onload="this.media='all'">
-
-<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
-<noscript>{{ 'component-card.css' | asset_url | stylesheet_tag }}</noscript>
-<noscript>{{ 'component-article-card.css' | asset_url | stylesheet_tag }}</noscript>
-
+{{ 'component-slider.css' | asset_url | stylesheet_tag }}
+{{ 'component-card.css' | asset_url | stylesheet_tag }}
+{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
 {{ 'section-featured-blog.css' | asset_url | stylesheet_tag }}
 
 {%- style -%}
diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid
index dc1dffc8ab3..c474b960619 100644
--- a/sections/featured-collection.liquid
+++ b/sections/featured-collection.liquid
@@ -1,15 +1,13 @@
 {{ 'component-card.css' | asset_url | stylesheet_tag }}
 {{ 'component-price.css' | asset_url | stylesheet_tag }}
 
-<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
-<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">
+{{ 'component-slider.css' | asset_url | stylesheet_tag }}
+{{ 'template-collection.css' | asset_url | stylesheet_tag }}
 {%- if section.settings.enable_quick_add -%}
-  <link rel="stylesheet" href="{{ 'quick-add.css' | asset_url }}" media="print" onload="this.media='all'">
+  {{ 'quick-add.css' | asset_url | stylesheet_tag }}
   <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
   <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
 {%- endif -%}
-<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
-<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>
 
 {%- style -%}
   .section-{{ section.id }}-padding {
diff --git a/sections/footer.liquid b/sections/footer.liquid
index 5126e05fe25..e574b741b0c 100644
--- a/sections/footer.liquid
+++ b/sections/footer.liquid
@@ -1,16 +1,10 @@
 {% comment %}theme-check-disable UndefinedObject{% endcomment %}
 {{ 'section-footer.css' | asset_url | stylesheet_tag }}
-<link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
-<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
-<link rel="stylesheet" href="{{ 'component-list-payment.css' | asset_url }}" media="print" onload="this.media='all'">
-<link rel="stylesheet" href="{{ 'component-list-social.css' | asset_url }}" media="print" onload="this.media='all'">
-<link rel="stylesheet" href="{{ 'disclosure.css' | asset_url }}" media="print" onload="this.media='all'">
-
-<noscript>{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}</noscript>
-<noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
-<noscript>{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}</noscript>
-<noscript>{{ 'component-list-social.css' | asset_url | stylesheet_tag }}</noscript>
-<noscript>{{ 'disclosure.css' | asset_url | stylesheet_tag }}</noscript>
+{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
+{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}
+{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}
+{{ 'component-list-social.css' | asset_url | stylesheet_tag }}
+{{ 'disclosure.css' | asset_url | stylesheet_tag }}
 
 {%- style -%}
   .footer {
diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
index 6d8d1b35d1b..3aeab51ef7c 100644
--- a/sections/main-collection-product-grid.liquid
+++ b/sections/main-collection-product-grid.liquid
@@ -4,7 +4,7 @@
 {{ 'component-price.css' | asset_url | stylesheet_tag }}
 
 {%- if section.settings.enable_quick_add -%}
-  <link rel="stylesheet" href="{{ 'quick-add.css' | asset_url }}" media="print" onload="this.media='all'">
+  {{ 'quick-add.css' | asset_url | stylesheet_tag }}
   <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
   <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
 {%- endif -%}
diff --git a/sections/main-page.liquid b/sections/main-page.liquid
index abba1d4ab2e..d4b8101e674 100644
--- a/sections/main-page.liquid
+++ b/sections/main-page.liquid
@@ -1,6 +1,4 @@
-<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'">
-
-<noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
+{{ 'section-main-page.css' | asset_url | stylesheet_tag }}
 
 {%- style -%}
   .section-{{ section.id }}-padding {
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index d4f9a3c6e85..eb5ccebb4e1 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -424,7 +424,7 @@
                 {{ 'component-card.css' | asset_url | stylesheet_tag }}
                 {{ 'component-complementary-products.css' | asset_url | stylesheet_tag }}
                 {%- if block.settings.enable_quick_add -%}
-                  <link rel="stylesheet" href="{{ 'quick-add.css' | asset_url }}" media="print" onload="this.media='all'">
+                  {{ 'quick-add.css' | asset_url | stylesheet_tag }}
                   <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
                 {%- endif -%}
               </product-recommendations>
diff --git a/sections/multicolumn.liquid b/sections/multicolumn.liquid
index b24f17e33c7..1ce3c215ce4 100644
--- a/sections/multicolumn.liquid
+++ b/sections/multicolumn.liquid
@@ -1,7 +1,5 @@
 {{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
-
-<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
-<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
+{{ 'component-slider.css' | asset_url | stylesheet_tag }}
 
 {%- style -%}
   .section-{{ section.id }}-padding {
diff --git a/sections/page.liquid b/sections/page.liquid
index b18c2b34c8c..a4e79490ac8 100644
--- a/sections/page.liquid
+++ b/sections/page.liquid
@@ -1,6 +1,4 @@
-<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'">
-
-<noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
+{{ 'section-main-page.css' | asset_url | stylesheet_tag }}
 
 {%- style -%}
   .section-{{ section.id }}-padding {
diff --git a/sections/related-products.liquid b/sections/related-products.liquid
index 00c0d00a367..c97a527bb9c 100644
--- a/sections/related-products.liquid
+++ b/sections/related-products.liquid
@@ -1,11 +1,6 @@
-<link rel="stylesheet" href="{{ 'component-card.css' | asset_url }}" media="print" onload="this.media='all'">
-<link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}" media="print" onload="this.media='all'">
-<link
-  rel="stylesheet"
-  href="{{ 'section-related-products.css' | asset_url }}"
-  media="print"
-  onload="this.media='all'"
->
+{{ 'component-card.css' | asset_url | stylesheet_tag }}
+{{ 'component-price.css' | asset_url | stylesheet_tag }}
+{{ 'section-related-products.css' | asset_url | stylesheet_tag }}
 
 {%- style -%}
   .section-{{ section.id }}-padding {
diff --git a/sections/rich-text.liquid b/sections/rich-text.liquid
index f49bdc19bc1..4176ac60da6 100644
--- a/sections/rich-text.liquid
+++ b/sections/rich-text.liquid
@@ -1,6 +1,4 @@
-<link rel="stylesheet" href="{{ 'section-rich-text.css' | asset_url }}" media="print" onload="this.media='all'">
-
-<noscript>{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}</noscript>
+{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}
 
 {%- style -%}
   .section-{{ section.id }}-padding {
diff --git a/snippets/pagination.liquid b/snippets/pagination.liquid
index 431d0ad1d91..e5634f87cf4 100644
--- a/snippets/pagination.liquid
+++ b/snippets/pagination.liquid
@@ -11,8 +11,7 @@
   - anchor: {String} (optional) This can be added so that on page reload it takes you to wherever you've placed your anchor tag.
 {% endcomment %}
 
-<link rel="stylesheet" href="{{ 'component-pagination.css' | asset_url }}" media="print" onload="this.media='all'">
-<noscript>{{ 'component-pagination.css' | asset_url | stylesheet_tag }}</noscript>
+{{ 'component-pagination.css' | asset_url | stylesheet_tag }}
 
 {%- if paginate.parts.size > 0 -%}
   <div class="pagination-wrapper">