Skip to content

Commit 7952ac1

Browse files
committed
Add guard to allow only one mutationobserver
1 parent 4d25879 commit 7952ac1

File tree

1 file changed

+7
-6
lines changed

1 file changed

+7
-6
lines changed

script.js

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
// 🌘 CSS Scope Inline (https://github.com/gnat/css-scope-inline)
2-
window.cssScopeCount ??= 1 // Let extra copies share the scope count.
2+
if (!window.cssScopeCount)
33
new MutationObserver(mutations => {
4-
document?.body?.querySelectorAll('* > style:not([data-css-scope-inline-done])').forEach(node => { // Faster than walking MutationObserver results when recieving subtree (DOM swap, htmx, ajax, jquery).
5-
node.dataset.cssScopeInlineDone = true
6-
node.parentNode.dataset.cssScope ||= (window.cssScopeCount++)
4+
document?.body?.querySelectorAll('style:not([processed])').forEach(node => { // Faster than walking MutationObserver results when recieving subtree (DOM swap, htmx, ajax, jquery).
5+
node.setAttribute('processed','')
6+
node.parentNode.dataset.cssScope ??= (window.cssScopeCount++)
77
node.textContent = node.textContent
8-
.replace(/(?<=(@keyframes\s|animation:|animation-name:)[^{};]*)\bme/g, `css-scope-${node.parentNode.dataset.cssScope}`)
8+
.replace(/((@keyframes\s|animation:|animation-name:)[^{};]*)\bme/g, `$1css-scope-${node.parentNode.dataset.cssScope}`)
99
.replace(/(^|\.|(?<=[^-\w]))me(?![-\w])/g, `[data-css-scope='${node.parentNode.dataset.cssScope}']`)
10-
// Optional. Responsive design. Mobile First (above breakpoint): 🟢 None sm md lg xl xx 🏁 Desktop First (below breakpoint): 🏁 xs- sm- md- lg- xl- None 🟢
10+
// Optional. Responsive design. Mobile First (above breakpoint): 🟢 None sm md lg xl xx 🏁 Desktop First (below breakpoint): 🏁 xs- sm- md- lg- xl- None 🟢
1111
.replace(/(?:@media)\s(xs-|sm-|md-|lg-|xl-|sm|md|lg|xl|xx)(?![-\w])/g,
1212
(match, part1) => { return '@media '+({'sm':'(min-width: 640px)','md':'(min-width: 768px)', 'lg':'(min-width: 1024px)', 'xl':'(min-width: 1280px)', 'xx':'(min-width: 1536px)', 'xs-':'(max-width: 639px)', 'sm-':'(max-width: 767px)', 'md-':'(max-width: 1023px)', 'lg-':'(max-width: 1279px)', 'xl-':'(max-width: 1535px)'}[part1]) }
1313
)
1414
})
1515
}).observe(document.documentElement, {childList: true, subtree: true})
16+
window.cssScopeCount ??= 1

0 commit comments

Comments
 (0)