diff --git a/layout/style/nsCSSRuleProcessor.cpp b/layout/style/nsCSSRuleProcessor.cpp
index ebae46cd70..974284d501 100644
--- a/layout/style/nsCSSRuleProcessor.cpp
+++ b/layout/style/nsCSSRuleProcessor.cpp
@@ -16,6 +16,7 @@
 #include "PLDHashTable.h"
 #include "nsICSSPseudoComparator.h"
 #include "mozilla/MemoryReporting.h"
+#include "mozilla/css/ImportRule.h"
 #include "mozilla/css/StyleRule.h"
 #include "mozilla/css/GroupRule.h"
 #include "nsIDocument.h"
@@ -649,6 +650,12 @@ CascadeRuleEnumFunc(css::Rule* aRule, void* aData)
     if (!layer->mData->mCounterStyleRules.AppendElement(counterStyleRule)) {
       return false;
     }
+  } else if (css::Rule::IMPORT_RULE == type &&
+             nsCSSRuleUtils::LoadImportedSheetsInOrderEnabled()) {
+    css::ImportRule* importRule = static_cast<css::ImportRule*>(aRule);
+    nsCSSRuleProcessor::CascadeSheet(
+      importRule->GetStyleSheet()->AsConcrete(),
+      layer);
   }
   return true;
 }
@@ -660,10 +667,12 @@ nsCSSRuleProcessor::CascadeSheet(CSSStyleSheet* aSheet, CascadeLayer* aLayer)
       aSheet->UseForPresentation(aLayer->mPresContext,
                                  aLayer->mCacheKey) &&
       aSheet->mInner) {
-    CSSStyleSheet* child = aSheet->mInner->mFirstChild;
-    while (child) {
-      CascadeSheet(child, aLayer);
-      child = child->mNext;
+    if (!nsCSSRuleUtils::LoadImportedSheetsInOrderEnabled()) {
+      CSSStyleSheet* child = aSheet->mInner->mFirstChild;
+      while (child) {
+        CascadeSheet(child, aLayer);
+        child = child->mNext;
+      }
     }
 
     if (!aSheet->mInner->mOrderedRules.EnumerateForwards(CascadeRuleEnumFunc,
diff --git a/layout/style/nsCSSRuleUtils.cpp b/layout/style/nsCSSRuleUtils.cpp
index 996e1f5223..9717e42cb3 100644
--- a/layout/style/nsCSSRuleUtils.cpp
+++ b/layout/style/nsCSSRuleUtils.cpp
@@ -19,6 +19,7 @@ using namespace mozilla::dom;
 #define VISITED_PSEUDO_PREF "layout.css.visited_links_enabled"
 
 static bool gSupportVisitedPseudo = true;
+static bool gLoadImportedSheetsInOrder = true;
 
 static nsTArray<nsCOMPtr<nsIAtom>>* sSystemMetrics = 0;
 
@@ -31,6 +32,9 @@ nsCSSRuleUtils::Startup()
 {
   Preferences::AddBoolVarCache(
     &gSupportVisitedPseudo, VISITED_PSEUDO_PREF, true);
+  Preferences::AddBoolVarCache(&gLoadImportedSheetsInOrder,
+                               "layout.css.load-imported-sheets-in-order",
+                               true);
 }
 
 static bool
@@ -206,6 +210,12 @@ nsCSSRuleUtils::HasSystemMetric(nsIAtom* aMetric)
   return sSystemMetrics->IndexOf(aMetric) != sSystemMetrics->NoIndex;
 }
 
+/* static */ bool
+nsCSSRuleUtils::LoadImportedSheetsInOrderEnabled()
+{
+  return gLoadImportedSheetsInOrder;
+}
+
 #ifdef XP_WIN
 /* static */ uint8_t
 nsCSSRuleUtils::GetWindowsThemeIdentifier()
diff --git a/layout/style/nsCSSRuleUtils.h b/layout/style/nsCSSRuleUtils.h
index f1dff880bd..016159a8d1 100644
--- a/layout/style/nsCSSRuleUtils.h
+++ b/layout/style/nsCSSRuleUtils.h
@@ -27,6 +27,8 @@ struct nsCSSRuleUtils
   static void FreeSystemMetrics();
   static bool HasSystemMetric(nsIAtom* aMetric);
 
+  static bool LoadImportedSheetsInOrderEnabled();
+
 #ifdef XP_WIN
   // Cached theme identifier for the moz-windows-theme media query.
   static uint8_t GetWindowsThemeIdentifier();
diff --git a/modules/libpref/init/all.js b/modules/libpref/init/all.js
index aa9ec326a4..cbffe84c23 100644
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -2704,6 +2704,12 @@ pref("layout.css.resizeobserver.enabled", true);
 // Is support for cascade layers enabled?
 pref("layout.css.cascade-layers.enabled", true);
 
+// Should rules in imported style sheets be added based on the order
+// of appearance of their respective @import rules in the parent
+// style sheet? Otherwise, they are added before rules preceding
+// @import are processed, which is problematic for cascade layers.
+pref("layout.css.load-imported-sheets-in-order", true);
+
 // pref for which side vertical scrollbars should be on
 // 0 = end-side in UI direction
 // 1 = end-side in document/content direction