diff --git a/pkg/web_css/lib/src/_base.scss b/pkg/web_css/lib/src/_base.scss
index 3145680807..831b7b8c2d 100644
--- a/pkg/web_css/lib/src/_base.scss
+++ b/pkg/web_css/lib/src/_base.scss
@@ -5,6 +5,9 @@
 /******************************************************
   site base
 ******************************************************/
+
+@use 'variables';
+
 * {
   box-sizing: border-box;
 }
@@ -113,7 +116,7 @@ main {
 /* Useful for synchronizing the alignment of different page blocks. */
 .container,
 .-wide-header-detail-page .detail-container {
-  max-width: $site-max-width;
+  max-width: variables.$site-max-width;
   /* The top and bottom margins are left on default to allow `main` to set it. */
   margin-left: auto;
   margin-right: auto;
@@ -219,7 +222,7 @@ pre {
     box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.05);
 
     white-space: nowrap;
-    transition: opacity $copy-feedback-transition-opacity-delay;
+    transition: opacity variables.$copy-feedback-transition-opacity-delay;
 
     &.visible {
       display: block;
diff --git a/pkg/web_css/lib/src/_detail_page.scss b/pkg/web_css/lib/src/_detail_page.scss
index a91a71993c..236e6ae677 100644
--- a/pkg/web_css/lib/src/_detail_page.scss
+++ b/pkg/web_css/lib/src/_detail_page.scss
@@ -2,6 +2,8 @@
    for details. All rights reserved. Use of this source code is governed by a
    BSD-style license that can be found in the LICENSE file. */
 
+@use 'variables';
+
 $info-box-width: 190px;
 $info-box-margin:        120px;
 $info-box-tablet-margin:  40px;
@@ -19,7 +21,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
 
   .detail-header {
     // On desktop this will make the wide header block to be centered.
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       display: flex;
     }
   }
@@ -34,7 +36,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
   }
 
   .detail-info-box {
-    @media (max-width: $device-mobile-max-width) {
+    @media (max-width: variables.$device-mobile-max-width) {
       display: none;
     }
   }
@@ -51,7 +53,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
   top: 0px;
   right: 0px;
 
-  @media (min-width: $device-desktop-min-width) {
+  @media (min-width: variables.$device-desktop-min-width) {
     width: $info-box-width + 10px;
   }
 
@@ -60,7 +62,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
   }
 
   .ff-banner-desktop {
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       display: inline-block;
       width: 75px;
       height: 109px;
@@ -68,7 +70,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
   }
 
   .ff-banner-mobile {
-    @media (max-width: $device-mobile-max-width) {
+    @media (max-width: variables.$device-mobile-max-width) {
       display: inline-block;
       width: 47px;
       height: 58px;
@@ -84,7 +86,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
     margin: 0;
     font-size: 24px;
 
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       font-size: 36px;
     }
   }
@@ -102,7 +104,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
   display: none;
   margin-top: 16px;
 
-  @media (max-width: $device-mobile-max-width) {
+  @media (max-width: variables.$device-mobile-max-width) {
     display: block;
   }
 
@@ -139,7 +141,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
     max-width: 200px;
     max-height: 200px;
 
-    @media (max-width: $device-mobile-max-width) {
+    @media (max-width: variables.$device-mobile-max-width) {
       max-width: 100px;
       max-height: 100px;
     }
@@ -153,7 +155,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
     display: flex;
     align-items: center;
 
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       display: inline-flex;
       margin-right: 16px;
     }
@@ -234,7 +236,6 @@ $detail-tabs-tablet-width: calc(100% - 240px);
   filter: brightness(50%);
 }
 
-
 .weekly-downloads-sparkline {
   display: flex;
   height: 105px;
@@ -284,7 +285,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
   stroke-width: 2;
 }
 
-@media (min-width: $device-desktop-min-width) {
+@media (min-width: variables.$device-desktop-min-width) {
   .detail-body {
 
     >.detail-tabs {
@@ -296,7 +297,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
       margin-left: $info-box-margin;
       width: $info-box-width;
 
-      @media (max-width: $device-tablet-max-width) {
+      @media (max-width: variables.$device-tablet-max-width) {
         margin-left: $info-box-tablet-margin;
       }
     }
@@ -308,7 +309,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
       display: inline-block;
       width: $detail-tabs-width;
 
-      @media (max-width: $device-tablet-max-width) {
+      @media (max-width: variables.$device-tablet-max-width) {
         width: $detail-tabs-tablet-width;
       }
     }
diff --git a/pkg/web_css/lib/src/_home.scss b/pkg/web_css/lib/src/_home.scss
index 8b70c070b7..8f9e8a9f9d 100644
--- a/pkg/web_css/lib/src/_home.scss
+++ b/pkg/web_css/lib/src/_home.scss
@@ -6,6 +6,8 @@
   home page
 ******************************************************/
 
+@use 'variables';
+
 .home-banner {
   text-align: center;
   padding: 30px 20px 0px 20px;
@@ -16,7 +18,7 @@
     max-height: 70px;
     margin-bottom: 28px;
 
-    @media (max-width: $device-mobile-max-width) {
+    @media (max-width: variables.$device-mobile-max-width) {
       max-width: 188px;
       max-height: 40px;
       margin-bottom: 22px;
@@ -115,7 +117,7 @@
       background: var(--pub-neutral-hover-bgColor);
       box-shadow: 0px 4px 9px 0px var(--pub-home_card_hover-box_shadow-color);
 
-      @media (min-width: $device-desktop-min-width) {
+      @media (min-width: variables.$device-desktop-min-width) {
         .mini-list-item-body {
           &:before {
             background: linear-gradient(transparent 90%, var(--pub-neutral-hover-bgColor));
@@ -166,7 +168,7 @@
     text-align: right;
     padding-right: 8px;
 
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       margin-right: 16px;
     }
   }
@@ -177,7 +179,7 @@
     text-transform: uppercase;
   }
 
-  @media (min-width: $device-desktop-min-width) {
+  @media (min-width: variables.$device-desktop-min-width) {
     .mini-list {
       display: flex;
       flex-wrap: wrap;
@@ -215,7 +217,7 @@
     }
   }
 
-  @media (min-width: $device-desktop-min-width) {
+  @media (min-width: variables.$device-desktop-min-width) {
     &.home-block-ff,
     &.home-block-pow {
       .home-block-content {
@@ -282,7 +284,7 @@
   padding: 4px;
   margin: -3px -3px 10px -3px;
 
-  @media (min-width: $device-desktop-min-width) {
+  @media (min-width: variables.$device-desktop-min-width) {
     display: flex;
   }
 
@@ -302,7 +304,7 @@
   .pow-video-thumbnail {
     height: auto;
     width: 100%;
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       max-width: 260px;
       max-height: 195px;
     }
diff --git a/pkg/web_css/lib/src/_list.scss b/pkg/web_css/lib/src/_list.scss
index 01bc4be4fe..77474cbdd9 100644
--- a/pkg/web_css/lib/src/_list.scss
+++ b/pkg/web_css/lib/src/_list.scss
@@ -2,6 +2,8 @@
    for details. All rights reserved. Use of this source code is governed by a
    BSD-style license that can be found in the LICENSE file. */
 
+@use 'variables';
+
 .listing-info {
   display: flex;
   padding: 16px 0px 20px 0px;
@@ -29,7 +31,7 @@
       text-transform: uppercase;
       white-space: nowrap;
 
-      @media (max-width: $device-mobile-max-width) {
+      @media (max-width: variables.$device-mobile-max-width) {
         display: none;
       }
     }
@@ -60,7 +62,7 @@
     position: absolute;
     right: 0px;
     white-space: nowrap;
-    z-index: $z-index-nav-mask;
+    z-index: variables.$z-index-nav-mask;
 
     .sort-control-option {
       display: block;
@@ -92,7 +94,7 @@
 
   &:hover {
     .sort-control-popup {
-      @media (min-width: $device-desktop-min-width) {
+      @media (min-width: variables.$device-desktop-min-width) {
         display: block;
       }
     }
@@ -303,7 +305,7 @@
       padding: 0;
       margin: 8px 0;
 
-      @media (min-width: $device-desktop-min-width) {
+      @media (min-width: variables.$device-desktop-min-width) {
         padding: 4px 8px;
         margin-left: -8px;
       }
@@ -376,7 +378,7 @@
 .search-form-container {
   display: flex;
 
-  @media (max-width: $device-mobile-max-width) {
+  @media (max-width: variables.$device-mobile-max-width) {
     display: block;
 
     .search-form {
@@ -395,7 +397,7 @@
     flex-shrink: 0;
     flex-basis: 200px;
 
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       margin-right: 40px;
     }
   }
diff --git a/pkg/web_css/lib/src/_pkg.scss b/pkg/web_css/lib/src/_pkg.scss
index 1a5a3aa0de..d9e2d8e387 100644
--- a/pkg/web_css/lib/src/_pkg.scss
+++ b/pkg/web_css/lib/src/_pkg.scss
@@ -2,6 +2,8 @@
    for details. All rights reserved. Use of this source code is governed by a
    BSD-style license that can be found in the LICENSE file. */
 
+@use 'variables';
+
 .package-badge {
   display: inline-block;
   background: var(--pub-neutral-bgColor);
@@ -57,7 +59,7 @@
     &.badge {
       width: 100px;
 
-      @media (max-width: $device-mobile-max-width) {
+      @media (max-width: variables.$device-mobile-max-width) {
         display: none;
       }
     }
@@ -97,7 +99,7 @@
       display: none;
     }
 
-    @media (max-width: $device-mobile-max-width) {
+    @media (max-width: variables.$device-mobile-max-width) {
       &.sdk > span.label,
       &.uploaded > span.label {
         display: none;
@@ -144,7 +146,7 @@
   justify-content: space-evenly;
   padding: 20px 0 30px 0;
 
-  @media (min-width: $device-desktop-min-width) {
+  @media (min-width: variables.$device-desktop-min-width) {
     padding: 40px 0 50px 0;
   }
 
@@ -158,7 +160,7 @@
     font-size: 32px;
     line-height: 1;
 
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       font-size: 64px;
     }
   }
@@ -249,7 +251,7 @@
 
     .markdown-body {
       table {
-        @media (min-width: $device-desktop-min-width) {
+        @media (min-width: variables.$device-desktop-min-width) {
           // Normally markdown-tables do use 100% width, but for
           // an unknown layout rule this is not doing it.
           // Forcing table to take the maximum available width,
@@ -311,7 +313,7 @@
 
     opacity: 1;
     display: none;
-    transition: opacity $copy-feedback-transition-opacity-delay;
+    transition: opacity variables.$copy-feedback-transition-opacity-delay;
 
     >.code {
       font-family: var(--pub-code-text-font_family);
@@ -340,7 +342,7 @@
       // to keep everything visible at the same time.
       font-size: 50%;
 
-      @media (min-width: $device-desktop-min-width) {
+      @media (min-width: variables.$device-desktop-min-width) {
         // On larger screens the above setting seems to be too small. The
         // vertical width scaling will roughly make the 80-character lines
         // fit the available width of the container.
diff --git a/pkg/web_css/lib/src/_scores.scss b/pkg/web_css/lib/src/_scores.scss
index 8c3c1eabd1..634414e769 100644
--- a/pkg/web_css/lib/src/_scores.scss
+++ b/pkg/web_css/lib/src/_scores.scss
@@ -2,6 +2,8 @@
    for details. All rights reserved. Use of this source code is governed by a
    BSD-style license that can be found in the LICENSE file. */
 
+@use 'variables';
+
 .packages-scores {
   display: flex;
   align-items: center;
@@ -15,7 +17,7 @@
   .packages-score {
     min-width: 45px;
 
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       min-width: 55px;
     }
 
@@ -29,7 +31,7 @@
     margin-right: 4px;
     padding-right: 4px;
 
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       margin-right: 8px;
       padding-right: 8px;
     }
@@ -52,7 +54,7 @@
   .packages-score-value-number {
     font-size: 18px;
 
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       font-size: 22px;
     }
   }
@@ -61,7 +63,7 @@
     font-size: 10px;
     vertical-align: super;
 
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       font-size: 12px;
     }
   }
@@ -74,7 +76,7 @@
     text-align: center;
     white-space: nowrap;
 
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       font-size: 12px;
       letter-spacing: 0.2px;
     }
diff --git a/pkg/web_css/lib/src/_search.scss b/pkg/web_css/lib/src/_search.scss
index c32d12f6a2..415713a0d0 100644
--- a/pkg/web_css/lib/src/_search.scss
+++ b/pkg/web_css/lib/src/_search.scss
@@ -5,6 +5,9 @@
 /******************************************************
   searchbar
 ******************************************************/
+
+@use 'variables';
+
 .search-bar {
   display: flex;
   align-items: center;
@@ -34,7 +37,7 @@
     }
 
     .home-banner & {
-      @media (min-width: $device-desktop-min-width) {
+      @media (min-width: variables.$device-desktop-min-width) {
         font-size: 24px;
         padding: 20px 35px 20px 65px;
         border-radius: 35px;
@@ -61,7 +64,7 @@
     transform: scale(0.72);
 
     .home-banner & {
-      @media (min-width: $device-desktop-min-width) {
+      @media (min-width: variables.$device-desktop-min-width) {
         left: 20px;
         transform: scale(1.0);
       }
@@ -72,7 +75,7 @@
 .search-filters-btn-wrapper {
   display: none;
 
-  @media (max-width: $device-mobile-max-width) {
+  @media (max-width: variables.$device-mobile-max-width) {
     display: block;
   }
 
diff --git a/pkg/web_css/lib/src/_site_header.scss b/pkg/web_css/lib/src/_site_header.scss
index 4b885dfc9b..9ef89e6327 100644
--- a/pkg/web_css/lib/src/_site_header.scss
+++ b/pkg/web_css/lib/src/_site_header.scss
@@ -6,6 +6,8 @@
   site header
 ******************************************************/
 
+@use 'variables';
+
 /*
   The site logo should be hidden on mobile on the landing page (and only on that),
   because we are displaying another logo right under it.
@@ -14,7 +16,7 @@
 */
 .page-landing {
   .site-header a.logo {
-    @media (max-width: $device-mobile-max-width) {
+    @media (max-width: variables.$device-mobile-max-width) {
       display: none;
     }
   }
@@ -31,7 +33,7 @@
   font-size: 14px;
   position: relative;
 
-  @media (max-width: $device-mobile-max-width) {
+  @media (max-width: variables.$device-mobile-max-width) {
     &:focus-within {
 
       .hamburger,
@@ -41,7 +43,7 @@
     }
   }
 
-  @media (min-width: $device-desktop-min-width) {
+  @media (min-width: variables.$device-desktop-min-width) {
     height: 50px;
     padding: 0px 45px 0px 50px;
   }
@@ -62,7 +64,7 @@
     background-repeat: no-repeat;
     opacity: 0.8;
 
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       display: none;
     }
   }
@@ -106,7 +108,7 @@
     bottom: 0;
     right: 0;
     background: var(--pub-full_page_mask-background-color);
-    z-index: $z-index-nav-mask;
+    z-index: variables.$z-index-nav-mask;
 
     &.-show {
       display: block;
@@ -114,7 +116,7 @@
   }
 
   .site-header-search {
-    @media (max-width: $device-mobile-max-width) {
+    @media (max-width: variables.$device-mobile-max-width) {
       // Takes up most of the available space, but still leaves ample whitespace
       // between the input field and the site logo.
       flex-grow: 10;
@@ -145,11 +147,11 @@
         padding-right: 30px;
         cursor: inherit;
 
-        @media (max-width: $device-tablet-max-width) {
+        @media (max-width: variables.$device-tablet-max-width) {
           width: 120px;
         }
 
-        @media (max-width: $device-mobile-max-width) {
+        @media (max-width: variables.$device-mobile-max-width) {
           width: 100%;
         }
       }
@@ -227,7 +229,7 @@
   .site-header-nav {
 
     /* Navigation styles for mobile. */
-    @media (max-width: $device-mobile-max-width) {
+    @media (max-width: variables.$device-mobile-max-width) {
       position: fixed;
       top: 0;
       bottom: 0;
@@ -236,7 +238,7 @@
       background: var(--pub-site_header_popup-background-color);
       transform: translateX(-100%);
       transition: transform 0.3s ease;
-      z-index: $z-index-nav-mask + 1;
+      z-index: variables.$z-index-nav-mask + 1;
       opacity: 0; // see mobile_nav.dart
       overflow-y: auto;
 
@@ -309,7 +311,7 @@
     }
 
     /* Navigation styles for desktop. */
-    @media (min-width: $device-desktop-min-width) {
+    @media (min-width: variables.$device-desktop-min-width) {
       display: flex;
       transform: none;
 
diff --git a/pkg/web_css/lib/src/_third_party.scss b/pkg/web_css/lib/src/_third_party.scss
new file mode 100644
index 0000000000..bc7fbdab57
--- /dev/null
+++ b/pkg/web_css/lib/src/_third_party.scss
@@ -0,0 +1,14 @@
+/* Copyright (c) 2025, the Dart project authors.  Please see the AUTHORS file
+   for details. All rights reserved. Use of this source code is governed by a
+   BSD-style license that can be found in the LICENSE file. */
+
+@use 'sass:meta';
+@use '../../../../third_party/css/github-markdown.css';
+
+.light-theme {
+  @include meta.load-css('../../../../third_party/highlight/github');
+}
+
+.dark-theme {
+  @include meta.load-css('../../../../third_party/highlight/github-dark');
+}
diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss
index 8cfc208c0c..fff541cac2 100644
--- a/pkg/web_css/lib/src/_variables.scss
+++ b/pkg/web_css/lib/src/_variables.scss
@@ -2,6 +2,8 @@
    for details. All rights reserved. Use of this source code is governed by a
    BSD-style license that can be found in the LICENSE file. */
 
+@use '../../../../third_party/site-shared/dash_design/lib/styles/variables.scss' as dash_variables;
+
 // suggested naming convention:
 //
 // color definitions:
diff --git a/pkg/web_css/lib/style.scss b/pkg/web_css/lib/style.scss
index 50ee03d42a..58b25d54bd 100644
--- a/pkg/web_css/lib/style.scss
+++ b/pkg/web_css/lib/style.scss
@@ -4,33 +4,22 @@
 
 // Include third-party CSS into a single output file
 // to reduce the number of HTTP requests.
-@use '../../../third_party/css/github-markdown.css';
-
-@use '../../../third_party/site-shared/dash_design/lib/styles/variables.scss' as dash_variables;
-
-.light-theme {
-  @import "../../../third_party/highlight/github";
-}
-
-.dark-theme {
-  @import "../../../third_party/highlight/github-dark";
-}
+@use 'src/_third_party';
 
 // Local styles and rules.
-@import 'src/_variables';
-@import 'src/_base';
-@import 'src/_alerts';
-@import 'src/_site_header';
-@import 'src/_activity_log';
-@import 'src/_detail_page';
-@import 'src/_footer';
-@import 'src/_form';
-@import 'src/_list';
-@import 'src/_home';
-@import 'src/_pkg';
-@import 'src/_report';
-@import 'src/_scores';
-@import 'src/_search';
-@import 'src/_staging_ribbon.scss';
-@import 'src/_tags';
-@import 'src/_topics';
+@use 'src/_variables';
+@use 'src/_base';
+@use 'src/_site_header';
+@use 'src/_activity_log';
+@use 'src/_detail_page';
+@use 'src/_footer';
+@use 'src/_form';
+@use 'src/_list';
+@use 'src/_home';
+@use 'src/_pkg';
+@use 'src/_report';
+@use 'src/_scores';
+@use 'src/_search';
+@use 'src/_staging_ribbon.scss';
+@use 'src/_tags';
+@use 'src/_topics';