ROU-12911: Migrate scss @import into @use/@forward

gulp/ProjectSpecs/ScssStructure/#All.js

@@ -1,6 +1,5 @@
 // Get the reference file for each section
 const setupVariables = require('./SetupVariables');
-const functionsAndMixins = require('./Functions&Mixins');
 const root = require('./Root');
 const resets = require('./Resets');
 const htmlElements = require('./HTMLElements');
@@ -19,7 +18,6 @@ const excluders = require('./Excluders');
 **/
 const cssStructure = {
 	"css-variables-setup": setupVariables.info,
-	"functions-mixins": functionsAndMixins.info,
 	"root": root.info,
 	"resets": resets.info,
 	"html-elements": htmlElements.info,

gulp/ProjectSpecs/ScssStructure/SetupVariables.js

@@ -2,12 +2,12 @@
 * Section Info
 **/
 const sectionInfo = {
-    "name": "SCSS Setup variables",
+    "name": "SCSS Setup variables, Functions & Mixins",
     "addToSectionIndex": false,
 
     "assets": [
         {
-            "path": "00-abstract/setup-global-vars"
+            "path": "00-abstract/index"
         }
     ]
 };

gulp/Tasks/CreateScss/GetPartialsList.js

@@ -15,9 +15,22 @@ function createPartialsListProd(platformType) {
     return createPartialsList(project.globalConsts.envType.production, platformType);
 }
 
-// Method used to create the import text
-function getImportLineText(text) {
-	return `@import '${text}';\n`;
+// Method used to create the use text
+// Loaded 'as *' since this file only aggregates partials for their CSS output and never
+// references any of their members by namespace - avoids default-namespace collisions
+// between partials that happen to share a basename.
+function getUseLineText(text) {
+	return `@use '${text}' as *;\n`;
+}
+
+// Method used to get the abstracts barrel '@use' line. Must be emitted as the very first
+// statement in the generated file - CreateScssFile.js places it ahead of the header/section
+// index comments. Dart Sass duplicates a comment that precedes a file's first '@use' once
+// for every nested '@use' encountered deeper in the module graph (reproduced empirically:
+// every partial '@use'-ing the abstracts barrel added one extra copy of the header comment);
+// having a real '@use' as the first statement avoids it entirely.
+function getAbstractsUseLine() {
+	return getUseLineText(scssStructure.structure['css-variables-setup'].assets[0].path);
 }
 
 // Method used to create the section title of each section!
@@ -55,6 +68,8 @@ function createPartialsList(env, platformType) {
 
     // 0. Go through all the Sections
     for (const section in scssStructure.structure) {
+        if (section === 'css-variables-setup') continue; // emitted separately by getAbstractsUseLine()
+
         const sectionInfo = scssStructure.structure[section];
 
         // Create Block comment
@@ -82,7 +97,7 @@ function createPartialsList(env, platformType) {
 
                     // Check if the current asset do not have other assets assigned (Patterns case)
                     if (asset.path !== undefined) {
-                        partialsListText += getImportLineText(asset.path);
+                        partialsListText += getUseLineText(asset.path);
                     }
                 }
 
@@ -98,7 +113,7 @@ function createPartialsList(env, platformType) {
                         } else if (subAsset.key === undefined) {
                             partialsListText += createSectionCommentTitle(`${sectionIndex}.${assetIndex}.${subAssetIndex}. ${subAsset.name}`, 2);
 
-                            partialsListText += getImportLineText(subAsset.path);
+                            partialsListText += getUseLineText(subAsset.path);
                         } else {
 
                             // Get the info about the current object key (Pattern)
@@ -122,7 +137,7 @@ function createPartialsList(env, platformType) {
                                 }
 
                                 if (assetInfo.scss) {
-                                    partialsListText += getImportLineText(assetInfo.scss);
+                                    partialsListText += getUseLineText(assetInfo.scss);
                                 }
 
                                 // Check if the current asset is a group (Ex: DatePicker case)
@@ -139,7 +154,7 @@ function createPartialsList(env, platformType) {
                                             if (assetItem.scss) {
                                                 partialsListText += createSectionCommentTitle(`${sectionIndex}.${assetIndex}.${subAssetIndex}.${assetInfoItemIndex} ${assetItem.name}`, 2);
 
-                                                partialsListText += getImportLineText(assetItem.scss);
+                                                partialsListText += getUseLineText(assetItem.scss);
 
                                                 // Increase AssetItem iteractor
                                                 assetInfoItemIndex++;
@@ -178,4 +193,5 @@ function createPartialsList(env, platformType) {
 
 // Expose the IndexSection Text
 exports.textDev = createPartialsListDev;
-exports.textProd = createPartialsListProd;
+exports.textProd = createPartialsListProd;
+exports.abstractsUseLine = getAbstractsUseLine;

gulp/Tasks/CreateScssFile.js

@@ -44,8 +44,10 @@ function getFileText(platformType, envType) {
 	const sectionIndexText = envType === project.globalConsts.envType.production ? getSectionIndexText.textProd(platformType) : getSectionIndexText.textDev(platformType);
 	// Store the Partials List generated text
 	const partialsText = envType === project.globalConsts.envType.production ? getPartialsList.textProd(platformType) : getPartialsList.textDev(platformType);
+	// The abstracts barrel '@use' must be the file's very first statement, ahead of the
+	// header comments below - see GetPartialsList.js's getAbstractsUseLine() for why.
 	// Combine text to create the hole file
-	return `${getNotesText()}\n${sectionIndexText}\n${partialsText}`;
+	return `${getPartialsList.abstractsUseLine()}\n${getNotesText()}\n${sectionIndexText}\n${partialsText}`;
 }
 
 // Method used to Create SCSS file structure dynamically

gulp/Tasks/ScssTranspile.js

@@ -9,16 +9,6 @@ const rename = require("gulp-rename");
 const sass = require('gulp-sass')(require('sass'));
 const sourcemaps = require('gulp-sourcemaps');
 
-// Silence known, pre-existing Dart Sass deprecation warnings so the build output
-// stays clean and real errors stand out. These are architectural/tooling-level:
-// the SCSS uses @import across every partial + the auto-generated entry files
-// (migrating to @use/@forward is a separate effort), plus the legacy-js-api
-// notice from gulp-sass's renderSync. Requires Dart Sass >= 1.80.
-const sassOptions = {
-	silenceDeprecations: ['import', 'global-builtin', 'if-function', 'legacy-js-api'],
-	quietDeps: true,
-};
-
 const project = require('../ProjectSpecs/DefaultSpecs');
 const distFolder = './dist';
 let watchScssThemes = 'src/scss/*.scss';
@@ -48,7 +38,7 @@ function scssTranspile(cb, envMode) {
     if(envMode === project.globalConsts.envType.development) {
         gulp.src(watchScssThemes)
 			.pipe(sourcemaps.init())
-			.pipe(sass(sassOptions).on('error', sass.logError))
+			.pipe(sass().on('error', sass.logError))
 			.pipe(postcss([postcssdc, postcssdd]))
 			.pipe(
 				autoprefixer({
@@ -64,7 +54,7 @@ function scssTranspile(cb, envMode) {
 			.pipe(gulp.dest(distFolder));
     } else {
         gulp.src(watchScssThemes)
-            .pipe(sass(sassOptions).on('error', sass.logError))
+            .pipe(sass().on('error', sass.logError))
             .pipe(postcss([postcssdc, postcssdd]))
             .pipe(autoprefixer({
                 overrideBrowserslist: ['last 10 versions']

package.json

@@ -56,13 +56,11 @@
 		"eslint": "^8.57.1",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.2.5",
-		"fancy-log": "^2.0.0",
 		"flatpickr": "^4.6.13",
 		"font-awesome": "^4.7.0",
-		"gulp": "^4.0.2",
+		"gulp": "^5.0.1",
 		"gulp-autoprefixer": "^8.0.0",
 		"gulp-clean": "^0.4.0",
-		"gulp-confirm": "^1.0.8",
 		"gulp-postcss": "^9.1.0",
 		"gulp-remove-empty-lines": "^0.1.0",
 		"gulp-rename": "^2.0.0",
@@ -75,7 +73,7 @@
 		"postcss": "^8.4.38",
 		"postcss-discard-comments": "^5.1.2",
 		"postcss-discard-duplicates": "^5.1.0",
-		"prettier-eslint": "^12.0.0",
+		"prettier": "^3.9.6",
 		"prompts": "^2.4.2",
 		"react-router-dom": "^6.30.3",
 		"remark-gfm": "^4.0.1",
@@ -92,4 +90,4 @@
 		"vite": "^6.4.2",
 		"wnumb": "^1.2.0"
 	}
-}
+}

src/scripts/Global.d.ts

@@ -155,10 +155,7 @@ declare global {
 	};
 
 	type ProviderConfigs =
-		| RangeSliderProviderConfigs
-		| CarouselProviderConfigs
-		| DatePickerProviderConfigs
-		| VirtualSelect;
+		RangeSliderProviderConfigs | CarouselProviderConfigs | DatePickerProviderConfigs | VirtualSelect;
 	// ---------------------------------------------------------------------------
 
 	// RangeSlider ---------------------------------------------------------------

src/scripts/OSFramework/OSUI/Event/DOMEvents/Observers/MutationObserver/Lang/LangObserver.ts

@@ -1,33 +1,33 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 namespace OSFramework.OSUI.Event.DOMEvents.Observers.MutationObservers.Lang {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    export class LangObserver extends AbstractMutationObserver {
-        private _currentLang: string;
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	export class LangObserver extends AbstractMutationObserver {
+		private _currentLang: string;
 
-        constructor() {
-            super(new LangObserverConfigs(), document.documentElement);
-            this._currentLang = document.documentElement.lang;
-        }
+		constructor() {
+			super(new LangObserverConfigs(), document.documentElement);
+			this._currentLang = document.documentElement.lang;
+		}
 
-        /**
-         * Observer callback method
-         *
-         * @param {MutationRecord[]} mutationList
-         * @memberof LangObserver
-         */
-        public observerHandler(mutationList: MutationRecord[]): void {
-            mutationList.forEach((mutation) => {
-                if (mutation.attributeName === GlobalEnum.HTMLAttributes.Lang) {
-                    const mutationTarget = mutation.target as HTMLElement;
-                    const newLang = mutationTarget.lang;
+		/**
+		 * Observer callback method
+		 *
+		 * @param {MutationRecord[]} mutationList
+		 * @memberof LangObserver
+		 */
+		public observerHandler(mutationList: MutationRecord[]): void {
+			mutationList.forEach((mutation) => {
+				if (mutation.attributeName === GlobalEnum.HTMLAttributes.Lang) {
+					const mutationTarget = mutation.target as HTMLElement;
+					const newLang = mutationTarget.lang;
 
-                    if (this._currentLang !== newLang) {
-                        this._currentLang = newLang;
-                        
-                        this.trigger(Observers.ObserverEvent.Language, mutation);
-                    }
-                }
-            });
-        }
-    }
-}
+					if (this._currentLang !== newLang) {
+						this._currentLang = newLang;
+
+						this.trigger(Observers.ObserverEvent.Language, mutation);
+					}
+				}
+			});
+		}
+	}
+}

src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts

@@ -97,12 +97,12 @@ namespace OSFramework.OSUI.Feature.Balloon {
 			this._focusManagerInstance = new Behaviors.FocusManager();
 		}
 
-	// Validates if the feature parent is of parent type
-	private _isParentType(patternClassName: string) {
-		return (
-			this.featurePattern as unknown as Patterns.AbstractPattern<Patterns.AbstractConfiguration>
-		).selfElement.classList.contains(patternClassName);
-	}
+		// Validates if the feature parent is of parent type
+		private _isParentType(patternClassName: string) {
+			return (
+				this.featurePattern as unknown as Patterns.AbstractPattern<Patterns.AbstractConfiguration>
+			).selfElement.classList.contains(patternClassName);
+		}
 
 		// Manage the focus of the elements inside the Balloon
 		private _manageFocusInsideBalloon(
@@ -213,7 +213,7 @@ namespace OSFramework.OSUI.Feature.Balloon {
 				if (Helper.DeviceInfo.IsMobileDevice === false) {
 					// Will handle the tabindex value of the elements inside pattern
 					Helper.A11Y.SetElementsTabIndex(this.isOpen, this._focusTrapInstance.focusableElements);
-				} 
+				}
 
 				Helper.A11Y.RoleDialog(this.featureElem);
 

src/scripts/OSFramework/OSUI/Helper/Language.ts

@@ -1,7 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 namespace OSFramework.OSUI.Helper {
 	export abstract class Language {
-
 		/**
 		 * Getter that allows to obtain the App Language based on SetLocale Action from platform!
 		 *
@@ -11,7 +10,6 @@ namespace OSFramework.OSUI.Helper {
 		 * @memberof OSFramework.Helper.Language
 		 */
 		public static get Lang(): string {
-
 			if (document.documentElement.lang === undefined) {
 				return Constants.Language.code;
 			} else {

src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts

@@ -6,7 +6,8 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 			OSUIDropdownServerSideConfig,
 			Patterns.DropdownServerSideItem.IDropdownServerSideItem
 		>
-		implements IDropdownServerSide {
+		implements IDropdownServerSide
+	{
 		// Store the HTML element for the DropdownBalloonContainer
 		private _balloonContainerElement: HTMLElement;
 		// Store the Balloon Element

src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts

@@ -53,9 +53,13 @@ namespace OSFramework.OSUI.Patterns.TabsHeaderItem {
 				if (Helper.DeviceInfo.IsIos || Helper.DeviceInfo.GetOperatingSystem() === GlobalEnum.MobileOS.MacOS) {
 					Helper.A11Y.RolePresentation(this.selfElement.parentElement);
 				}
-				
+
 				//Prevent tab item to be seen by the browser as submit button
-				Helper.Dom.Attribute.Set(this.selfElement, GlobalEnum.HTMLAttributes.Type, GlobalEnum.InputTypeAttr.Button);
+				Helper.Dom.Attribute.Set(
+					this.selfElement,
+					GlobalEnum.HTMLAttributes.Type,
+					GlobalEnum.InputTypeAttr.Button
+				);
 			}
 
 			// Dynamic values that need to be changed when toggling the active state

src/scripts/Providers/OSUI/Carousel/Splide/Splide.ts

@@ -192,15 +192,23 @@ namespace Providers.OSUI.Carousel.Splide {
 		private _setListRoles(): void {
 			// Remove role="tabpanel" from slides that contain img, ul, ol, or li — elements for
 			// which tabpanel ownership is invalid or creates conflicting semantics
-			this.selfElement.querySelectorAll(OSFramework.OSUI.Constants.Dot + Enum.CssClass.SplideSlide).forEach((slide) => {
-				const _slideEl = slide as HTMLElement;
-				if (
-					OSFramework.OSUI.Helper.Dom.Attribute.Get(_slideEl, OSFramework.OSUI.Constants.A11YAttributes.Role.AttrName) === OSFramework.OSUI.Constants.A11YAttributes.Role.TabPanel &&
-					_slideEl.querySelector('img, ul, ol, li')
-				) {
-					OSFramework.OSUI.Helper.Dom.Attribute.Remove(_slideEl, OSFramework.OSUI.Constants.A11YAttributes.Role.AttrName);
-				}
-			});
+			this.selfElement
+				.querySelectorAll(OSFramework.OSUI.Constants.Dot + Enum.CssClass.SplideSlide)
+				.forEach((slide) => {
+					const _slideEl = slide as HTMLElement;
+					if (
+						OSFramework.OSUI.Helper.Dom.Attribute.Get(
+							_slideEl,
+							OSFramework.OSUI.Constants.A11YAttributes.Role.AttrName
+						) === OSFramework.OSUI.Constants.A11YAttributes.Role.TabPanel &&
+						_slideEl.querySelector('img, ul, ol, li')
+					) {
+						OSFramework.OSUI.Helper.Dom.Attribute.Remove(
+							_slideEl,
+							OSFramework.OSUI.Constants.A11YAttributes.Role.AttrName
+						);
+					}
+				});
 
 			if (this._hasList && this._carouselListWidgetElem) {
 				// Dynamic content: poll until the List widget finishes loading before applying roles

src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickrConfig.ts

@@ -15,7 +15,7 @@ namespace Providers.OSUI.Datepicker.Flatpickr {
 
 		// Store a integer list of weekdays
 		private _disabledWeekDays = [];
-		
+
 		// Store the language that will be assigned as a locale to the DatePicker
 		private _dynamicLang: string;