feat: switch to SASS @use and remove any @import to fix deprecati…

…ons (#1278)
ghiscoding · Oct 25, 2024 · d1a90af · d1a90af
1 parent f78c825
commit d1a90af
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git a/docs/styling/styling.md b/docs/styling/styling.md
@@ -31,8 +31,8 @@ The Material & Salesforce Themes are using SVGs internally for the icons used by
 @use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
 
 // or other Themes
-// @use '@slickgrid-universal/common/dist/styles/styles/css/slickgrid-theme-material.css';
-// @use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';
+@use '@slickgrid-universal/common/dist/styles/styles/css/slickgrid-theme-material.css';
+@use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';
 ```
 
 ##### with SASS
@@ -45,8 +45,8 @@ The Material & Salesforce Themes are using SVGs internally for the icons used by
 );
 
 // or other Themes
-// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
-// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 ```
 
 ### Using CSS Variables _(instead of SASS)_
@@ -70,14 +70,16 @@ You could use Custom SVGs and create your own Theme and/or a different set of SV
 
 ##### with SVG
 ```scss
+$primary-color: blue;
+
+// then on the last line, import the Theme that you wish to override
 @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
-  $slick-primary-color: blue,
-  $slick-icon-group-color: $slick-primary-color,
+  $slick-primary-color: $primary-color,
+  $slick-icon-group-color: $primary-color,
   $slick-icon-group-collapsed-svg-path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z",
   $slick-icon-group-expanded-svg-path: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z",
-  $slick-icon-group-font-size:   13px
+  $slick-icon-group-font-size: 13px
 );
-```
 
 > **Note** since the SVG are generated by a SASS function, you can easily override an SVG path in SASS but that is not the case with CSS variable. We still have a way to override an SVG via CSS variable but it requires to override the entire SVG content (not just its path) as can be seen below (also notice that the CSS variable is named without the `"-path"` suffix and also note that the URL must be encoded)
 

diff --git a/packages/demo/src/examples/slickgrid/example30.ts b/packages/demo/src/examples/slickgrid/example30.ts
@@ -942,11 +942,11 @@ export class Example30 {
     return `<div class="autocomplete-container-list">
       <div class="autocomplete-left">
         <!--<img src="http://i.stack.imgur.com/pC1Tv.jpg" width="50" />-->
-        <span class="fa ${item.icon}"></span>
+        <span class="mdi ${item.icon}"></span>
       </div>
       <div>
         <span class="autocomplete-top-left">
-          <span class="fa ${item.itemTypeName === 'I' ? 'mdi-information-outline' : 'mdi-content-copy'}"></span>
+          <span class="mdi ${item.itemTypeName === 'I' ? 'mdi-information-outline' : 'mdi-content-copy'}"></span>
           ${item.itemName}
         </span>
       <div>
@@ -960,11 +960,11 @@ export class Example30 {
     return `<div class="autocomplete-container-list">
           <div class="autocomplete-left">
             <!--<img src="http://i.stack.imgur.com/pC1Tv.jpg" width="50" />-->
-            <span class="fa ${item.icon}"></span>
+            <span class="mdi ${item.icon}"></span>
           </div>
           <div>
             <span class="autocomplete-top-left">
-              <span class="fa ${item.itemTypeName === 'I' ? 'mdi-information-outline' : 'mdi-content-copy'}"></span>
+              <span class="mdi ${item.itemTypeName === 'I' ? 'mdi-information-outline' : 'mdi-content-copy'}"></span>
               ${item.itemName}
             </span>
             <span class="autocomplete-top-right">${formatNumber(item.listPrice, 2, 2, false, '$')}</span>

diff --git a/packages/demo/src/examples/slickgrid/example32.ts b/packages/demo/src/examples/slickgrid/example32.ts
@@ -812,11 +812,11 @@ export class Example32 {
     return `<div class="autocomplete-container-list">
       <div class="autocomplete-left">
         <!--<img src="http://i.stack.imgur.com/pC1Tv.jpg" width="50" />-->
-        <span class="fa ${item.icon}"></span>
+        <span class="mdi ${item.icon}"></span>
       </div>
       <div>
         <span class="autocomplete-top-left">
-          <span class="fa ${item.itemTypeName === 'I' ? 'mdi-information-outline' : 'mdi-content-copy'}"></span>
+          <span class="mdi ${item.itemTypeName === 'I' ? 'mdi-information-outline' : 'mdi-content-copy'}"></span>
           ${item.itemName}
         </span>
       <div>
@@ -830,11 +830,11 @@ export class Example32 {
     return `<div class="autocomplete-container-list">
           <div class="autocomplete-left">
             <!--<img src="http://i.stack.imgur.com/pC1Tv.jpg" width="50" />-->
-            <span class="fa ${item.icon}"></span>
+            <span class="mdi ${item.icon}"></span>
           </div>
           <div>
             <span class="autocomplete-top-left">
-              <span class="fa ${item.itemTypeName === 'I' ? 'mdi-information-outline' : 'mdi-content-copy'}"></span>
+              <span class="mdi ${item.itemTypeName === 'I' ? 'mdi-information-outline' : 'mdi-content-copy'}"></span>
               ${item.itemName}
             </span>
             <span class="autocomplete-top-right">${formatNumber(item.listPrice, 2, 2, false, '$')}</span>

diff --git a/packages/demo/src/styles.scss b/packages/demo/src/styles.scss
@@ -4,12 +4,18 @@ $navbar-height: 56px;
 $side-menu-width: 250px;
 $button-border-color: #ababab;
 
-/* make sure to add the @use the SlickGrid Bootstrap Theme AFTER the variables changes */
+// -- 1. load with modern `@use`
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
 @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
   $slick-input-focus-box-shadow: 0 0 0 0.25rem #0d6efd40,
   $slick-button-border-color: $button-border-color
 );
 
+// -- 2. load with legacy `@import`
+// $slick-primary-color: red;
+// $slick-link-color: red;
+// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+
 .btn-group-xs > .btn, .btn-xs {
   padding  : 1px 5px;
   font-size  : 12px;