8000 Fixed @current to get current element · ulyssear/css-in-js-in-html@88614c0 · GitHub
[go: up one dir, main page]

Skip to content

Commit 88614c0

Browse files
committed
Fixed @current to get current element
1 parent 60dbf45 commit 88614c0

File tree

1 file changed

+52
-9
lines changed

1 file changed

+52
-9
lines changed

src/index.js

Lines changed: 52 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ function apply_custom_class(element, className) {
245245
for (let j = 0; j < classes.length; j++) {
246246
const class_entry = classes[j];
247247

248-
if ('[' === class_entry[0]) {
248+
if ('[' === class_entry[0] && ']' !== class_entry[1]) {
249249
apply_custom_class(element, class_entry);
250250
continue;
251251
}
@@ -283,14 +283,14 @@ function do_apply(element, selectors, classes, events, media_query, original_cla
283283

284284
if (selectors) {
285285
elements_to_apply = [];
286-
if (typeof selectors === 'object' && !Array.isArray(selectors)) {
286+
if ('object' === typeof selectors && !Array.isArray(selectors)) {
287287
selectors = [selectors];
288288
}
289289
for (let j = 0; j < selectors.length; j++) {
290-
const selector = selectors[j];
291-
if (typeof selector === 'object') {
290+
let selector = selectors[j];
291+
if ('object' === typeof selector) {
292292
const { tag, selectors: _selectors } = selector;
293-
if (tag === 'lookout') {
293+
if ('lookout' === tag) {
294294
let before_to_apply = [];
295295
let after_to_apply = [];
296296
const { before, after } = selector;
@@ -340,7 +340,10 @@ function do_apply(element, selectors, classes, events, media_query, original_cla
340340
}
341341
continue;
342342
}
343-
const elements = element.querySelectorAll(selector);
343+
if (/\@current/.test(selector)) {
344+
selector = selector.replace(/\@current/g, retrieve_current_selector(element));
345+
}
346+
const elements = 'HTML' !== selector ? element.querySelectorAll(selector) : [document.documentElement];
344347
for (let k = 0; k < elements.length; k++) {
345348
elements_to_apply.push(elements[k]);
346349
}
@@ -421,18 +424,24 @@ function init(document, event = undefined) {
421424
}
422425
}
423426

427+
if (!document.documentElement) return;
428+
if (!document.documentElement.hasAttribute('aria-busy')) return;
429+
424430
document.documentElement.removeAttribute('aria-busy');
425431
}
426432

427433
function init_observer(record) {
428434
// console.time('init_observer');
435+
const elements = [];
429436
for (let i = 0; i < record.length; i++) {
430437
const { type, target, attributeName } = record[i];
431-
if (type === 'attributes' && attributeName === 'class') {
432-
apply_custom_class(target, target.className);
438+
if ('attributes' === type && 'class' === attributeName) {
439+
// apply_custom_class(target, target.className);
440+
elements.push(target);
433441
}
434442
if (type === 'childList') {
435-
const elements = target.querySelectorAll('*:not(head, head *)[class]');
443+
// const elements = target.querySelectorAll('*:not(head, head *)[class]');
444+
elements.push(...target.querySelectorAll('*:not(head, head *)[class]'));
436445
for (let j = 0; j < elements.length; j++) {
437446
const element = elements[j];
438447
apply_custom_class(element, element.className);
@@ -448,4 +457,38 @@ const CSS_IN_JS_IN_HTML = {
448457
fromClassNameToGroups: split_classname_to_classes_groups,
449458
};
450459

460+
function retrieve_current_selector(element) {
461+
let limit = 1000;
462+
const selectors = [];
463+
let cursor_index_child;
464+
let cursor_element;
465+
do {
466+
cursor_element = cursor_element?.parentElement ?? element;
467+
if (cursor_element.id) {
468+
selectors.push(cursor_element.id);
469+
continue;
470+
}
471+
const { parentElement, tagName } = cursor_element;
472+
if (parentElement) {
473+
const { children } = parentElement;
474+
cursor_index_child = Array.from(children).indexOf(cursor_element);
475+
if (cursor_index_child > 1) {
476+
selectors.unshift(`${tagName}:nth-child(${cursor_index_child + 1})`);
477+
continue;
478+
}
479+
selectors.unshift(tagName);
480+
continue;
481+
}
482+
selectors.unshift(tagName);
483+
if (!parentElement) break;
484+
if ('HTML' === tagName) break;
485+
if ('BODY' === tagName) break;
486+
} while (limit--);
487+
if (limit < 1) {
488+
console.error('retrieve_current_selector : limit reached');
489+
return '';
490+
}
491+
return selectors.join('>');
492+
}
493+
451494
window.CSS_IN_JS_IN_HTML = CSS_IN_JS_IN_HTML;

0 commit comments

Comments
 (0)
0