Merge pull request #844 from L4Ph/sass-migrator

SCSSから`@import`を廃止する
remap-keys · Jun 9, 2024 · 69fe1f1 · 69fe1f1
2 parents 7c7691e + eaf5de5
commit 69fe1f1
Show file tree

Hide file tree

Showing 68 changed files with 281 additions and 279 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
     "reinvented-color-wheel": "^0.2.10",
-    "sass": "^1.49.8",
+    "sass": "^1.77.4",
     "tss-react": "^3.3.1",
     "typescript": "^5.4.5",
     "web-vitals": "^1.1.0"

diff --git a/src/_variables.scss b/src/_variables.scss
@@ -1,3 +1,4 @@
+@use 'sass:map';
 :root {
   --header-height: 42px;
   --key-height: 56px;
@@ -43,7 +44,7 @@ $breakpoints: (
   'xl': 'screen and (min-width: 1001px)',
 ) !default;
 @mixin mq($breakpoint: md) {
-  @media #{map-get($breakpoints, $breakpoint)} {
+  @media #{map.get($breakpoints, $breakpoint)} {
     @content;
   }
 }
diff --git a/src/components/catalog/content/Content.scss b/src/components/catalog/content/Content.scss
@@ -1,4 +1,4 @@
-@import '../../../variables';
+@use '../../../variables';
 .catalog-content {
   display: flex;
   position: relative;
@@ -29,14 +29,14 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding-top: $space-xl;
+  padding-top: variables.$space-xl;
   background-color: white;
   flex: 1 1;
   width: 100%;
   height: 100vh;
 }
 
