@typespec/html-program-viewer 0.61.0-dev.4 → 0.61.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/emitter/index.js +275 -218
- package/dist/manifest-1IDK9ZR4.js +6 -0
- package/dist/react/index.js +384 -365
- package/package.json +3 -3
- package/dist/manifest-onl5D1yL.js +0 -6
package/dist/emitter/index.js
CHANGED
|
@@ -23,11 +23,29 @@ function _mergeNamespaces(n, m) {
|
|
|
23
23
|
return Object.freeze(Object.defineProperty(n, Symbol.toStringTag, { value: 'Module' }));
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
/**
|
|
27
|
+
* @internal
|
|
28
|
+
*
|
|
29
|
+
* @param entry - CSS bucket entry that can be either a string or an array
|
|
30
|
+
* @returns An array where the first element is the CSS rule
|
|
31
|
+
*/
|
|
32
|
+
function normalizeCSSBucketEntry(entry) {
|
|
33
|
+
if (!Array.isArray(entry)) {
|
|
34
|
+
return [entry];
|
|
35
|
+
}
|
|
36
|
+
if (process.env.NODE_ENV !== 'production' && entry.length > 2) {
|
|
37
|
+
throw new Error('CSS Bucket contains an entry with greater than 2 items, please report this to https://github.com/microsoft/griffel/issues');
|
|
38
|
+
}
|
|
39
|
+
return entry;
|
|
40
|
+
}
|
|
41
|
+
|
|
26
42
|
// ----
|
|
43
|
+
|
|
27
44
|
// Heads up!
|
|
28
45
|
// These constants are global and will be shared between Griffel instances.
|
|
29
46
|
// Any change in them should happen only in a MAJOR version. If it happens,
|
|
30
47
|
// please change "__NAMESPACE_PREFIX__" to include a version.
|
|
48
|
+
|
|
31
49
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
32
50
|
const __GLOBAL__ = typeof window === 'undefined' ? global : window;
|
|
33
51
|
const __NAMESPACE_PREFIX__ = '@griffel/';
|
|
@@ -37,31 +55,232 @@ function getGlobalVar(name, defaultValue) {
|
|
|
37
55
|
}
|
|
38
56
|
return __GLOBAL__[Symbol.for(__NAMESPACE_PREFIX__ + name)];
|
|
39
57
|
}
|
|
58
|
+
|
|
40
59
|
/** @internal */
|
|
41
60
|
const DEBUG_RESET_CLASSES = /*#__PURE__*/getGlobalVar('DEBUG_RESET_CLASSES', {});
|
|
61
|
+
|
|
42
62
|
/** @internal */
|
|
43
63
|
const DEFINITION_LOOKUP_TABLE = /*#__PURE__*/getGlobalVar('DEFINITION_LOOKUP_TABLE', {});
|
|
64
|
+
|
|
44
65
|
// ----
|
|
66
|
+
|
|
45
67
|
/** @internal */
|
|
46
68
|
const DATA_BUCKET_ATTR = 'data-make-styles-bucket';
|
|
69
|
+
|
|
47
70
|
/** @internal */
|
|
48
71
|
const DATA_PRIORITY_ATTR = 'data-priority';
|
|
72
|
+
|
|
49
73
|
/** @internal */
|
|
50
74
|
const RESET_HASH_PREFIX = 'r';
|
|
75
|
+
|
|
51
76
|
/** @internal */
|
|
52
77
|
const SEQUENCE_HASH_LENGTH = 7;
|
|
78
|
+
|
|
53
79
|
/** @internal */
|
|
54
80
|
const SEQUENCE_PREFIX = '___';
|
|
81
|
+
|
|
55
82
|
/** @internal */
|
|
56
83
|
const DEBUG_SEQUENCE_SEPARATOR = '_';
|
|
84
|
+
|
|
57
85
|
/** @internal */
|
|
58
86
|
const SEQUENCE_SIZE = process.env.NODE_ENV === 'production' ? SEQUENCE_PREFIX.length + SEQUENCE_HASH_LENGTH : SEQUENCE_PREFIX.length + SEQUENCE_HASH_LENGTH + DEBUG_SEQUENCE_SEPARATOR.length + SEQUENCE_HASH_LENGTH;
|
|
87
|
+
|
|
59
88
|
// indexes for values in LookupItem tuple
|
|
89
|
+
|
|
60
90
|
/** @internal */
|
|
61
91
|
const LOOKUP_DEFINITIONS_INDEX = 0;
|
|
92
|
+
|
|
62
93
|
/** @internal */
|
|
63
94
|
const LOOKUP_DIR_INDEX = 1;
|
|
64
95
|
|
|
96
|
+
function createIsomorphicStyleSheet(styleElement, bucketName, priority, elementAttributes) {
|
|
97
|
+
// no CSSStyleSheet in SSR, just append rules here for server render
|
|
98
|
+
const __cssRulesForSSR = [];
|
|
99
|
+
elementAttributes[DATA_BUCKET_ATTR] = bucketName;
|
|
100
|
+
elementAttributes[DATA_PRIORITY_ATTR] = String(priority);
|
|
101
|
+
if (styleElement) {
|
|
102
|
+
for (const attrName in elementAttributes) {
|
|
103
|
+
styleElement.setAttribute(attrName, elementAttributes[attrName]);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
function insertRule(rule) {
|
|
107
|
+
if (styleElement != null && styleElement.sheet) {
|
|
108
|
+
return styleElement.sheet.insertRule(rule, styleElement.sheet.cssRules.length);
|
|
109
|
+
}
|
|
110
|
+
return __cssRulesForSSR.push(rule);
|
|
111
|
+
}
|
|
112
|
+
return {
|
|
113
|
+
elementAttributes,
|
|
114
|
+
insertRule,
|
|
115
|
+
element: styleElement,
|
|
116
|
+
bucketName,
|
|
117
|
+
cssRules() {
|
|
118
|
+
if (styleElement != null && styleElement.sheet) {
|
|
119
|
+
return Array.from(styleElement.sheet.cssRules).map(cssRule => cssRule.cssText);
|
|
120
|
+
}
|
|
121
|
+
return __cssRulesForSSR;
|
|
122
|
+
}
|
|
123
|
+
};
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Ordered style buckets using their short pseudo name.
|
|
128
|
+
*
|
|
129
|
+
* @internal
|
|
130
|
+
*/
|
|
131
|
+
const styleBucketOrdering = [
|
|
132
|
+
// reset styles
|
|
133
|
+
'r',
|
|
134
|
+
// catch-all
|
|
135
|
+
'd',
|
|
136
|
+
// link
|
|
137
|
+
'l',
|
|
138
|
+
// visited
|
|
139
|
+
'v',
|
|
140
|
+
// focus-within
|
|
141
|
+
'w',
|
|
142
|
+
// focus
|
|
143
|
+
'f',
|
|
144
|
+
// focus-visible
|
|
145
|
+
'i',
|
|
146
|
+
// hover
|
|
147
|
+
'h',
|
|
148
|
+
// active
|
|
149
|
+
'a',
|
|
150
|
+
// at rules for reset styles
|
|
151
|
+
's',
|
|
152
|
+
// keyframes
|
|
153
|
+
'k',
|
|
154
|
+
// at-rules
|
|
155
|
+
't',
|
|
156
|
+
// @media rules
|
|
157
|
+
'm',
|
|
158
|
+
// @container rules
|
|
159
|
+
'c'];
|
|
160
|
+
|
|
161
|
+
// avoid repeatedly calling `indexOf` to determine order during new insertions
|
|
162
|
+
const styleBucketOrderingMap = /*#__PURE__*/styleBucketOrdering.reduce((acc, cur, j) => {
|
|
163
|
+
acc[cur] = j;
|
|
164
|
+
return acc;
|
|
165
|
+
}, {});
|
|
166
|
+
function getStyleSheetKey(bucketName, media, priority) {
|
|
167
|
+
return (bucketName === 'm' ? bucketName + media : bucketName) + priority;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/**
|
|
171
|
+
* Lazily adds a `<style>` bucket to the `<head>`. This will ensure that the style buckets are ordered.
|
|
172
|
+
*/
|
|
173
|
+
function getStyleSheetForBucket(bucketName, targetDocument, insertionPoint, renderer, metadata = {}) {
|
|
174
|
+
var _ref, _ref2;
|
|
175
|
+
const isMediaBucket = bucketName === 'm';
|
|
176
|
+
const media = (_ref = metadata['m']) != null ? _ref : '0';
|
|
177
|
+
const priority = (_ref2 = metadata['p']) != null ? _ref2 : 0;
|
|
178
|
+
const stylesheetKey = getStyleSheetKey(bucketName, media, priority);
|
|
179
|
+
if (!renderer.stylesheets[stylesheetKey]) {
|
|
180
|
+
const tag = targetDocument && targetDocument.createElement('style');
|
|
181
|
+
const stylesheet = createIsomorphicStyleSheet(tag, bucketName, priority, Object.assign({}, renderer.styleElementAttributes, isMediaBucket && {
|
|
182
|
+
media
|
|
183
|
+
}));
|
|
184
|
+
renderer.stylesheets[stylesheetKey] = stylesheet;
|
|
185
|
+
if (targetDocument && tag) {
|
|
186
|
+
targetDocument.head.insertBefore(tag, findInsertionPoint(targetDocument, insertionPoint, bucketName, renderer, metadata));
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
return renderer.stylesheets[stylesheetKey];
|
|
190
|
+
}
|
|
191
|
+
function isSameInsertionKey(element, bucketName, metadata) {
|
|
192
|
+
var _ref3, _element$media;
|
|
193
|
+
const targetKey = bucketName + ((_ref3 = metadata['m']) != null ? _ref3 : '');
|
|
194
|
+
const elementKey = element.getAttribute(DATA_BUCKET_ATTR) + ((_element$media = element.media) != null ? _element$media : '');
|
|
195
|
+
return targetKey === elementKey;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/**
|
|
199
|
+
* Finds an element before which the new bucket style element should be inserted following the bucket sort order.
|
|
200
|
+
*
|
|
201
|
+
* @param targetDocument - A document
|
|
202
|
+
* @param insertionPoint - An element that will be used as an initial insertion point
|
|
203
|
+
* @param targetBucket - The bucket that should be inserted to DOM
|
|
204
|
+
* @param renderer - Griffel renderer
|
|
205
|
+
* @param metadata - metadata for CSS rule
|
|
206
|
+
* @returns - Smallest style element with greater sort order than the current bucket
|
|
207
|
+
*/
|
|
208
|
+
function findInsertionPoint(targetDocument, insertionPoint, targetBucket, renderer, metadata = {}) {
|
|
209
|
+
var _ref4, _ref5;
|
|
210
|
+
const targetOrder = styleBucketOrderingMap[targetBucket];
|
|
211
|
+
const media = (_ref4 = metadata['m']) != null ? _ref4 : '';
|
|
212
|
+
const priority = (_ref5 = metadata['p']) != null ? _ref5 : 0;
|
|
213
|
+
|
|
214
|
+
// Similar to javascript sort comparators where
|
|
215
|
+
// a positive value is increasing sort order
|
|
216
|
+
// a negative value is decreasing sort order
|
|
217
|
+
let comparer = el => targetOrder - styleBucketOrderingMap[el.getAttribute(DATA_BUCKET_ATTR)];
|
|
218
|
+
let styleElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}]`);
|
|
219
|
+
if (targetBucket === 'm') {
|
|
220
|
+
const mediaElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}="${targetBucket}"]`);
|
|
221
|
+
|
|
222
|
+
// only reduce the scope of the search and change comparer
|
|
223
|
+
// if there are other media buckets already on the page
|
|
224
|
+
if (mediaElements.length) {
|
|
225
|
+
styleElements = mediaElements;
|
|
226
|
+
comparer = el => renderer.compareMediaQueries(media, el.media);
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
const comparerWithPriority = el => {
|
|
230
|
+
if (isSameInsertionKey(el, targetBucket, metadata)) {
|
|
231
|
+
return priority - Number(el.getAttribute('data-priority'));
|
|
232
|
+
}
|
|
233
|
+
return comparer(el);
|
|
234
|
+
};
|
|
235
|
+
const length = styleElements.length;
|
|
236
|
+
let index = length - 1;
|
|
237
|
+
while (index >= 0) {
|
|
238
|
+
const styleElement = styleElements.item(index);
|
|
239
|
+
if (comparerWithPriority(styleElement) > 0) {
|
|
240
|
+
return styleElement.nextSibling;
|
|
241
|
+
}
|
|
242
|
+
index--;
|
|
243
|
+
}
|
|
244
|
+
if (length > 0) {
|
|
245
|
+
return styleElements.item(0);
|
|
246
|
+
}
|
|
247
|
+
return insertionPoint ? insertionPoint.nextSibling : null;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/**
|
|
251
|
+
* Suffixes to be ignored in case of error
|
|
252
|
+
*/
|
|
253
|
+
const ignoreSuffixes = /*#__PURE__*/['-moz-placeholder', '-moz-focus-inner', '-moz-focusring', '-ms-input-placeholder', '-moz-read-write', '-moz-read-only'].join('|');
|
|
254
|
+
const ignoreSuffixesRegex = /*#__PURE__*/new RegExp(`:(${ignoreSuffixes})`);
|
|
255
|
+
|
|
256
|
+
/**
|
|
257
|
+
* @internal
|
|
258
|
+
*
|
|
259
|
+
* Calls `sheet.insertRule` and catches errors related to browser prefixes.
|
|
260
|
+
*/
|
|
261
|
+
function safeInsertRule(sheet, ruleCSS) {
|
|
262
|
+
try {
|
|
263
|
+
sheet.insertRule(ruleCSS);
|
|
264
|
+
} catch (e) {
|
|
265
|
+
// We've disabled these warnings due to false-positive errors with browser prefixes
|
|
266
|
+
if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
|
|
267
|
+
// eslint-disable-next-line no-console
|
|
268
|
+
console.error(`There was a problem inserting the following rule: "${ruleCSS}"`, e);
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
const isDevToolsEnabled = /*#__PURE__*/(() => {
|
|
274
|
+
// Accessing "window.sessionStorage" causes an exception when third party cookies are blocked
|
|
275
|
+
// https://stackoverflow.com/questions/30481516/iframe-in-chrome-error-failed-to-read-localstorage-from-window-access-deni
|
|
276
|
+
try {
|
|
277
|
+
var _window$sessionStorag;
|
|
278
|
+
return Boolean(typeof window !== 'undefined' && ((_window$sessionStorag = window.sessionStorage) == null ? void 0 : _window$sessionStorag.getItem('__GRIFFEL_DEVTOOLS__')));
|
|
279
|
+
} catch (e) {
|
|
280
|
+
return false;
|
|
281
|
+
}
|
|
282
|
+
})();
|
|
283
|
+
|
|
65
284
|
/* eslint-disable */
|
|
66
285
|
// Inspired by https://github.com/garycourt/murmurhash-js
|
|
67
286
|
// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
|
|
@@ -145,6 +364,7 @@ function reduceToClassName(classMap, dir) {
|
|
|
145
364
|
// `hashString` is needed to handle `null` values in a class map as they don't produce any classes.
|
|
146
365
|
let classString = '';
|
|
147
366
|
let hashString = '';
|
|
367
|
+
|
|
148
368
|
// eslint-disable-next-line guard-for-in
|
|
149
369
|
for (const propertyHash in classMap) {
|
|
150
370
|
const classNameMapping = classMap[propertyHash];
|
|
@@ -159,6 +379,7 @@ function reduceToClassName(classMap, dir) {
|
|
|
159
379
|
}
|
|
160
380
|
return [classString.slice(0, -1), hashString.slice(0, -1)];
|
|
161
381
|
}
|
|
382
|
+
|
|
162
383
|
/**
|
|
163
384
|
* Reduces classname maps for slots to classname strings. Registers them in a definition cache to be used by
|
|
164
385
|
* `mergeClasses()`.
|
|
@@ -167,9 +388,11 @@ function reduceToClassName(classMap, dir) {
|
|
|
167
388
|
*/
|
|
168
389
|
function reduceToClassNameForSlots(classesMapBySlot, dir) {
|
|
169
390
|
const classNamesForSlots = {};
|
|
391
|
+
|
|
170
392
|
// eslint-disable-next-line guard-for-in
|
|
171
393
|
for (const slotName in classesMapBySlot) {
|
|
172
394
|
const [slotClasses, slotClassesHash] = reduceToClassName(classesMapBySlot[slotName], dir);
|
|
395
|
+
|
|
173
396
|
// Handles a case when there are no classes in a set i.e. "makeStyles({ root: {} })"
|
|
174
397
|
if (slotClassesHash === '') {
|
|
175
398
|
classNamesForSlots[slotName] = '';
|
|
@@ -185,12 +408,33 @@ function reduceToClassNameForSlots(classesMapBySlot, dir) {
|
|
|
185
408
|
|
|
186
409
|
// Contains a mapping of previously resolved sequences of atomic classnames
|
|
187
410
|
const mergeClassesCachedResults = {};
|
|
411
|
+
|
|
412
|
+
/**
|
|
413
|
+
* Function can take any number of arguments, joins classes together and deduplicates atomic declarations generated by
|
|
414
|
+
* `makeStyles()`. Handles scoped directional styles.
|
|
415
|
+
*
|
|
416
|
+
* Classnames can be of any length, this function can take both atomic declarations and class names.
|
|
417
|
+
*
|
|
418
|
+
* Input:
|
|
419
|
+
* ```
|
|
420
|
+
* // not real classes
|
|
421
|
+
* mergeClasses('ui-button', 'displayflex', 'displaygrid')
|
|
422
|
+
* ```
|
|
423
|
+
*
|
|
424
|
+
* Output:
|
|
425
|
+
* ```
|
|
426
|
+
* 'ui-button displaygrid'
|
|
427
|
+
* ```
|
|
428
|
+
*/
|
|
429
|
+
|
|
188
430
|
function mergeClasses() {
|
|
189
431
|
// arguments are parsed manually to avoid double loops as TS & Babel transforms rest via an additional loop
|
|
190
432
|
// @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
|
|
191
433
|
/* eslint-disable prefer-rest-params */
|
|
434
|
+
|
|
192
435
|
let dir = null;
|
|
193
436
|
let resultClassName = '';
|
|
437
|
+
|
|
194
438
|
// Is used as a cache key to avoid object merging
|
|
195
439
|
let sequenceMatch = '';
|
|
196
440
|
const sequencesIds = new Array(arguments.length);
|
|
@@ -217,6 +461,7 @@ function mergeClasses() {
|
|
|
217
461
|
resultClassName += className + ' ';
|
|
218
462
|
} else {
|
|
219
463
|
const sequenceId = className.substr(sequenceIndex, SEQUENCE_SIZE);
|
|
464
|
+
|
|
220
465
|
// Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
|
|
221
466
|
if (sequenceIndex > 0) {
|
|
222
467
|
resultClassName += className.slice(0, sequenceIndex);
|
|
@@ -232,11 +477,13 @@ function mergeClasses() {
|
|
|
232
477
|
}
|
|
233
478
|
}
|
|
234
479
|
}
|
|
480
|
+
|
|
235
481
|
// .slice() there allows to avoid trailing space for non-atomic classes
|
|
236
482
|
// "ui-button ui-flex " => "ui-button ui-flex"
|
|
237
483
|
if (sequenceMatch === '') {
|
|
238
484
|
return resultClassName.slice(0, -1);
|
|
239
485
|
}
|
|
486
|
+
|
|
240
487
|
// It's safe to reuse results to avoid continuous merging as results are stable
|
|
241
488
|
// "__seq1 ... __seq2 ..." => "__seq12 ..."
|
|
242
489
|
const mergeClassesResult = mergeClassesCachedResults[sequenceMatch];
|
|
@@ -265,11 +512,13 @@ function mergeClasses() {
|
|
|
265
512
|
}
|
|
266
513
|
}
|
|
267
514
|
}
|
|
515
|
+
|
|
268
516
|
// eslint-disable-next-line prefer-spread
|
|
269
517
|
const resultClassesMap = Object.assign.apply(Object,
|
|
270
518
|
// .assign() mutates the first object, we can't mutate mappings as it will produce invalid results later
|
|
271
519
|
[{}].concat(sequenceMappings));
|
|
272
520
|
const [atomicClasses, classesMapHash] = reduceToClassName(resultClassesMap, dir);
|
|
521
|
+
|
|
273
522
|
// Each merge of classes generates a new sequence of atomic classes that needs to be registered
|
|
274
523
|
const newSequenceHash = hashSequence(classesMapHash, dir, sequencesIds);
|
|
275
524
|
const newClassName = newSequenceHash + ' ' + atomicClasses;
|
|
@@ -359,7 +608,7 @@ function getDebugTree(debugSequenceHash, parentNode) {
|
|
|
359
608
|
return undefined;
|
|
360
609
|
}
|
|
361
610
|
const parentLookupItem = parentNode ? DEFINITION_LOOKUP_TABLE[parentNode.sequenceHash] : undefined;
|
|
362
|
-
const debugClassNames = getDebugClassNames(lookupItem, parentLookupItem, parentNode
|
|
611
|
+
const debugClassNames = getDebugClassNames(lookupItem, parentLookupItem, parentNode == null ? void 0 : parentNode.debugClassNames, parentNode == null ? void 0 : parentNode.children);
|
|
363
612
|
const node = {
|
|
364
613
|
sequenceHash: debugSequenceHash,
|
|
365
614
|
direction: lookupItem[1],
|
|
@@ -374,6 +623,7 @@ function getDebugTree(debugSequenceHash, parentNode) {
|
|
|
374
623
|
node.children.push(child);
|
|
375
624
|
}
|
|
376
625
|
});
|
|
626
|
+
|
|
377
627
|
// if it's leaf (makeStyle node), get css rules
|
|
378
628
|
if (!node.children.length) {
|
|
379
629
|
node.rules = {};
|
|
@@ -417,207 +667,10 @@ function injectDevTools(document) {
|
|
|
417
667
|
});
|
|
418
668
|
}
|
|
419
669
|
|
|
420
|
-
const isDevToolsEnabled = /*#__PURE__*/(() => {
|
|
421
|
-
var _a;
|
|
422
|
-
// Accessing "window.sessionStorage" causes an exception when third party cookies are blocked
|
|
423
|
-
// https://stackoverflow.com/questions/30481516/iframe-in-chrome-error-failed-to-read-localstorage-from-window-access-deni
|
|
424
|
-
try {
|
|
425
|
-
return Boolean(typeof window !== 'undefined' && ((_a = window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem('__GRIFFEL_DEVTOOLS__')));
|
|
426
|
-
} catch (e) {
|
|
427
|
-
return false;
|
|
428
|
-
}
|
|
429
|
-
})();
|
|
430
|
-
|
|
431
|
-
/**
|
|
432
|
-
* @internal
|
|
433
|
-
*
|
|
434
|
-
* @param entry - CSS bucket entry that can be either a string or an array
|
|
435
|
-
* @returns An array where the first element is the CSS rule
|
|
436
|
-
*/
|
|
437
|
-
function normalizeCSSBucketEntry(entry) {
|
|
438
|
-
if (!Array.isArray(entry)) {
|
|
439
|
-
return [entry];
|
|
440
|
-
}
|
|
441
|
-
if (process.env.NODE_ENV !== 'production' && entry.length > 2) {
|
|
442
|
-
throw new Error('CSS Bucket contains an entry with greater than 2 items, please report this to https://github.com/microsoft/griffel/issues');
|
|
443
|
-
}
|
|
444
|
-
return entry;
|
|
445
|
-
}
|
|
446
|
-
|
|
447
|
-
function createIsomorphicStyleSheet(styleElement, bucketName, priority, elementAttributes) {
|
|
448
|
-
// no CSSStyleSheet in SSR, just append rules here for server render
|
|
449
|
-
const __cssRulesForSSR = [];
|
|
450
|
-
elementAttributes[DATA_BUCKET_ATTR] = bucketName;
|
|
451
|
-
elementAttributes[DATA_PRIORITY_ATTR] = String(priority);
|
|
452
|
-
if (styleElement) {
|
|
453
|
-
for (const attrName in elementAttributes) {
|
|
454
|
-
styleElement.setAttribute(attrName, elementAttributes[attrName]);
|
|
455
|
-
}
|
|
456
|
-
}
|
|
457
|
-
function insertRule(rule) {
|
|
458
|
-
if (styleElement === null || styleElement === void 0 ? void 0 : styleElement.sheet) {
|
|
459
|
-
return styleElement.sheet.insertRule(rule, styleElement.sheet.cssRules.length);
|
|
460
|
-
}
|
|
461
|
-
return __cssRulesForSSR.push(rule);
|
|
462
|
-
}
|
|
463
|
-
return {
|
|
464
|
-
elementAttributes,
|
|
465
|
-
insertRule,
|
|
466
|
-
element: styleElement,
|
|
467
|
-
bucketName,
|
|
468
|
-
cssRules() {
|
|
469
|
-
if (styleElement === null || styleElement === void 0 ? void 0 : styleElement.sheet) {
|
|
470
|
-
return Array.from(styleElement.sheet.cssRules).map(cssRule => cssRule.cssText);
|
|
471
|
-
}
|
|
472
|
-
return __cssRulesForSSR;
|
|
473
|
-
}
|
|
474
|
-
};
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
/**
|
|
478
|
-
* Ordered style buckets using their short pseudo name.
|
|
479
|
-
*
|
|
480
|
-
* @internal
|
|
481
|
-
*/
|
|
482
|
-
const styleBucketOrdering = [
|
|
483
|
-
// reset styles
|
|
484
|
-
'r',
|
|
485
|
-
// catch-all
|
|
486
|
-
'd',
|
|
487
|
-
// link
|
|
488
|
-
'l',
|
|
489
|
-
// visited
|
|
490
|
-
'v',
|
|
491
|
-
// focus-within
|
|
492
|
-
'w',
|
|
493
|
-
// focus
|
|
494
|
-
'f',
|
|
495
|
-
// focus-visible
|
|
496
|
-
'i',
|
|
497
|
-
// hover
|
|
498
|
-
'h',
|
|
499
|
-
// active
|
|
500
|
-
'a',
|
|
501
|
-
// at rules for reset styles
|
|
502
|
-
's',
|
|
503
|
-
// keyframes
|
|
504
|
-
'k',
|
|
505
|
-
// at-rules
|
|
506
|
-
't',
|
|
507
|
-
// @media rules
|
|
508
|
-
'm',
|
|
509
|
-
// @container rules
|
|
510
|
-
'c'];
|
|
511
|
-
// avoid repeatedly calling `indexOf` to determine order during new insertions
|
|
512
|
-
const styleBucketOrderingMap = /*#__PURE__*/styleBucketOrdering.reduce((acc, cur, j) => {
|
|
513
|
-
acc[cur] = j;
|
|
514
|
-
return acc;
|
|
515
|
-
}, {});
|
|
516
|
-
function getStyleSheetKey(bucketName, media, priority) {
|
|
517
|
-
return (bucketName === 'm' ? bucketName + media : bucketName) + priority;
|
|
518
|
-
}
|
|
519
|
-
/**
|
|
520
|
-
* Lazily adds a `<style>` bucket to the `<head>`. This will ensure that the style buckets are ordered.
|
|
521
|
-
*/
|
|
522
|
-
function getStyleSheetForBucket(bucketName, targetDocument, insertionPoint, renderer, metadata = {}) {
|
|
523
|
-
var _a, _b;
|
|
524
|
-
const isMediaBucket = bucketName === 'm';
|
|
525
|
-
const media = (_a = metadata['m']) !== null && _a !== void 0 ? _a : '0';
|
|
526
|
-
const priority = (_b = metadata['p']) !== null && _b !== void 0 ? _b : 0;
|
|
527
|
-
const stylesheetKey = getStyleSheetKey(bucketName, media, priority);
|
|
528
|
-
if (!renderer.stylesheets[stylesheetKey]) {
|
|
529
|
-
const tag = targetDocument && targetDocument.createElement('style');
|
|
530
|
-
const stylesheet = createIsomorphicStyleSheet(tag, bucketName, priority, Object.assign({}, renderer.styleElementAttributes, isMediaBucket && {
|
|
531
|
-
media
|
|
532
|
-
}));
|
|
533
|
-
renderer.stylesheets[stylesheetKey] = stylesheet;
|
|
534
|
-
if (targetDocument && tag) {
|
|
535
|
-
targetDocument.head.insertBefore(tag, findInsertionPoint(targetDocument, insertionPoint, bucketName, renderer, metadata));
|
|
536
|
-
}
|
|
537
|
-
}
|
|
538
|
-
return renderer.stylesheets[stylesheetKey];
|
|
539
|
-
}
|
|
540
|
-
function isSameInsertionKey(element, bucketName, metadata) {
|
|
541
|
-
var _a, _b;
|
|
542
|
-
const targetKey = bucketName + ((_a = metadata['m']) !== null && _a !== void 0 ? _a : '');
|
|
543
|
-
const elementKey = element.getAttribute(DATA_BUCKET_ATTR) + ((_b = element.media) !== null && _b !== void 0 ? _b : '');
|
|
544
|
-
return targetKey === elementKey;
|
|
545
|
-
}
|
|
546
|
-
/**
|
|
547
|
-
* Finds an element before which the new bucket style element should be inserted following the bucket sort order.
|
|
548
|
-
*
|
|
549
|
-
* @param targetDocument - A document
|
|
550
|
-
* @param insertionPoint - An element that will be used as an initial insertion point
|
|
551
|
-
* @param targetBucket - The bucket that should be inserted to DOM
|
|
552
|
-
* @param renderer - Griffel renderer
|
|
553
|
-
* @param metadata - metadata for CSS rule
|
|
554
|
-
* @returns - Smallest style element with greater sort order than the current bucket
|
|
555
|
-
*/
|
|
556
|
-
function findInsertionPoint(targetDocument, insertionPoint, targetBucket, renderer, metadata = {}) {
|
|
557
|
-
var _a, _b;
|
|
558
|
-
const targetOrder = styleBucketOrderingMap[targetBucket];
|
|
559
|
-
const media = (_a = metadata['m']) !== null && _a !== void 0 ? _a : '';
|
|
560
|
-
const priority = (_b = metadata['p']) !== null && _b !== void 0 ? _b : 0;
|
|
561
|
-
// Similar to javascript sort comparators where
|
|
562
|
-
// a positive value is increasing sort order
|
|
563
|
-
// a negative value is decreasing sort order
|
|
564
|
-
let comparer = el => targetOrder - styleBucketOrderingMap[el.getAttribute(DATA_BUCKET_ATTR)];
|
|
565
|
-
let styleElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}]`);
|
|
566
|
-
if (targetBucket === 'm') {
|
|
567
|
-
const mediaElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}="${targetBucket}"]`);
|
|
568
|
-
// only reduce the scope of the search and change comparer
|
|
569
|
-
// if there are other media buckets already on the page
|
|
570
|
-
if (mediaElements.length) {
|
|
571
|
-
styleElements = mediaElements;
|
|
572
|
-
comparer = el => renderer.compareMediaQueries(media, el.media);
|
|
573
|
-
}
|
|
574
|
-
}
|
|
575
|
-
const comparerWithPriority = el => {
|
|
576
|
-
if (isSameInsertionKey(el, targetBucket, metadata)) {
|
|
577
|
-
return priority - Number(el.getAttribute('data-priority'));
|
|
578
|
-
}
|
|
579
|
-
return comparer(el);
|
|
580
|
-
};
|
|
581
|
-
const length = styleElements.length;
|
|
582
|
-
let index = length - 1;
|
|
583
|
-
while (index >= 0) {
|
|
584
|
-
const styleElement = styleElements.item(index);
|
|
585
|
-
if (comparerWithPriority(styleElement) > 0) {
|
|
586
|
-
return styleElement.nextSibling;
|
|
587
|
-
}
|
|
588
|
-
index--;
|
|
589
|
-
}
|
|
590
|
-
if (length > 0) {
|
|
591
|
-
return styleElements.item(0);
|
|
592
|
-
}
|
|
593
|
-
return insertionPoint ? insertionPoint.nextSibling : null;
|
|
594
|
-
}
|
|
595
|
-
|
|
596
|
-
/**
|
|
597
|
-
* Suffixes to be ignored in case of error
|
|
598
|
-
*/
|
|
599
|
-
const ignoreSuffixes = /*#__PURE__*/['-moz-placeholder', '-moz-focus-inner', '-moz-focusring', '-ms-input-placeholder', '-moz-read-write', '-moz-read-only'].join('|');
|
|
600
|
-
const ignoreSuffixesRegex = /*#__PURE__*/new RegExp(`:(${ignoreSuffixes})`);
|
|
601
|
-
/**
|
|
602
|
-
* @internal
|
|
603
|
-
*
|
|
604
|
-
* Calls `sheet.insertRule` and catches errors related to browser prefixes.
|
|
605
|
-
*/
|
|
606
|
-
function safeInsertRule(sheet, ruleCSS) {
|
|
607
|
-
try {
|
|
608
|
-
sheet.insertRule(ruleCSS);
|
|
609
|
-
} catch (e) {
|
|
610
|
-
// We've disabled these warnings due to false-positive errors with browser prefixes
|
|
611
|
-
if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
|
|
612
|
-
// eslint-disable-next-line no-console
|
|
613
|
-
console.error(`There was a problem inserting the following rule: "${ruleCSS}"`, e);
|
|
614
|
-
}
|
|
615
|
-
}
|
|
616
|
-
}
|
|
617
|
-
|
|
618
670
|
let lastIndex = 0;
|
|
619
671
|
/** @internal */
|
|
620
672
|
const defaultCompareMediaQueries = (a, b) => a < b ? -1 : a > b ? 1 : 0;
|
|
673
|
+
|
|
621
674
|
/**
|
|
622
675
|
* Creates a new instances of a renderer.
|
|
623
676
|
*
|
|
@@ -625,14 +678,12 @@ const defaultCompareMediaQueries = (a, b) => a < b ? -1 : a > b ? 1 : 0;
|
|
|
625
678
|
*/
|
|
626
679
|
function createDOMRenderer(targetDocument = typeof document === 'undefined' ? undefined : document, options = {}) {
|
|
627
680
|
const {
|
|
628
|
-
classNameHashSalt,
|
|
629
681
|
unstable_filterCSSRule,
|
|
630
682
|
insertionPoint,
|
|
631
683
|
styleElementAttributes,
|
|
632
684
|
compareMediaQueries = defaultCompareMediaQueries
|
|
633
685
|
} = options;
|
|
634
686
|
const renderer = {
|
|
635
|
-
classNameHashSalt,
|
|
636
687
|
insertionCache: {},
|
|
637
688
|
stylesheets: {},
|
|
638
689
|
styleElementAttributes: Object.freeze(styleElementAttributes),
|
|
@@ -642,6 +693,7 @@ function createDOMRenderer(targetDocument = typeof document === 'undefined' ? un
|
|
|
642
693
|
// eslint-disable-next-line guard-for-in
|
|
643
694
|
for (const styleBucketName in cssRules) {
|
|
644
695
|
const cssRulesForBucket = cssRules[styleBucketName];
|
|
696
|
+
|
|
645
697
|
// This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
|
|
646
698
|
for (let i = 0, l = cssRulesForBucket.length; i < l; i++) {
|
|
647
699
|
const [ruleCSS, metadata] = normalizeCSSBucketEntry(cssRulesForBucket[i]);
|
|
@@ -670,10 +722,28 @@ function createDOMRenderer(targetDocument = typeof document === 'undefined' ? un
|
|
|
670
722
|
return renderer;
|
|
671
723
|
}
|
|
672
724
|
|
|
725
|
+
/**
|
|
726
|
+
* Default implementation of insertion factory. Inserts styles only once per renderer and performs
|
|
727
|
+
* insertion immediately after styles computation.
|
|
728
|
+
*
|
|
729
|
+
* @internal
|
|
730
|
+
*/
|
|
731
|
+
const insertionFactory = () => {
|
|
732
|
+
const insertionCache = {};
|
|
733
|
+
return function insertStyles(renderer, cssRules) {
|
|
734
|
+
if (insertionCache[renderer.id] === undefined) {
|
|
735
|
+
renderer.insertCSSRules(cssRules);
|
|
736
|
+
insertionCache[renderer.id] = true;
|
|
737
|
+
}
|
|
738
|
+
};
|
|
739
|
+
};
|
|
740
|
+
|
|
673
741
|
// TODO: duplicated from https://github.com/lahmatiy/react-render-tracker/blob/main/src/publisher/react-integration/utils/stackTrace.ts
|
|
674
742
|
// once it is published as a standalone npm package, remove this file
|
|
743
|
+
|
|
675
744
|
// Adopted version of StackTrace-Parser
|
|
676
745
|
// https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js
|
|
746
|
+
|
|
677
747
|
const UNKNOWN_FUNCTION = '<unknown>';
|
|
678
748
|
function parseStackTraceLine(line) {
|
|
679
749
|
return parseChrome(line) || parseGecko(line) || parseJSC(line);
|
|
@@ -689,6 +759,7 @@ function parseChrome(line) {
|
|
|
689
759
|
let loc = parts[2];
|
|
690
760
|
const isNative = loc && loc.indexOf('native') === 0; // start of line
|
|
691
761
|
const isEval = loc && loc.indexOf('eval') === 0; // start of line
|
|
762
|
+
|
|
692
763
|
const submatch = chromeEvalRe.exec(loc);
|
|
693
764
|
if (isEval && submatch != null) {
|
|
694
765
|
// throw out eval line/column and use top-most line/column number
|
|
@@ -737,7 +808,7 @@ function getSourceURLfromError() {
|
|
|
737
808
|
return undefined;
|
|
738
809
|
}
|
|
739
810
|
const result = parseStackTraceLine(userMakeStyleCallLine);
|
|
740
|
-
return result
|
|
811
|
+
return result == null ? void 0 : result.loc;
|
|
741
812
|
}
|
|
742
813
|
function findUserMakeStyleCallInStacks(stacks) {
|
|
743
814
|
for (let i = stacks.length - 1; i >= 0; --i) {
|
|
@@ -753,22 +824,6 @@ function findUserMakeStyleCallInStacks(stacks) {
|
|
|
753
824
|
return undefined;
|
|
754
825
|
}
|
|
755
826
|
|
|
756
|
-
/**
|
|
757
|
-
* Default implementation of insertion factory. Inserts styles only once per renderer and performs
|
|
758
|
-
* insertion immediately after styles computation.
|
|
759
|
-
*
|
|
760
|
-
* @internal
|
|
761
|
-
*/
|
|
762
|
-
const insertionFactory = () => {
|
|
763
|
-
const insertionCache = {};
|
|
764
|
-
return function insertStyles(renderer, cssRules) {
|
|
765
|
-
if (insertionCache[renderer.id] === undefined) {
|
|
766
|
-
renderer.insertCSSRules(cssRules);
|
|
767
|
-
insertionCache[renderer.id] = true;
|
|
768
|
-
}
|
|
769
|
-
};
|
|
770
|
-
};
|
|
771
|
-
|
|
772
827
|
/**
|
|
773
828
|
* A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
|
|
774
829
|
*
|
|
@@ -811,6 +866,7 @@ function __styles(classesMapBySlot, cssRules, factory = insertionFactory) {
|
|
|
811
866
|
* @private
|
|
812
867
|
*/
|
|
813
868
|
const RendererContext = /*#__PURE__*/React.createContext( /*#__PURE__*/createDOMRenderer());
|
|
869
|
+
|
|
814
870
|
/**
|
|
815
871
|
* Returns an instance of current makeStyles() renderer.
|
|
816
872
|
*
|
|
@@ -824,6 +880,7 @@ function useRenderer() {
|
|
|
824
880
|
* @private
|
|
825
881
|
*/
|
|
826
882
|
const TextDirectionContext = /*#__PURE__*/React.createContext('ltr');
|
|
883
|
+
|
|
827
884
|
/**
|
|
828
885
|
* @public
|
|
829
886
|
*/
|