Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set styles in node #7064

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"release:rc": "pnpm run build && pnpm recursive publish --filter './packages/*' --no-git-checks --report-summary --tag rc",
"build": "NODE_ENV=production pnpm run build:check && pnpm run build:packages",
"build:check": "pnpm run format:check && pnpm run security:check",
"build:packages": "pnpm run build:metadata && pnpm run build:resolver && pnpm run build:core && pnpm run build:lib && pnpm run build:module && pnpm run build:themes && pnpm run build:icons && pnpm run build:forms && pnpm run build:showcase",
"build:packages": "pnpm run build:metadata && pnpm run build:resolver && pnpm run build:core && pnpm run build:lib && pnpm run build:module && pnpm run build:themes && pnpm run build:icons && pnpm run build:forms && pnpm run build:order-widget",
"build:resolver": "pnpm --filter auto-import-resolver build",
"build:core": "pnpm --filter core build",
"build:metadata": "pnpm --filter metadata build",
Expand All @@ -28,11 +28,11 @@
"build:themes": "pnpm --filter themes build",
"build:icons": "pnpm --filter icons build",
"build:forms": "pnpm --filter forms build",
"build:showcase": "pnpm --filter showcase build",
"build:apidoc": "pnpm --filter themes build:tokens && pnpm --filter showcase build:apidoc",
"dev": "pnpm --filter showcase dev",
"preview": "pnpm --filter showcase preview",
"hot:dev": "DEV_ENV=hot pnpm --filter showcase dev",
"build:order-widget": "pnpm --filter order-widget build",
"build:apidoc": "pnpm --filter themes build:tokens && pnpm --filter order-widget build:apidoc",
"dev": "pnpm --filter @cdek-it/order dev",
"preview": "pnpm --filter order-widget preview",
"hot:dev": "DEV_ENV=hot pnpm --filter order-widget dev",
"module:dev": "pnpm --filter @primevue/nuxt-module dev",
"security:check": "pnpm audit --prod --audit-level high",
"format": "prettier --write \"**/*.{vue,js,mjs,ts,d.ts}\" --cache",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/basecomponent/BaseComponent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,7 @@ export default {
return { classes: undefined, inlineStyles: undefined, load: () => {}, loadCSS: () => {}, loadTheme: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
},
$styleOptions() {
return { nonce: this.$primevueConfig?.csp?.nonce };
return { nonce: this.$primevueConfig?.csp?.nonce, applicationNode: this.$primevueConfig?.applicationNode };
},
$primevueConfig() {
return this.$primevue?.config;
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/basedirective/BaseDirective.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const BaseDirective = {
},
_loadStyles: (el, binding, vnode) => {
const config = BaseDirective._getConfig(binding, vnode);
const useStyleOptions = { nonce: config?.csp?.nonce };
const useStyleOptions = { nonce: config?.csp?.nonce, applicationNode: config?.applicationNode };

BaseDirective._loadCoreStyles(el.$instance, useStyleOptions);
BaseDirective._loadThemeStyles(el.$instance, useStyleOptions);
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/config/PrimeVue.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export interface PrimeVueConfiguration {
zIndex?: PrimeVueZIndexOptions;
theme?: any;
unstyled?: boolean;
applicationNode?: HTMLElement | undefined;
pt?: any;
ptOptions?: any;
csp?: PrimeVueCSPOptions;
Expand Down
3 changes: 2 additions & 1 deletion packages/core/src/config/PrimeVue.js
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ export const defaultOptions = {
theme: undefined,
unstyled: false,
pt: undefined,
applicationNode: undefined,
ptOptions: {
mergeSections: true,
mergeProps: false
Expand Down Expand Up @@ -198,7 +199,7 @@ export function setupConfig(app, PrimeVue) {
// common
if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic, global, style } = BaseStyle.getCommonTheme?.() || {};
const styleOptions = { nonce: PrimeVue.config?.csp?.nonce };
const styleOptions = { nonce: PrimeVue.config?.csp?.nonce, applicationNode: PrimeVue.config?.applicationNode };

BaseStyle.load(primitive?.css, { name: 'primitive-variables', ...styleOptions });
BaseStyle.load(semantic?.css, { name: 'semantic-variables', ...styleOptions });
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/usestyle/UseStyle.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export interface StyleOptions {
media?: string;
nonce?: string;
props?: any;
applicationNode?: HTMLElement
}

export interface Style {
Expand Down
22 changes: 20 additions & 2 deletions packages/core/src/usestyle/UseStyle.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ export function useStyle(css, options = {}) {
onMounted: onStyleMounted = undefined,
onUpdated: onStyleUpdated = undefined,
onLoad: onStyleLoaded = undefined,
props = {}
props = {},
applicationNode = undefined
} = options;

let stop = () => {};
Expand All @@ -54,7 +55,23 @@ export function useStyle(css, options = {}) {
media,
nonce: _nonce
});
first ? document.head.prepend(styleRef.value) : document.head.appendChild(styleRef.value);

if(applicationNode){
const extraSheet = new CSSStyleSheet();

const nextTickEvent = async () => {
await nextTick();
}

nextTickEvent().then(() => {
styleRef.value.innerText = styleRef.value.innerText.replace(":root", ":host");
extraSheet.replaceSync(styleRef.value.innerText);
applicationNode.adoptedStyleSheets.push(extraSheet);
});
} else {
first ? document.head.prepend(styleRef.value) : document.head.appendChild(styleRef.value)
}

setAttribute(styleRef.value, 'data-primevue-style-id', _name);
setAttributes(styleRef.value, _styleProps);
styleRef.value.onload = (event) => onStyleLoaded?.(event, { name: _name });
Expand Down Expand Up @@ -90,6 +107,7 @@ export function useStyle(css, options = {}) {
return {
id,
name,
applicationNode,
el: styleRef,
css: cssRef,
unload,
Expand Down
Loading