diff --git a/dist/x-style-nano.min.js b/dist/x-style-nano.min.js new file mode 100644 index 0000000..4925c5e --- /dev/null +++ b/dist/x-style-nano.min.js @@ -0,0 +1,7 @@ +(t=>{var r,i,a,d,l="",s={},u=document,b=1,n=e=>{(i=e.getAttribute?.(t))&&(d=s[i +]??=b,a=t+d,e.removeAttribute(e[t]),e.setAttribute(a,""),e[t]=a,d==b)&&( +l+=`[${a}]{${i}}`,b++)};new MutationObserver(e=>{e.map(e=>{ +"childList"==e.type?e.addedNodes.forEach(e=>{n(e),[...e.querySelectorAll?.( +`[${t}]`)||[]].map(n)}):n(e.target)}),l&&((r=u.createElement("style") +).innerHTML=l,u.head.appendChild(r),l="")}).observe(u,{attributeFilter:[t], +childList:!0,subtree:!0})})("x-style"); \ No newline at end of file diff --git a/nano.html b/nano.html new file mode 100644 index 0000000..39fb215 --- /dev/null +++ b/nano.html @@ -0,0 +1,137 @@ + + + + x-style Demo + + + + + +
+

+ x-style Demo +

+

This is a demo of the x-style attribute.

+ +

+ Hello World - (Hover me) +

+

+ I'm red and I'm blue +

+ +

+ I will change to the other way around + +

+

+ You can add elements with new styles + +

+ +
+ + diff --git a/package-lock.json b/package-lock.json index 8ba193a..8d21db7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { - "name": "teenieweeniecss", - "version": "0.0.1", + "name": "@sgwillis/x-style", + "version": "0.0.3", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "teenieweeniecss", - "version": "0.0.1", + "name": "@sgwillis/x-style", + "version": "0.0.3", "license": "MIT", "devDependencies": { "uglify-js": "^3.17.4" diff --git a/package.json b/package.json index b51d32e..9d23e0f 100644 --- a/package.json +++ b/package.json @@ -15,11 +15,12 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build-x-style": "uglifyjs -c -m -b max_line_len=80,beautify=false -o dist/x-style.min.js -- x-style.js", + "build-x-style-nano": "uglifyjs -c -m -b max_line_len=80,beautify=false -o dist/x-style-nano.min.js -- x-style-nano.js", "build-x-style-apply": "uglifyjs -c -m -b max_line_len=80,beautify=false -o dist/x-style-apply.min.js -- x-style-apply.js", "build-x-style-envvar": "uglifyjs -c -m -b max_line_len=80,beautify=false -o dist/x-style-envvar.min.js -- x-style-envvar.js", "build-x-style-unnest": "uglifyjs -c -m -b max_line_len=80,beautify=false -o dist/x-style-unnest.min.js -- x-style-unnest.js", "build-x-style-all": "mkdir build && cat x-style.js x-style-apply.js x-style-envvar.js x-style-unnest.js > build/x-style-all.js && uglifyjs -c -m -b max_line_len=80,beautify=false -o dist/x-style-all.min.js -- build/x-style-all.js && rm -rf ./build", - "build": "npm run build-x-style && npm run build-x-style-apply && npm run build-x-style-envvar && npm run build-x-style-unnest && npm run build-x-style-all" + "build": "npm run build-x-style && npm run build-x-style-nano && npm run build-x-style-apply && npm run build-x-style-envvar && npm run build-x-style-unnest && npm run build-x-style-all" }, "author": "Sam Willis", "license": "MIT", diff --git a/x-style-nano.js b/x-style-nano.js new file mode 100644 index 0000000..21d194d --- /dev/null +++ b/x-style-nano.js @@ -0,0 +1,52 @@ +/** + * x-style + * @param {string} attr - HTML attribute that contains the css, usually "x-style" + */ +((attr) => { + var styleEl, + style = "", + processedCss = {}, + doc = document, + rawCss, + selectorAttr, + nextId = 1, + id; + + var processEl = (el) => { + rawCss = el.getAttribute?.(attr); + if (rawCss) { + id = processedCss[rawCss] ??= nextId; + selectorAttr = attr + id; + el.removeAttribute(el[attr]); + el.setAttribute(selectorAttr, ""); + el[attr] = selectorAttr; + if (id == nextId) { + style += `[${selectorAttr}]{${rawCss}}`; + nextId++; + } + } + }; + + new MutationObserver((mutations) => { + mutations.map((mutation) => { + if (mutation.type == "childList") { + mutation.addedNodes.forEach((el) => { + processEl(el); + [...(el.querySelectorAll?.(`[${attr}]`) || [])].map(processEl); + }); + } else { + processEl(mutation.target); + } + }); + if (style) { + styleEl = doc.createElement("style"); + styleEl.innerHTML = style; + doc.head.appendChild(styleEl); + style = ""; + } + }).observe(doc, { + attributeFilter: [attr], + childList: true, + subtree: true, + }); +})("x-style");