From d1a90afd85822eca4e911abbce6b5c869acfbbf0 Mon Sep 17 00:00:00 2001 From: "Ghislain B." Date: Thu, 24 Oct 2024 21:48:16 -0400 Subject: [PATCH] feat: switch to SASS `@use` and remove any `@import` to fix deprecations (#1278) --- docs/styling/styling.md | 18 ++++++++++-------- .../demo/src/examples/slickgrid/example30.ts | 8 ++++---- .../demo/src/examples/slickgrid/example32.ts | 8 ++++---- packages/demo/src/styles.scss | 8 +++++++- 4 files changed, 25 insertions(+), 17 deletions(-) diff --git a/docs/styling/styling.md b/docs/styling/styling.md index af0e295d6..23493da0d 100644 --- 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 index b5766094f..16d67eacb 100644 --- a/packages/demo/src/examples/slickgrid/example30.ts +++ b/packages/demo/src/examples/slickgrid/example30.ts @@ -942,11 +942,11 @@ export class Example30 { return `
- +
- + ${item.itemName}
@@ -960,11 +960,11 @@ export class Example30 { return `
- +
- + ${item.itemName} ${formatNumber(item.listPrice, 2, 2, false, '$')} diff --git a/packages/demo/src/examples/slickgrid/example32.ts b/packages/demo/src/examples/slickgrid/example32.ts index b2974baf3..2ef34e770 100644 --- a/packages/demo/src/examples/slickgrid/example32.ts +++ b/packages/demo/src/examples/slickgrid/example32.ts @@ -812,11 +812,11 @@ export class Example32 { return `
- +
- + ${item.itemName}
@@ -830,11 +830,11 @@ export class Example32 { return `
- +
- + ${item.itemName} ${formatNumber(item.listPrice, 2, 2, false, '$')} diff --git a/packages/demo/src/styles.scss b/packages/demo/src/styles.scss index bfd88f24c..fc264ed24 100644 --- 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;