feat: Replace deprecated import statements in Sass with new API (#1777)

Co-authored-by: Vincent Smedinga <[email protected]>
Amsterdam · Dec 13, 2024 · adcd819 · adcd819
1 parent f8e89c1
commit adcd819
Show file tree

Hide file tree

Showing 41 changed files with 124 additions and 120 deletions.
diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 .ams-accordion {
   display: flex;

diff --git a/packages/css/src/components/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-blockquote {
   margin-block: 0;

diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-ol {
   margin-block: 0;

diff --git a/packages/css/src/components/breakout/breakout.scss b/packages/css/src/components/breakout/breakout.scss
@@ -3,9 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
-@import "../grid/grid";
-@import "../grid/mixins";
+@use "../../common/breakpoint" as *;
+@use "../grid/grid" as *;
+@use "../grid/mixins" as *;
 
 $ams-breakout-row-span-max: 4;
 

diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-button {
   border: 0;

diff --git a/packages/css/src/components/character-count/character-count.scss b/packages/css/src/components/character-count/character-count.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 .ams-character-count {
   color: var(--ams-character-count-color);

diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss
@@ -3,9 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/input-label-focus";
-@import "../../common/hide-input";
-@import "../../common/text-rendering";
+@use "../../common/input-label-focus" as *;
+@use "../../common/hide-input" as *;
+@use "../../common/text-rendering" as *;
 
 .ams-checkbox__input {
   @include hide-input;

diff --git a/packages/css/src/components/column/column.scss b/packages/css/src/components/column/column.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/size";
+@use "../../common/size" as *;
 
 .ams-column {
   display: flex;

diff --git a/packages/css/src/components/date-input/date-input.scss b/packages/css/src/components/date-input/date-input.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-input {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
-@import "../../common/text-rendering";
+@use "../../common/breakpoint" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-dl {
   margin-block: 0;

diff --git a/packages/css/src/components/error-message/error-message.scss b/packages/css/src/components/error-message/error-message.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-p {
   margin-block: 0;

diff --git a/packages/css/src/components/field-set/field-set.scss b/packages/css/src/components/field-set/field-set.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-fieldset {
   border: 0;

diff --git a/packages/css/src/components/file-input/file-input.scss b/packages/css/src/components/file-input/file-input.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-button {
   border: 0;

diff --git a/packages/css/src/components/gap/gap.scss b/packages/css/src/components/gap/gap.scss
@@ -3,13 +3,14 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/size";
+@use "sass:map";
+@use "../../common/size" as *;
 
 [class|="ams-gap-"] {
   display: grid !important;
 }
 
-@each $size in map-keys($ams-sizes) {
+@each $size in map.keys($ams-sizes) {
   @if $size != "no" {
     .ams-gap--#{$size} {
       grid-gap: var(--ams-gap-#{$size}) !important;

diff --git a/packages/css/src/components/grid/_mixins.scss b/packages/css/src/components/grid/_mixins.scss
@@ -1,3 +1,5 @@
+@use "../../common/breakpoint" as *;
+
 /**
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam

diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
-@import "mixins";
+@use "../../common/breakpoint" as *;
+@use "mixins" as *;
 
 $ams-grid-column-count: 12;
 

diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
+@use "../../common/breakpoint" as *;
 
 .ams-header {
   align-items: center;

diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-hx {
   margin-block: 0;

diff --git a/packages/css/src/components/image-slider/image-slider.scss b/packages/css/src/components/image-slider/image-slider.scss
@@ -2,7 +2,7 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-@import "../../common/breakpoint";
+@use "../../common/breakpoint" as *;
 
 .ams-image-slider {
   display: grid;

diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss
@@ -4,66 +4,66 @@
  */
 
 /* Append here */
-@import "./action-group/action-group";
-@import "./breakout/breakout";
-@import "./hint/hint";
-@import "./password-input/password-input";
-@import "./form-error-list/form-error-list";
-@import "./image-slider/image-slider";
-@import "./table-of-contents/table-of-contents";
-@import "./error-message/error-message";
-@import "./file-input/file-input";
-@import "./field/field";
-@import "./select/select";
-@import "./time-input/time-input";
-@import "./date-input/date-input";
-@import "./document/document";
-@import "./avatar/avatar";
-@import "./character-count/character-count";
-@import "./description-list/description-list";
-@import "./row/row";
-@import "./radio/radio";
-@import "./tabs/tabs";
-@import "./text-area/text-area";
-@import "./column/column";
-@import "./margin/margin";
-@import "./gap/gap";
-@import "./field-set/field-set";
-@import "./link-list/link-list";
-@import "./badge/badge";
-@import "./table/table";
-@import "./mega-menu/mega-menu";
-@import "./icon-button/icon-button";
-@import "./skip-link/skip-link";
-@import "./overlap/overlap";
-@import "./header/header";
-@import "./mark/mark";
-@import "./text-input/text-input";
-@import "./search-field/search-field";
-@import "./logo/logo";
-@import "./dialog/dialog";
-@import "./image/image";
-@import "./pagination/pagination";
-@import "./accordion/accordion";
-@import "./alert/alert";
-@import "./aspect-ratio/aspect-ratio";
-@import "./blockquote/blockquote";
-@import "./breadcrumb/breadcrumb";
-@import "./button/button";
-@import "./card/card";
-@import "./checkbox/checkbox";
-@import "./label/label";
-@import "./grid/grid";
-@import "./heading/heading";
-@import "./spotlight/spotlight";
-@import "./icon/icon";
-@import "./link/link";
-@import "./ordered-list/ordered-list";
-@import "./page-heading/page-heading";
-@import "./page-menu/page-menu";
-@import "./paragraph/paragraph";
-@import "./screen/screen";
-@import "./switch/switch";
-@import "./top-task-link/top-task-link";
-@import "./unordered-list/unordered-list";
-@import "./visually-hidden/visually-hidden";
+@use "action-group/action-group";
+@use "breakout/breakout";
+@use "hint/hint";
+@use "password-input/password-input";
+@use "form-error-list/form-error-list";
+@use "image-slider/image-slider";
+@use "table-of-contents/table-of-contents";
+@use "error-message/error-message";
+@use "file-input/file-input";
+@use "field/field";
+@use "select/select";
+@use "time-input/time-input";
+@use "date-input/date-input";
+@use "document/document";
+@use "avatar/avatar";
+@use "character-count/character-count";
+@use "description-list/description-list";
+@use "row/row";
+@use "radio/radio";
+@use "tabs/tabs";
+@use "text-area/text-area";
+@use "column/column";
+@use "margin/margin";
+@use "gap/gap";
+@use "field-set/field-set";
+@use "link-list/link-list";
+@use "badge/badge";
+@use "table/table";
+@use "mega-menu/mega-menu";
+@use "icon-button/icon-button";
+@use "skip-link/skip-link";
+@use "overlap/overlap";
+@use "header/header";
+@use "mark/mark";
+@use "text-input/text-input";
+@use "search-field/search-field";
+@use "logo/logo";
+@use "dialog/dialog";
+@use "image/image";
+@use "pagination/pagination";
+@use "accordion/accordion";
+@use "alert/alert";
+@use "aspect-ratio/aspect-ratio";
+@use "blockquote/blockquote";
+@use "breadcrumb/breadcrumb";
+@use "button/button";
+@use "card/card";
+@use "checkbox/checkbox";
+@use "label/label";
+@use "grid/grid";
+@use "heading/heading";
+@use "spotlight/spotlight";
+@use "icon/icon";
+@use "link/link";
+@use "ordered-list/ordered-list";
+@use "page-heading/page-heading";
+@use "page-menu/page-menu";
+@use "paragraph/paragraph";
+@use "screen/screen";
+@use "switch/switch";
+@use "top-task-link/top-task-link";
+@use "unordered-list/unordered-list";
+@use "visually-hidden/visually-hidden";
diff --git a/packages/css/src/components/label/label.scss b/packages/css/src/components/label/label.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 .ams-label {
   color: var(--ams-label-color);

diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-ul {
   list-style: none;

diff --git a/packages/css/src/components/link/link.scss b/packages/css/src/components/link/link.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 .ams-link {
   color: var(--ams-link-color);

diff --git a/packages/css/src/components/margin/margin.scss b/packages/css/src/components/margin/margin.scss
@@ -3,9 +3,10 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/size";
+@use "sass:map";
+@use "../../common/size" as *;
 
-@each $size in map-keys($ams-sizes) {
+@each $size in map.keys($ams-sizes) {
   @if $size != "no" {
     .ams-mb--#{$size} {
       margin-block-end: var(--ams-margin-#{$size}) !important;

diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-ol {
   list-style-type: none;

diff --git a/packages/css/src/components/page-heading/page-heading.scss b/packages/css/src/components/page-heading/page-heading.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-h1 {
   margin-block: 0;

diff --git a/packages/css/src/components/page-menu/page-menu.scss b/packages/css/src/components/page-menu/page-menu.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-ul {
   margin-block: 0;