Fixed #6524 - Add extend keyword to extend css variables to presets

pull/6537/head
Mert Sincan 2024-10-04 14:12:46 +01:00
parent 006d037940
commit 6e28de62f2
4 changed files with 19 additions and 9 deletions

View File

@ -156,14 +156,15 @@ export default {
isNotEmpty(globalCSS) && BaseStyle.load(globalCSS, { name: 'global', ...this.$styleOptions });
},
_loadThemeStyles() {
if (this.isUnstyled) return;
if (this.isUnstyled || this.$theme === 'none') return;
// common
if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic, style } = this.$style?.getCommonTheme?.() || {};
const { primitive, semantic, global, style } = this.$style?.getCommonTheme?.() || {};
BaseStyle.load(primitive?.css, { name: 'primitive-variables', ...this.$styleOptions });
BaseStyle.load(semantic?.css, { name: 'semantic-variables', ...this.$styleOptions });
BaseStyle.load(global?.css, { name: 'global-variables', ...this.$styleOptions });
BaseStyle.loadTheme({ name: 'global-style', ...this.$styleOptions }, style);
Theme.setLoadedStyleName('common');

View File

@ -81,20 +81,21 @@ const BaseDirective = {
_loadCoreStyles(instance = {}, useStyleOptions) {
if (!Base.isStyleNameLoaded(instance.$style?.name) && instance.$style?.name) {
BaseStyle.loadCSS(useStyleOptions);
instance.isUnstyled() && instance.$style?.loadCSS(useStyleOptions);
instance.$style?.loadCSS(useStyleOptions);
Base.setLoadedStyleName(instance.$style.name);
}
},
_loadThemeStyles: (instance = {}, useStyleOptions) => {
if (instance?.isUnstyled()) return;
if (instance?.isUnstyled() || instance?.theme?.() === 'none') return;
// common
if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic, style } = instance.$style?.getCommonTheme?.() || {};
const { primitive, semantic, global, style } = instance.$style?.getCommonTheme?.() || {};
BaseStyle.load(primitive?.css, { name: 'primitive-variables', ...useStyleOptions });
BaseStyle.load(semantic?.css, { name: 'semantic-variables', ...useStyleOptions });
BaseStyle.load(global?.css, { name: 'global-variables', ...useStyleOptions });
BaseStyle.loadTheme({ name: 'global-style', ...useStyleOptions }, style);
Theme.setLoadedStyleName('common');

View File

@ -193,13 +193,16 @@ export function setupConfig(app, PrimeVue) {
/*** Methods and Services ***/
const loadCommonTheme = () => {
if (PrimeVue.config?.theme === 'none') return;
// common
if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic, style } = BaseStyle.getCommonTheme?.() || {};
const { primitive, semantic, global, 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.load(global?.css, { name: 'global-variables', ...styleOptions });
BaseStyle.loadTheme({ name: 'global-style', ...styleOptions }, style);
Theme.setLoadedStyleName('common');

View File

@ -49,7 +49,7 @@ export default defineNuxtModule<ModuleOptions>({
const resolver = createResolver(import.meta.url);
const registered = register(moduleOptions);
const { autoImport, importPT, importTheme, options, loadStyles } = moduleOptions;
const hasTheme = (importTheme || options?.theme) && !options?.unstyled;
const hasTheme = options?.theme !== 'none' && (importTheme || options?.theme) && !options?.unstyled;
nuxt.options.runtimeConfig.public.primevue = {
...moduleOptions,
@ -114,10 +114,15 @@ const styles = [
${hasTheme ? `Theme.setTheme(${importTheme?.as} || options?.theme)` : ''}
const themes = [
const themes = ${
options?.theme === 'none'
? `[]`
: `
[
${`${uniqueRegisteredStyles?.[0].as} && ${uniqueRegisteredStyles?.[0].as}.getCommonThemeStyleSheet ? ${uniqueRegisteredStyles?.[0].as}.getCommonThemeStyleSheet(undefined, styleProps) : ''`},
${uniqueRegisteredStyles?.map((item: MetaType) => `${item.as} && ${item.as}.getThemeStyleSheet ? ${item.as}.getThemeStyleSheet(undefined, styleProps) : ''`).join(',')}
].join('');
].join('');`
}
export { styles, stylesToTop, themes };
`;