fix: change style 'imports' to 'use'

City-of-Helsinki · Dec 20, 2024 · f3d9a04 · f3d9a04
1 parent 2793a99
commit f3d9a04
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -49,7 +49,7 @@ Changes that are not related to specific components
 
 #### Fixed
 
-- [Component] What bugs/typos are fixed?
+- Changed includes to use @use notation
 
 ### Documentation
 

diff --git a/packages/core/src/components/all.css b/packages/core/src/components/all.css
@@ -3,20 +3,20 @@
 @use './checkbox/checkbox.scss';
 @use './status-label/status-label.scss';
 @use './table/table.scss';
-@import url('./card/card.css');
-@import url('./container/container.css');
-@import url('./error-summary/error-summary.css');
-@import url('./fieldset/fieldset.css');
-@import url('./hero/hero.css');
-@import url('./highlight/highlight.css');
-@import url('./koros/koros.css');
-@import url('./link/link.css');
-@import url('./loading-spinner/loading-spinner.css');
-@import url('./notification/notification.scss');
-@import url('./pagination/pagination.css');
-@import url('./radio-button/radio-button.css');
-@import url('./search-input/search-input.css');
-@import url('./selection-group/selection-group.css');
-@import url('./step-by-step/step-by-step.css');
-@import url('./tag/tag.css');
-@import url('./text-input/text-input.css');
+@use './notification/notification.scss';
+@use './card/card.css';
+@use './container/container.css';
+@use './error-summary/error-summary.css';
+@use './fieldset/fieldset.css';
+@use './hero/hero.css';
+@use './highlight/highlight.css';
+@use './koros/koros.css';
+@use './link/link.css';
+@use './loading-spinner/loading-spinner.css';
+@use './pagination/pagination.css';
+@use './radio-button/radio-button.css';
+@use './search-input/search-input.css';
+@use './selection-group/selection-group.css';
+@use './step-by-step/step-by-step.css';
+@use './tag/tag.css';
+@use './text-input/text-input.css';
diff --git a/packages/core/src/components/checkbox/_checkbox-mixin.scss b/packages/core/src/components/checkbox/_checkbox-mixin.scss
@@ -69,18 +69,17 @@
   width: var(--size);
 
   &:before {
-    content: "";
-    left: 0;
-    position: absolute;
-    top: 0;
-
     // checkbox icon
     background-color: var(--icon-color-unselected);
+    content: '';
     height: var(--size);
+    left: 0;
     mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E");
     mask-position: center;
     mask-repeat: no-repeat;
     mask-size: calc(var(--size) * var(--icon-scale));
+    position: absolute;
+    top: 0;
     transform: scale(0.6);
     width: var(--size);
     z-index: 1;

diff --git a/packages/core/src/components/link/link.css b/packages/core/src/components/link/link.css
@@ -1,5 +1,5 @@
-@import url("../../icons/icon.css");
-@import url("../../icons/link-external.css");
+@use '../../icons/icon.css';
+@use '../../icons/link-external.css';
 
 .hds-link {
   --link-visited-color: #551a8b;

diff --git a/packages/core/src/components/pagination/pagination.css b/packages/core/src/components/pagination/pagination.css
@@ -1,6 +1,6 @@
-@import url("../../icons/icon.css");
-@import url("../../icons/angle-right.css");
-@import url("../../icons/angle-left.css");
+@use '../../icons/icon.css';
+@use '../../icons/angle-right.css';
+@use '../../icons/angle-left.css';
 
 .hds-pagination-container {
   text-align: center;

diff --git a/packages/core/src/components/search-input/search-input.css b/packages/core/src/components/search-input/search-input.css
@@ -1,5 +1,5 @@
-@import url("../../icons/icon.css");
-@import url("../../icons/search.css");
+@use '../../icons/icon.css';
+@use '../../icons/search.css';
 
 .hds-search-input {
   --border-width: 2px;

diff --git a/packages/core/src/components/tag/tag.css b/packages/core/src/components/tag/tag.css
@@ -1,5 +1,5 @@
-@import url("../../icons/icon.css");
-@import url("../../icons/cross.css");
+@use '../../icons/icon.css';
+@use '../../icons/cross.css';
 
 .hds-tag {
   /* logics, always falls back to previous (upper) if not given ->

diff --git a/packages/core/src/components/text-input/text-input.css b/packages/core/src/components/text-input/text-input.css
@@ -1,4 +1,4 @@
-@import url('../../utils/animations.css');
+@use '../../utils/animations.css';
 
 .hds-text-input {
   --border-width: 2px;