From d959cb049355d3d3c49f44209095f81bc97e187f Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Sun, 22 Sep 2024 14:22:07 +0100 Subject: [PATCH] Fixed #6452 - Add style keyword to themes section to inject custom styles --- packages/core/src/base/style/BaseStyle.js | 4 ++-- packages/core/src/basecomponent/BaseComponent.vue | 8 ++++---- packages/core/src/basedirective/BaseDirective.js | 8 ++++---- packages/core/src/config/PrimeVue.js | 4 ++-- packages/themes/src/presets/material/index.js | 9 ++++++++- .../themes/src/presets/material/inputtext/index.js | 11 ++++++++++- 6 files changed, 30 insertions(+), 14 deletions(-) diff --git a/packages/core/src/base/style/BaseStyle.js b/packages/core/src/base/style/BaseStyle.js index 9d1c6965c..c6bc964e7 100644 --- a/packages/core/src/base/style/BaseStyle.js +++ b/packages/core/src/base/style/BaseStyle.js @@ -164,8 +164,8 @@ export default { loadCSS(options = {}) { return this.load(this.css, options); }, - loadTheme(options = {}) { - return this.load(this.theme, options, (computedStyle) => Theme.transformCSS(options.name || this.name, computedStyle)); + loadTheme(options = {}, style = '') { + return this.load(this.theme, options, (computedStyle) => Theme.transformCSS(options.name || this.name, `${computedStyle}${style}`)); }, getCommonTheme(params) { return Theme.getCommon(this.name, params); diff --git a/packages/core/src/basecomponent/BaseComponent.vue b/packages/core/src/basecomponent/BaseComponent.vue index 5671d6818..f4f9f0465 100644 --- a/packages/core/src/basecomponent/BaseComponent.vue +++ b/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); } diff --git a/packages/core/src/basedirective/BaseDirective.js b/packages/core/src/basedirective/BaseDirective.js index de5831c31..b1650239d 100644 --- a/packages/core/src/basedirective/BaseDirective.js +++ b/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); } diff --git a/packages/core/src/config/PrimeVue.js b/packages/core/src/config/PrimeVue.js index f8da58b34..ff3ba7ac4 100644 --- a/packages/core/src/config/PrimeVue.js +++ b/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'); } diff --git a/packages/themes/src/presets/material/index.js b/packages/themes/src/presets/material/index.js index 49ccdfd74..de05faa87 100644 --- a/packages/themes/src/presets/material/index.js +++ b/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; +} + ` }; diff --git a/packages/themes/src/presets/material/inputtext/index.js b/packages/themes/src/presets/material/inputtext/index.js index 1f0e1eaff..f3f3a497a 100644 --- a/packages/themes/src/presets/material/inputtext/index.js +++ b/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; +} + ` };