-
Notifications
You must be signed in to change notification settings - Fork 382
/
stylesheet.ts
139 lines (118 loc) · 4.63 KB
/
stylesheet.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/*
* Copyright (c) 2018, salesforce.com, inc.
* All rights reserved.
* SPDX-License-Identifier: MIT
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
*/
import { assert, create, emptyString, forEach, isArray, isUndefined } from '@lwc/shared';
import { VNode } from '../3rdparty/snabbdom/types';
import * as api from './api';
import { EmptyArray, useSyntheticShadow } from './utils';
import { VM } from './vm';
import { removeAttribute, setAttribute } from '../env/element';
/**
* Function producing style based on a host and a shadow selector. This function is invoked by
* the engine with different values depending on the mode that the component is running on.
*/
export type StylesheetFactory = (
hostSelector: string,
shadowSelector: string,
nativeShadow: boolean
) => string;
const CachedStyleFragments: Record<string, DocumentFragment> = create(null);
function createStyleElement(styleContent: string): HTMLStyleElement {
const elm = document.createElement('style');
elm.type = 'text/css';
elm.textContent = styleContent;
return elm;
}
function getCachedStyleElement(styleContent: string): HTMLStyleElement {
let fragment = CachedStyleFragments[styleContent];
if (isUndefined(fragment)) {
fragment = document.createDocumentFragment();
const styleElm = createStyleElement(styleContent);
fragment.appendChild(styleElm);
CachedStyleFragments[styleContent] = fragment;
}
return fragment.cloneNode(true).firstChild as HTMLStyleElement;
}
const globalStyleParent = document.head || document.body || document;
const InsertedGlobalStyleContent: Record<string, true> = create(null);
function insertGlobalStyle(styleContent: string) {
// inserts the global style when needed, otherwise does nothing
if (isUndefined(InsertedGlobalStyleContent[styleContent])) {
InsertedGlobalStyleContent[styleContent] = true;
const elm = createStyleElement(styleContent);
globalStyleParent.appendChild(elm);
}
}
function createStyleVNode(elm: HTMLStyleElement) {
const vnode = api.h(
'style',
{
key: 'style', // special key
},
EmptyArray
);
// TODO [#1364]: supporting the ability to inject a cloned StyleElement
// forcing the diffing algo to use the cloned style for native shadow
vnode.clonedElement = elm;
return vnode;
}
/**
* Reset the styling token applied to the host element.
*/
export function resetStyleAttributes(vm: VM): void {
const { context, elm } = vm;
// Remove the style attribute currently applied to the host element.
const oldHostAttribute = context.hostAttribute;
if (!isUndefined(oldHostAttribute)) {
removeAttribute.call(elm, oldHostAttribute);
}
// Reset the scoping attributes associated to the context.
context.hostAttribute = context.shadowAttribute = undefined;
}
/**
* Apply/Update the styling token applied to the host element.
*/
export function applyStyleAttributes(vm: VM, hostAttribute: string, shadowAttribute: string): void {
const { context, elm } = vm;
// Remove the style attribute currently applied to the host element.
setAttribute.call(elm, hostAttribute, '');
context.hostAttribute = hostAttribute;
context.shadowAttribute = shadowAttribute;
}
function collectStylesheets(stylesheets, hostSelector, shadowSelector, isNative, aggregatorFn) {
forEach.call(stylesheets, sheet => {
if (isArray(sheet)) {
collectStylesheets(sheet, hostSelector, shadowSelector, isNative, aggregatorFn);
} else {
aggregatorFn(sheet(hostSelector, shadowSelector, isNative));
}
});
}
export function evaluateCSS(
stylesheets: StylesheetFactory[],
hostAttribute: string,
shadowAttribute: string
): VNode | null {
if (process.env.NODE_ENV !== 'production') {
assert.isTrue(isArray(stylesheets), `Invalid stylesheets.`);
}
if (useSyntheticShadow) {
const hostSelector = `[${hostAttribute}]`;
const shadowSelector = `[${shadowAttribute}]`;
collectStylesheets(stylesheets, hostSelector, shadowSelector, false, textContent => {
insertGlobalStyle(textContent);
});
return null;
} else {
// Native shadow in place, we need to act accordingly by using the `:host` selector, and an
// empty shadow selector since it is not really needed.
let buffer = '';
collectStylesheets(stylesheets, emptyString, emptyString, true, textContent => {
buffer += textContent;
});
return createStyleVNode(getCachedStyleElement(buffer));
}
}