|
1 | 1 | // 🌘 CSS Scope Inline (https://github.com/gnat/css-scope-inline) |
2 | 2 | window.cssScopeCount ??= 1 // Let extra copies share the scope count. |
3 | 3 | new MutationObserver(mutations => { |
4 | | - for (var mutation of mutations) { |
5 | | - if (mutation.type !== "childList") continue // Skip if not mutating nodes. |
6 | | - var nodes = [...mutation.addedNodes] // Get new nodes. |
7 | | - for (var node = nodes.shift(); node != null; node = nodes.shift()) { // Process nodes. |
8 | | - nodes.push(...node.childNodes) // Also process children. |
9 | | - if (node.nodeName !== 'STYLE') continue // Skip if not a <style> |
10 | | - if (!node.parentNode || node.parentNode?.nodeName === 'HEAD') continue // Skip if no parent. Don't style <head> |
11 | | - if (node.textContent.includes('.self__')) continue // Skip if already processed. |
12 | | - var scope = 'self__'+(window.cssScopeCount++) // Ready. Make unique scope, example: .self__1234 |
13 | | - node.parentNode.classList.add(scope) |
14 | | - node.textContent = node.textContent.replace(/\.(me|this|self)(?![A-Za-z0-9\_\-])/g, '.'+scope) // Can use: .me .this .self |
15 | | - } |
16 | | - } |
| 4 | + document.body.querySelectorAll('style').forEach(node => { // Faster than walking MutationObserver results when recieving subtree (DOM swap, htmx, ajax, jquery). |
| 5 | + if (node.cssScopeInlineDone) return // Skip if node was processed. |
| 6 | + if (!node.parentNode) return // Skip if no parent. |
| 7 | + var scope = 'self__'+(window.cssScopeCount++) // Ready. Make unique scope, example: .self__1234 |
| 8 | + node.parentNode.classList.add(scope) |
| 9 | + node.textContent = node.textContent.replace(/\.(me|this|self)(?![a-zA-Z])/g, '.'+scope) // Can use: .me .this .self |
| 10 | + node.cssScopeInlineDone = 1 |
| 11 | + // Optional. Responsive design. Mobile First (above breakpoint): 🟢 None sm md lg xl xx 🏁 Desktop First (below breakpoint): 🏁 xs- sm- md- lg- xl- None 🟢 |
| 12 | + node.textContent = node.textContent.replace(/(?:@media)\s(xs-|sm-|md-|lg-|xl-|sm|md|lg|xl|xx)/g, // *- matches must be first! |
| 13 | + (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]) } |
| 14 | + ) |
| 15 | + }) |
17 | 16 | }).observe(document.documentElement, {childList: true, subtree: true}) |
0 commit comments