diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 587fbda168..07240c2d00 100644 --- a/CHANGELOG.txt +++ b/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) diff --git a/client/scss/_settings.scss b/client/scss/_settings.scss index 9425c29f04..19e6f89e23 100644 --- a/client/scss/_settings.scss +++ b/client/scss/_settings.scss @@ -1 +1 @@ -@import 'settings/variables'; +@forward 'settings/variables'; diff --git a/client/scss/_tools.scss b/client/scss/_tools.scss index a21e8d4da3..65405d5d82 100644 --- a/client/scss/_tools.scss +++ b/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'; diff --git a/client/scss/components/_a11y-result.scss b/client/scss/components/_a11y-result.scss index 06323f5ca6..966a6bd99c 100644 --- a/client/scss/components/_a11y-result.scss +++ b/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'); diff --git a/client/scss/components/_avatar.scss b/client/scss/components/_avatar.scss index 78c5fe8b1e..5727f5ae47 100644 --- a/client/scss/components/_avatar.scss +++ b/client/scss/components/_avatar.scss @@ -1,3 +1,5 @@ +@use '../tools' as *; + // user avatars .avatar { border-radius: 100%; diff --git a/client/scss/components/_breadcrumbs.scss b/client/scss/components/_breadcrumbs.scss index e417df3fa6..41e98ce156 100644 --- a/client/scss/components/_breadcrumbs.scss +++ b/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; diff --git a/client/scss/components/_bulk_actions.scss b/client/scss/components/_bulk_actions.scss index 9d0a74c9f3..2f36071585 100644 --- a/client/scss/components/_bulk_actions.scss +++ b/client/scss/components/_bulk_actions.scss @@ -1,3 +1,5 @@ +@use '../tools' as *; + .bulk-actions-filter-checkbox { .table-headers & { > div { diff --git a/client/scss/components/_button.scss b/client/scss/components/_button.scss index a5ee0c5b3a..3aca51dda5 100644 --- a/client/scss/components/_button.scss +++ b/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'); diff --git a/client/scss/components/_chooser.scss b/client/scss/components/_chooser.scss index db99fe433a..e7dc06022f 100644 --- a/client/scss/components/_chooser.scss +++ b/client/scss/components/_chooser.scss @@ -1,4 +1,5 @@ @use 'sass:math'; +@use '../tools' as *; $preview-size: 2.625rem; // 42px diff --git a/client/scss/components/_dialog.scss b/client/scss/components/_dialog.scss index 50fff5020b..d68cea5d18 100644 --- a/client/scss/components/_dialog.scss +++ b/client/scss/components/_dialog.scss @@ -1,3 +1,5 @@ +@use '../tools' as *; + .w-dialog { --w-dialog-close-icon-color: theme('colors.icon-primary'); diff --git a/client/scss/components/_dropdown-button.scss b/client/scss/components/_dropdown-button.scss index 5f21d2d319..cc65143572 100644 --- a/client/scss/components/_dropdown-button.scss +++ b/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'); diff --git a/client/scss/components/_filters.scss b/client/scss/components/_filters.scss index 40028f7d0d..9b27d48ffc 100644 --- a/client/scss/components/_filters.scss +++ b/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')); diff --git a/client/scss/components/_footer.scss b/client/scss/components/_footer.scss index bfe4c7d4bf..2212616737 100644 --- a/client/scss/components/_footer.scss +++ b/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); diff --git a/client/scss/components/_form-side.scss b/client/scss/components/_form-side.scss index 844d695d2b..1a7a379871 100644 --- a/client/scss/components/_form-side.scss +++ b/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; diff --git a/client/scss/components/_grid.legacy.scss b/client/scss/components/_grid.legacy.scss index 0876a6c773..0a68eef5b8 100644 --- a/client/scss/components/_grid.legacy.scss +++ b/client/scss/components/_grid.legacy.scss @@ -1,3 +1,6 @@ +@use '../tools' as *; +@use '../settings' as *; + .wrapper { @include clearfix(); @apply w-transition-sidebar; diff --git a/client/scss/components/_header.scss b/client/scss/components/_header.scss index ce077d2027..7fd92fae28 100644 --- a/client/scss/components/_header.scss +++ b/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; diff --git a/client/scss/components/_help-block.scss b/client/scss/components/_help-block.scss index 3ebe1d0d67..9d301a1c06 100644 --- a/client/scss/components/_help-block.scss +++ b/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; diff --git a/client/scss/components/_icons.scss b/client/scss/components/_icons.scss index bde371eba5..7550191707 100644 --- a/client/scss/components/_icons.scss +++ b/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 diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss index 17b6d747b7..88ec623c69 100644 --- a/client/scss/components/_listing.scss +++ b/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 { diff --git a/client/scss/components/_loading-mask.scss b/client/scss/components/_loading-mask.scss index 43d55dadf5..b586216e6e 100644 --- a/client/scss/components/_loading-mask.scss +++ b/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 { diff --git a/client/scss/components/_messages.scss b/client/scss/components/_messages.scss index 097452d9e1..1f19f4bbdb 100644 --- a/client/scss/components/_messages.scss +++ b/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 diff --git a/client/scss/components/_modals.scss b/client/scss/components/_modals.scss index 085bcfdde9..cf7e31dba0 100644 --- a/client/scss/components/_modals.scss +++ b/client/scss/components/_modals.scss @@ -1,3 +1,5 @@ +@use '../tools' as *; + $zindex-modal-background: 500; .fade { diff --git a/client/scss/components/_panel.scss b/client/scss/components/_panel.scss index 239a8dc407..95536f277e 100644 --- a/client/scss/components/_panel.scss +++ b/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'); diff --git a/client/scss/components/_preview-panel.scss b/client/scss/components/_preview-panel.scss index a61567e11e..a46d80a724 100644 --- a/client/scss/components/_preview-panel.scss +++ b/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( diff --git a/client/scss/components/_progressbar.scss b/client/scss/components/_progressbar.scss index 1f1e5f7b51..dea86a8378 100644 --- a/client/scss/components/_progressbar.scss +++ b/client/scss/components/_progressbar.scss @@ -1,3 +1,5 @@ +@use '../tools' as *; + .progress { border-radius: 1.2em; background-color: theme('colors.surface-button-hover'); diff --git a/client/scss/components/_status-tag.scss b/client/scss/components/_status-tag.scss index 4153d38cbf..3ecf617273 100644 --- a/client/scss/components/_status-tag.scss +++ b/client/scss/components/_status-tag.scss @@ -1,4 +1,5 @@ @use 'sass:color'; +@use '../settings' as *; .w-status { border-radius: 2px; diff --git a/client/scss/components/_summary.scss b/client/scss/components/_summary.scss index b14178eb9f..3c4092254e 100644 --- a/client/scss/components/_summary.scss +++ b/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'); diff --git a/client/scss/components/_tag.scss b/client/scss/components/_tag.scss index 315432b8c4..d88f3140fa 100644 --- a/client/scss/components/_tag.scss +++ b/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; diff --git a/client/scss/components/_userbar.scss b/client/scss/components/_userbar.scss index dddb589982..efd8471e17 100644 --- a/client/scss/components/_userbar.scss +++ b/client/scss/components/_userbar.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use 'sass:math'; @use 'sass:string'; +@use '../tools' as *; // ============================================================================= // Variables diff --git a/client/scss/components/_workflow-timeline.scss b/client/scss/components/_workflow-timeline.scss index 43b99b9d8d..bd4752f83a 100644 --- a/client/scss/components/_workflow-timeline.scss +++ b/client/scss/components/_workflow-timeline.scss @@ -1,3 +1,5 @@ +@use '../tools' as *; + .workflow-timeline { @apply w-label-3; padding: 0; diff --git a/client/scss/components/browser-message.scss b/client/scss/components/browser-message.scss index 696bf9370e..d96a8493b8 100644 --- a/client/scss/components/browser-message.scss +++ b/client/scss/components/browser-message.scss @@ -1,3 +1,5 @@ +@use '../tools' as *; + @include media-breakpoint-up(sm) { .browsermessage { margin: 0 0 0 -150px; diff --git a/client/scss/components/forms/_drop-zone.scss b/client/scss/components/forms/_drop-zone.scss index db38b3c292..8365c547c1 100644 --- a/client/scss/components/forms/_drop-zone.scss +++ b/client/scss/components/forms/_drop-zone.scss @@ -1,3 +1,5 @@ +@use '../../settings' as *; + // file drop zones .drop-zone { border-radius: 5px; diff --git a/client/scss/components/forms/_error-message.scss b/client/scss/components/forms/_error-message.scss index 775439e798..0e274df9fa 100644 --- a/client/scss/components/forms/_error-message.scss +++ b/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 diff --git a/client/scss/components/forms/_field-comment-control.scss b/client/scss/components/forms/_field-comment-control.scss index d3a1e07fa8..95900019fc 100644 --- a/client/scss/components/forms/_field-comment-control.scss +++ b/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'); diff --git a/client/scss/components/forms/_field-row.scss b/client/scss/components/forms/_field-row.scss index d11adfe9f4..d82104dbbc 100644 --- a/client/scss/components/forms/_field-row.scss +++ b/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'); diff --git a/client/scss/components/forms/_field-textoutput.scss b/client/scss/components/forms/_field-textoutput.scss index 21cc6fc410..736c397b34 100644 --- a/client/scss/components/forms/_field-textoutput.scss +++ b/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 diff --git a/client/scss/components/forms/_field.scss b/client/scss/components/forms/_field.scss index 0735f75dbb..b3628c7153 100644 --- a/client/scss/components/forms/_field.scss +++ b/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. diff --git a/client/scss/components/forms/_form-width.scss b/client/scss/components/forms/_form-width.scss index d5c36aeeb8..7bec6b60ea 100644 --- a/client/scss/components/forms/_form-width.scss +++ b/client/scss/components/forms/_form-width.scss @@ -1,3 +1,6 @@ +@use '../../tools' as *; +@use '../../settings' as *; + .w-form-width { @include max-form-width(); } diff --git a/client/scss/components/forms/_input-base.scss b/client/scss/components/forms/_input-base.scss index aac32c71ea..bb4ab9e39d 100644 --- a/client/scss/components/forms/_input-base.scss +++ b/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. diff --git a/client/scss/components/forms/_input-text.scss b/client/scss/components/forms/_input-text.scss index 1ac9000ff3..264c50bca7 100644 --- a/client/scss/components/forms/_input-text.scss +++ b/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"], diff --git a/client/scss/components/forms/_nested-panel.scss b/client/scss/components/forms/_nested-panel.scss index 5e3fbe4d25..dfff8650f9 100644 --- a/client/scss/components/forms/_nested-panel.scss +++ b/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); diff --git a/client/scss/components/forms/_radio-checkbox.scss b/client/scss/components/forms/_radio-checkbox.scss index 416fd66063..c31e028f85 100644 --- a/client/scss/components/forms/_radio-checkbox.scss +++ b/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; diff --git a/client/scss/components/forms/_required-mark.scss b/client/scss/components/forms/_required-mark.scss index 4f0ab0e0da..c426a54570 100644 --- a/client/scss/components/forms/_required-mark.scss +++ b/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; diff --git a/client/scss/components/forms/_select.scss b/client/scss/components/forms/_select.scss index 9577881907..925bfcbf23 100644 --- a/client/scss/components/forms/_select.scss +++ b/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; diff --git a/client/scss/components/forms/_tagit.scss b/client/scss/components/forms/_tagit.scss index ec314dd40c..710a3be3db 100644 --- a/client/scss/components/forms/_tagit.scss +++ b/client/scss/components/forms/_tagit.scss @@ -1,3 +1,5 @@ +@use './input-base' as *; + .tagit { @include input-base(); diff --git a/client/scss/core.scss b/client/scss/core.scss index 674ff14072..7b92762c3c 100644 --- a/client/scss/core.scss +++ b/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'; diff --git a/client/scss/elements/_elements.scss b/client/scss/elements/_elements.scss index 0dfab12732..d67704a445 100644 --- a/client/scss/elements/_elements.scss +++ b/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 { diff --git a/client/scss/elements/_forms.scss b/client/scss/elements/_forms.scss index 68d943be89..4b86405d46 100644 --- a/client/scss/elements/_forms.scss +++ b/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. diff --git a/client/scss/layouts/_404.scss b/client/scss/layouts/_404.scss index 486f5a1386..0d751f1420 100644 --- a/client/scss/layouts/_404.scss +++ b/client/scss/layouts/_404.scss @@ -1,3 +1,5 @@ +@use '../tools' as *; + .page404__bg { position: fixed; top: 0; diff --git a/client/scss/layouts/_compare-revisions.scss b/client/scss/layouts/_compare-revisions.scss index 4ac7dec572..010806fee9 100644 --- a/client/scss/layouts/_compare-revisions.scss +++ b/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); diff --git a/client/scss/layouts/_focal-point-chooser.scss b/client/scss/layouts/_focal-point-chooser.scss index 5c01e26e92..a3983ee2ca 100644 --- a/client/scss/layouts/_focal-point-chooser.scss +++ b/client/scss/layouts/_focal-point-chooser.scss @@ -1,3 +1,5 @@ +@use '../tools' as *; + .focal-point-chooser { position: relative; margin-bottom: 20px; diff --git a/client/scss/layouts/_login.scss b/client/scss/layouts/_login.scss index 8bd9ebd13a..d73c86bafe 100644 --- a/client/scss/layouts/_login.scss +++ b/client/scss/layouts/_login.scss @@ -1,3 +1,5 @@ +@use '../tools' as *; + @mixin login-fullscreen-background() { @at-root { :root { diff --git a/client/scss/layouts/_report.scss b/client/scss/layouts/_report.scss index a8dab9a43b..96072a57db 100644 --- a/client/scss/layouts/_report.scss +++ b/client/scss/layouts/_report.scss @@ -1,3 +1,5 @@ +@use '../tools' as *; + .report { @include nice-margin(); display: grid; diff --git a/client/scss/overrides/_utilities.focus.scss b/client/scss/overrides/_utilities.focus.scss index ed446416db..3749b5fc52 100644 --- a/client/scss/overrides/_utilities.focus.scss +++ b/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. diff --git a/client/scss/overrides/_utilities.legacy.scss b/client/scss/overrides/_utilities.legacy.scss index 6147c5cb62..d789af1cc9 100644 --- a/client/scss/overrides/_utilities.legacy.scss +++ b/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; diff --git a/client/scss/overrides/_utilities.tailwind.scss b/client/scss/overrides/_utilities.tailwind.scss new file mode 100644 index 0000000000..65dd5f63a7 --- /dev/null +++ b/client/scss/overrides/_utilities.tailwind.scss @@ -0,0 +1 @@ +@tailwind utilities; diff --git a/client/scss/overrides/_vendor.datetimepicker.scss b/client/scss/overrides/_vendor.datetimepicker.scss index be1b5b0d52..a7b42c64f0 100644 --- a/client/scss/overrides/_vendor.datetimepicker.scss +++ b/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'); diff --git a/client/scss/overrides/_vendor.tagit.scss b/client/scss/overrides/_vendor.tagit.scss index 775b883daa..f0a28fb63f 100644 --- a/client/scss/overrides/_vendor.tagit.scss +++ b/client/scss/overrides/_vendor.tagit.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use '../settings' as *; // taggit tagging .tagit { diff --git a/client/scss/overrides/_vendor.tippy.scss b/client/scss/overrides/_vendor.tippy.scss index c8bed5631d..d2ebce8fb5 100644 --- a/client/scss/overrides/_vendor.tippy.scss +++ b/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 diff --git a/client/scss/tools/_functions.breakpoints.scss b/client/scss/tools/_functions.breakpoints.scss index 4640e49e2e..0958fc6819 100644 --- a/client/scss/tools/_functions.breakpoints.scss +++ b/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. diff --git a/client/scss/tools/_mixins.breakpoints.scss b/client/scss/tools/_mixins.breakpoints.scss index a5b743a544..58bf75e204 100644 --- a/client/scss/tools/_mixins.breakpoints.scss +++ b/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. diff --git a/client/scss/tools/_mixins.general.scss b/client/scss/tools/_mixins.general.scss index 8def69b868..d682f0d1bb 100644 --- a/client/scss/tools/_mixins.general.scss +++ b/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; diff --git a/client/scss/tools/_mixins.grid.scss b/client/scss/tools/_mixins.grid.scss index 9480585a3e..e6f491c1ab 100644 --- a/client/scss/tools/_mixins.grid.scss +++ b/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; diff --git a/client/src/components/ComboBox/ComboBox.scss b/client/src/components/ComboBox/ComboBox.scss index e70c23f4f8..208439d419 100644 --- a/client/src/components/ComboBox/ComboBox.scss +++ b/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]'); diff --git a/client/src/components/ComboBoxPreview/ComboBoxPreview.scss b/client/src/components/ComboBoxPreview/ComboBoxPreview.scss index b21afbe5a1..76e87a805f 100644 --- a/client/src/components/ComboBoxPreview/ComboBoxPreview.scss +++ b/client/src/components/ComboBoxPreview/ComboBoxPreview.scss @@ -1,3 +1,5 @@ +@use '../../../scss/tools' as *; + .w-combobox-preview { padding: theme('spacing.5'); display: flex; diff --git a/client/src/components/CommentApp/components/Comment/style.scss b/client/src/components/CommentApp/components/Comment/style.scss index ee4110ba6d..d180630287 100644 --- a/client/src/components/CommentApp/components/Comment/style.scss +++ b/client/src/components/CommentApp/components/Comment/style.scss @@ -1,3 +1,5 @@ +@use '../../../../../scss/tools' as *; + .comment { @include box; @include more-contrast-interactive(); diff --git a/client/src/components/CommentApp/components/CommentHeader/style.scss b/client/src/components/CommentApp/components/CommentHeader/style.scss index e3e9427df1..3174a02078 100644 --- a/client/src/components/CommentApp/components/CommentHeader/style.scss +++ b/client/src/components/CommentApp/components/CommentHeader/style.scss @@ -1,3 +1,5 @@ +@use '../../../../../scss/tools' as *; + .comment-header { position: relative; diff --git a/client/src/components/CommentApp/main.scss b/client/src/components/CommentApp/main.scss index 2ad83a35b0..5eced5c2f0 100644 --- a/client/src/components/CommentApp/main.scss +++ b/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'); diff --git a/client/src/components/Draftail/Draftail.scss b/client/src/components/Draftail/Draftail.scss index 7a357c0cb5..c43fb7ff4d 100644 --- a/client/src/components/Draftail/Draftail.scss +++ b/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 diff --git a/client/src/components/Draftail/blocks/MediaBlock.scss b/client/src/components/Draftail/blocks/MediaBlock.scss index b2c46b75a4..407188e84c 100644 --- a/client/src/components/Draftail/blocks/MediaBlock.scss +++ b/client/src/components/Draftail/blocks/MediaBlock.scss @@ -1,3 +1,5 @@ +@use '../../../../scss/tools' as *; + .MediaBlock { display: inline-block; position: relative; diff --git a/client/src/components/Minimap/CollapseAll.scss b/client/src/components/Minimap/CollapseAll.scss index 2dbca3ab20..1c866ade75 100644 --- a/client/src/components/Minimap/CollapseAll.scss +++ b/client/src/components/Minimap/CollapseAll.scss @@ -1,3 +1,5 @@ +@use '../../../scss/tools' as *; + .w-minimap__collapse-all { @include more-contrast-interactive(); display: none; diff --git a/client/src/components/Minimap/Minimap.scss b/client/src/components/Minimap/Minimap.scss index b15c90995f..689e7149cd 100644 --- a/client/src/components/Minimap/Minimap.scss +++ b/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'; diff --git a/client/src/components/Minimap/MinimapItem.scss b/client/src/components/Minimap/MinimapItem.scss index 3b0b3e7c36..8aaaf41572 100644 --- a/client/src/components/Minimap/MinimapItem.scss +++ b/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; diff --git a/client/src/components/PageExplorer/PageExplorer.scss b/client/src/components/PageExplorer/PageExplorer.scss index 8a82a3ff4f..e7e63a8e22 100644 --- a/client/src/components/PageExplorer/PageExplorer.scss +++ b/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; diff --git a/client/src/components/PageExplorer/PageExplorerItem.scss b/client/src/components/PageExplorer/PageExplorerItem.scss index 8191b274c1..727df35441 100644 --- a/client/src/components/PageExplorer/PageExplorerItem.scss +++ b/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; } diff --git a/client/src/components/Sidebar/Sidebar.scss b/client/src/components/Sidebar/Sidebar.scss index c7599ed1b4..c3522dd18e 100644 --- a/client/src/components/Sidebar/Sidebar.scss +++ b/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'; diff --git a/client/src/components/Sidebar/SidebarPanel.scss b/client/src/components/Sidebar/SidebarPanel.scss index 1d07798679..45b3ef42fb 100644 --- a/client/src/components/Sidebar/SidebarPanel.scss +++ b/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}; diff --git a/client/src/components/Sidebar/menu/MenuItem.scss b/client/src/components/Sidebar/menu/MenuItem.scss index 9d2cd27c97..1fa7c5742a 100644 --- a/client/src/components/Sidebar/menu/MenuItem.scss +++ b/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); diff --git a/client/src/components/Sidebar/menu/SubMenuItem.scss b/client/src/components/Sidebar/menu/SubMenuItem.scss index 16444562c4..f8dbe525bb 100644 --- a/client/src/components/Sidebar/menu/SubMenuItem.scss +++ b/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: &; diff --git a/client/src/components/Sidebar/modules/MainMenu.scss b/client/src/components/Sidebar/modules/MainMenu.scss index 44e3428a85..f341d96f13 100644 --- a/client/src/components/Sidebar/modules/MainMenu.scss +++ b/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; diff --git a/client/src/components/Sidebar/modules/WagtailBranding.scss b/client/src/components/Sidebar/modules/WagtailBranding.scss index e12f0bc9f8..bd0cfa9f5a 100644 --- a/client/src/components/Sidebar/modules/WagtailBranding.scss +++ b/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 { diff --git a/client/src/components/StreamField/StreamField.scss b/client/src/components/StreamField/StreamField.scss index 0e059d7b20..07b682b36a 100644 --- a/client/src/components/StreamField/StreamField.scss +++ b/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; diff --git a/client/storybook/preview.scss b/client/storybook/preview.scss index 8f2e3112ce..569a7d236a 100644 --- a/client/storybook/preview.scss +++ b/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; diff --git a/docs/releases/6.5.md b/docs/releases/6.5.md index d6d131b20c..f9327ace38 100644 --- a/docs/releases/6.5.md +++ b/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 diff --git a/wagtail/admin/static_src/wagtailadmin/scss/core.scss b/wagtail/admin/static_src/wagtailadmin/scss/core.scss index 93e9674eec..ad4390deec 100644 --- a/wagtail/admin/static_src/wagtailadmin/scss/core.scss +++ b/wagtail/admin/static_src/wagtailadmin/scss/core.scss @@ -1 +1 @@ -@import '../../../../../client/scss/core'; +@use '../../../../../client/scss/core'; diff --git a/wagtail/admin/static_src/wagtailadmin/scss/panels/draftail.scss b/wagtail/admin/static_src/wagtailadmin/scss/panels/draftail.scss index de23bcb7f2..cde774bb51 100644 --- a/wagtail/admin/static_src/wagtailadmin/scss/panels/draftail.scss +++ b/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'; diff --git a/wagtail/admin/static_src/wagtailadmin/scss/panels/streamfield.scss b/wagtail/admin/static_src/wagtailadmin/scss/panels/streamfield.scss index 273ecd840e..c78d18e338 100644 --- a/wagtail/admin/static_src/wagtailadmin/scss/panels/streamfield.scss +++ b/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'; diff --git a/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss b/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss index 2aee8c98d7..fe0bb6b84e 100644 --- a/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss +++ b/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.