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

ghiscoding · Oct 25, 2024 · 7669196 · 7669196
1 parent aee9b7e
commit 7669196
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 66 deletions.
diff --git a/angular.json b/angular.json
@@ -51,7 +51,6 @@
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "node_modules/@ng-select/ng-select/themes/default.theme.css",
-              "src/app/slickgrid-custom-variables.scss",
               "src/styles.scss"
             ],
             "scripts": [

diff --git a/docs/getting-started/quick-start.md b/docs/getting-started/quick-start.md
@@ -57,15 +57,14 @@ 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. Include it in your App Module (or App Config for Standalone)
-Below are 2 different setups (with App Module (legacy) or Standalone) but in both cases the `AngularSlickgridModule.forRoot()` is **required**, so make sure to include it. Also note that the GitHub demo is strictly built with an App Module which is considered the legacy approach. 
+Below are 2 different setups (with App Module (legacy) or Standalone) but in both cases the `AngularSlickgridModule.forRoot()` is **required**, so make sure to include it. Also note that the GitHub demo is strictly built with an App Module which is considered the legacy approach.
 
 #### App Module (legacy)
 Include `AngularSlickgridModule` in your App Module (`app.module.ts`)

diff --git a/docs/styling/styling.md b/docs/styling/styling.md
@@ -23,26 +23,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)_
@@ -66,14 +65,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/app/examples/grid-custom-tooltip.component.scss b/src/app/examples/grid-custom-tooltip.component.scss
@@ -1,5 +1,6 @@
-$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: #ababab
+// );
 
 // --
 // Custom Tooltips CSS Variables (or SASS equivalent)

diff --git a/src/app/examples/grid-graphql-nopage.component.scss b/src/app/examples/grid-graphql-nopage.component.scss
@@ -1,8 +1,7 @@
-$slick-preheader-font-size: 18px;
-$slick-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' with (
+//   $slick-preheader-font-size: 18px,
+//   $slick-preheader-border-right: 1px solid lightgrey,
+// );
 
 .alert {
   padding: 8px;

diff --git a/src/app/examples/grid-headermenu.component.scss b/src/app/examples/grid-headermenu.component.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/app/examples/grid-menu.component.scss b/src/app/examples/grid-menu.component.scss
@@ -1,11 +1,9 @@
-$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,
+  $slick-checkbox-opacity-hover:                 0.35,
+);
 
 .blue {
   color: rgb(73, 73, 255);

diff --git a/src/app/examples/grid-trading.component.scss b/src/app/examples/grid-trading.component.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/app/examples/grid-tree-data-hierarchical.component.scss b/src/app/examples/grid-tree-data-hierarchical.component.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';
 
 #grid29 {
   .slick-cell {

diff --git a/src/app/examples/grid-tree-data-parent-child.component.scss b/src/app/examples/grid-tree-data-parent-child.component.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';
 
 #grid28 {
   .slick-cell {

diff --git a/src/app/slickgrid-custom-variables.scss b/src/app/slickgrid-custom-variables.scss
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,13 +1,24 @@
 @use 'sass:color';
-@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-primary-color: red,
+//   $slick-link-color: red
+// );
+
+// -- 2. load with legacy `@import`
+// $slick-primary-color: red;
+// $slick-link-color: red;
+// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
 
 // :root {
 //   --slick-button-style-bg-color: #fff;
 //   --slick-button-border-color: #c7c7c7;
 // }
 
-/* You can add global styles to this file, and also import other style files */
-$slick-button-border-color: #ababab !default;
+$button-border-color: #ababab;
+$button-style-bg-color: #fff;
 
 .btn-group-xs > .btn, .btn-xs {
   padding  : 1px 5px;
@@ -96,13 +107,13 @@ $slick-button-border-color: #ababab !default;
 }
 .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%);
   }
 }