Migrate to Sass use module system

thibaudcolas · thibaudcolas · commit 730fce360a72 · 2025-04-08T17:13:03.000+01:00
diff --git a/pattern_library/static/pattern_library/src/scss/abstracts/_base.scss b/pattern_library/static/pattern_library/src/scss/abstracts/_base.scss
@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 *,
 *::before,
 *::after {
@@ -60,8 +62,8 @@ a {
 }
 
 @keyframes fadeInOut {
-	0% {
-		opacity: 0;
+    0% {
+        opacity: 0;
     }
 
     20% {
@@ -72,7 +74,7 @@ a {
         opacity: 1;
     }
 
-	100% {
-		opacity: 0;
-	}
+    100% {
+        opacity: 0;
+    }
 }
diff --git a/pattern_library/static/pattern_library/src/scss/components/_button.scss b/pattern_library/static/pattern_library/src/scss/components/_button.scss
@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 .button {
     &--resize {
         border: 2px solid $light-grey;
diff --git a/pattern_library/static/pattern_library/src/scss/components/_heading.scss b/pattern_library/static/pattern_library/src/scss/components/_heading.scss
@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 .heading {
     &--iframe-size {
         color: $mid-grey;
@@ -19,7 +21,7 @@
         pointer-events: none;
 
         .iframe-open & {
-            animation-delay: .2s;
+            animation-delay: 0.2s;
             animation-name: fadeInOut;
             animation-iteration-count: 1;
             animation-timing-function: ease-in;
diff --git a/pattern_library/static/pattern_library/src/scss/components/_icon.scss b/pattern_library/static/pattern_library/src/scss/components/_icon.scss
@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 .icon {
     &--close-menu {
         width: 14px;
diff --git a/pattern_library/static/pattern_library/src/scss/components/_iframe.scss b/pattern_library/static/pattern_library/src/scss/components/_iframe.scss
@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 .iframe {
     box-sizing: content-box;
     width: 100%;
diff --git a/pattern_library/static/pattern_library/src/scss/components/_list.scss b/pattern_library/static/pattern_library/src/scss/components/_list.scss
@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 .list {
     list-style: none;
     padding: 0;
@@ -61,7 +63,7 @@
         display: block;
         font-size: inherit;
         border-left: 5px solid $off-white;
-        transition: background, border, .15s ease-in-out;
+        transition: background, border, 0.15s ease-in-out;
         padding: 10px 20px 10px 30px;
         margin: 0 -20px 0 -35px;
 
diff --git a/pattern_library/static/pattern_library/src/scss/components/_tabbed-listing.scss b/pattern_library/static/pattern_library/src/scss/components/_tabbed-listing.scss
@@ -1,3 +1,6 @@
+@use "sass:color";
+@use "../config" as *;
+
 .tabbed-content {
     &__list {
         list-style: none;
@@ -12,11 +15,11 @@
         text-align: center;
 
         > a {
-            color: lighten(#000, 30%);
+            color: color.adjust(#000, $lightness: 30%);
             padding: 12px 0;
             display: block;
             width: 100%;
-            background-color: lighten($color-primary, 30%);
+            background-color: color.adjust($color-primary, $lightness: 30%);
             text-decoration: none;
             transition: color 0.25s ease, background-color 0.25s ease;
 
@@ -34,7 +37,8 @@
         }
 
         &:not(:last-child) {
-            border-right: 1px solid lighten($color-primary, 20%);
+            border-right: 1px solid
+                color.adjust($color-primary, $lightness: 20%);
         }
     }
 
diff --git a/pattern_library/static/pattern_library/src/scss/layout/_body.scss b/pattern_library/static/pattern_library/src/scss/layout/_body.scss
@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 .body {
     display: -ms-grid;
     display: grid;
@@ -13,4 +15,4 @@
     @media only screen and (min-width: 600px) {
         transition: grid-template-columns 0.25s ease; // works in firefox
     }
-}
+}
diff --git a/pattern_library/static/pattern_library/src/scss/layout/_header.scss b/pattern_library/static/pattern_library/src/scss/layout/_header.scss
@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 .header {
     background-color: $color-primary;
     display: flex;
diff --git a/pattern_library/static/pattern_library/src/scss/layout/_main.scss b/pattern_library/static/pattern_library/src/scss/layout/_main.scss
@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 .main {
     display: block;
     padding: 20px;
diff --git a/pattern_library/static/pattern_library/src/scss/layout/_sidebar.scss b/pattern_library/static/pattern_library/src/scss/layout/_sidebar.scss
@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 .sidebar {
     background-color: $off-white;
     height: 100vh;
diff --git a/pattern_library/static/pattern_library/src/scss/main.scss b/pattern_library/static/pattern_library/src/scss/main.scss
@@ -1,27 +1,27 @@
 @charset 'UTF-8';
 
 // Config
-@import 'config';
+@use 'config';
 
 // Abstracts
-@import 'abstracts/base';
+@use 'abstracts/base';
 
 // Components
-@import 'components/code';
-@import 'components/button';
-@import 'components/heading';
-@import 'components/iframe';
-@import 'components/icon';
-@import 'components/list';
-@import 'components/md';
-@import 'components/tabbed-listing';
-@import 'components/wrapper';
+@use 'components/code';
+@use 'components/button';
+@use 'components/heading';
+@use 'components/iframe';
+@use 'components/icon';
+@use 'components/list';
+@use 'components/md';
+@use 'components/tabbed-listing';
+@use 'components/wrapper';
 
 // Layout
-@import 'layout/body';
-@import 'layout/header';
-@import 'layout/main';
-@import 'layout/sidebar';
+@use 'layout/body';
+@use 'layout/header';
+@use 'layout/main';
+@use 'layout/sidebar';
 
 // hljs theme
-@import 'hljs/a11y-dark';
+@use 'hljs/a11y-dark';

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../config" as *;`
	`2`	`+`
`1`	`3`	`*,`
`2`	`4`	`*::before,`
`3`	`5`	`*::after {`
`@@ -60,8 +62,8 @@ a {`
`60`	`62`	`}`
`61`	`63`
`62`	`64`	`@keyframes fadeInOut {`
`63`		`- 0% {`
`64`		`- opacity: 0;`
	`65`	`+ 0% {`
	`66`	`+ opacity: 0;`
`65`	`67`	`}`
`66`	`68`
`67`	`69`	`20% {`
`@@ -72,7 +74,7 @@ a {`
`72`	`74`	`opacity: 1;`
`73`	`75`	`}`
`74`	`76`
`75`		`- 100% {`
`76`		`- opacity: 0;`
`77`		`- }`
	`77`	`+ 100% {`
	`78`	`+ opacity: 0;`
	`79`	`+ }`
`78`	`80`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../config" as *;`
	`2`	`+`
`1`	`3`	`.button {`
`2`	`4`	`&--resize {`
`3`	`5`	`border: 2px solid $light-grey;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../config" as *;`
	`2`	`+`
`1`	`3`	`.icon {`
`2`	`4`	`&--close-menu {`
`3`	`5`	`width: 14px;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../config" as *;`
	`2`	`+`
`1`	`3`	`.iframe {`
`2`	`4`	`box-sizing: content-box;`
`3`	`5`	`width: 100%;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../config" as *;`
	`2`	`+`
`1`	`3`	`.header {`
`2`	`4`	`background-color: $color-primary;`
`3`	`5`	`display: flex;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../config" as *;`
	`2`	`+`
`1`	`3`	`.main {`
`2`	`4`	`display: block;`
`3`	`5`	`padding: 20px;`