From 7669196168174102bb75c91465ba232c9828a87c Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 24 Oct 2024 20:39:50 -0400 Subject: [PATCH] feat: switch to SASS `@use` and remove any `@import` to fix deprecations --- angular.json | 1 - docs/getting-started/quick-start.md | 11 +++--- docs/styling/styling.md | 35 ++++++++++--------- .../grid-custom-tooltip.component.scss | 5 +-- .../grid-graphql-nopage.component.scss | 9 +++-- .../examples/grid-headermenu.component.scss | 15 ++++---- src/app/examples/grid-menu.component.scss | 14 ++++---- src/app/examples/grid-trading.component.scss | 2 +- ...grid-tree-data-hierarchical.component.scss | 2 +- ...grid-tree-data-parent-child.component.scss | 3 +- src/app/slickgrid-custom-variables.scss | 9 ----- src/styles.scss | 23 ++++++++---- 12 files changed, 63 insertions(+), 66 deletions(-) delete mode 100644 src/app/slickgrid-custom-variables.scss diff --git a/angular.json b/angular.json index cd5657998..c9fe1314b 100644 --- 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 index 3412628a5..179faf6b6 100644 --- 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 index e5044267a..dfdefb401 100644 --- 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 index 62073ee39..b45eff735 100644 --- 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 index 61750101f..110778d9f 100644 --- 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 index 95c9c56d1..ab45accb7 100644 --- 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 index 27edccf97..0530d2e4d 100644 --- 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 index af22fe5c0..6dbd82c0b 100644 --- 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 index c152ea60b..0f9b24b27 100644 --- 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 index 54653568f..fe1ce4b3b 100644 --- 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 deleted file mode 100644 index 4957ee7ab..000000000 --- a/src/app/slickgrid-custom-variables.scss +++ /dev/null @@ -1,9 +0,0 @@ -/* Customize the SlickGrid Bootstrap theme to your taste - * Copy any of the variables '../node_modules/angular-slickgrid/styles/sass/_variables.scss' - * and make sure to add the @import at the end of this file - */ - - $slick-input-focus-box-shadow: 0 0 0 0.25rem #0d6efd40; - -/* 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'; \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index f3083c12b..09323270e 100644 --- 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%); } }