scssからimportをなくした

src/components/UI/ASlider.vue

@@ -61,13 +61,13 @@ const value = useModelValueSyncer(props, emit)
 </script>
 
 <style lang="scss">
-$dotBgColor: $theme-ui-secondary-default;
-$dotShadow: none;
+@use 'vue-slider-component/lib/theme/default.scss' with (
+  $dotBgColor: $theme-ui-secondary-default,
+  $dotShadow: none,
 
-$bgColor: var(--specific-slider-background);
-$themeColor: $theme-ui-secondary-default;
+  $bgColor: var(--specific-slider-background),
+  $themeColor: $theme-ui-secondary-default,
 
-$tooltipBgColor: $theme-ui-secondary-default;
-
-@import 'vue-slider-component/lib/theme/default.scss';
+  $tooltipBgColor: $theme-ui-secondary-default
+);
 </style>

src/components/UI/AudioPlayer/AudioPlayerTimeSlider.vue

@@ -48,6 +48,8 @@ const disabled = computed(() => props.duration === 0)
 </script>
 
 <style lang="scss" module>
+@use 'sass:meta';
+
 .timeSlider {
   &[data-show-background-on-hover='true']:not([aria-disabled='true']):hover {
     background: rgba(32, 33, 36, 0.06);
@@ -63,14 +65,16 @@ const disabled = computed(() => props.duration === 0)
   &:not(:hover) :global(.vue-slider-dot-handle) {
     opacity: 0;
   }
-
   :global {
-    $dotBgColor: #1e1e1e;
-
-    $bgColor: #b7b9ba;
-    $themeColor: #585859;
+    @include meta.load-css(
+      'vue-slider-component/lib/theme/default.scss',
+      $with: (
+        dotBgColor: #1e1e1e,
 
-    @import 'vue-slider-component/lib/theme/default.scss';
+        bgColor: #b7b9ba,
+        themeColor: #585859
+      )
+    );
   }
 }
 </style>

src/components/UI/AudioPlayer/AudioPlayerVolumeSlider.vue

@@ -57,6 +57,8 @@ const toggleVolume = () => {
 </script>
 
 <style lang="scss" module>
+@use 'sass:meta';
+
 $afterVolumeSliderWidth: 48px;
 
 .volume {
@@ -71,12 +73,15 @@ $afterVolumeSliderWidth: 48px;
   }
 
   :global {
-    $dotBgColor: #1e1e1e;
-
-    $bgColor: #b7b9ba;
-    $themeColor: #585859;
+    @include meta.load-css(
+      'vue-slider-component/lib/theme/default.scss',
+      $with: (
+        dotBgColor: #1e1e1e,
 
-    @import 'vue-slider-component/lib/theme/default.scss';
+        bgColor: #b7b9ba,
+        themeColor: #585859
+      )
+    );
   }
 }
 .volumeSlider {

src/components/UI/FormRangeWithValue.vue

@@ -49,21 +49,28 @@ const showValue = computed(() => props.format(value.value))
 </script>
 
 <style lang="scss" module>
+@use 'sass:meta';
+
 .container {
   display: flex;
   align-items: center;
 }
+
 .range {
   flex: 1 1;
   margin-right: 16px;
   :global {
-    $dotBgColor: $theme-accent-primary-background;
-    $dotShadow: none;
-
-    $bgColor: rgba(107, 125, 138, 0.5); // $theme-ui-secondary-default;
-    $themeColor: $theme-accent-primary-background;
+    @include meta.load-css(
+      'vue-slider-component/lib/theme/default.scss',
+      $with: (
+        dotBgColor: $theme-accent-primary-background,
+        dotShadow: none,
 
-    @import 'vue-slider-component/lib/theme/default.scss';
+        bgColor: rgba(107, 125, 138, 0.5),
+        // $theme-ui-secondary-default;
+        themeColor: $theme-accent-primary-background
+      )
+    );
   }
 }
 </style>

src/styles/_emoji.scss

@@ -1,5 +1,6 @@
-@import '@traptitech/traq-markdown-it/src/css/stamp';
+@use 'sass:meta';
+@include meta.load-css('@traptitech/traq-markdown-it/src/css/stamp');
 
 html[data-eco-mode='false'] {
-  @import '@traptitech/traq-markdown-it/src/css/stampEffect';
+  @include meta.load-css('@traptitech/traq-markdown-it/src/css/stampEffect');
 }

src/styles/_markdown.scss

@@ -1,36 +1,37 @@
-// KaTeXのCSSは遅延読み込みするのでmain.tsを参照
-$link-color: var(--markdown-link-text);
-$hr-color: var(--markdown-hr-text);
-$h6-color: var(--markdown-h6-text);
-$quote-text-color: var(--markdown-quote-text);
-$quote-bar-color: var(--markdown-quote-bar);
-$code-background-color: var(--markdown-code-background);
-$code-file-name-background-color: var(--markdown-code-file-name-background);
-$table-td-border-color: var(--markdown-table-td-border);
-$table-tr-border-color: var(--markdown-table-tr-border);
-$table-tr-background-color: var(--markdown-table-tr-background);
-$table-tr-background-color2: var(--markdown-table-tr-background2);
-$img-background-color: var(--markdown-img-background);
-$mark-color: var(--markdown-mark-text);
-$mark-background-color: var(--markdown-mark-background);
-$spoiler-background-color: var(--markdown-spoiler-background);
-$spoiler-shown-background-color: var(--markdown-spoiler-shown-background);
-$link-text-color: var(--markdown-embed-link-text);
-$link-background-color: var(--markdown-embed-link-background);
-$link-highlight-text-color: var(--markdown-embed-link-highlight-text);
-$link-highlight-background-color: var(
-  --markdown-embed-link-highlight-background
+@use 'sass:meta';
+@use '@traptitech/traq-markdown-it/src/css/markdown' with (
+  $link-color: var(--markdown-link-text),
+  $hr-color: var(--markdown-hr-text),
+  $h6-color: var(--markdown-h6-text),
+  $quote-text-color: var(--markdown-quote-text),
+  $quote-bar-color: var(--markdown-quote-bar),
+  $code-background-color: var(--markdown-code-background),
+  $code-file-name-background-color: var(--markdown-code-file-name-background),
+  $table-td-border-color: var(--markdown-table-td-border),
+  $table-tr-border-color: var(--markdown-table-tr-border),
+  $table-tr-background-color: var(--markdown-table-tr-background),
+  $table-tr-background-color2: var(--markdown-table-tr-background2),
+  $img-background-color: var(--markdown-img-background),
+  $mark-color: var(--markdown-mark-text),
+  $mark-background-color: var(--markdown-mark-background),
+  $spoiler-background-color: var(--markdown-spoiler-background),
+  $spoiler-shown-background-color: var(--markdown-spoiler-shown-background),
+  $link-text-color: var(--markdown-embed-link-text),
+  $link-background-color: var(--markdown-embed-link-background),
+  $link-highlight-text-color: var(--markdown-embed-link-highlight-text),
+  $link-highlight-background-color:
+    var(--markdown-embed-link-highlight-background)
 );
 
-@import '@traptitech/traq-markdown-it/src/css/markdown';
-
 html[data-code-highlight='light'] {
-  @import 'highlight.js/styles/atom-one-light';
+  @include meta.load-css('highlight.js/styles/atom-one-light');
 }
 html[data-code-highlight='dark'] {
-  @import 'highlight.js/styles/atom-one-dark';
+  @include meta.load-css('highlight.js/styles/atom-one-dark');
 }
 
+// KaTeXのCSSは遅延読み込みするのでmain.tsを参照
+
 html[data-stamp-edge='true'] {
   .emoji {
     filter: drop-shadow(0.1px 0.1px 0 rgb(255, 255, 255, 0.1))

src/styles/_mixins.scss

@@ -1,4 +1,5 @@
-@import './variables';
+@use 'variables';
+@forward 'variables';
 
 @mixin size-h1 {
   font-size: 1.5rem;
@@ -20,70 +21,70 @@
 }
 
 @mixin background-accent-primary {
-  background: $theme-accent-primary-background;
+  background: variables.$theme-accent-primary-background;
 }
 
 @mixin color-accent-primary {
-  color: $theme-accent-primary-default;
+  color: variables.$theme-accent-primary-default;
 }
 @mixin color-accent-primary-inactive {
-  color: $theme-accent-primary-inactive;
+  color: variables.$theme-accent-primary-inactive;
 }
 
 @mixin background-accent-error {
-  background: $theme-accent-error-default;
+  background: variables.$theme-accent-error-default;
 }
 
 @mixin background-primary {
-  background: $theme-background-primary-default;
+  background: variables.$theme-background-primary-default;
 }
 @mixin background-secondary {
-  background: $theme-background-secondary-default;
+  background: variables.$theme-background-secondary-default;
 }
 @mixin background-tertiary {
-  background: $theme-background-tertiary-default;
+  background: variables.$theme-background-tertiary-default;
 }
 
 @mixin color-ui-primary {
-  color: $theme-ui-primary-default;
+  color: variables.$theme-ui-primary-default;
 }
 @mixin color-ui-primary-inactive {
-  color: $theme-ui-primary-inactive;
+  color: variables.$theme-ui-primary-inactive;
 }
 @mixin color-ui-secondary {
-  color: $theme-ui-secondary-default;
+  color: variables.$theme-ui-secondary-default;
 }
 @mixin color-ui-secondary-inactive {
-  color: $theme-ui-secondary-inactive;
+  color: variables.$theme-ui-secondary-inactive;
 }
 @mixin color-ui-tertiary {
-  color: $theme-ui-tertiary-default;
+  color: variables.$theme-ui-tertiary-default;
 }
 
 @mixin color-text-primary {
-  color: $theme-text-primary-default;
+  color: variables.$theme-text-primary-default;
 }
 @mixin color-text-secondary {
-  color: $theme-text-secondary-default;
+  color: variables.$theme-text-secondary-default;
 }
 
 // -----
 
 @mixin color-common-text-white-primary {
-  color: $common-text-white-primary;
+  color: variables.$common-text-white-primary;
 }
 @mixin color-common-text-white-secondary {
-  color: $common-text-white-secondary;
+  color: variables.$common-text-white-secondary;
 }
 @mixin color-common-text-black {
-  color: $common-text-black;
+  color: variables.$common-text-black;
 }
 @mixin background-common-overlay {
-  background: $common-background-overlay;
+  background: variables.$common-background-overlay;
 }
 @mixin background-common-black {
-  background: $common-background-black;
+  background: variables.$common-background-black;
 }
 @mixin drop-shadow-default {
-  filter: $common-drop-shadow-default;
+  filter: variables.$common-drop-shadow-default;
 }

src/styles/_transition.scss

@@ -1,12 +1,13 @@
-@import './easing';
+@use 'easing';
+@forward 'easing';
 
 $vs: 'vertical-swap';
 $vs-reverse: 'vertical-swap-reverse';
 .#{$vs}-enter-active,
 .#{$vs}-leave-active,
 .#{$vs-reverse}-enter-active,
 .#{$vs-reverse}-leave-active {
-  transition: transform 0.3s $easeOutBack;
+  transition: transform 0.3s easing.$easeOutBack;
 }
 .#{$vs-reverse}-leave-to,
 .#{$vs}-enter-from {
@@ -19,10 +20,10 @@ $vs-reverse: 'vertical-swap-reverse';
 
 $ts: 'toast-slide';
 .#{$ts}-enter-active {
-  transition: all 0.3s $easeOutCirc;
+  transition: all 0.3s easing.$easeOutCirc;
 }
 .#{$ts}-leave-active {
-  transition: all 0.8s $easeInExpo;
+  transition: all 0.8s easing.$easeInExpo;
 }
 .#{$ts}-enter-from {
   transform: translateX(-20px);
@@ -39,7 +40,7 @@ $ts: 'toast-slide';
 $sv: 'slide-vertical';
 .#{$sv}-enter-active,
 .#{$sv}-leave-active {
-  transition: all 0.15s $easeOutQuad;
+  transition: all 0.15s easing.$easeOutQuad;
   height: 0;
 }
 
@@ -68,7 +69,7 @@ $bk: 'background-shadow';
 $tu: 'typing-users';
 .#{$tu}-enter-active,
 .#{$tu}-leave-active {
-  transition: all 0.5s $easeOutCubic;
+  transition: all 0.5s easing.$easeOutCubic;
 }
 .#{$tu}-enter-from,
 .#{$tu}-leave-to {
