Migrate away from deprecated Sass import rules to module system (#12734)

CHANGELOG.txt

@@ -13,6 +13,7 @@ Changelog
  * Fix: Do not show the content type column as sortable when searching pages (Srishti Jaiswal, Sage Abdullah)
  * Docs: Add missing `django.contrib.admin` to list of apps in "add to Django project" guide (Mohamed Rabiaa)
  * Docs: Fix typo in the headless documentation page (Mahmoud Nasser)
+ * Maintenance: Migrate away from deprecated Sass import rules to module system (Srishti Jaiswal)
 
 
 6.4 (03.02.2025)

client/scss/_settings.scss

@@ -1 +1 @@
-@import 'settings/variables';
+@forward 'settings/variables';

client/scss/_tools.scss

@@ -3,8 +3,8 @@ These are functions and mixins.
 No CSS should be produced by these files.
 */
 
-@import 'tools/functions.breakpoints';
-@import 'tools/mixins.breakpoints';
-@import 'tools/mixins.general';
-@import 'tools/mixins.grid';
-@import 'tools/mixins.guide-line';
+@forward 'tools/functions.breakpoints';
+@forward 'tools/mixins.breakpoints';
+@forward 'tools/mixins.general';
+@forward 'tools/mixins.grid';
+@forward 'tools/mixins.guide-line';

client/scss/components/_a11y-result.scss

@@ -1,3 +1,6 @@
+@use '../tools' as *;
+@use '../../src/components/CommentApp/main.scss' as *;
+
 .w-a11y-result__row {
   @include box;
   padding: theme('spacing.4');

client/scss/components/_avatar.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 // user avatars
 .avatar {
   border-radius: 100%;

client/scss/components/_breadcrumbs.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 .w-breadcrumbs:not(.editor-view .w-breadcrumbs) {
   @apply sm:w-py-2.5;
 

client/scss/components/_bulk_actions.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 .bulk-actions-filter-checkbox {
   .table-headers & {
     > div {

client/scss/components/_button.scss

@@ -3,6 +3,8 @@
 // Core button styles
 
 @use 'sass:color';
+@use '../tools' as *;
+@use '../settings' as *;
 
 .button {
   border-radius: theme('borderRadius.sm');

client/scss/components/_chooser.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '../tools' as *;
 
 $preview-size: 2.625rem; // 42px
 

client/scss/components/_dialog.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 .w-dialog {
   --w-dialog-close-icon-color: theme('colors.icon-primary');
 

client/scss/components/_dropdown-button.scss

@@ -1,4 +1,7 @@
 // stylelint-disable selector-attribute-name-disallowed-list
+@use '../tools' as *;
+@use '../settings' as *;
+
 $separator: 1px solid theme('colors.white-15');
 $radius: theme('borderRadius.sm');
 

client/scss/components/_filters.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 .filterable {
   display: grid;
   grid-template-columns: 1fr minmax(theme('spacing.48'), theme('spacing.64'));

client/scss/components/_footer.scss

@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use '../tools' as *;
+@use '../settings' as *;
 
 .footer {
   @include transition(bottom 0.5s ease 1s);

client/scss/components/_form-side.scss

@@ -1,6 +1,8 @@
 @use 'sass:color';
 @use 'sass:map';
 @use 'sass:math';
+@use '../tools' as *;
+@use '../../src/components/CommentApp/main.scss' as *;
 
 .side-panel-open {
   @apply w-overflow-y-hidden sm:w-overflow-y-auto;

client/scss/components/_grid.legacy.scss

@@ -1,3 +1,6 @@
+@use '../tools' as *;
+@use '../settings' as *;
+
 .wrapper {
   @include clearfix();
   @apply w-transition-sidebar;

client/scss/components/_header.scss

@@ -1,5 +1,7 @@
 @use 'sass:math';
 @use 'sass:color';
+@use '../tools' as *;
+@use '../settings' as *;
 
 .w-header {
   @apply w-text-text-label;

client/scss/components/_help-block.scss

@@ -1,5 +1,6 @@
 @use 'sass:color';
 @use 'sass:map';
+@use '../tools' as *;
 // Help text formatters
 .help-block {
   padding: 1em;

client/scss/components/_icons.scss

@@ -1,4 +1,6 @@
 @use 'sass:string';
+@use '../tools' as *;
+@use '../settings' as *;
 
 // Set SVG icons to use the current text color in the location they appear as
 // their default fill color. Can be overridden for a specific icon by either

client/scss/components/_listing.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 /* stylelint-disable selector-max-combinators */
 // General listings, like for pages, images or snippets
 ul.listing {

client/scss/components/_loading-mask.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../settings' as *;
 // Loading mask: overlays a certain area with a loading spinner and a faded out cover to prevent interaction
 .loading-mask {
   &.loading {

client/scss/components/_messages.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 // Messages are specific to Django's 'Messaging' system which adds messages into the session,
 // for display on the next page visited. These appear as an animated banner at the top of the page.
 // For inline help text, see typography.scss

client/scss/components/_modals.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 $zindex-modal-background: 500;
 
 .fade {

client/scss/components/_panel.scss

@@ -1,3 +1,6 @@
+@use '../tools' as *;
+@use '../settings' as *;
+
 $header-icon-size: theme('spacing.4');
 $header-button-size: theme('spacing.6');
 

client/scss/components/_preview-panel.scss

@@ -1,3 +1,6 @@
+@use '../tools' as *;
+@use '../../src/components/CommentApp/main.scss' as *;
+
 .w-preview {
   --w-preview-background-color: var(--w-color-white);
   --preview-width-ratio: min(

client/scss/components/_progressbar.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 .progress {
   border-radius: 1.2em;
   background-color: theme('colors.surface-button-hover');

client/scss/components/_status-tag.scss

@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use '../settings' as *;
 
 .w-status {
   border-radius: 2px;

client/scss/components/_summary.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 .w-summary {
   color: theme('colors.text-link-default');
   margin-bottom: theme('spacing.3');

client/scss/components/_tag.scss

@@ -1,4 +1,7 @@
 @use 'sass:map';
+@use '../tools' as *;
+@use '../settings' as *;
+
 // free tagging tags from taggit
 .tag {
   border-radius: 2px;

client/scss/components/_userbar.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:string';
+@use '../tools' as *;
 
 // =============================================================================
 // Variables

client/scss/components/_workflow-timeline.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 .workflow-timeline {
   @apply w-label-3;
   padding: 0;

client/scss/components/browser-message.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 @include media-breakpoint-up(sm) {
   .browsermessage {
     margin: 0 0 0 -150px;

client/scss/components/forms/_drop-zone.scss

@@ -1,3 +1,5 @@
+@use '../../settings' as *;
+
 // file drop zones
 .drop-zone {
   border-radius: 5px;

client/scss/components/forms/_error-message.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../../settings' as *;
 
 .error-message {
   border: 1px solid transparent; // ensure visible separation in Windows High Contrast mode

client/scss/components/forms/_field-comment-control.scss

@@ -1,4 +1,5 @@
-// Comments
+@use '../../tools' as *;
+
 $icon-size: theme('spacing.4');
 $button-padding: theme('spacing.2');
 

client/scss/components/forms/_field-row.scss

@@ -1,3 +1,5 @@
+@use '../../tools' as *;
+
 .w-field-row {
   @include max-form-width();
   gap: theme('spacing.5');

client/scss/components/forms/_field-textoutput.scss

@@ -1,4 +1,6 @@
 @use 'sass:map';
+@use '../../settings' as *;
+@use './input-base' as *;
 
 /**
  * A container for rendering human-readable field values in forms in a way

client/scss/components/forms/_field.scss

@@ -1,4 +1,6 @@
 @use 'sass:map';
+@use '../../tools' as *;
+@use '../../settings' as *;
 
 /**
  * The field component handles form fields’ layout and ancillary elements such as error messages and help text.

client/scss/components/forms/_form-width.scss

@@ -1,3 +1,6 @@
+@use '../../tools' as *;
+@use '../../settings' as *;
+
 .w-form-width {
   @include max-form-width();
 }

client/scss/components/forms/_input-base.scss

@@ -1,3 +1,5 @@
+@use '../../tools' as *;
+
 /**
  * Field styles reusable across **all** fields, including:
  * Text input, textarea, checkbox, radio, select, etc.

client/scss/components/forms/_input-text.scss

@@ -1,3 +1,6 @@
+@use '../../settings' as *;
+@use './input-base' as *;
+
 // All HTML5 input types, with irrelevant ones commented out.
 // input[type="button"],
 // input[type="checkbox"],

client/scss/components/forms/_nested-panel.scss

@@ -1,3 +1,6 @@
+@use '../../tools' as *;
+@use '../../settings' as *;
+
 $header-icon-size: theme('spacing.4');
 $icon-center-offset: 2px;
 $guide-line-bottom-margin: calc($form-field-spacing / 3);

client/scss/components/forms/_radio-checkbox.scss

@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use '../../settings' as *;
+@use './input-base' as *;
 
 // 24px input widget size.
 $size: 1.5rem;

client/scss/components/forms/_required-mark.scss

@@ -1,3 +1,5 @@
+@use '../../tools' as *;
+
 .w-required-mark {
   color: theme('colors.text-error');
   margin-inline-start: 0.25ch;

client/scss/components/forms/_select.scss

@@ -1,5 +1,7 @@
 @use 'sass:map';
 @use 'sass:math';
+@use '../../settings' as *;
+@use './input-base' as *;
 
 $select-size: $text-input-height;
 $chevron-size: 0.375rem;

client/scss/components/forms/_tagit.scss

@@ -1,3 +1,5 @@
+@use './input-base' as *;
+
 .tagit {
   @include input-base();
 

client/scss/core.scss

@@ -33,22 +33,22 @@ BEM: https://getbem.com/
 /* Legacy vendor styles. Do not add new styles here. */
 @use 'generic/normalize';
 @use 'vendor/jquery-ui-1.10.3.verdant';
-@use 'vendor/jquery.tagit' as tagit;
-@use 'vendor/jquery.Jcrop.min' as jcrop;
+@use 'vendor/jquery.tagit' as jquery-tagit;
+@use 'vendor/jquery.Jcrop.min' as jquery-jcrop;
 
 /* SETTINGS
 These are variables, maps, and fonts.
 * No CSS should be produced by these files
 */
 
-@import 'settings';
+@use 'settings';
 
 /* TOOLS
 These are functions and mixins.
 * No CSS should be produced by these files.
 */
 
-@import 'tools';
+@use 'tools';
 
 /* GENERIC
 This is for resets and other rules that affect large collections of bare elements.
@@ -60,14 +60,9 @@ These are base styles for bare HTML elements.
 * Changes to them should be very rare.
 */
 
-// These inject Tailwind's base, component and utility styles and any styles registered by plugins of each layer.
-// Unused styles created within tailwinds layers won't be compiled into the compiled stylesheet
-// https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer
-@tailwind base;
-@tailwind components;
-@import 'elements/elements';
-@import 'elements/typography';
-@import 'elements/forms';
+@use 'elements/elements';
+@use 'elements/typography';
+@use 'elements/forms';
 
 /* COMPONENTS
 These are classes for components.
@@ -76,82 +71,87 @@ These are classes for components.
   which is the preferred pattern over housing them in the scss folder.
 */
 
-@import '../src/components/Transition/Transition';
-@import '../src/components/LoadingSpinner/LoadingSpinner';
-@import '../src/components/PublicationStatus/PublicationStatus';
-@import '../src/components/ComboBox/ComboBox';
-@import '../src/components/ComboBoxPreview/ComboBoxPreview';
-@import '../src/components/PageExplorer/PageExplorer';
-@import '../src/components/CommentApp/main';
+@use '../src/components/Transition/Transition';
+@use '../src/components/LoadingSpinner/LoadingSpinner';
+@use '../src/components/PublicationStatus/PublicationStatus';
+@use '../src/components/ComboBox/ComboBox';
+@use '../src/components/ComboBoxPreview/ComboBoxPreview';
+@use '../src/components/PageExplorer/PageExplorer';
+@use '../src/components/CommentApp/main';
 
-@import 'components/avatar';
-@import 'components/icons';
-@import 'components/forms/input-base';
-@import 'components/forms/input-text';
-@import 'components/forms/radio-checkbox';
-@import 'components/forms/select';
-@import 'components/forms/tagit';
-@import 'components/forms/radio-checkbox-multiple';
-@import 'components/forms/error-message';
-@import 'components/forms/required-mark';
-@import 'components/forms/help';
-@import 'components/forms/drop-zone';
-@import 'components/forms/daterange';
-@import 'components/forms/file';
-@import 'components/forms/publishing';
-@import 'components/forms/switch';
-@import 'components/forms/title';
-@import 'components/forms/field';
-@import 'components/forms/field-row';
-@import 'components/forms/field-comment-control';
-@import 'components/forms/field-textoutput';
-@import 'components/forms/form-width';
-@import 'components/forms/nested-panel';
-@import 'components/tabs';
-@import 'components/panel';
-@import 'components/dialog';
-@import 'components/dismissible';
-@import 'components/drilldown';
-@import 'components/dropdown';
-@import 'components/dropdown-button';
-@import 'components/help-block';
-@import 'components/button';
-@import 'components/keyboard-shortcuts';
-@import 'components/modals';
-@import 'components/chooser';
-@import 'components/tag';
-@import 'components/listing';
-@import 'components/filters';
-@import 'components/messages';
-@import 'components/messages.capability';
-@import 'components/messages.status';
-@import 'components/header';
-@import 'components/progressbar';
-@import 'components/summary';
-@import 'components/whats-new';
-@import 'components/grid.legacy';
-@import 'components/footer';
-@import 'components/loading-mask';
-@import 'components/human-readable-date';
-@import 'components/link.legacy';
-@import 'components/indicator';
-@import 'components/status-tag';
-@import 'components/skiplink';
-@import 'components/workflow-tasks';
-@import 'components/workflow-timeline';
-@import 'components/bulk_actions';
-@import 'components/preview-panel';
-@import 'components/preview-error';
-@import 'components/form-side';
-@import 'components/a11y-result';
-@import 'components/userbar';
-@import 'components/breadcrumbs';
-@import 'components/pill';
-@import 'components/ping';
-@import 'components/editing-sessions';
+@use 'components/avatar';
+@use 'components/icons';
+@use 'components/forms/input-base';
+@use 'components/forms/input-text';
+@use 'components/forms/radio-checkbox';
+@use 'components/forms/select';
+@use 'components/forms/tagit';
+@use 'components/forms/radio-checkbox-multiple';
+@use 'components/forms/error-message';
+@use 'components/forms/required-mark';
+@use 'components/forms/help';
+@use 'components/forms/drop-zone';
+@use 'components/forms/daterange';
+@use 'components/forms/file';
+@use 'components/forms/publishing';
+@use 'components/forms/switch';
+@use 'components/forms/title';
+@use 'components/forms/field';
+@use 'components/forms/field-row';
+@use 'components/forms/field-comment-control';
+@use 'components/forms/field-textoutput';
+@use 'components/forms/form-width';
+@use 'components/forms/nested-panel';
+@use 'components/tabs';
+@use 'components/panel';
+@use 'components/dialog';
+@use 'components/dismissible';
+@use 'components/drilldown';
+@use 'components/dropdown';
+@use 'components/dropdown-button';
+@use 'components/help-block';
+@use 'components/button';
+@use 'components/keyboard-shortcuts';
+@use 'components/modals';
+@use 'components/chooser';
+@use 'components/tag';
+@use 'components/listing';
+@use 'components/filters';
+@use 'components/messages';
+@use 'components/messages.capability' as messages-capability;
+@use 'components/messages.status' as messages-status;
+@use 'components/header';
+@use 'components/progressbar';
+@use 'components/summary';
+@use 'components/whats-new';
+@use 'components/grid.legacy';
+@use 'components/footer';
+@use 'components/loading-mask';
+@use 'components/human-readable-date';
+@use 'components/link.legacy';
+@use 'components/indicator';
+@use 'components/status-tag';
+@use 'components/skiplink';
+@use 'components/workflow-tasks';
+@use 'components/workflow-timeline';
+@use 'components/bulk_actions';
+@use 'components/preview-panel';
+@use 'components/preview-error';
+@use 'components/form-side';
+@use 'components/a11y-result';
+@use 'components/userbar';
+@use 'components/breadcrumbs';
+@use 'components/pill';
+@use 'components/ping';
+@use 'components/editing-sessions';
 
-@import '../src/components/Sidebar/Sidebar';
-@import '../src/components/Minimap/Minimap';
+@use '../src/components/Sidebar/Sidebar';
+@use '../src/components/Sidebar/SidebarPanel';
+@use '../src/components/Sidebar/menu/MenuItem';
+@use '../src/components/Sidebar/menu/SubMenuItem';
+@use '../src/components/Sidebar/modules/MainMenu';
+@use '../src/components/Sidebar/modules/WagtailBranding';
+@use '../src/components/Minimap/Minimap';
 
 /* OVERRIDES
 These are classes that provide overrides.
@@ -159,29 +159,28 @@ These are classes that provide overrides.
 */
 
 // VENDOR: overrides of vendor styles.
-@import 'overrides/vendor.datetimepicker';
-@import 'overrides/vendor.handsontable';
-@import 'overrides/vendor.tagit';
-@import 'overrides/vendor.tippy';
+@use 'overrides/vendor.datetimepicker' as vendor-datetimepicker;
+@use 'overrides/vendor.handsontable' as vendor-handsontable;
+@use 'overrides/vendor.tagit' as vendor-tagit;
+@use 'overrides/vendor.tippy' as vendor-tippy;
 
 // UTILITIES: classes that do one simple thing.
-@import 'overrides/utilities.focus';
+@use 'overrides/utilities.focus' as utilities-focus;
 
 // Legacy utilities
-@import 'overrides/utilities.legacy';
-
+@use 'overrides/utilities.legacy' as utilities-legacy;
 // TAILWIND: This is at the bottom so it can take precedence over other css classes
-@tailwind utilities;
+@use 'overrides/utilities.tailwind' as utilities-tailwind;
 
 /* Legacy layout-specific styles. Do not add new styles here. */
 
-@import 'layouts/404';
-@import 'layouts/compare-revisions';
-@import 'layouts/login';
-@import 'layouts/account';
-@import 'layouts/workflow-progress';
-@import 'layouts/report';
-@import 'layouts/add-multiple';
-@import 'layouts/chooser-duplicate-upload';
-@import 'layouts/focal-point-chooser';
-@import 'layouts/redirects';
+@use 'layouts/404' as layout-404;
+@use 'layouts/compare-revisions';
+@use 'layouts/login';
+@use 'layouts/account';
+@use 'layouts/workflow-progress';
+@use 'layouts/report';
+@use 'layouts/add-multiple';
+@use 'layouts/chooser-duplicate-upload';
+@use 'layouts/focal-point-chooser';
+@use 'layouts/redirects';

client/scss/elements/_elements.scss

@@ -1,3 +1,10 @@
+// These inject Tailwind's base and component styles and any styles registered by plugins of each layer.
+// Unused styles created within tailwinds layers won't be compiled into the compiled stylesheet
+// https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer
+
+@tailwind base;
+@tailwind components;
+
 *,
 ::before,
 ::after {

client/scss/elements/_forms.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../tools' as *;
 // Legacy form reset styles. Avoid adding any new styles here.
 form {
   // Historically, Wagtail forms rendered all fields as list items.

client/scss/layouts/_404.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 .page404__bg {
   position: fixed;
   top: 0;

client/scss/layouts/_compare-revisions.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 $color-addition-dark: var(--color-addition-dark);
 $color-addition-light: var(--color-addition-light);
 $color-deletion-dark: var(--color-deletion-dark);

client/scss/layouts/_focal-point-chooser.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 .focal-point-chooser {
   position: relative;
   margin-bottom: 20px;

client/scss/layouts/_login.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 @mixin login-fullscreen-background() {
   @at-root {
     :root {

client/scss/layouts/_report.scss

@@ -1,3 +1,5 @@
+@use '../tools' as *;
+
 .report {
   @include nice-margin();
   display: grid;

client/scss/overrides/_utilities.focus.scss

@@ -1,3 +1,5 @@
+@use '../settings' as *;
+
 // stylelint-disable declaration-no-important
 // Set global focus outline styles so they are consistent across the UI,
 // without individual components having to explicitly define focus styles.

client/scss/overrides/_utilities.legacy.scss

@@ -1,3 +1,6 @@
+@use '../tools' as *;
+@use '../settings' as *;
+
 .nice-padding {
   padding-inline-start: $mobile-nice-padding;
   padding-inline-end: $mobile-nice-padding;

client/scss/overrides/_utilities.tailwind.scss

@@ -0,0 +1 @@
+@tailwind utilities;

client/scss/overrides/_vendor.datetimepicker.scss

@@ -1,5 +1,6 @@
 // stylelint-disable selector-max-combinators, max-nesting-depth
 @use 'sass:map';
+@use '../settings' as *;
 
 .xdsoft_datetimepicker {
   box-shadow: 0 5px 10px -5px theme('colors.black-35');

client/scss/overrides/_vendor.tagit.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../settings' as *;
 
 // taggit tagging
 .tagit {

client/scss/overrides/_vendor.tippy.scss

@@ -1,5 +1,5 @@
 // stylelint-disable selector-attribute-name-disallowed-list
-@import '../../../node_modules/tippy.js/dist/tippy';
+@use '../../../node_modules/tippy.js/dist/tippy';
 
 .tippy-box {
   // Special font size 12px for tooltips

client/scss/tools/_functions.breakpoints.scss

@@ -1,5 +1,6 @@
 @use 'sass:list';
 @use 'sass:map';
+@use '../settings' as *;
 // Based upon the fine work and thoughts from Bootstrap v4.
 // Copyright 2011-2018 The Bootstrap Authors
 // Copyright 2011-2018 Twitter, Inc.

client/scss/tools/_mixins.breakpoints.scss

@@ -1,3 +1,5 @@
+@use 'functions.breakpoints' as *;
+
 // Based upon the fine work and thoughts from Bootstrap v4.
 // Copyright 2011-2018 The Bootstrap Authors
 // Copyright 2011-2018 Twitter, Inc.

client/scss/tools/_mixins.general.scss

@@ -4,6 +4,8 @@
 // Please note that the mixins partial shouldn't include any classes. This is so
 // it can be included in any file without accidentally producing output
 
+@use '../settings' as *;
+
 // Turns on font-smoothing when used. Use sparingly.
 @mixin font-smoothing {
   -webkit-font-smoothing: antialiased;

client/scss/tools/_mixins.grid.scss

@@ -1,4 +1,7 @@
 @use 'sass:math';
+@use '../settings' as *;
+@use '../tools/mixins.breakpoints' as *;
+@use '../tools/mixins.general' as *;
 
 // grid settings
 $grid-columns: 12;

client/src/components/ComboBox/ComboBox.scss

@@ -1,3 +1,5 @@
+@use '../../../scss/tools' as *;
+
 // Ensure consistent spacing across the whole component.
 // With the scrolling and show/hide of the field, correct spacing is critical.
 $spacing: theme('spacing.[2.5]');

client/src/components/ComboBoxPreview/ComboBoxPreview.scss

@@ -1,3 +1,5 @@
+@use '../../../scss/tools' as *;
+
 .w-combobox-preview {
   padding: theme('spacing.5');
   display: flex;

client/src/components/CommentApp/components/Comment/style.scss

@@ -1,3 +1,5 @@
+@use '../../../../../scss/tools' as *;
+
 .comment {
   @include box;
   @include more-contrast-interactive();

client/src/components/CommentApp/components/CommentHeader/style.scss

@@ -1,3 +1,5 @@
+@use '../../../../../scss/tools' as *;
+
 .comment-header {
   position: relative;
 

client/src/components/CommentApp/main.scss

@@ -1,4 +1,4 @@
-@import '../../../scss/settings/variables';
+@use '../../../scss/settings/variables' as *;
 
 $color-comment-separator: theme('colors.border-furniture');
 

client/src/components/Draftail/Draftail.scss

@@ -1,3 +1,7 @@
+@use '../../../scss/tools' as *;
+@use '../../../scss/settings' as *;
+@use '../../../scss/components/forms/input-base' as *;
+
 $draftail-editor-text: theme('colors.text-context');
 $draftail-placeholder-text: theme('colors.text-placeholder');
 // w-body-text-large

client/src/components/Draftail/blocks/MediaBlock.scss

@@ -1,3 +1,5 @@
+@use '../../../../scss/tools' as *;
+
 .MediaBlock {
   display: inline-block;
   position: relative;

client/src/components/Minimap/CollapseAll.scss

@@ -1,3 +1,5 @@
+@use '../../../scss/tools' as *;
+
 .w-minimap__collapse-all {
   @include more-contrast-interactive();
   display: none;

client/src/components/Minimap/Minimap.scss

@@ -6,6 +6,8 @@ $minimap-collapsed-width: 30px;
 $minimap-overflow: theme('spacing.2');
 $minimap-z-index: calc(theme('zIndex.header') - 20);
 
+@use '../../../scss/tools' as *;
+
 @import './CollapseAll';
 @import './MinimapItem';
 

client/src/components/Minimap/MinimapItem.scss

@@ -1,3 +1,5 @@
+@use '../../../scss/tools' as *;
+
 .w-minimap-item {
   @apply w-label-3 w-outline-offset-inside;
   display: inline-flex;

client/src/components/PageExplorer/PageExplorer.scss

@@ -1,10 +1,11 @@
+@use 'sass:map';
+@use '../../../scss/settings' as *;
+@use '../../../scss/tools' as *;
+@use 'PageExplorerItem';
+
 $c-page-explorer-bg-active: theme('colors.black-50');
 $menu-footer-height: 50px;
 
-@use 'sass:map';
-
-@import 'PageExplorerItem';
-
 .c-page-explorer {
   @apply w-bg-surface-menu-item-active;
   max-width: 485px;

client/src/components/PageExplorer/PageExplorerItem.scss

@@ -1,3 +1,5 @@
+@use '../../../scss/tools' as *;
+
 .c-page-explorer__item {
   @apply w-flex w-flex-row w-flex-nowrap w-border-0 w-border-b w-border-solid w-border-surface-menus w-divide-x w-divide-solid w-divide-surface-menus w-divide-y-0;
 }

client/src/components/Sidebar/Sidebar.scss

@@ -1,3 +1,6 @@
+@use '../../../scss/tools' as *;
+@use '../../../scss/settings' as *;
+
 $sidebar-toggle-spacing: 12px;
 $sidebar-toggle-size: 35px;
 
@@ -63,7 +66,8 @@ $sidebar-toggle-size: 35px;
 
   // The sidebar can move completely off-screen in mobile mode for extra room
   &--hidden {
-    inset-inline-start: -$menu-width;
+    $neg-menu-width: -($menu-width);
+    inset-inline-start: $neg-menu-width;
   }
 
   // When sidebar is completely closed and animations have finished
@@ -106,10 +110,3 @@ $sidebar-toggle-size: 35px;
     @apply w-fixed hover:w-bg-surface-menu-item-active hover:w-text-text-label-menus-active;
   }
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import 'SidebarPanel';
-@import 'menu/MenuItem';
-@import 'menu/SubMenuItem';
-@import 'modules/MainMenu';
-@import 'modules/WagtailBranding';

client/src/components/Sidebar/SidebarPanel.scss

@@ -1,3 +1,6 @@
+@use '../../../scss/tools' as *;
+@use '../../../scss/settings' as *;
+
 .sidebar-panel {
   // With CSS variable allows panels with different widths to animate properly
   --width: #{$menu-width};

client/src/components/Sidebar/menu/MenuItem.scss

@@ -1,3 +1,6 @@
+@use '../../../../scss/tools' as *;
+@use '../../../../scss/settings' as *;
+
 .sidebar-menu-item {
   $root: &;
   @include transition(border-color $menu-transition-duration ease);

client/src/components/Sidebar/menu/SubMenuItem.scss

@@ -1,3 +1,6 @@
+@use '../../../../scss/tools' as *;
+@use '../../../../scss/settings' as *;
+
 .sidebar-sub-menu-trigger-icon {
   $root: &;
 

client/src/components/Sidebar/modules/MainMenu.scss

@@ -1,3 +1,6 @@
+@use '../../../../scss/tools' as *;
+@use '../../../../scss/settings' as *;
+
 .sidebar-main-menu {
   overflow: auto;
   overflow-x: hidden;

client/src/components/Sidebar/modules/WagtailBranding.scss

@@ -2,6 +2,9 @@
 
 $logo-size: 110px;
 
+@use '../../../../scss/tools' as *;
+@use '../../../../scss/settings' as *;
+
 // Wagging animation
 @keyframes tail-wag {
   from {

client/src/components/StreamField/StreamField.scss

@@ -1,4 +1,4 @@
-@import 'scss/components/c-sf-add-button';
+@use 'scss/components/c-sf-add-button';
 
 [aria-expanded='true'] + .w-panel__heading .c-sf-block__title {
   @apply w-sr-only;

client/storybook/preview.scss

@@ -1,5 +1,5 @@
-@import '../scss/settings';
-@import '../scss/tools';
+@use '../scss/settings' as *;
+@use '../scss/tools' as *;
 
 body {
   font-size: 1rem;

docs/releases/6.5.md

@@ -31,7 +31,7 @@ depth: 1
 
 ### Maintenance
 
- * ...
+ * Migrate away from deprecated Sass import rules to module system (Srishti Jaiswal)
 
 ## Upgrade considerations - changes affecting all projects
 

wagtail/admin/static_src/wagtailadmin/scss/core.scss

@@ -1 +1 @@
-@import '../../../../../client/scss/core';
+@use '../../../../../client/scss/core';

wagtail/admin/static_src/wagtailadmin/scss/panels/draftail.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../client/scss/settings';
-@import '../../../../../../client/scss/tools';
-@import '../../../../../../client/scss/components/forms/input-base';
-@import '../../../../../../client/src/components/Draftail/Draftail';
+@use '../../../../../../client/scss/settings';
+@use '../../../../../../client/scss/tools';
+@use '../../../../../../client/scss/components/forms/input-base';
+@use '../../../../../../client/src/components/Draftail/Draftail';

wagtail/admin/static_src/wagtailadmin/scss/panels/streamfield.scss

@@ -1,3 +1,3 @@
-@import '../../../../../../client/scss/settings';
-@import '../../../../../../client/scss/tools';
-@import '../../../../../../client/src/components/StreamField/StreamField';
+@use '../../../../../../client/scss/settings';
+@use '../../../../../../client/scss/tools';
+@use '../../../../../../client/src/components/StreamField/StreamField';

wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss

@@ -1,5 +1,5 @@
-@import '../../../../../../client/scss/settings';
-@import '../../../../../../client/scss/tools';
+@use '../../../../../../client/scss/settings';
+@use '../../../../../../client/scss/tools';
 
 .typed-table-block {
   // Layout is handled by the table markup.