diff --git a/README.md b/README.md index 9f0eef3..38435f5 100644 --- a/README.md +++ b/README.md @@ -9,9 +9,9 @@ * Hate creating unique class names over.. and over.. to use once. * You want to co-locate your styles for ⚡️ [Locality of Behavior (LoB)](https://htmx.org/essays/locality-of-behaviour/) * You wish `this` would work in ` red
green
@@ -103,7 +106,14 @@ Tailwind verbosity goes up with more child elements.
green
``` -### CSS variables and child styling + +### CSS variables and child elements +At first glance, **Tailwind Example 2** looks very promising! Exciting ...but: +* 🔴 **Every child style requires an explicit selector.** + * Tailwinds' shorthand advantages sadly disappear. + * Any more child styles added in Tailwind will become longer than vanilla CSS. + * This limited example is the best case scenario for Tailwind. +* 🔴 Not visible on github: **no highlighting for properties and units** begins to be painful. ```html @@ -154,7 +164,6 @@ Tailwind verbosity goes up with more child elements. ``` - ## 🔎 Technical FAQ -* Why do you use `QuerySelectorAll()` and not just process the `MutationObserver` results directly? - * Processing `MutationObserver` results will work well until you begin recieving subtrees (ex: DOM swap, [htmx](https://htmx.org), ajax, jquery) which requires you to walk all subtree child elements to not miss a `

Responsive Design 🔛 Resize the window!

- 🟢 = No breakpoint. Default. + 🟢 = None specified.
-
Mobile First (above breakpoint)
+
📱 Mobile First! Add styles as size increases.
@@ -100,7 +99,7 @@

Responsive Design 🔛 Resize the window!

@media xs- { &[n6] { background: var(--color); } } } -
Desktop First (below breakpoint)
+
💻 Desktop First! Add styles as size decreases.

diff --git a/script.js b/script.js index 51bf104..11e6c55 100644 --- a/script.js +++ b/script.js @@ -1,16 +1,15 @@ // 🌘 CSS Scope Inline (https://github.com/gnat/css-scope-inline) window.cssScopeCount ??= 1 // Let extra copies share the scope count. -new MutationObserver(mutations => { - document?.body?.querySelectorAll('style').forEach(node => { // Faster than walking MutationObserver results when recieving subtree (DOM swap, htmx, ajax, jquery). - if (node.cssScopeInlineDone) return // Skip if node was processed. - if (!node.parentNode) return // Skip if no parent. - var scope = 'self__'+(window.cssScopeCount++) // Ready. Make unique scope, example: .self__1234 +window.cssScope ??= new MutationObserver(mutations => { // Allow 1 observer. + document?.body?.querySelectorAll('style:not([ready])').forEach(node => { // Faster than walking MutationObserver results when recieving subtree (DOM swap, htmx, ajax, jquery). + var scope = 'me__'+(window.cssScopeCount++) // Ready. Make unique scope, example: .me__1234 node.parentNode.classList.add(scope) - node.textContent = node.textContent.replace(/(^|\.|(?<=\s|[^a-zA-Z0-9\-\_]))(me|this|self)(?![a-zA-Z])/g, '.'+scope) // Can use: me this self - node.cssScopeInlineDone = 1 - // Optional. Responsive design. Mobile First (above breakpoint): 🟢 None sm md lg xl xx 🏁 Desktop First (below breakpoint): 🏁 xs- sm- md- lg- xl- None 🟢 - node.textContent = node.textContent.replace(/(?:@media)\s(xs-|sm-|md-|lg-|xl-|sm|md|lg|xl|xx)/g, // *- matches must be first! + node.textContent = node.textContent + .replace(/(?:^|\.|(\s|[^a-zA-Z0-9\-\_]))(me|this|self)(?![a-zA-Z])/g, '$1.'+scope) // Can use: me this self + .replace(/((@keyframes|animation:|animation-name:)[^{};]*)\.me__/g, '$1me__') // Optional. Removes need to escape names, ex: "\.me" + .replace(/(?:@media)\s(xs-|sm-|md-|lg-|xl-|sm|md|lg|xl|xx)/g, // Optional. Responsive design. Mobile First (above breakpoint): 🟢 None sm md lg xl xx 🏁 Desktop First (below breakpoint): 🏁 xs- sm- md- lg- xl- None 🟢 *- matches must be first! (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]) } ) + node.setAttribute('ready', '') }) }).observe(document.documentElement, {childList: true, subtree: true})