Merge pull request #570 from acelaya-forks/feature/sass-imports

Replace sass `@import`s with `@use`
shlinkio · Jan 27, 2025 · 94788b5 · 94788b5
2 parents 3f2bf2b + a44c3ca
commit 94788b5
Show file tree

Hide file tree

Showing 17 changed files with 86 additions and 69 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [Unreleased]
+### Added
+* *Nothing*
+
+### Changed
+* Replace sass `@import`s with `@use`.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
 ## [0.12.1] - 2025-01-02
 ### Added
 * Add support for React 19

diff --git a/README.md b/README.md
@@ -156,10 +156,12 @@ Make sure you import stylesheets in the order documented here for everything to
 
 ```scss
 // src/index.scss
-@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/base'; // Before bootstrap stylesheet. Includes SASS var overrides
-@import 'node_modules/bootstrap/scss/bootstrap.scss';
-@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/index'; // After bootstrap. Includes CSS overrides
-@import 'node_modules/@shlinkio/shlink-web-component/dist/index';
+@use 'node_modules/@shlinkio/shlink-frontend-kit/dist/base'; // Before bootstrap stylesheet
+@use 'node_modules/bootstrap/scss/bootstrap.scss' with (
+  $primary: base.$mainColor // Override bootstrap's primary color
+);
+@use 'node_modules/@shlinkio/shlink-frontend-kit/dist/index'; // After bootstrap. Includes CSS overrides
+@use 'node_modules/@shlinkio/shlink-web-component/dist/index' as c-index;
 ```
 
 ```tsx

diff --git a/dev/index.scss b/dev/index.scss
@@ -1,13 +1,15 @@
-@import '../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-@import '../node_modules/bootstrap/scss/bootstrap.scss';
-@import '../node_modules/@shlinkio/shlink-frontend-kit/dist/index';
-@import '../src/index.scss';
+@use '../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../node_modules/bootstrap/scss/bootstrap.scss' with (
+  $primary: base.$mainColor
+);
+@use '../node_modules/@shlinkio/shlink-frontend-kit/dist/index';
+@use '../src/index.scss' as dev-index;
 
 .header {
-  height: $headerHeight;
+  height: base.$headerHeight;
   background-color: var(--brand-color);
 }
 
 .wrapper {
-  padding: $headerHeight 0;
+  padding: base.$headerHeight 0;
 }
diff --git a/src/Main.scss b/src/Main.scss
@@ -1,4 +1,4 @@
-@import '../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .shlink-layout__swipeable {
   height: 100%;
@@ -18,7 +18,7 @@
   cursor: pointer;
   color: rgb(255 255 255 / .5);
 
-  @media (max-width: $smMax) {
+  @media (max-width: base.$smMax) {
     display: inline-block;
   }
 }
@@ -31,7 +31,7 @@
   padding: 20px 0 0;
   min-height: 100%;
 
-  @media (min-width: $mdMin) {
-    padding: 30px 0 0 $asideMenuWidth;
+  @media (min-width: base.$mdMin) {
+    padding: 30px 0 0 base.$asideMenuWidth;
   }
 }
diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss
@@ -1,34 +1,33 @@
-@import '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-@import '../utils/mixins/vertical-align';
+@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .aside-menu {
-  width: $asideMenuWidth;
+  width: base.$asideMenuWidth;
   background-color: var(--primary-color);
   box-shadow: rgb(0 0 0 / .05) 0 8px 15px;
   position: fixed !important;
   padding-top: 13px;
   padding-bottom: 10px;
-  top: $headerHeight;
+  top: base.$headerHeight;
   bottom: 0;
   left: 0;
   display: block;
   z-index: 1010;
   overflow: hidden auto;
 
-  @media (min-width: $mdMin) {
+  @media (min-width: base.$mdMin) {
     padding: 30px 15px 15px;
   }
 
-  @media (max-width: $smMax) {
+  @media (max-width: base.$smMax) {
     transition: left 300ms;
-    top: $headerHeight - 3px;
+    top: base.$headerHeight - 3px;
     box-shadow: -10px 0 50px 11px rgb(0 0 0 / .55);
   }
 }
 
 .aside-menu--hidden {
-  @media (max-width: $smMax) {
-    left: -($asideMenuWidth + 35px);
+  @media (max-width: base.$smMax) {
+    left: -(base.$asideMenuWidth + 35px);
   }
 }
 
@@ -42,7 +41,7 @@
   text-decoration: none !important;
   cursor: pointer;
 
-  @media (max-width: $smMax) {
+  @media (max-width: base.$smMax) {
     margin: 0;
   }
 }

diff --git a/src/domains/DomainSelector.scss b/src/domains/DomainSelector.scss
@@ -1,10 +1,9 @@
-@import '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-@import '../utils/mixins/vertical-align';
+@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .domains-dropdown__toggle-btn.domains-dropdown__toggle-btn,
 .domains-dropdown__toggle-btn.domains-dropdown__toggle-btn:hover,
 .domains-dropdown__toggle-btn.domains-dropdown__toggle-btn:active {
-  color: $textPlaceholder !important;
+  color: base.$textPlaceholder !important;
 }
 
 .domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active,

diff --git a/src/index.scss b/src/index.scss
@@ -1,9 +1,10 @@
-@import './tags/react-tag-autocomplete';
-@import './utils/StickyCardPaginator.scss';
-@import 'leaflet/dist/leaflet.css';
+@use '../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use './tags/react-tag-autocomplete';
+@use './utils/StickyCardPaginator.scss';
+@use 'leaflet/dist/leaflet.css';
 
 .top-sticky {
   position: sticky;
-  top: $headerHeight;
+  top: base.$headerHeight;
   z-index: 10;
 }
diff --git a/src/overview/helpers/HighlightCard.scss b/src/overview/helpers/HighlightCard.scss
@@ -1,4 +1,4 @@
-@import '../../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .highlight-card.highlight-card.highlight-card {
   text-align: center;
@@ -16,5 +16,5 @@
 }
 
 .highlight-card__title {
-  color: $textPlaceholder;
+  color: base.$textPlaceholder;
 }
diff --git a/src/short-urls/helpers/QrCodeModal.scss b/src/short-urls/helpers/QrCodeModal.scss
@@ -1,7 +1,7 @@
-@import '../../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .qr-code-modal__controls {
-  @media (min-width: $lgMin) {
+  @media (min-width: base.$lgMin) {
     width: 16rem;
   }
 }
diff --git a/src/short-urls/helpers/ShortUrlsRow.scss b/src/short-urls/helpers/ShortUrlsRow.scss
@@ -1,5 +1,5 @@
-@import '../../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-@import '../../utils/mixins/vertical-align';
+@use '../../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../../utils/mixins/vertical-align';
 
 @mixin text-ellipsis() {
   text-overflow: ellipsis;
@@ -16,17 +16,17 @@
 }
 
 .short-urls-row__cell--indivisible {
-  @media (min-width: $lgMin) {
+  @media (min-width: base.$lgMin) {
     white-space: nowrap;
   }
 }
 
 .short-urls-row__short-url-wrapper {
-  @media (max-width: $mdMax) {
+  @media (max-width: base.$mdMax) {
     word-break: break-all;
   }
 
-  @media (min-width: $lgMin) {
+  @media (min-width: base.$lgMin) {
     @include text-ellipsis();
 
     vertical-align: bottom;
@@ -36,11 +36,11 @@
 }
 
 .short-urls-row__copy-hint {
-  @include vertical-align(translateX(10px));
+  @include vertical-align.vertical-align(translateX(10px));
 
   box-shadow: 0 3px 15px rgb(0 0 0 / .25);
 
-  @media (max-width: $responsiveTableBreakpoint) {
-    @include vertical-align(translateX(calc(-100% - 20px)));
+  @media (max-width: base.$responsiveTableBreakpoint) {
+    @include vertical-align.vertical-align(translateX(calc(-100% - 20px)));
   }
 }
diff --git a/src/tags/TagsTable.scss b/src/tags/TagsTable.scss
@@ -1,10 +1,10 @@
-@import '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-@import '../utils/mixins/sticky-cell';
+@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../utils/mixins/sticky-cell';
 
 .tags-table__header-cell.tags-table__header-cell {
-  @include sticky-cell(false);
+  @include sticky-cell.sticky-cell(false);
 
-  top: $headerHeight;
+  top: base.$headerHeight;
   position: sticky;
   cursor: pointer;
 }
diff --git a/src/tags/react-tag-autocomplete.scss b/src/tags/react-tag-autocomplete.scss
@@ -1,4 +1,4 @@
-@import '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 // Main wrapper
 .react-tags {
@@ -68,7 +68,7 @@
   max-width: 100%;
 }
 
-@media screen and (min-width: $smMin) {
+@media screen and (min-width: base.$smMin) {
   .react-tags__combobox {
     /* this will become the offsetParent for suggestions */
     position: relative;
@@ -113,7 +113,7 @@
   box-shadow: 0 2px 6px rgb(0 0 0 / .2);
 }
 
-@media screen and (min-width: $smMin) {
+@media screen and (min-width: base.$smMin) {
   .react-tags__listbox {
     width: 240px;
   }

diff --git a/src/utils/components/IconInput.scss b/src/utils/components/IconInput.scss
@@ -1,5 +1,4 @@
-@import '../mixins/vertical-align';
-@import '../../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../mixins/vertical-align';
 
 .icon-input-container {
   position: relative;
@@ -14,7 +13,7 @@
 }
 
 .icon-input-container__icon {
-  @include vertical-align();
+  @include vertical-align.vertical-align();
 
   right: .75rem;
   cursor: pointer;

diff --git a/src/utils/mixins/sticky-cell.scss b/src/utils/mixins/sticky-cell.scss
@@ -1,5 +1,3 @@
-@import '../../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-
 @mixin sticky-cell($with-separators: true) {
   z-index: 1;
   position: relative;

diff --git a/src/visits/VisitsTable.scss b/src/visits/VisitsTable.scss
@@ -1,5 +1,5 @@
-@import '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-@import '../utils/mixins/sticky-cell';
+@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../utils/mixins/sticky-cell';
 
 .visits-table {
   background-color: var(--primary-color);
@@ -10,11 +10,11 @@
   cursor: pointer;
   margin-bottom: 55px;
 
-  @include sticky-cell();
+  @include sticky-cell.sticky-cell();
 
-  @media (min-width: $mdMin) {
+  @media (min-width: base.$mdMin) {
     &.visits-table__sticky {
-      top: $headerHeight + 40px;
+      top: base.$headerHeight + 40px;
     }
   }
 }
@@ -28,7 +28,7 @@
   bottom: 0;
   margin-top: 34px;
 
-  @include sticky-cell();
+  @include sticky-cell.sticky-cell();
 }
 
 .visits-table__sticky.visits-table__sticky {

diff --git a/src/visits/charts/DoughnutChartLegend.scss b/src/visits/charts/DoughnutChartLegend.scss
@@ -1,11 +1,11 @@
-@import '../../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .doughnut-chart-legend {
   list-style-type: none;
   padding: 0;
   margin: 0;
 
-  @media (max-width: $smMax) {
+  @media (max-width: base.$smMax) {
     margin-top: 1rem;
   }
 }

diff --git a/src/visits/helpers/MapModal.scss b/src/visits/helpers/MapModal.scss
@@ -1,17 +1,17 @@
-@import '../../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-@import '../../utils/mixins/fit-with-margin';
+@use '../../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../../utils/mixins/fit-with-margin';
 
 .map-modal__modal.map-modal__modal {
-  @media (min-width: $mdMin) {
+  @media (min-width: base.$mdMin) {
     $margin: 20px;
 
-    @include fit-with-margin($margin);
+    @include fit-with-margin.fit-with-margin($margin);
   }
 
-  @media (max-width: $smMax) {
+  @media (max-width: base.$smMax) {
     $margin: 10px;
 
-    @include fit-with-margin($margin);
+    @include fit-with-margin.fit-with-margin($margin);
   }
 }