plugin: change @import directives to @use

jamiebrynes7 · jamiebrynes7 · commit 3fbf0f9201ec · 2025-12-14T15:56:58.000Z
diff --git a/plugin/src/styles/main.scss b/plugin/src/styles/main.scss
@@ -1,7 +1,7 @@
-@import "colors";
+@use "colors";
 
 body {
-  @each $name, $color in $todoist-colors {
+  @each $name, $color in colors.$todoist-colors {
     --todoist-#{$name}: #{$color};
   }
 }
diff --git a/plugin/src/ui/createTaskModal/styles.scss b/plugin/src/ui/createTaskModal/styles.scss
@@ -1,4 +1,4 @@
-@import "../../styles/colors.scss";
+@use "../../styles/colors.scss";
 
 .modal-popover {
   overflow-y: auto;
@@ -40,7 +40,7 @@
       display: flex;
       align-items: center;
 
-      &>*+* {
+      & > * + * {
         margin-left: 0.5em;
       }
     }
@@ -51,7 +51,7 @@
       border: 1px solid var(--color-base-25);
       color: var(--text-muted);
 
-      &>*+* {
+      & > * + * {
         margin-left: 0.5em;
       }
 
@@ -78,15 +78,15 @@
     .is-mobile & {
       flex-direction: column;
 
-      &>*+* {
+      & > * + * {
         margin-top: 0.5em;
       }
     }
 
     .task-creation-action {
       display: flex;
 
-      &>*+* {
+      & > * + * {
         margin-left: 1em;
       }
 
@@ -335,7 +335,7 @@ button.project-selector {
   display: flex;
   align-items: center;
 
-  &>*+* {
+  & > * + * {
     margin-left: 0.5em;
   }
 
@@ -395,7 +395,7 @@ button.project-selector {
       --project-padding: 104px;
     }
 
-    &>*+* {
+    & > * + * {
       margin-left: 0.5em;
     }
 
@@ -410,7 +410,7 @@ button.project-selector {
 }
 
 .todoist-project-icon {
-  @each $name, $color in $todoist-colors {
+  @each $name, $color in colors.$todoist-colors {
     &[data-project-color="#{$name}"] {
       --todoist-project-color: var(--todoist-#{$name});
     }
@@ -428,7 +428,7 @@ button.project-selector {
   display: flex;
   flex-direction: column;
 
-  &>*+* {
+  & > * + * {
     margin-top: 1em;
   }
 
@@ -481,7 +481,7 @@ button.project-selector {
     display: flex;
     justify-content: end;
 
-    &>*+* {
+    & > * + * {
       margin-left: 1em;
     }
   }
@@ -501,4 +501,4 @@ button.project-selector {
       color: var(--text-on-accent);
     }
   }
-}
+}
diff --git a/plugin/src/ui/query/styles.scss b/plugin/src/ui/query/styles.scss
@@ -1,4 +1,4 @@
-@import "../../styles/colors.scss";
+@use "../../styles/colors.scss";
 
 .todoist-query-header {
   display: flex;
@@ -161,7 +161,7 @@
           color: var(--todoist-label-color);
         }
 
-        @each $name, $color in $todoist-colors {
+        @each $name, $color in colors.$todoist-colors {
           &[data-project-color="#{$name}"] {
             --todoist-project-color: var(--todoist-#{$name});
           }
diff --git a/plugin/src/ui/settings/styles.scss b/plugin/src/ui/settings/styles.scss
@@ -1,4 +1,4 @@
-@import "../../styles/colors.scss";
+@use "../../styles/colors.scss";
 
 .mod-cta .setting-button-icon {
   margin-right: 0.5em;
@@ -82,7 +82,7 @@
       }
 
       .label-icon {
-        @each $name, $color in $todoist-colors {
+        @each $name, $color in colors.$todoist-colors {
           &[data-label-color="#{$name}"] {
             color: var(--todoist-#{$name});
           }

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`		`-@import "colors";`
	`1`	`+@use "colors";`
`2`	`2`
`3`	`3`	`body {`
`4`		`- @each $name, $color in $todoist-colors {`
	`4`	`+ @each $name, $color in colors.$todoist-colors {`
`5`	`5`	`--todoist-#{$name}: #{$color};`
`6`	`6`	`}`
`7`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import "../../styles/colors.scss";`
	`1`	`+@use "../../styles/colors.scss";`
`2`	`2`
`3`	`3`	`.modal-popover {`
`4`	`4`	`overflow-y: auto;`
`@@ -40,7 +40,7 @@`
`40`	`40`	`display: flex;`
`41`	`41`	`align-items: center;`
`42`	`42`
`43`		`- &>+ {`
	`43`	`+ & > * + * {`
`44`	`44`	`margin-left: 0.5em;`
`45`	`45`	`}`
`46`	`46`	`}`
`@@ -51,7 +51,7 @@`
`51`	`51`	`border: 1px solid var(--color-base-25);`
`52`	`52`	`color: var(--text-muted);`
`53`	`53`
`54`		`- &>+ {`
	`54`	`+ & > * + * {`
`55`	`55`	`margin-left: 0.5em;`
`56`	`56`	`}`
`57`	`57`
`@@ -78,15 +78,15 @@`
`78`	`78`	`.is-mobile & {`
`79`	`79`	`flex-direction: column;`
`80`	`80`
`81`		`- &>+ {`
	`81`	`+ & > * + * {`
`82`	`82`	`margin-top: 0.5em;`
`83`	`83`	`}`
`84`	`84`	`}`
`85`	`85`
`86`	`86`	`.task-creation-action {`
`87`	`87`	`display: flex;`
`88`	`88`
`89`		`- &>+ {`
	`89`	`+ & > * + * {`
`90`	`90`	`margin-left: 1em;`
`91`	`91`	`}`
`92`	`92`
`@@ -335,7 +335,7 @@ button.project-selector {`
`335`	`335`	`display: flex;`
`336`	`336`	`align-items: center;`
`337`	`337`
`338`		`- &>+ {`
	`338`	`+ & > * + * {`
`339`	`339`	`margin-left: 0.5em;`
`340`	`340`	`}`
`341`	`341`
`@@ -395,7 +395,7 @@ button.project-selector {`
`395`	`395`	`--project-padding: 104px;`
`396`	`396`	`}`
`397`	`397`
`398`		`- &>+ {`
	`398`	`+ & > * + * {`
`399`	`399`	`margin-left: 0.5em;`
`400`	`400`	`}`
`401`	`401`
`@@ -410,7 +410,7 @@ button.project-selector {`
`410`	`410`	`}`
`411`	`411`
`412`	`412`	`.todoist-project-icon {`
`413`		`- @each $name, $color in $todoist-colors {`
	`413`	`+ @each $name, $color in colors.$todoist-colors {`
`414`	`414`	`&[data-project-color="#{$name}"] {`
`415`	`415`	`--todoist-project-color: var(--todoist-#{$name});`
`416`	`416`	`}`
`@@ -428,7 +428,7 @@ button.project-selector {`
`428`	`428`	`display: flex;`
`429`	`429`	`flex-direction: column;`
`430`	`430`
`431`		`- &>+ {`
	`431`	`+ & > * + * {`
`432`	`432`	`margin-top: 1em;`
`433`	`433`	`}`
`434`	`434`
`@@ -481,7 +481,7 @@ button.project-selector {`
`481`	`481`	`display: flex;`
`482`	`482`	`justify-content: end;`
`483`	`483`
`484`		`- &>+ {`
	`484`	`+ & > * + * {`
`485`	`485`	`margin-left: 1em;`
`486`	`486`	`}`
`487`	`487`	`}`
`@@ -501,4 +501,4 @@ button.project-selector {`
`501`	`501`	`color: var(--text-on-accent);`
`502`	`502`	`}`
`503`	`503`	`}`
`504`		`-}`
	`504`	`+}`