From 4c67b9748185ac0361770fb588c33c24a4b3fd56 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Tue, 20 Feb 2024 11:44:09 +0000 Subject: [PATCH] Cosmetics --- components/lib/base/style/BaseStyle.js | 8 +- .../lib/basecomponent/BaseComponent.vue | 122 +++++++----------- components/lib/basedirective/BaseDirective.js | 19 +-- components/lib/utils/ObjectUtils.js | 12 ++ 4 files changed, 74 insertions(+), 87 deletions(-) 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; } };