Fixed #6452 - Add style keyword to themes section to inject custom styles

packages/core/src/base/style/BaseStyle.js

@@ -164,8 +164,8 @@ export default {
     loadCSS(options = {}) {
         return this.load(this.css, options);
     },
-    loadTheme(options = {}) {
+    loadTheme(options = {}, style = '') {
-        return this.load(this.theme, options, (computedStyle) => Theme.transformCSS(options.name || this.name, computedStyle));
+        return this.load(this.theme, options, (computedStyle) => Theme.transformCSS(options.name || this.name, `${computedStyle}${style}`));
     },
     getCommonTheme(params) {
         return Theme.getCommon(this.name, params);

packages/core/src/basecomponent/BaseComponent.vue

@@ -159,21 +159,21 @@ export default {
 
             // common
             if (!Theme.isStyleNameLoaded('common')) {
-                const { primitive, semantic } = this.$style?.getCommonTheme?.() || {};
+                const { primitive, semantic, style } = this.$style?.getCommonTheme?.() || {};
 
                 BaseStyle.load(primitive?.css, { name: 'primitive-variables', ...this.$styleOptions });
                 BaseStyle.load(semantic?.css, { name: 'semantic-variables', ...this.$styleOptions });
-                BaseStyle.loadTheme({ name: 'global-style', ...this.$styleOptions });
+                BaseStyle.loadTheme({ name: 'global-style', ...this.$styleOptions }, style);
 
                 Theme.setLoadedStyleName('common');
             }
 
             // component
             if (!Theme.isStyleNameLoaded(this.$style?.name) && this.$style?.name) {
-                const { css } = this.$style?.getComponentTheme?.() || {};
+                const { css, style } = this.$style?.getComponentTheme?.() || {};
 
                 this.$style?.load(css, { name: `${this.$style.name}-variables`, ...this.$styleOptions });
-                this.$style?.loadTheme({ name: `${this.$style.name}-style`, ...this.$styleOptions });
+                this.$style?.loadTheme({ name: `${this.$style.name}-style`, ...this.$styleOptions }, style);
 
                 Theme.setLoadedStyleName(this.$style.name);
             }

packages/core/src/basedirective/BaseDirective.js

@@ -91,21 +91,21 @@ const BaseDirective = {
 
         // common
         if (!Theme.isStyleNameLoaded('common')) {
-            const { primitive, semantic } = instance.$style?.getCommonTheme?.() || {};
+            const { primitive, semantic, style } = instance.$style?.getCommonTheme?.() || {};
 
             BaseStyle.load(primitive?.css, { name: 'primitive-variables', ...useStyleOptions });
             BaseStyle.load(semantic?.css, { name: 'semantic-variables', ...useStyleOptions });
-            BaseStyle.loadTheme({ name: 'global-style', ...useStyleOptions });
+            BaseStyle.loadTheme({ name: 'global-style', ...useStyleOptions }, style);
 
             Theme.setLoadedStyleName('common');
         }
 
         // directive
         if (!Theme.isStyleNameLoaded(instance.$style?.name) && instance.$style?.name) {
-            const { css } = instance.$style?.getDirectiveTheme?.() || {};
+            const { css, style } = instance.$style?.getDirectiveTheme?.() || {};
 
             instance.$style?.load(css, { name: `${instance.$style.name}-variables`, ...useStyleOptions });
-            instance.$style?.loadTheme({ name: `${instance.$style.name}-style`, ...useStyleOptions });
+            instance.$style?.loadTheme({ name: `${instance.$style.name}-style`, ...useStyleOptions }, style);
 
             Theme.setLoadedStyleName(instance.$style.name);
         }

packages/core/src/config/PrimeVue.js

@@ -195,12 +195,12 @@ export function setupConfig(app, PrimeVue) {
     const loadCommonTheme = () => {
         // common
         if (!Theme.isStyleNameLoaded('common')) {
-            const { primitive, semantic } = BaseStyle.getCommonTheme?.() || {};
+            const { primitive, semantic, style } = BaseStyle.getCommonTheme?.() || {};
             const styleOptions = { nonce: PrimeVue.config?.csp?.nonce };
 
             BaseStyle.load(primitive?.css, { name: 'primitive-variables', ...styleOptions });
             BaseStyle.load(semantic?.css, { name: 'semantic-variables', ...styleOptions });
-            BaseStyle.loadTheme({ name: 'global-style', ...styleOptions });
+            BaseStyle.loadTheme({ name: 'global-style', ...styleOptions }, style);
 
             Theme.setLoadedStyleName('common');
         }

packages/themes/src/presets/material/index.js

@@ -177,5 +177,12 @@ export default {
     directives: {
         tooltip,
         ripple
-    }
+    },
+    // @todo: REMOVE THIS BLOCK
+    style: ({ dt }) => `
+.p-button {
+    background: blue !important;
+    padding: ${dt('inputtext.test')} ${dt('inputtext.test')} !important;
+}
+    `
 };

packages/themes/src/presets/material/inputtext/index.js

@@ -14,6 +14,7 @@ export default {
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
+        test: '2rem', // @todo: REMOVE THIS LINE
         borderRadius: '{form.field.border.radius}',
         focusRing: {
             width: '{form.field.focus.ring.width}',
@@ -33,5 +34,13 @@ export default {
             paddingX: '0.875rem',
             paddingY: '0.625rem'
         }
-    }
+    },
+    // @todo: REMOVE THIS BLOCK
+    style: ({ dt }) => `
+.p-inputtext {
+    background: yellow;
+    padding: ${dt('inputtext.test')} ${dt('inputtext.test')};
+    border: 5px solid red;
+}
+    `
 };