fix(styling): properly import Vanilla-Calendar CSS and only once (#1492)

* fix(styling): properly import Vanilla-Calendar CSS and only once
- we should have only 1 import and for it to be properly imported in SASS, we need to remove the file externsion when importing
- fixes invalid import and missing CSS when tested in Salesforce

examples/vite-demo-vanilla-bundle/package.json

@@ -30,7 +30,7 @@
     "moment-tiny": "^2.30.3",
     "multiple-select-vanilla": "^3.1.0",
     "rxjs": "^7.8.1",
-    "vanilla-calendar-picker": "^2.11.2",
+    "vanilla-calendar-picker": "^2.11.4",
     "whatwg-fetch": "^3.6.20"
   },
   "devDependencies": {

package.json

@@ -92,7 +92,7 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",
     "typescript-eslint": "^7.7.1",
-    "vanilla-calendar-picker": "^2.11.2",
+    "vanilla-calendar-picker": "^2.11.4",
     "whatwg-fetch": "^3.6.20"
   },
   "funding": {

packages/common/package.json

@@ -80,7 +80,7 @@
     "multiple-select-vanilla": "^3.1.0",
     "sortablejs": "^1.15.2",
     "un-flatten-tree": "^2.0.12",
-    "vanilla-calendar-picker": "^2.11.2"
+    "vanilla-calendar-picker": "^2.11.4"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.19",

packages/common/src/styles/_variables.scss

@@ -1,3 +1,6 @@
+// import external lib CSS files (without the .css extension)
+@import 'vanilla-calendar-picker/build/vanilla-calendar.min';
+
 /*
  * SlickGrid-Universal theming variables, used by all Themes
  * Lib Website (https://github.com/ghiscoding/slickgrid-universal)

packages/common/src/styles/slickgrid-theme-bootstrap.scss

@@ -4,8 +4,7 @@
  * @author: Ghislain B. (ghiscoding)
  */
 
- /** SlickGrid Bootstrap Theme */
-@import 'vanilla-calendar-picker/build/vanilla-calendar.min.css';
+/** SlickGrid Bootstrap Theme */
 @import './slick-grid';
 @import './slick-editors';
 @import './slick-plugins';

packages/common/src/styles/slickgrid-theme-material.scss

@@ -9,7 +9,6 @@
  * sames as `slickgrid-theme-material.lite.scss` but includes all external 3rd party lib styling
  */
 
-@import 'vanilla-calendar-picker/build/vanilla-calendar.min.css';
 @import './roboto-font';
 @import './variables-theme-material';
 @import './slick-without-bootstrap-min-styling';

packages/common/src/styles/slickgrid-theme-salesforce.scss

@@ -10,8 +10,6 @@
  */
 
 @import './sass-utilities';
-@import 'vanilla-calendar-picker/build/vanilla-calendar.min.css';
-
 @import './variables-theme-salesforce';
 @import './slick-without-bootstrap-min-styling';
 @import './slick-grid';

packages/vanilla-bundle/package.json

@@ -60,7 +60,7 @@
     "@slickgrid-universal/utils": "workspace:~",
     "dequal": "^2.0.3",
     "sortablejs": "^1.15.2",
-    "vanilla-calendar-picker": "^2.11.2",
+    "vanilla-calendar-picker": "^2.11.4",
     "whatwg-fetch": "^3.6.20"
   },
   "devDependencies": {