Merge branch 'sass-use' into 'main'

sass: switch @import to @use

See merge request soapbox-pub/soapbox!3237

src/styles/application.scss

@@ -1,30 +1,30 @@
-@import 'variables';
-@import 'fonts';
-@import 'basics';
-@import 'loading';
-@import 'ui';
-@import 'emoji-picker';
-@import 'rtl';
-@import 'accessibility';
-@import 'navigation';
-@import 'autosuggest';
+@use 'variables';
+@use 'fonts';
+@use 'basics';
+@use 'loading';
+@use 'ui';
+@use 'emoji-picker';
+@use 'rtl';
+@use 'accessibility';
+@use 'navigation';
+@use 'autosuggest';
 
 // COMPONENTS
-@import 'components/buttons';
-@import 'components/modal';
-@import 'components/compose-form';
-@import 'components/status';
-@import 'components/reply-mentions';
-@import 'components/detailed-status';
-@import 'components/media-gallery';
-@import 'components/notification';
-@import 'components/display-name';
-@import 'components/columns';
-@import 'components/search';
-@import 'components/video-player';
-@import 'components/audio-player';
-@import 'components/crypto-donate';
-@import 'components/aliases';
-@import 'components/icon';
-@import 'forms';
-@import 'utilities';
+@use 'components/buttons';
+@use 'components/modal';
+@use 'components/compose-form';
+@use 'components/status';
+@use 'components/reply-mentions';
+@use 'components/detailed-status';
+@use 'components/media-gallery';
+@use 'components/notification';
+@use 'components/display-name';
+@use 'components/columns';
+@use 'components/search';
+@use 'components/video-player';
+@use 'components/audio-player';
+@use 'components/crypto-donate';
+@use 'components/aliases';
+@use 'components/icon';
+@use 'forms';
+@use 'utilities';

src/styles/components/compose-form.scss

@@ -1,3 +1,5 @@
+@use "../variables";
+
 .compose-form {
   &__warning {
     @apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
@@ -5,7 +7,7 @@
     strong {
       @apply font-medium;
 
-      @each $lang in $cjk-langs {
+      @each $lang in variables.$cjk-langs {
         &:lang(#{$lang}) {
           @apply font-bold;
         }
@@ -168,7 +170,7 @@
       strong {
         @apply block font-medium text-black dark:text-white;
 
-        @each $lang in $cjk-langs {
+        @each $lang in variables.$cjk-langs {
           &:lang(#{$lang}) {
             @apply font-bold;
           }

src/styles/components/search.scss

@@ -1,3 +1,5 @@
+@use "../fonts";
+
 .search {
   position: relative;
 }
@@ -14,7 +16,7 @@
 
   .svg-icon {
     @apply right-4 rtl:left-4 rtl:right-auto text-gray-400;
-    @include font-size(16);
+    @include fonts.font-size(16);
     cursor: default;
     display: inline-block;
     position: absolute;