diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js
index 88c5d327b..deb599901 100644
--- a/components/lib/base/style/BaseStyle.js
+++ b/components/lib/base/style/BaseStyle.js
@@ -1,4 +1,5 @@
import { useStyle } from 'primevue/usestyle';
+import { ObjectUtils } from 'primevue/utils';
const css = `
.p-hidden-accessible {
@@ -33,18 +34,19 @@ export default {
classes,
inlineStyles,
loadStyle(options = {}) {
- return this.css ? useStyle(this.css, { name: this.name, ...options }) : {};
+ return this.css ? useStyle(ObjectUtils.minifyCSS(this.css), { name: this.name, ...options }) : {};
},
loadTheme(theme, options = {}) {
- return theme ? useStyle(theme, { name: `${this.name}-style`, ...options }) : {};
+ return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: `${this.name}-style`, ...options }) : {};
},
getStyleSheet(extendedCSS = '', props = {}) {
if (this.css) {
+ const _css = ObjectUtils.minifyCSS(`${this.css}${extendedCSS}`);
const _props = Object.entries(props)
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
.join(' ');
- return ``;
+ return ``;
}
return '';
diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index f933e3a9a..94340d8e4 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -31,15 +31,15 @@ export default {
immediate: true,
handler(newValue) {
if (!newValue) {
- BaseComponentStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
- this.$options.style && this.$style.loadStyle({ nonce: this.$config?.csp?.nonce });
+ BaseComponentStyle.loadStyle(this.$styleOptions);
+ this.$options.style && this.$style.loadStyle(this.$styleOptions);
}
}
},
- $globalPresetTheme: {
+ $globalPresetCTheme: {
immediate: true,
- handler(newValue) {
- if (newValue) {
+ handler(newValue, oldValue) {
+ if (newValue && newValue !== oldValue) {
const { variables } = newValue;
const { colorScheme, ...vRest } = variables || {};
const { dark, ...csRest } = colorScheme || {};
@@ -52,10 +52,10 @@ export default {
}
}
},
- $globalBaseTheme: {
+ $globalBaseCTheme: {
immediate: true,
- handler(newValue) {
- if (newValue) {
+ handler(newValue, oldValue) {
+ if (newValue && newValue !== oldValue) {
const { css } = newValue;
this.$style?.loadTheme(`${css}`, { useStyleOptions: this.$styleOptions });
@@ -80,8 +80,9 @@ export default {
this._hook('onCreated');
},
beforeMount() {
- BaseStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
+ BaseStyle.loadStyle(this.$styleOptions);
this._loadGlobalStyles();
+ this._loadGlobalThemeStyles();
this._hook('onBeforeMount');
},
mounted() {
@@ -125,52 +126,24 @@ export default {
const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
- ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
-
- this._loadThemeVariables();
-
- BaseComponentStyle.loadGlobalTheme(this.$baseTheme?.components?.global?.css, { nonce: this.$config?.csp?.nonce });
+ ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, this.$styleOptions);
},
- _loadThemeVariables() {
- const { primitive, semantic } = this.$presetTheme;
- const { colorScheme, ...sRest } = semantic || {};
- const { dark, ...csRest } = colorScheme || {};
- const primitive_css = ObjectUtils.isNotEmpty(primitive) ? toVariables({ primitive }).css : '';
- const sRest_css = ObjectUtils.isNotEmpty(sRest) ? toVariables({ semantic: sRest }).css : '';
- const csRest_css = ObjectUtils.isNotEmpty(csRest) ? toVariables({ light: csRest }).css : '';
- const dark_css = ObjectUtils.isNotEmpty(dark) ? toVariables({ dark }, { selector: '.p-dark' }).css : '';
- const semantic_css = `${sRest_css}${csRest_css}${dark_css}`;
+ _loadGlobalThemeStyles() {
+ if (ObjectUtils.isNotEmpty(this.$globalPresetTheme)) {
+ const { primitive, semantic } = this.$globalPresetTheme;
+ const { colorScheme, ...sRest } = semantic || {};
+ const { dark, ...csRest } = colorScheme || {};
+ const primitive_css = ObjectUtils.isNotEmpty(primitive) ? toVariables({ primitive }).css : '';
+ const sRest_css = ObjectUtils.isNotEmpty(sRest) ? toVariables({ semantic: sRest }).css : '';
+ const csRest_css = ObjectUtils.isNotEmpty(csRest) ? toVariables({ light: csRest }).css : '';
+ const dark_css = ObjectUtils.isNotEmpty(dark) ? toVariables({ dark }, { selector: '.p-dark' }).css : '';
+ const semantic_css = `${sRest_css}${csRest_css}${dark_css}`;
- BaseStyle.loadTheme(primitive_css, { name: 'primitive-variables', nonce: this.$config?.csp?.nonce });
- BaseStyle.loadTheme(semantic_css, { name: 'semantic-variables', nonce: this.$config?.csp?.nonce });
+ BaseStyle.loadTheme(primitive_css, { name: 'primitive-variables', useStyleOptions: this.$styleOptions });
+ BaseStyle.loadTheme(semantic_css, { name: 'semantic-variables', useStyleOptions: this.$styleOptions });
+ }
- /*const { variables } = this.$presetTheme;
- const { colorScheme, ...vRest } = variables || {};
- const { dark, ...csRest } = colorScheme || {};
- const vRest_css = ObjectUtils.isNotEmpty(vRest) ? toVariables({ light: vRest }).css : '';
- const csRest_css = ObjectUtils.isNotEmpty(csRest) ? toVariables({ light: csRest }).css : '';
- const dark_css = ObjectUtils.isNotEmpty(dark) ? toVariables({ dark }, { selector: '.p-dark' }).css : '';
- const variables_css = `${vRest_css}${csRest_css}${dark_css}`;
-
- BaseStyle.loadTheme(variables_css, { name: 'theme-variables', nonce: this.$config?.csp?.nonce });*/
- /*const { primitive, semantic } = this.$presetTheme;
- const { colorScheme, ...sRest } = semantic || {};
- const { dark, ...csRest } = colorScheme || {};
-
- // primitive
- BaseStyle.loadTheme(toVariables({ primitive }).css, { name: 'primitive-variables', nonce: this.$config?.csp?.nonce });
-
- // semantic -> light + common
- const light_common_css = `${toVariables({ light: { ...sRest, ...csRest } }).css}${toVariables({ dark }, { selector: '.p-dark' }).css}`;
-
- BaseStyle.loadTheme(light_common_css, { name: 'semantic-variables', nonce: this.$config?.csp?.nonce });
-
- /*Object.entries(rest).forEach(([key, value]) => {
- const v = toVariables({ [key]: value });
-
- BaseStyle.loadTheme(v.css, { name: `${key}-variables`, nonce: this.$config?.csp?.nonce });
- });
- */
+ BaseComponentStyle.loadGlobalTheme(this.$globalBaseTheme?.components?.global?.css, this.$styleOptions);
},
_getHostInstance(instance) {
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
@@ -296,21 +269,32 @@ export default {
isUnstyled() {
return this.unstyled !== undefined ? this.unstyled : this.$config?.unstyled;
},
- $baseTheme() {
- const { base } = this.$config?.theme || {};
-
- return ObjectUtils.getItemValue(base);
- },
- $presetTheme() {
- const { preset, options } = this.$config?.theme || {};
-
- return ObjectUtils.getItemValue(preset, options);
+ $globalTheme() {
+ return this.$config?.theme;
},
$globalBaseTheme() {
- return ObjectUtils.getItemValue(this.$baseTheme?.components?.[this.$style.name], this.$params);
+ return ObjectUtils.getItemValue(this.$globalTheme?.base);
+ },
+ $globalBaseCTheme() {
+ return ObjectUtils.getItemValue(this.$globalBaseTheme?.components?.[this.$style.name], this.$params);
},
$globalPresetTheme() {
- return ObjectUtils.getItemValue(this.$presetTheme?.components?.[this.$style.name], this.$params);
+ return ObjectUtils.getItemValue(this.$globalTheme?.preset, this.$globalTheme?.options);
+ },
+ $globalPresetCTheme() {
+ return ObjectUtils.getItemValue(this.$globalPresetTheme?.components?.[this.$style.name], this.$params);
+ },
+ $style() {
+ return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, loadTheme: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
+ },
+ $styleOptions() {
+ return { nonce: this.$config?.csp?.nonce };
+ },
+ $config() {
+ return this.$primevue?.config;
+ },
+ $name() {
+ return this.$options.hostName || this.$.type.name;
},
$params() {
const parentInstance = this._getHostInstance(this) || this.$parent;
@@ -330,18 +314,6 @@ export default {
parentInstance
};
},
- $style() {
- return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, loadTheme: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
- },
- $styleOptions() {
- return { nonce: this.$config?.csp?.nonce };
- },
- $config() {
- return this.$primevue?.config;
- },
- $name() {
- return this.$options.hostName || this.$.type.name;
- },
$_attrsPT() {
return Object.entries(this.$attrs || {})
.filter(([key]) => key?.startsWith('pt:'))
diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js
index a2a480145..1e1229286 100644
--- a/components/lib/basedirective/BaseDirective.js
+++ b/components/lib/basedirective/BaseDirective.js
@@ -74,8 +74,8 @@ const BaseDirective = {
_useDefaultPT: (instance = {}, defaultPT = {}, callback, key, params) => {
return BaseDirective._usePT(instance, defaultPT, callback, key, params);
},
- _loadThemeStyle: (instance = {}, useStyleOptions) => {
- const preset = instance.globalPresetTheme();
+ _loadGlobalThemeStyles: (instance = {}, useStyleOptions) => {
+ const preset = instance.globalPresetCTheme();
if (preset) {
const { variables } = preset;
@@ -89,7 +89,7 @@ const BaseDirective = {
instance.$style?.loadTheme(`${variables_css}`, { name: `${instance.$name}-directive-variable`, useStyleOptions });
}
- const base = instance.globalBaseTheme();
+ const base = instance.globalBaseCTheme();
if (base) {
const { css } = base;
@@ -133,10 +133,11 @@ const BaseDirective = {
/* computed instance variables */
defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled),
- baseTheme: () => ObjectUtils.getItemValue(config?.theme?.base),
- presetTheme: () => ObjectUtils.getItemValue(config?.theme?.preset, config?.theme?.options),
- globalBaseTheme: () => ObjectUtils.getItemValue(el.$instance?.baseTheme?.()?.directives?.[name], undefined),
- globalPresetTheme: () => ObjectUtils.getItemValue(el.$instance?.presetTheme?.()?.directives?.[name], undefined),
+ globalTheme: () => config?.theme,
+ globalBaseTheme: () => ObjectUtils.getItemValue(el.$instance?.globalTheme?.()?.base),
+ globalBaseCTheme: () => ObjectUtils.getItemValue(el.$instance?.globalBaseTheme?.()?.directives?.[name], undefined),
+ globalPresetTheme: () => ObjectUtils.getItemValue(el.$instance?.globalTheme?.()?.preset, el.$instance?.globalTheme?.()?.options),
+ globalPresetCTheme: () => ObjectUtils.getItemValue(el.$instance?.globalPresetTheme?.()?.directives?.[name], undefined),
/* instance's methods */
ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }),
ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false),
@@ -160,7 +161,7 @@ const BaseDirective = {
BaseStyle.loadStyle({ nonce: config?.csp?.nonce });
!el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle({ nonce: config?.csp?.nonce });
- BaseDirective._loadThemeStyle(el.$instance, { nonce: config?.csp?.nonce });
+ BaseDirective._loadGlobalThemeStyles(el.$instance, { nonce: config?.csp?.nonce });
handleHook('beforeMount', el, binding, vnode, prevVnode);
},
mounted: (el, binding, vnode, prevVnode) => {
@@ -168,7 +169,7 @@ const BaseDirective = {
BaseStyle.loadStyle({ nonce: config?.csp?.nonce });
!el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle({ nonce: config?.csp?.nonce });
- BaseDirective._loadThemeStyle(el.$instance, { nonce: config?.csp?.nonce });
+ BaseDirective._loadGlobalThemeStyles(el.$instance, { nonce: config?.csp?.nonce });
handleHook('mounted', el, binding, vnode, prevVnode);
},
beforeUpdate: (el, binding, vnode, prevVnode) => {
diff --git a/components/lib/utils/ObjectUtils.js b/components/lib/utils/ObjectUtils.js
index a6c1f5e10..9ce2afb66 100755
--- a/components/lib/utils/ObjectUtils.js
+++ b/components/lib/utils/ObjectUtils.js
@@ -367,5 +367,17 @@ export default {
} else {
return JSON.stringify(value);
}
+ },
+
+ minifyCSS(css) {
+ return css
+ ? css
+ .replace(/\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/g, '')
+ .replace(/ {2,}/g, ' ')
+ .replace(/ ([{:}]) /g, '$1')
+ .replace(/([;,]) /g, '$1')
+ .replace(/ !/g, '!')
+ .replace(/: /g, ':')
+ : css;
}
};