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

…ons (#422)
ghiscoding · Oct 25, 2024 · 0ab3721 · 0ab3721
1 parent 481fbad
commit 0ab3721
Show file tree

Hide file tree

Showing 16 changed files with 69 additions and 67 deletions.
diff --git a/docs/getting-started/quick-start.md b/docs/getting-started/quick-start.md
@@ -43,11 +43,10 @@ You could also compile the SASS files with your own customization, for that simp
 
 ```scss
 /* for example, let's change the mouse hover color */
-$cell-odd-background-color: lightyellow;
-$row-mouse-hover-color: lightgreen;
-
-/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $cell-odd-background-color: lightyellow,
+  $row-mouse-hover-color: lightgreen
+);
 ```
 
 ### 4. Install/Setup `I18N` for Localization (optional)

diff --git a/docs/styling/styling.md b/docs/styling/styling.md
@@ -26,26 +26,25 @@ The Material & Salesforce Themes are using SVGs internally for the icons used by
 ##### with CSS
 ```scss
 /* style.css */
-@import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
+@use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
 
 // or other Themes
-// @import '@slickgrid-universal/common/dist/styles/styles/css/slickgrid-theme-material.css';
-// @import '@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
 ```scss
-/* change any SASS variables before loading the theme */
-$slick-primary-color: green;
-$slick-cell-odd-background-color: lightyellow;
-$slick-row-mouse-hover-color: lightgreen;
-
 /* style.scss */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $slick-primary-color: green,
+  $slick-cell-odd-background-color: lightyellow,
+  $slick-row-mouse-hover-color: lightgreen
+);
 
 // or other Themes
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
-// @import '@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)_
@@ -69,15 +68,16 @@ You could use Custom SVGs and create your own Theme and/or a different set of SV
 
 ##### with SVG
 ```scss
-$slick-primary-color: blue;
-$slick-icon-group-color: $slick-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;
+$primary-color: blue;
 
 // then on the last line, import the Theme that you wish to override
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
-```
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $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
+);
 
 > **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/src/examples/slickgrid/Example2.tsx b/src/examples/slickgrid/Example2.tsx
@@ -34,7 +34,7 @@ const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) =>
 const customEnableButtonFormatter: Formatter<DataItem> = (_row: number, _cell: number, value: any) => {
   return `<span style="margin-left: 5px">
       <button class="btn btn-xs btn-default">
-        <i class="fa ${value ? 'mdi-check-circle' : 'mdi-circle'}" style="color: ${value ? 'black' : 'lavender'}"></i>
+        <i class="mdi ${value ? 'mdi-check-circle' : 'mdi-circle'}" style="color: ${value ? 'black' : 'lavender'}"></i>
       </button>
     </span>`;
 };

