Move Sass from legacy imports to new module system

Author: thibaudcolas

src/api/_constants.scss

@@ -69,3 +69,11 @@ $draftail-page-overlay-z-index: $draftail-toolbar-z-index + 10 !default;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+// This makes it possible to add styles to rich text content within the editor,
+// without Draftail users having to know exactly which Draft.js class to use.
+@mixin draftail-richtext-styles {
+  .#{$DRAFTAIL}Editor .DraftEditor-editorContainer {
+    @content;
+  }
+}

src/blocks/DividerBlock.scss

@@ -1,3 +1,5 @@
+@use "../api/constants" as *;
+
 .#{$DRAFTAIL}DividerBlock {
   border: 0;
   background: $color-light-grey;

src/components/ComboBox/ComboBox.scss

@@ -1,3 +1,5 @@
+@use "../../api/constants" as *;
+
 @mixin sr-only() {
   position: absolute;
   width: 1px;

src/components/DraftailEditor.scss

@@ -1,3 +1,5 @@
+@use "../api/constants" as *;
+
 .#{$DRAFTAIL}Editor {
   --draftail-offset-inline-start: 2rem;
   --draftail-text-direction: 1;
@@ -65,11 +67,3 @@
 .#{$DRAFTAIL}Editor .public-DraftEditorPlaceholder-inner {
   margin: $draftail-block-spacing 0;
 }
-
-// This makes it possible to add styles to rich text content within the editor,
-// without Draftail users having to know exactly which Draft.js class to use.
-@mixin draftail-richtext-styles {
-  .#{$DRAFTAIL}Editor .DraftEditor-editorContainer {
-    @content;
-  }
-}

src/components/Icon.scss

@@ -1,3 +1,5 @@
+@use "../api/constants" as *;
+
 .#{$DRAFTAIL}Icon {
   fill: currentColor;
   pointer-events: none;

src/components/PlaceholderStyles/PlaceholderStyles.scss

@@ -1,3 +1,5 @@
+@use "../../api/constants" as *;
+
 // Avoid styling list items as they commonly have markers in the ::before pseudo element.
 .#{$DRAFTAIL}block--empty:not([class*="-list-item"])::before {
   position: absolute;

src/components/Toolbar/BlockToolbar/BlockToolbar.scss

@@ -1,3 +1,5 @@
+@use "../../../api/constants" as *;
+
 .#{$DRAFTAIL}BlockToolbar {
   // stylelint-disable-next-line property-disallowed-list
   float: left;

src/components/Toolbar/FloatingToolbar/FloatingToolbar.scss

@@ -1,3 +1,5 @@
+@use "../../../api/constants" as *;
+
 .#{$DRAFTAIL}FloatingToolbar {
   padding: $controls-spacing;
   background-color: $draftail-editor-chrome;

src/components/Toolbar/InlineToolbar.scss

@@ -1,3 +1,5 @@
+@use "../../api/constants" as *;
+
 $button-size: 1.5rem;
 
 .#{$DRAFTAIL}ToolbarButton--pin {

src/components/Toolbar/MetaToolbar.scss

@@ -1,3 +1,5 @@
+@use "../../api/constants" as *;
+
 .#{$DRAFTAIL}MetaToolbar {
   position: relative;
   display: flex;