-@include mq(sm) {
+@include variables.mq(sm) {
   .catalog-content {
     padding-top: calc(var(--key-height));
   }

diff --git a/src/components/catalog/header/Header.scss b/src/components/catalog/header/Header.scss
@@ -1,4 +1,4 @@
-@import '../../../_variables.scss';
+@use '../../../_variables.scss';
 
 .catalog-header {
   display: flex;
@@ -8,7 +8,7 @@
   flex-direction: row;
   align-items: center;
   margin: 0;
-  padding: 0 $space-m;
+  padding: 0 variables.$space-m;
   background: white;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   z-index: 2;

diff --git a/src/components/catalog/keyboard/CatalogKeyboard.scss b/src/components/catalog/keyboard/CatalogKeyboard.scss
@@ -1,4 +1,4 @@
-@import '../../../variables';
+@use '../../../variables';
 
 .catalog-keyboard {
   &-wrapper {
@@ -30,7 +30,7 @@
     width: 100%;
   }
 
-  @include mq(sm) {
+  @include variables.mq(sm) {
     &-header {
       padding: 8px;
     }

diff --git a/src/components/catalog/keyboard/CatalogKeyboardHeader.scss b/src/components/catalog/keyboard/CatalogKeyboardHeader.scss
@@ -1,4 +1,4 @@
-@import '../../../variables';
+@use '../../../variables';
 
 .catalog-keyboard-header {
   color: white;
@@ -16,7 +16,7 @@
     flex-direction: row;
     width: 100%;
     padding: 16px 16px 16px 8px;
-    background-color: $primary;
+    background-color: variables.$primary;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
@@ -43,7 +43,7 @@
     & h6 {
       font-size: 0.9rem;
     }
-    @include mq(lg) {
+    @include variables.mq(lg) {
       & h1 {
         font-size: 24px;
         font-weight: bold;
@@ -72,7 +72,7 @@
     &-stores {
       margin-left: 16px;
     }
-    @include mq(lg) {
+    @include variables.mq(lg) {
       &-github {
         margin-left: 8px;
         div {
@@ -99,7 +99,7 @@
   }
 }
 
-@include mq(sm) {
+@include variables.mq(sm) {
   .catalog-keyboard-header {
     margin-top: 0;
     margin-bottom: 8px;

diff --git a/src/components/catalog/keyboard/build/BuildParametersDialog.scss b/src/components/catalog/keyboard/build/BuildParametersDialog.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables';
+@use '../../../../variables';
 
 .build-parameters-dialog {
   &-content {

diff --git a/src/components/catalog/keyboard/build/CatalogBuild.scss b/src/components/catalog/keyboard/build/CatalogBuild.scss
@@ -1,4 +1,4 @@
-@import 'src/variables';
+@use '../../../../variables';
 
 .catalog-build {
   &-container {

diff --git a/src/components/catalog/keyboard/firmware/CatalogFirmware.scss b/src/components/catalog/keyboard/firmware/CatalogFirmware.scss
@@ -1,4 +1,4 @@
-@import 'src/variables';
+@use '../../../../variables';
 
 .catalog-firmware {
   &-wrapper {
@@ -32,7 +32,7 @@
 
   &-total-download-count {
     width: 100%;
-    margin-bottom: $space-m;
+    margin-bottom: variables.$space-m;
   }
 
   &-card {

diff --git a/src/components/catalog/keyboard/introduction/CatalogIntroduction.scss b/src/components/catalog/keyboard/introduction/CatalogIntroduction.scss
@@ -1,4 +1,4 @@
-@import 'src/variables';
+@use '../../../../variables';
 
 .catalog-introduction {
   &-wrapper {
@@ -19,7 +19,7 @@
     margin-bottom: 32px;
   }
 
-  @include mq(sm) {
+  @include variables.mq(sm) {
     &-container {
       padding-top: 0;
     }
@@ -45,7 +45,7 @@
       width: 438px;
       align-items: center;
     }
-    @include mq(lg) {
+    @include variables.mq(lg) {
       .image-gallery-slides {
         width: 100%;
       }
@@ -57,11 +57,11 @@
       &.active,
       &:focus {
         outline: none;
-        border: 2px solid $primary;
+        border: 2px solid variables.$primary;
       }
     }
 
-    @include mq(lg) {
+    @include variables.mq(lg) {
       .image-gallery-thumbnail {
         width: 80px;
       }
@@ -72,13 +72,13 @@
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      color: $color-gray-600;
+      color: variables.$color-gray-600;
       width: 438px;
       height: 328px;
-      background-color: $color-gray-300;
+      background-color: variables.$color-gray-300;
     }
   }
-  @include mq(sm) {
+  @include variables.mq(sm) {
     &-image {
       padding: 0;
       &-nothing {
@@ -131,7 +131,7 @@
     cursor: pointer;
 
     &:hover {
-      border: 1px solid $color-gray-300;
+      border: 1px solid variables.$color-gray-300;
     }
 
     &-image {
@@ -145,13 +145,13 @@
     &-no-image {
       width: 100px;
       height: 75px;
-      border: 1px dotted $color-gray-300;
+      border: 1px dotted variables.$color-gray-300;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      color: $color-gray-600;
-      background-color: $color-gray-300;
+      color: variables.$color-gray-600;
+      background-color: variables.$color-gray-300;
       font-size: 0.8rem;
     }
 

diff --git a/src/components/catalog/keyboard/keymap/CatalogKeymap.scss b/src/components/catalog/keyboard/keymap/CatalogKeymap.scss
@@ -1,4 +1,4 @@
-@import 'src/variables';
+@use '../../../../variables';
 
 .catalog-keymap {
   &-container {
@@ -85,7 +85,7 @@
       justify-content: center;
       align-items: center;
       flex-wrap: wrap;
-      padding: $space-l $space-l 0 $space-l;
+      padding: variables.$space-l variables.$space-l 0 variables.$space-l;
       z-index: 2;
     }
 

diff --git a/src/components/catalog/keyboard/keymap/CatalogKeymapList.scss b/src/components/catalog/keyboard/keymap/CatalogKeymapList.scss
@@ -1,4 +1,4 @@
-@import 'src/variables';
+@use '../../../../variables';
 
 .catalog-keymap-list {
   &-wrapper {
@@ -12,6 +12,6 @@
   }
 
   &-row-selected {
-    background-color: $primary !important;
+    background-color: variables.$primary !important;
   }
 }
diff --git a/src/components/catalog/search/CatalogSearch.scss b/src/components/catalog/search/CatalogSearch.scss
@@ -1,4 +1,4 @@
-@import '../../../variables';
+@use '../../../variables';
 
 .catalog-search-wrapper {
   position: relative;
@@ -107,8 +107,8 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    color: $color-gray-600;
-    background-color: $color-gray-300;
+    color: variables.$color-gray-600;
+    background-color: variables.$color-gray-300;
   }
 
   &-content {
@@ -167,7 +167,7 @@
   }
 }
 
-@include mq(sm) {
+@include variables.mq(sm) {
   .catalog-search-result-card {
     flex-direction: column;
     height: 210px;

diff --git a/src/components/catalog/search/CatalogSearchForm.scss b/src/components/catalog/search/CatalogSearchForm.scss
@@ -1,4 +1,4 @@
-@import '../../../variables';
+@use '../../../variables';
 .catalog-search-condition-container {
   display: flex;
   flex-direction: column;

diff --git a/src/components/common/anchortypography/AnchorTypography.scss b/src/components/common/anchortypography/AnchorTypography.scss
@@ -1,4 +1,4 @@
-@import '../../../variables';
+@use '../../../variables';
 
 .anchor-typography {
   &-link {

diff --git a/src/components/common/auth/AuthProviderDialog.scss b/src/components/common/auth/AuthProviderDialog.scss
@@ -1,4 +1,4 @@
-@import 'src/variables';
+@use '../../../variables';
 
 .auth-provider-dialog {
   .close-dialog {
@@ -7,7 +7,7 @@
     right: 20px;
 
     &:hover {
-      color: $primary-light;
+      color: variables.$primary-light;
       cursor: pointer;
     }
   }
@@ -18,7 +18,7 @@
 
     &-provider {
       display: inline-block;
-      margin-left: $space-m;
+      margin-left: variables.$space-m;
     }
   }
 }
diff --git a/src/components/common/auth/ProfileIcon.scss b/src/components/common/auth/ProfileIcon.scss
@@ -1,4 +1,4 @@
-@import 'src/variables';
+@use '../../../variables';
 
 .profile-icon {
   &-avatar {

diff --git a/src/components/common/firmware/FlashFirmwareDialog.scss b/src/components/common/firmware/FlashFirmwareDialog.scss
@@ -1,4 +1,4 @@
-@import '../../../variables';
+@use '../../../variables';
 
 .flash-firmware-dialog {
   &-info {
@@ -26,7 +26,7 @@
     justify-content: center;
     margin: 8px;
     padding: 8px;
-    border: 1px solid $color-gray-300;
+    border: 1px solid variables.$color-gray-300;
 
     &-items {
       display: flex;

diff --git a/src/components/common/firmware/UploadFirmwareDialog.scss b/src/components/common/firmware/UploadFirmwareDialog.scss
@@ -1,4 +1,4 @@
-@import '../../../variables';
+@use '../../../variables';
 
 .upload-firmware-dialog {
   &-upload-file-form {
@@ -24,7 +24,7 @@
     }
 
     &-message {
-      color: $color-gray-500;
+      color: variables.$color-gray-500;
     }
   }
 }