diff --git a/src/examples/slickgrid/Example30.tsx b/src/examples/slickgrid/Example30.tsx
@@ -966,11 +966,11 @@ export default class Example30 extends React.Component<Props, State> {
     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>
@@ -984,11 +984,11 @@ export default class Example30 extends React.Component<Props, State> {
     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/src/examples/slickgrid/Example32.tsx b/src/examples/slickgrid/Example32.tsx
@@ -830,11 +830,11 @@ export default class Example32 extends React.Component<Props, State> {
     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>
@@ -848,11 +848,11 @@ export default class Example32 extends React.Component<Props, State> {
     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/src/examples/slickgrid/example25.scss b/src/examples/slickgrid/example25.scss
@@ -1,8 +1,7 @@
 $preheader-font-size: 18px;
 $preheader-border-right: 1px solid lightgrey;
 
-/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
 
 .alert {
   padding: 8px;

diff --git a/src/examples/slickgrid/example27.scss b/src/examples/slickgrid/example27.scss
@@ -1,5 +1,4 @@
-/* make sure to add the @import the SlickGrid Theme AFTER the variables changes */
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss';
 
 .icon {
     align-items: center;

diff --git a/src/examples/slickgrid/example28.scss b/src/examples/slickgrid/example28.scss
@@ -1,4 +1,4 @@
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 
 #grid28 {
   .slick-cell {

diff --git a/src/examples/slickgrid/example30.scss b/src/examples/slickgrid/example30.scss
@@ -1,5 +1,3 @@
-$slick-button-border-color: #ababab !default;
-
 .editable-field {
   // box-shadow: inset 0 0 0 1px lightblue !important;
   background-color: rgba(227, 240, 251, 0.569) !important;

diff --git a/src/examples/slickgrid/example33.scss b/src/examples/slickgrid/example33.scss
@@ -1,7 +1,9 @@
 @use 'sass:color';
+$button-border-color: #ababab;
 
-$slick-button-border-color: #ababab !default;
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $slick-button-border-color: $button-border-color
+);
 
 // --
 // Custom Tooltips CSS Variables (or SASS equivalent)
@@ -26,12 +28,12 @@ $slick-button-border-color: #ababab !default;
 .button-style {
   cursor: pointer;
   background-color: white;
-  border: 1px solid #{$slick-button-border-color};
+  border: 1px solid #{$button-border-color};
   border-radius: 2px;
   justify-content: center;
   text-align: center;
   &:hover {
-    border-color: color.adjust($slick-button-border-color, $lightness: -10%);
+    border-color: color.adjust($button-border-color, $lightness: -10%);
   }
 }
 

diff --git a/src/examples/slickgrid/example34.scss b/src/examples/slickgrid/example34.scss
@@ -1,4 +1,4 @@
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss';
 
 $sparkline-color: #00b78d;
 // $sparkline-color: #573585;

diff --git a/src/examples/slickgrid/example8.scss b/src/examples/slickgrid/example8.scss
@@ -1,11 +1,10 @@
-$slick-header-menu-button-border-width:  0px 1px;
-$slick-header-menu-button-icon-svg-path: "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,10L12,15L17,10H7Z";
-$slick-header-menu-button-icon-size:     16px;
-$slick-header-menu-button-padding:       10px 0 0 3px;
-$slick-sort-indicator-hint-opacity:      0;
-
-/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $slick-header-menu-button-border-width:  0px 1px,
+  $slick-header-menu-button-icon-svg-path: "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,10L12,15L17,10H7Z",
+  $slick-header-menu-button-icon-size:     16px,
+  $slick-header-menu-button-padding:       10px 0 0 3px,
+  $slick-sort-indicator-hint-opacity:      0
+);
 
 .blue {
   color: rgb(73, 73, 255);

diff --git a/src/examples/slickgrid/example9.scss b/src/examples/slickgrid/example9.scss
@@ -1,11 +1,11 @@
-$slick-column-picker-icon-checked-svg-path:    "M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V19H5V5H19M10,17L6,13L7.41,11.58L10,14.17L16.59,7.58L18,9";
-$slick-column-picker-icon-unchecked-svg-path:  "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z";
 $slickcolumn-picker-checkbox-opacity:          0.2;
 $slickcolumn-picker-checkbox-opacity-hover:    0.35;
-$slick-column-picker-icon-font-size:           16px;
 
-/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $slick-column-picker-icon-checked-svg-path:    "M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V19H5V5H19M10,17L6,13L7.41,11.58L10,14.17L16.59,7.58L18,9",
+  $slick-column-picker-icon-unchecked-svg-path:  "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z",
+  $slick-column-picker-icon-font-size:           16px
+);
 
 .blue {
   color: rgb(73, 73, 255);

diff --git a/src/index.tsx b/src/index.tsx
@@ -2,7 +2,6 @@ import 'bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import i18n from 'i18next';
 import Backend from 'i18next-http-backend';
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { initReactI18next } from 'react-i18next';
 import { HashRouter } from 'react-router-dom';
@@ -11,7 +10,6 @@ import App from './examples/slickgrid/App';
 import localeEn from './assets/locales/en/translation.json';
 import localeFr from './assets/locales/fr/translation.json';
 import './styles.scss';
-import './slickgrid.scss';
 
 i18n
   .use(Backend)

diff --git a/src/slickgrid.scss b/src/slickgrid.scss
diff --git a/src/styles.scss b/src/styles.scss
@@ -2,8 +2,20 @@
 
 $navbar-height: 56px;
 $side-menu-width: 250px;
+$button-border-color: #ababab;
+$button-style-bg-color: #fff;
 
-@import '@slickgrid-universal/common/dist/styles/sass/variables';
+// -- 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';
 
 .bold {
   font-weight: bold;
@@ -144,14 +156,14 @@ section {
 
 .button-style {
   cursor: pointer;
-  background-color: var(--slick-button-style-bg-color, $slick-button-style-bg-color);
-  border: 1px solid #{var(--slick-button-border-color, $slick-button-border-color)};
+  background-color: var(--slick-button-style-bg-color, $button-style-bg-color);
+  border: 1px solid #{var(--slick-button-border-color, $button-border-color)};
   border-radius: 2px;
   justify-content: center;
   text-align: center;
 
   &:hover {
-    border-color: color.adjust($slick-button-border-color, $lightness: -10%);
+    border-color: color.adjust($button-border-color, $lightness: -10%);
   }
 }