8000 0.3.8 · ulyssear/css-in-js-in-html@9212ece · GitHub
[go: up one dir, main page]
Skip to content

Commit 9212ece

Browse files
Ulysse ARNAUDUlysse ARNAUD
Ulysse ARNAUD
authored and
Ulysse ARNAUD
committed
0.3.8
1 parent bb8cb52 commit 9212ece

File tree

5 files changed

+28
-9
lines changed

5 files changed

+28
-9
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ __Older browsers__
111111

112112
1. Import `main.js` in your HTML file
113113
```html
114-
<script src="https://cdn.jsdelivr.net/gh/ulyssear/css-in-js-in-html@0.3.7/build/index.min.js"></script>
114+
<script src="https://cdn.jsdelivr.net/gh/ulyssear/css-in-js-in-html@0.3.8/build/index.min.js"></script>
115115
```
116116

117117
2. Add one line of CSS to hide the page while building (and permits to hide elements with hidden attribute)

‎build/index.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/index.min.js.gz

121 Bytes
Binary file not shown.

‎index.js

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,9 @@ function init() {
118118
let query = split[entry.query].replaceAll(/current\s*,?/g, getFullPathToElement(element) + ',');
119119
const classes = Array.from(split[entry.classes].slice(1, -1).matchAll(regularExpressions[0])).map(e => e.slice(1));
120120
if (query.startsWith('>')) {
121+
console.log('before : ', query);
121122
query = getFullPathToElement(element) + query;
123+
console.log('after : ', query);
122124
}
123125
if (query.endsWith(',')) {
124126
query = query.slice(0, -1);
@@ -159,11 +161,28 @@ function init() {
159161

160162
main();
161163
}
162-
document.addEventListener('DOMContentLoaded', init);
163164
let observer;
164165
window.addEventListener('css-in-js-in-html-ready', function () {
165166
if (!observer) {
166-
observer = new MutationObserver(init);
167-
observer.observe(document, { attributes: true, childList: true, subtree: true });
167+
observer = new MutationObserver((mutationsList) => {
168+
for (const mutation of mutationsList) {
169+
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
170+
init();
171+
break;
172+
}
173+
if (mutation.type === 'childList' && (mutation.addedNodes.length || mutation.removedNodes.length)) {
174+
init();
175+
break;
176+
}
177+
}
178+
});
179+
180+
observer.observe(document.body, {
181+
attributes: true,
182+
childList: true,
183+
subtree: true,
184+
attributeFilter: ['class']
185+
});
168186
}
169-
} );
187+
});
188+
document.addEventListener('DOMContentLoaded', init);

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
22
"name": "@ulyssear/css-in-js-in-html",
3-
"version": "0.3.7",
3+
"version": "0.3.8",
44
"description": "CSS-in-JS-in-HTML is a library that allows you to use CSS-in-JS with HTML only.",
55
"main": "build/index.js",
66
"scripts": {
77
"tests": "echo \"Error: no test specified\" && exit 1",
8-
"build": "esbuild index.js --bundle --outfile=build/index.min.js --minify",
9-
"compress": "node scripts/compress.js"
8+
"compress": "node scripts/compress.js",
9+
"build": "npm run compress && esbuild index.js --bundle --outfile=build/index.min.js --minify"
1010
},
1111
"repository": {
1212
"type": "git",

0 commit comments

Comments
 (0)
0