@typespec/html-program-viewer 0.62.0 → 0.63.0-dev.1
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 +221 -278
- package/dist/{manifest-CoFoVY97.js → manifest-seJyOKYj.js} +1 -1
- package/dist/react/index.js +784 -34
- package/package.json +6 -6
package/dist/emitter/index.js
CHANGED
|
@@ -23,29 +23,11 @@ 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
|
-
|
|
42
26
|
// ----
|
|
43
|
-
|
|
44
27
|
// Heads up!
|
|
45
28
|
// These constants are global and will be shared between Griffel instances.
|
|
46
29
|
// Any change in them should happen only in a MAJOR version. If it happens,
|
|
47
30
|
// please change "__NAMESPACE_PREFIX__" to include a version.
|
|
48
|
-
|
|
49
31
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
50
32
|
const __GLOBAL__ = typeof window === 'undefined' ? global : window;
|
|
51
33
|
const __NAMESPACE_PREFIX__ = '@griffel/';
|
|
@@ -55,232 +37,31 @@ function getGlobalVar(name, defaultValue) {
|
|
|
55
37
|
}
|
|
56
38
|
return __GLOBAL__[Symbol.for(__NAMESPACE_PREFIX__ + name)];
|
|
57
39
|
}
|
|
58
|
-
|
|
59
40
|
/** @internal */
|
|
60
41
|
const DEBUG_RESET_CLASSES = /*#__PURE__*/getGlobalVar('DEBUG_RESET_CLASSES', {});
|
|
61
|
-
|
|
62
42
|
/** @internal */
|
|
63
43
|
const DEFINITION_LOOKUP_TABLE = /*#__PURE__*/getGlobalVar('DEFINITION_LOOKUP_TABLE', {});
|
|
64
|
-
|
|
65
44
|
// ----
|
|
66
|
-
|
|
67
45
|
/** @internal */
|
|
68
46
|
const DATA_BUCKET_ATTR = 'data-make-styles-bucket';
|
|
69
|
-
|
|
70
47
|
/** @internal */
|
|
71
48
|
const DATA_PRIORITY_ATTR = 'data-priority';
|
|
72
|
-
|
|
73
49
|
/** @internal */
|
|
74
50
|
const RESET_HASH_PREFIX = 'r';
|
|
75
|
-
|
|
76
51
|
/** @internal */
|
|
77
52
|
const SEQUENCE_HASH_LENGTH = 7;
|
|
78
|
-
|
|
79
53
|
/** @internal */
|
|
80
54
|
const SEQUENCE_PREFIX = '___';
|
|
81
|
-
|
|
82
55
|
/** @internal */
|
|
83
56
|
const DEBUG_SEQUENCE_SEPARATOR = '_';
|
|
84
|
-
|
|
85
57
|
/** @internal */
|
|
86
58
|
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
|
-
|
|
88
59
|
// indexes for values in LookupItem tuple
|
|
89
|
-
|
|
90
60
|
/** @internal */
|
|
91
61
|
const LOOKUP_DEFINITIONS_INDEX = 0;
|
|
92
|
-
|
|
93
62
|
/** @internal */
|
|
94
63
|
const LOOKUP_DIR_INDEX = 1;
|
|
95
64
|
|
|
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
|
-
|
|
284
65
|
/* eslint-disable */
|
|
285
66
|
// Inspired by https://github.com/garycourt/murmurhash-js
|
|
286
67
|
// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
|
|
@@ -364,7 +145,6 @@ function reduceToClassName(classMap, dir) {
|
|
|
364
145
|
// `hashString` is needed to handle `null` values in a class map as they don't produce any classes.
|
|
365
146
|
let classString = '';
|
|
366
147
|
let hashString = '';
|
|
367
|
-
|
|
368
148
|
// eslint-disable-next-line guard-for-in
|
|
369
149
|
for (const propertyHash in classMap) {
|
|
370
150
|
const classNameMapping = classMap[propertyHash];
|
|
@@ -379,7 +159,6 @@ function reduceToClassName(classMap, dir) {
|
|
|
379
159
|
}
|
|
380
160
|
return [classString.slice(0, -1), hashString.slice(0, -1)];
|
|
381
161
|
}
|
|
382
|
-
|
|
383
162
|
/**
|
|
384
163
|
* Reduces classname maps for slots to classname strings. Registers them in a definition cache to be used by
|
|
385
164
|
* `mergeClasses()`.
|
|
@@ -388,11 +167,9 @@ function reduceToClassName(classMap, dir) {
|
|
|
388
167
|
*/
|
|
389
168
|
function reduceToClassNameForSlots(classesMapBySlot, dir) {
|
|
390
169
|
const classNamesForSlots = {};
|
|
391
|
-
|
|
392
170
|
// eslint-disable-next-line guard-for-in
|
|
393
171
|
for (const slotName in classesMapBySlot) {
|
|
394
172
|
const [slotClasses, slotClassesHash] = reduceToClassName(classesMapBySlot[slotName], dir);
|
|
395
|
-
|
|
396
173
|
// Handles a case when there are no classes in a set i.e. "makeStyles({ root: {} })"
|
|
397
174
|
if (slotClassesHash === '') {
|
|
398
175
|
classNamesForSlots[slotName] = '';
|
|
@@ -408,33 +185,12 @@ function reduceToClassNameForSlots(classesMapBySlot, dir) {
|
|
|
408
185
|
|
|
409
186
|
// Contains a mapping of previously resolved sequences of atomic classnames
|
|
410
187
|
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
|
-
|
|
430
188
|
function mergeClasses() {
|
|
431
189
|
// arguments are parsed manually to avoid double loops as TS & Babel transforms rest via an additional loop
|
|
432
190
|
// @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
|
|
433
191
|
/* eslint-disable prefer-rest-params */
|
|
434
|
-
|
|
435
192
|
let dir = null;
|
|
436
193
|
let resultClassName = '';
|
|
437
|
-
|
|
438
194
|
// Is used as a cache key to avoid object merging
|
|
439
195
|
let sequenceMatch = '';
|
|
440
196
|
const sequencesIds = new Array(arguments.length);
|
|
@@ -461,7 +217,6 @@ function mergeClasses() {
|
|
|
461
217
|
resultClassName += className + ' ';
|
|
462
218
|
} else {
|
|
463
219
|
const sequenceId = className.substr(sequenceIndex, SEQUENCE_SIZE);
|
|
464
|
-
|
|
465
220
|
// Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
|
|
466
221
|
if (sequenceIndex > 0) {
|
|
467
222
|
resultClassName += className.slice(0, sequenceIndex);
|
|
@@ -477,13 +232,11 @@ function mergeClasses() {
|
|
|
477
232
|
}
|
|
478
233
|
}
|
|
479
234
|
}
|
|
480
|
-
|
|
481
235
|
// .slice() there allows to avoid trailing space for non-atomic classes
|
|
482
236
|
// "ui-button ui-flex " => "ui-button ui-flex"
|
|
483
237
|
if (sequenceMatch === '') {
|
|
484
238
|
return resultClassName.slice(0, -1);
|
|
485
239
|
}
|
|
486
|
-
|
|
487
240
|
// It's safe to reuse results to avoid continuous merging as results are stable
|
|
488
241
|
// "__seq1 ... __seq2 ..." => "__seq12 ..."
|
|
489
242
|
const mergeClassesResult = mergeClassesCachedResults[sequenceMatch];
|
|
@@ -512,13 +265,11 @@ function mergeClasses() {
|
|
|
512
265
|
}
|
|
513
266
|
}
|
|
514
267
|
}
|
|
515
|
-
|
|
516
268
|
// eslint-disable-next-line prefer-spread
|
|
517
269
|
const resultClassesMap = Object.assign.apply(Object,
|
|
518
270
|
// .assign() mutates the first object, we can't mutate mappings as it will produce invalid results later
|
|
519
271
|
[{}].concat(sequenceMappings));
|
|
520
272
|
const [atomicClasses, classesMapHash] = reduceToClassName(resultClassesMap, dir);
|
|
521
|
-
|
|
522
273
|
// Each merge of classes generates a new sequence of atomic classes that needs to be registered
|
|
523
274
|
const newSequenceHash = hashSequence(classesMapHash, dir, sequencesIds);
|
|
524
275
|
const newClassName = newSequenceHash + ' ' + atomicClasses;
|
|
@@ -608,7 +359,7 @@ function getDebugTree(debugSequenceHash, parentNode) {
|
|
|
608
359
|
return undefined;
|
|
609
360
|
}
|
|
610
361
|
const parentLookupItem = parentNode ? DEFINITION_LOOKUP_TABLE[parentNode.sequenceHash] : undefined;
|
|
611
|
-
const debugClassNames = getDebugClassNames(lookupItem, parentLookupItem, parentNode
|
|
362
|
+
const debugClassNames = getDebugClassNames(lookupItem, parentLookupItem, parentNode === null || parentNode === void 0 ? void 0 : parentNode.debugClassNames, parentNode === null || parentNode === void 0 ? void 0 : parentNode.children);
|
|
612
363
|
const node = {
|
|
613
364
|
sequenceHash: debugSequenceHash,
|
|
614
365
|
direction: lookupItem[1],
|
|
@@ -623,7 +374,6 @@ function getDebugTree(debugSequenceHash, parentNode) {
|
|
|
623
374
|
node.children.push(child);
|
|
624
375
|
}
|
|
625
376
|
});
|
|
626
|
-
|
|
627
377
|
// if it's leaf (makeStyle node), get css rules
|
|
628
378
|
if (!node.children.length) {
|
|
629
379
|
node.rules = {};
|
|
@@ -667,10 +417,207 @@ function injectDevTools(document) {
|
|
|
667
417
|
});
|
|
668
418
|
}
|
|
669
419
|
|
|
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
|
+
|
|
670
618
|
let lastIndex = 0;
|
|
671
619
|
/** @internal */
|
|
672
620
|
const defaultCompareMediaQueries = (a, b) => a < b ? -1 : a > b ? 1 : 0;
|
|
673
|
-
|
|
674
621
|
/**
|
|
675
622
|
* Creates a new instances of a renderer.
|
|
676
623
|
*
|
|
@@ -678,12 +625,14 @@ const defaultCompareMediaQueries = (a, b) => a < b ? -1 : a > b ? 1 : 0;
|
|
|
678
625
|
*/
|
|
679
626
|
function createDOMRenderer(targetDocument = typeof document === 'undefined' ? undefined : document, options = {}) {
|
|
680
627
|
const {
|
|
628
|
+
classNameHashSalt,
|
|
681
629
|
unstable_filterCSSRule,
|
|
682
630
|
insertionPoint,
|
|
683
631
|
styleElementAttributes,
|
|
684
632
|
compareMediaQueries = defaultCompareMediaQueries
|
|
685
633
|
} = options;
|
|
686
634
|
const renderer = {
|
|
635
|
+
classNameHashSalt,
|
|
687
636
|
insertionCache: {},
|
|
688
637
|
stylesheets: {},
|
|
689
638
|
styleElementAttributes: Object.freeze(styleElementAttributes),
|
|
@@ -693,7 +642,6 @@ function createDOMRenderer(targetDocument = typeof document === 'undefined' ? un
|
|
|
693
642
|
// eslint-disable-next-line guard-for-in
|
|
694
643
|
for (const styleBucketName in cssRules) {
|
|
695
644
|
const cssRulesForBucket = cssRules[styleBucketName];
|
|
696
|
-
|
|
697
645
|
// This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
|
|
698
646
|
for (let i = 0, l = cssRulesForBucket.length; i < l; i++) {
|
|
699
647
|
const [ruleCSS, metadata] = normalizeCSSBucketEntry(cssRulesForBucket[i]);
|
|
@@ -722,28 +670,10 @@ function createDOMRenderer(targetDocument = typeof document === 'undefined' ? un
|
|
|
722
670
|
return renderer;
|
|
723
671
|
}
|
|
724
672
|
|
|
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
|
-
|
|
741
673
|
// TODO: duplicated from https://github.com/lahmatiy/react-render-tracker/blob/main/src/publisher/react-integration/utils/stackTrace.ts
|
|
742
674
|
// once it is published as a standalone npm package, remove this file
|
|
743
|
-
|
|
744
675
|
// Adopted version of StackTrace-Parser
|
|
745
676
|
// https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js
|
|
746
|
-
|
|
747
677
|
const UNKNOWN_FUNCTION = '<unknown>';
|
|
748
678
|
function parseStackTraceLine(line) {
|
|
749
679
|
return parseChrome(line) || parseGecko(line) || parseJSC(line);
|
|
@@ -759,7 +689,6 @@ function parseChrome(line) {
|
|
|
759
689
|
let loc = parts[2];
|
|
760
690
|
const isNative = loc && loc.indexOf('native') === 0; // start of line
|
|
761
691
|
const isEval = loc && loc.indexOf('eval') === 0; // start of line
|
|
762
|
-
|
|
763
692
|
const submatch = chromeEvalRe.exec(loc);
|
|
764
693
|
if (isEval && submatch != null) {
|
|
765
694
|
// throw out eval line/column and use top-most line/column number
|
|
@@ -808,7 +737,7 @@ function getSourceURLfromError() {
|
|
|
808
737
|
return undefined;
|
|
809
738
|
}
|
|
810
739
|
const result = parseStackTraceLine(userMakeStyleCallLine);
|
|
811
|
-
return result
|
|
740
|
+
return result === null || result === void 0 ? void 0 : result.loc;
|
|
812
741
|
}
|
|
813
742
|
function findUserMakeStyleCallInStacks(stacks) {
|
|
814
743
|
for (let i = stacks.length - 1; i >= 0; --i) {
|
|
@@ -824,6 +753,22 @@ function findUserMakeStyleCallInStacks(stacks) {
|
|
|
824
753
|
return undefined;
|
|
825
754
|
}
|
|
826
755
|
|
|
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
|
+
|
|
827
772
|
/**
|
|
828
773
|
* A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
|
|
829
774
|
*
|
|
@@ -866,7 +811,6 @@ function __styles(classesMapBySlot, cssRules, factory = insertionFactory) {
|
|
|
866
811
|
* @private
|
|
867
812
|
*/
|
|
868
813
|
const RendererContext = /*#__PURE__*/React.createContext( /*#__PURE__*/createDOMRenderer());
|
|
869
|
-
|
|
870
814
|
/**
|
|
871
815
|
* Returns an instance of current makeStyles() renderer.
|
|
872
816
|
*
|
|
@@ -880,7 +824,6 @@ function useRenderer() {
|
|
|
880
824
|
* @private
|
|
881
825
|
*/
|
|
882
826
|
const TextDirectionContext = /*#__PURE__*/React.createContext('ltr');
|
|
883
|
-
|
|
884
827
|
/**
|
|
885
828
|
* @public
|
|
886
829
|
*/
|
|
@@ -1514,7 +1457,7 @@ const ThemeClassNameProvider = ThemeClassNameContext.Provider;
|
|
|
1514
1457
|
* @internal
|
|
1515
1458
|
*/ const ProviderContext = React.createContext(undefined);
|
|
1516
1459
|
const providerContextDefaultValue = {
|
|
1517
|
-
// eslint-disable-next-line no-restricted-globals
|
|
1460
|
+
// eslint-disable-next-line @nx/workspace-no-restricted-globals -- expected ignore ( SSR friendly acquisition of globals )
|
|
1518
1461
|
targetDocument: typeof document === 'object' ? document : undefined,
|
|
1519
1462
|
dir: 'ltr'
|
|
1520
1463
|
};
|
|
@@ -1547,8 +1490,8 @@ function useOverrides() {
|
|
|
1547
1490
|
/**
|
|
1548
1491
|
* Verifies if an application can use DOM.
|
|
1549
1492
|
*/ function canUseDOM() {
|
|
1550
|
-
return(// eslint-disable-next-line deprecation/deprecation
|
|
1551
|
-
|
|
1493
|
+
return /* eslint-disable @nx/workspace-no-restricted-globals -- expected ignore ( SSR friendly acquisition of globals )*/ typeof window !== 'undefined' && !!(window.document && // eslint-disable-next-line deprecation/deprecation
|
|
1494
|
+
window.document.createElement);
|
|
1552
1495
|
}
|
|
1553
1496
|
|
|
1554
1497
|
/**
|