@@ -82,10 +83,10 @@ $ft: 'fade-top';
 $fb: 'fade-bottom';
 @each $c in $fl, $fr, $ft, $fb {
   .#{$c}-enter-active {
-    transition: all 0.3s $easeOutCirc;
+    transition: all 0.3s easing.$easeOutCirc;
   }
   .#{$c}-leave-active {
-    transition: all 0.3s $easeInCirc;
+    transition: all 0.3s easing.$easeInCirc;
   }
   .#{$c}-move {
     transition: transform 0.3s;
@@ -115,7 +116,7 @@ $fb: 'fade-bottom';
 $s: 'stamp';
 .#{$s}-enter-active,
 .#{$s}-leave-active {
-  transition: all 0.3s $easeOutCirc;
+  transition: all 0.3s easing.$easeOutCirc;
 }
 .#{$s}-enter-from,
 .#{$s}-leave-to {
@@ -125,10 +126,10 @@ $s: 'stamp';
 
 $p: 'post';
 .#{$p}-enter-active {
-  transition: all 0.3s $easeOutCirc;
+  transition: all 0.3s easing.$easeOutCirc;
 }
 .#{$p}-leave-active {
-  transition: all 0.3s $easeInCirc;
+  transition: all 0.3s easing.$easeInCirc;
 }
 .#{$p}-leave-to {
   transform: translateX(20px);
@@ -142,7 +143,7 @@ $p: 'post';
 $qr: 'quick-reaction';
 .#{$qr}-enter-active,
 .#{$qr}-leave-active {
-  transition: all 0.3s $easeOutCirc;
+  transition: all 0.3s easing.$easeOutCirc;
 }
 .#{$qr}-enter-from,
 .#{$qr}-leave-to {
@@ -153,7 +154,7 @@ $qr: 'quick-reaction';
 $z: 'zoom';
 .#{$z}-enter-active,
 .#{$z}-leave-active {
-  transition: all 0.15s $easeOutCirc;
+  transition: all 0.15s easing.$easeOutCirc;
 }
 .#{$z}-enter-from,
 .#{$z}-leave-to {

src/styles/common.scss

@@ -1,3 +1,7 @@
-@import './variables';
-@import './mixins';
-@import './z-index';
+@use 'variables';
+@use 'mixins';
+@use 'z-index';
+
+@forward 'variables';
+@forward 'mixins';
+@forward 'z-index';