uikit 3.19.5-dev.57ec46163 → 3.19.5-dev.8317c4705

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.19.5-dev.57ec46163",
+  "version": "3.19.5-dev.8317c4705",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/util/selector.js

@@ -18,57 +18,91 @@ export function findAll(selector, context) {
     return toNodes(_query(selector, toNode(context), 'querySelectorAll'));
 }
 
-const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
-const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
-
 function getContext(selector, context = document) {
-    return (isString(selector) && isContextSelector(selector)) || isDocument(context)
+    return (isString(selector) && parseSelector(selector).isContextSelector) || isDocument(context)
         ? context
         : context.ownerDocument;
 }
 
-const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
-const sanatize = memoize((selector) => selector.replace(contextSanitizeRe, '$1 *'));
+const addStarRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
+const splitSelectorRe = /.*?[^\\](?![^(]*\))(?:,|$)/g;
+const trailingCommaRe = /\s*,$/;
+
+const parseSelector = memoize((selector) => {
+    selector = selector.replace(addStarRe, '$1 *');
+    let isContextSelector = false;
+
+    const selectors = [];
+    for (let sel of selector.match(splitSelectorRe)) {
+        sel = sel.replace(trailingCommaRe, '').trim();
+        if (sel[0] === '>') {
+            sel = `:scope ${sel}`;
+        }
+        isContextSelector ||= ['!', '+', '~', '-'].includes(sel[0]);
+        selectors.push(sel);
+    }
+
+    return {
+        selector: selectors.join(','),
+        selectors,
+        isContextSelector,
+    };
+});
 
 function _query(selector, context = document, queryFn) {
     if (!selector || !isString(selector)) {
         return selector;
     }
 
-    selector = sanatize(selector);
-
-    if (isContextSelector(selector)) {
-        const split = splitSelector(selector);
-        selector = '';
-        for (let sel of split) {
-            let ctx = context;
-
-            if (sel[0] === '!') {
-                const selectors = sel.substr(1).trim().split(' ');
-                ctx = parent(context).closest(selectors[0]);
-                sel = selectors.slice(1).join(' ').trim();
-                if (!sel.length && split.length === 1) {
-                    return ctx;
-                }
-            }
+    const parsed = parseSelector(selector);
+
+    if (!parsed.isContextSelector) {
+        return _doQuery(context, queryFn, parsed.selector);
+    }
 
-            if (sel[0] === '-') {
-                const selectors = sel.substr(1).trim().split(' ');
-                const prev = (ctx || context).previousElementSibling;
-                ctx = matches(prev, sel.substr(1)) ? prev : null;
-                sel = selectors.slice(1).join(' ');
+    selector = '';
+    const isSingle = parsed.selectors.length === 1;
+    for (let sel of parsed.selectors) {
+        let ctx = context;
+
+        if (sel[0] === '!') {
+            const selectors = sel.substr(1).trim().split(' ');
+            ctx = parent(context).closest(selectors[0]);
+            sel = selectors.slice(1).join(' ').trim();
+            if (!sel.length && isSingle) {
+                return ctx;
             }
+        }
 
-            if (ctx) {
-                selector += `${selector ? ',' : ''}${domPath(ctx)} ${sel}`;
+        if (sel[0] === '-') {
+            const selectors = sel.substr(1).trim().split(' ');
+            const prev = (ctx || context).previousElementSibling;
+            ctx = matches(prev, sel.substr(1)) ? prev : null;
+            sel = selectors.slice(1).join(' ');
+            if (!sel.length && isSingle) {
+                return ctx;
             }
+        } else if (sel[0] === '~' || (sel[0] === '+' && isSingle)) {
+            return _doQuery(
+                parent(context),
+                queryFn,
+                `:scope :nth-child(${index(context) + 1}) ${sel}`,
+            );
         }
 
-        if (!isDocument(context)) {
-            context = context.ownerDocument;
+        if (ctx) {
+            selector += `${selector ? ',' : ''}${domPath(ctx)} ${sel}`;
         }
     }
 
+    if (!isDocument(context)) {
+        context = context.ownerDocument;
+    }
+
+    return _doQuery(context, queryFn, selector);
+}
+
+function _doQuery(context, queryFn, selector) {
     try {
         return context[queryFn](selector);
     } catch (e) {
@@ -76,12 +110,6 @@ function _query(selector, context = document, queryFn) {
     }
 }
 
-const selectorRe = /.*?[^\\](?![^(]*\))(?:,|$)/g;
-
-const splitSelector = memoize((selector) =>
-    selector.match(selectorRe).map((selector) => selector.replace(/,$/, '').trim()),
-);
-
 function domPath(element) {
     const names = [];
     while (element.parentNode) {

package/tests/modal.html

@@ -382,14 +382,14 @@
         <div id="modal-media-youtube" uk-modal>
             <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
                 <button class="uk-modal-close-outside" type="button" uk-close></button>
-                <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA" width="1920" height="1080" uk-responsive uk-video></iframe>
+                <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA" width="1920" height="1080" loading="lazy" uk-responsive uk-video></iframe>
             </div>
         </div>
 
         <div id="modal-media-vimeo" uk-modal>
             <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
                 <button class="uk-modal-close-outside" type="button" uk-close></button>
-                <iframe src="https://player.vimeo.com/video/1084537" width="500" height="281" uk-responsive uk-video></iframe>
+                <iframe src="https://player.vimeo.com/video/1084537" width="500" height="281" loading="lazy" uk-responsive uk-video></iframe>
             </div>
         </div>