Remplacement des directives @import dépréciées par @use et @forward

Alexinfos · Convolutio · commit e0504292dd0e · 2025-03-26T11:29:50.000+01:00
A certains endroits, les directives import ont été gardées, une
bascule vers use/forward demandant des modifications majeures dans
l'organisation du code.
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -1,3 +1,2 @@
 // 1. Build style
 import '../scss/main.scss';
-import '../scss/zmd.scss';
diff --git a/assets/js/main_zmd.js b/assets/js/main_zmd.js
@@ -0,0 +1,2 @@
+// 1. Build style
+import '../scss/zmd.scss';
diff --git a/assets/scss/base/_base.scss b/assets/scss/base/_base.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 html {
     font-size: 62.5%;
 }
diff --git a/assets/scss/base/_content.scss b/assets/scss/base/_content.scss
@@ -2,6 +2,9 @@
  * Base styling for content.
  * This is included in layout/_content.scss and zmd.scss
  */
+@use "../variables" as *;
+@use "../sprite" as *;
+
 p,
 > a,
 p a,
@@ -457,9 +460,6 @@ samp {
     font-family: $font-monospace;
 }
 
-// code
-@import "base/source-code";
-
 // touche
 kbd {
     padding: $length-2 $length-6;
diff --git a/assets/scss/base/_forms.scss b/assets/scss/base/_forms.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../sprite" as *;
+
 .content-container,
 .modals-container {
     form {
diff --git a/assets/scss/base/_helpers.scss b/assets/scss/base/_helpers.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .ir {
     background-color: transparent;
     border: 0;
diff --git a/assets/scss/base/_high-pixel-ratio.scss b/assets/scss/base/_high-pixel-ratio.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../sprite" as *;
+
 @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
        only screen and (min--moz-device-pixel-ratio: 1.3),
        only screen and (-o-min-device-pixel-ratio: 4/3),
diff --git a/assets/scss/base/_icons.scss b/assets/scss/base/_icons.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../sprite" as *;
+
 .ico {
     background-repeat: no-repeat;
     @include sprite();
diff --git a/assets/scss/base/_index.scss b/assets/scss/base/_index.scss
@@ -0,0 +1,26 @@
+/*------------------------
+1. Syntax highlighting theme
+------------------------*/
+@forward "base";
+@forward "tables";
+@forward "forms";
+
+/*------------------------
+2. Typography
+------------------------*/
+@forward "typography";
+
+/*------------------------
+3. Icons
+------------------------*/
+@forward "icons";
+
+/*------------------------
+4. Helpers
+------------------------*/
+@forward "helpers";
+
+/*-------------------------
+5. High pixel ratio (retina)
+-------------------------*/
+@forward "high-pixel-ratio";
diff --git a/assets/scss/base/_source-code.scss b/assets/scss/base/_source-code.scss
@@ -1,4 +1,5 @@
 // ZMD source code
+@use "../variables" as *;
 
 .hljs-code-div {
   display: flex;
diff --git a/assets/scss/base/_tables.scss b/assets/scss/base/_tables.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .table-wrapper {
     max-width: 100%;
     overflow: auto;
diff --git a/assets/scss/base/_typography.scss b/assets/scss/base/_typography.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 html,
 body,
 button,
diff --git a/assets/scss/components/_accessibility-bar.scss b/assets/scss/components/_accessibility-bar.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 #accessibility {
     list-style: none;
     margin: 0;
diff --git a/assets/scss/components/_alert-box.scss b/assets/scss/components/_alert-box.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .alert-box {
     position: relative;
 
diff --git a/assets/scss/components/_aside-meta.scss b/assets/scss/components/_aside-meta.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 aside.meta {
     display: flex;
     flex-direction: row;
diff --git a/assets/scss/components/_autocomplete.scss b/assets/scss/components/_autocomplete.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .autocomplete-wrapper {
     position: relative;
 
diff --git a/assets/scss/components/_breadcrumb.scss b/assets/scss/components/_breadcrumb.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+@use "../sprite" as *;
 .breadcrumb {
     display: none;
 }
diff --git a/assets/scss/components/_content-item.scss b/assets/scss/components/_content-item.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 $content-border-color: $grey-200;
 $content-item-height: $length-96;
 $content-reaction-offset: -$length-24; // -30px to not offset the meta
diff --git a/assets/scss/components/_dropdown.scss b/assets/scss/components/_dropdown.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 $dropdown-arrow-height: 10px;
 
 details.dropdown {
diff --git a/assets/scss/components/_editor-new.scss b/assets/scss/components/_editor-new.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .content-container {
     form {
         .alert-box {
diff --git a/assets/scss/components/_editor-old.scss b/assets/scss/components/_editor-old.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../sprite" as *;
+
 .zform-toolbar {
     margin: 0;
     padding: $length-2;
diff --git a/assets/scss/components/_featured-item.scss b/assets/scss/components/_featured-item.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .featured-resource-item {
     position: relative;
 
diff --git a/assets/scss/components/_hats.scss b/assets/scss/components/_hats.scss
@@ -1,3 +1,4 @@
+@use "../variables" as *;
 
 .hat,
 .hatlist a.btn {
diff --git a/assets/scss/components/_header-dropdown.scss b/assets/scss/components/_header-dropdown.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "../variables" as *;
 
 .header-dropdown {
     display: none;
diff --git a/assets/scss/components/_header-search.scss b/assets/scss/components/_header-search.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../sprite" as *;
+
 .search {
     position: relative;
     display: flex;
diff --git a/assets/scss/components/_index.scss b/assets/scss/components/_index.scss
@@ -0,0 +1,38 @@
+/*------------------------
+1. Header
+------------------------*/
+@forward "header-dropdown";
+@forward "header-search";
+@forward "accessibility-bar";
+
+/*------------------------
+2. Components
+------------------------*/
+@forward "alert-box";
+@forward "aside-meta";
+@forward "autocomplete";
+@forward "breadcrumb";
+@forward "content-item";
+@forward "dropdown";
+@forward "editor-new";
+@forward "editor-old";
+@forward "featured-item";
+@forward "markdown-help";
+@forward "members";
+@forward "mobile-menu";
+@forward "modals";
+@forward "moderation-alert";
+@forward "pagination";
+@forward "pygments";
+@forward "search-box";
+@forward "tags";
+@forward "hats";
+@forward "tooltips";
+@forward "topic-list";
+@forward "notification-list";
+@forward "topic-message";
+@forward "topic-new";
+@forward "user-profile";
+@forward "very-top-banner";
+@forward "linkbox";
+@forward "more-link";
diff --git a/assets/scss/components/_linkbox.scss b/assets/scss/components/_linkbox.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .content-linkbox-list {
     --color-linkbox-head: #{$grey-600};
     --color-linkbox-body: #{$grey-500};
diff --git a/assets/scss/components/_markdown-help.scss b/assets/scss/components/_markdown-help.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .markdown-help {
     position: relative;
 
diff --git a/assets/scss/components/_members.scss b/assets/scss/components/_members.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../sprite" as *;
+
 .deletable {
   display: flex;
   align-items: center;
diff --git a/assets/scss/components/_mobile-menu.scss b/assets/scss/components/_mobile-menu.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../sprite" as *;
+
 .mobile-menu,
 .mobile-menu-btn {
     display: none;
diff --git a/assets/scss/components/_modals.scss b/assets/scss/components/_modals.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .modal {
     display: none;
 }
diff --git a/assets/scss/components/_moderation-alert.scss b/assets/scss/components/_moderation-alert.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .moderation-alert {
     display: flex;
     align-items: center;
diff --git a/assets/scss/components/_more-link.scss b/assets/scss/components/_more-link.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .more-link {
     display: block;
 
diff --git a/assets/scss/components/_notification-list.scss b/assets/scss/components/_notification-list.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .notification-list {
     margin: $length-48 0 !important;
 
diff --git a/assets/scss/components/_pagination.scss b/assets/scss/components/_pagination.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .pagination {
     display: flex;
     flex-wrap: wrap;
diff --git a/assets/scss/components/_search-box.scss b/assets/scss/components/_search-box.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../sprite" as *;
+
 .search-box {
     position: relative;
     margin: $length-32 auto 0;
diff --git a/assets/scss/components/_tags.scss b/assets/scss/components/_tags.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .taglist {
     display: flex;
     flex-wrap: wrap;
diff --git a/assets/scss/components/_tooltips.scss b/assets/scss/components/_tooltips.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 $tooltip-arrow-size: $length-6;
 $tooltip-background-color: $grey-900;
 
diff --git a/assets/scss/components/_topic-list.scss b/assets/scss/components/_topic-list.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .topics-list-header {
     display: flex;
     justify-content: space-between;
diff --git a/assets/scss/components/_topic-message.scss b/assets/scss/components/_topic-message.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
 $message-arrow-width: 20px;
 
 div.msg-are-hidden {
diff --git a/assets/scss/components/_topic-new.scss b/assets/scss/components/_topic-new.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 #topic-result-container {
 	background-color: $true-white;
 	border: 1px solid $grey-200;
diff --git a/assets/scss/components/_user-profile.scss b/assets/scss/components/_user-profile.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "../variables" as *;
 
 body.userprofilepage {
     .flexpage-title-tool .actions button.is-following,
diff --git a/assets/scss/components/_very-top-banner.scss b/assets/scss/components/_very-top-banner.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 #very-top-banner {
     position: sticky;
     top: 0;
diff --git a/assets/scss/highlight/_index.scss b/assets/scss/highlight/_index.scss
@@ -0,0 +1,5 @@
+/*------------------------
+1. Base
+------------------------*/
+@forward "zest-hljs";
+@forward "zest-codemirror";
diff --git a/assets/scss/highlight/_zest-codemirror.scss b/assets/scss/highlight/_zest-codemirror.scss
@@ -2,6 +2,7 @@
 /* Based on a11y-light theme by ericwbailey: https://github.com/highlightjs/highlight.js/blob/35cd46312bf3e898471617c47d52f9528fedd763/src/styles/a11y-light.css */
 /* Itself based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
 /* @author: Amaury Carrade */
+@use "../variables" as *;
 
 .cm-s-zest {
     font-family: $font-monospace;
diff --git a/assets/scss/highlight/_zest-hljs.scss b/assets/scss/highlight/_zest-hljs.scss
@@ -2,6 +2,7 @@
 /* Based on a11y-light theme by ericwbailey: https://github.com/highlightjs/highlight.js/blob/35cd46312bf3e898471617c47d52f9528fedd763/src/styles/a11y-light.css */
 /* Itself based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
 /* @author: Amaury Carrade */
+@use "../variables" as *;
 
 // Comment
 .hljs-comment,
diff --git a/assets/scss/layout/_content.scss b/assets/scss/layout/_content.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../sprite" as *;
+
 .small-content-wrapper {
     width: 90%;
     max-width: $length-512;
@@ -233,7 +236,7 @@
         margin-bottom: $length-20;
         color: $black;
 
-        @import "base/content";
+        @import "../base/content";
     }
 
     .message-content {
diff --git a/assets/scss/layout/_footer.scss b/assets/scss/layout/_footer.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .page-footer {
     height: $length-38;
 
diff --git a/assets/scss/layout/_header.scss b/assets/scss/layout/_header.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../sprite" as *;
+
 $logo-horizontal-margin: $length-10;
 $logo-width: 24rem;
 
diff --git a/assets/scss/layout/_index.scss b/assets/scss/layout/_index.scss
@@ -0,0 +1,8 @@
+/*------------------------
+1. Layout
+------------------------*/
+@forward "header";
+@forward "sidebar";
+@forward "main";
+@forward "content";
+@forward "footer";
diff --git a/assets/scss/layout/_main.scss b/assets/scss/layout/_main.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../sprite" as *;
+
 .main {
     flex: 1;
     min-width: 0;
diff --git a/assets/scss/layout/_sidebar.scss b/assets/scss/layout/_sidebar.scss
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
diff --git a/assets/scss/mixins/_horizontal-list.scss b/assets/scss/mixins/_horizontal-list.scss
diff --git a/assets/scss/mixins/_index.scss b/assets/scss/mixins/_index.scss
diff --git a/assets/scss/pages/_content-editor.scss b/assets/scss/pages/_content-editor.scss
diff --git a/assets/scss/pages/_content-exports.scss b/assets/scss/pages/_content-exports.scss
diff --git a/assets/scss/pages/_flexpage.scss b/assets/scss/pages/_flexpage.scss
diff --git a/assets/scss/pages/_gallery.scss b/assets/scss/pages/_gallery.scss
diff --git a/assets/scss/pages/_home.scss b/assets/scss/pages/_home.scss
diff --git a/assets/scss/pages/_index.scss b/assets/scss/pages/_index.scss
diff --git a/assets/scss/pages/_mass-edit-goals.scss b/assets/scss/pages/_mass-edit-goals.scss
diff --git a/assets/scss/pages/_search.scss b/assets/scss/pages/_search.scss
diff --git a/assets/scss/pages/_stats.scss b/assets/scss/pages/_stats.scss
diff --git a/assets/scss/pages/_tutorial-help.scss b/assets/scss/pages/_tutorial-help.scss
diff --git a/assets/scss/variables/_index.scss b/assets/scss/variables/_index.scss
diff --git a/assets/scss/variables/_variables.scss b/assets/scss/variables/_variables.scss
diff --git a/assets/scss/zmd.scss b/assets/scss/zmd.scss
diff --git a/package.json b/package.json
diff --git a/vite.config.js b/vite.config.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,2 @@`
`1`	`1`	`// 1. Build style`
`2`	`2`	`import '../scss/main.scss';`
`3`		`-import '../scss/zmd.scss';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// 1. Build style`
	`2`	`+import '../scss/zmd.scss';`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../variables" as *;`
	`2`	`+`
`1`	`3`	`html {`
`2`	`4`	`font-size: 62.5%;`
`3`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../variables" as *;`
	`2`	`+`
`1`	`3`	`.ir {`
`2`	`4`	`background-color: transparent;`
`3`	`5`	`border: 0;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`// ZMD source code`
	`2`	`+@use "../variables" as *;`
`2`	`3`
`3`	`4`	`.hljs-code-div {`
`4`	`5`	`display: flex;`