From 5c56d32671a3fb668e1c4326a2199ff0dd111406 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Sun, 31 Mar 2024 06:10:59 +0100
Subject: [PATCH] Theming API: Update cssLayer option

---
 components/lib/themes/config/index.js     |  5 +----
 components/lib/themes/utils/themeUtils.js | 21 +++++++++++++++------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/components/lib/themes/config/index.js b/components/lib/themes/config/index.js
index 92c348ca1..faa21dd35 100644
--- a/components/lib/themes/config/index.js
+++ b/components/lib/themes/config/index.js
@@ -10,10 +10,7 @@ export default {
         options: {
             prefix: 'p',
             darkModeSelector: 'system',
-            cssLayer: false /*{
-                name: 'primevue',
-                order: 'primevue'
-            }*/
+            cssLayer: false
         }
     },
     _theme: undefined,
diff --git a/components/lib/themes/utils/themeUtils.js b/components/lib/themes/utils/themeUtils.js
index d2a4cf784..ceaac968f 100644
--- a/components/lib/themes/utils/themeUtils.js
+++ b/components/lib/themes/utils/themeUtils.js
@@ -42,11 +42,10 @@ export default {
         }
     },
     getCommon({ name = '', theme = {}, params, set, defaults }) {
-        const { base, preset } = theme;
+        const { base, preset, options } = theme;
         let primitive_css, semantic_css, global_css;
 
         if (SharedUtils.object.isNotEmpty(preset)) {
-            const { options } = theme;
             const { primitive, semantic } = preset;
             const { colorScheme, ...sRest } = semantic || {};
             const { dark, ...csRest } = colorScheme || {};
@@ -64,6 +63,7 @@ export default {
         }
 
         global_css = SharedUtils.object.getItemValue(base?.global?.css, { ...params, dt: (tokenPath, fallback, type) => dt(theme, tokenPath, fallback, type) });
+        global_css = this._transformCSS(name, global_css, undefined, 'style', options, set, defaults);
 
         return {
             primitive: primitive_css,
@@ -79,7 +79,10 @@ export default {
         const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: csRest }, options).declarations : '';
         const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: dark }, options).declarations : '';
 
-        return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, set, defaults)}`;
+        const light_variable_css = this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults);
+        const dark_variable_css = this._transformCSS(name, dark_css, 'dark', 'variable', options, set, defaults);
+
+        return `${light_variable_css}${dark_variable_css}`;
     },
     getBaseC({ name = '', theme = {}, params, set, defaults }) {
         const { base, options } = theme;
@@ -96,7 +99,10 @@ export default {
         const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: csRest }, options).declarations : '';
         const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: dark }, options).declarations : '';
 
-        return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, set, defaults)}`;
+        const light_variable_css = this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults);
+        const dark_variable_css = this._transformCSS(name, dark_css, 'dark', 'variable', options, set, defaults);
+
+        return `${light_variable_css}${dark_variable_css}`;
     },
     getBaseD({ name = '', theme = {}, params, set, defaults }) {
         const { base, options } = theme;
@@ -112,7 +118,7 @@ export default {
         const { cssLayer } = options;
 
         if (cssLayer) {
-            const order = SharedUtils.object.getItemValue(cssLayer.order || defaults.options.cssLayer.order, params);
+            const order = SharedUtils.object.getItemValue(cssLayer.order || 'primeui', params);
 
             return `@layer ${order}`;
         }
@@ -247,7 +253,10 @@ export default {
             }
 
             if (cssLayer) {
-                let layerOptions = { ...defaults.options.cssLayer };
+                const layerOptions = {
+                    name: 'primeui',
+                    order: 'primeui'
+                };
 
                 SharedUtils.object.isObject(cssLayer) && (layerOptions.name = SharedUtils.object.getItemValue(cssLayer.name, { name, type }));