|
1 | 1 | // 🌘 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) |
3 | 3 | 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++) |
7 | 7 | 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}`) |
9 | 9 | .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 🟢 |
11 | 11 | .replace(/(?:@media)\s(xs-|sm-|md-|lg-|xl-|sm|md|lg|xl|xx)(?![-\w])/g,
|
12 | 12 | (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]) }
|
13 | 13 | )
|
14 | 14 | })
|
15 | 15 | }).observe(document.documentElement, {childList: true, subtree: true})
|
| 16 | +window.cssScopeCount ??= 1 |
0 commit comments