assign-gingerly 0.0.16 → 0.0.17

package/README.md

@@ -2206,6 +2206,17 @@ console.log(query);
 const elements = document.querySelectorAll(query);
 ```
 
+**Without selectors (matches any element):**
+
+```TypeScript
+const query = buildCSSQuery(config, '');
+console.log(query);
+// '[my-component], [enh-my-component], [my-component-theme], [enh-my-component-theme]'
+
+// Matches any element with these attributes
+const elements = document.querySelectorAll(query);
+```
+
 ### How It Works
 
 `buildCSSQuery` creates a cross-product of:
@@ -2289,11 +2300,25 @@ buildCSSQuery(config, 'div');
 
 ### Edge Cases
 
-**Empty inputs return empty string:**
+**Empty selectors return attribute-only selectors:**
+```TypeScript
+const config = {
+  spawn: MyClass,
+  withAttrs: {
+    base: 'my-attr',
+    theme: '${base}-theme'
+  }
+};
+
+buildCSSQuery(config, '');
+// '[my-attr], [enh-my-attr], [my-attr-theme], [enh-my-attr-theme]'
+// Matches any element with these attributes
+```
+
+**Empty withAttrs returns empty string:**
 ```TypeScript
 buildCSSQuery({ spawn: MyClass }, 'div');  // '' (no withAttrs)
 buildCSSQuery({ spawn: MyClass, withAttrs: {} }, 'div');  // '' (empty withAttrs)
-buildCSSQuery({ spawn: MyClass, withAttrs: { base: 'x' } }, '');  // '' (empty selectors)
 ```
 
 **Deduplication:**
@@ -2312,14 +2337,15 @@ buildCSSQuery(config, '  div  ,  span  ,  p  ');
 
 1. **Mount Observer Integration**: Find elements that need enhancement
    ```TypeScript
-   const query = buildCSSQuery(enhancementConfig, '*');
+   // Match any element with the attributes
+   const query = buildCSSQuery(enhancementConfig, '');
    const observer = new MutationObserver(() => {
      const elements = document.querySelectorAll(query);
      elements.forEach(el => enhance(el));
    });
    ```
 
-2. **Batch Enhancement**: Enhance all matching elements at once
+2. **Specific Element Types**: Enhance only certain element types
    ```TypeScript
    const query = buildCSSQuery(config, 'template, script');
    document.querySelectorAll(query).forEach(el => {
@@ -2345,10 +2371,13 @@ function buildCSSQuery(
 **Parameters:**
 - `config`: Enhancement configuration with `withAttrs` property
 - `selectors`: Comma-separated CSS selectors (e.g., `'div, span'`)
+  - If empty string or whitespace only, returns attribute selectors without element prefix
+  - This matches any element with the specified attributes
 
 **Returns:**
 - CSS query string with cross-product of selectors and attributes
-- Empty string if `withAttrs` is missing or empty
+- If selectors is empty: returns attribute-only selectors (e.g., `'[attr], [enh-attr]'`)
+- If withAttrs is missing or empty: returns empty string
 
 **Throws:**
 - Error if template variables have circular references

package/buildCSSQuery.js

@@ -65,6 +65,7 @@ function extractAttributeNames(withAttrs) {
  *
  * @param config - Enhancement configuration with withAttrs
  * @param selectors - Comma-separated CSS selectors to match (e.g., 'template, script')
+ *                    If empty, returns just the attribute selectors without element prefix
  * @returns CSS query string with cross-product of selectors and attributes
  *
  * @example
@@ -76,36 +77,47 @@ function extractAttributeNames(withAttrs) {
  *   }
  * };
  *
+ * // With selectors
  * buildCSSQuery(config, 'div, span');
  * // Returns: 'div[my-attr], span[my-attr], div[enh-my-attr], span[enh-my-attr],
  * //           div[my-attr-theme], span[my-attr-theme], div[enh-my-attr-theme], span[enh-my-attr-theme]'
+ *
+ * // Without selectors (matches any element)
+ * buildCSSQuery(config, '');
+ * // Returns: '[my-attr], [enh-my-attr], [my-attr-theme], [enh-my-attr-theme]'
  */
 export function buildCSSQuery(config, selectors) {
     // Validate inputs
-    if (!config.withAttrs || !selectors) {
-        return '';
-    }
-    // Parse and normalize selectors
-    const selectorList = selectors
-        .split(',')
-        .map(s => s.trim())
-        .filter(s => s.length > 0);
-    if (selectorList.length === 0) {
+    if (!config.withAttrs) {
         return '';
     }
-    // Extract and resolve attribute names
+    // Extract and resolve attribute names first
     const attrNames = extractAttributeNames(config.withAttrs);
     if (attrNames.length === 0) {
         return '';
     }
-    // Build cross-product of selectors × attributes × prefixes
+    // Parse and normalize selectors
+    const selectorList = selectors
+        ? selectors.split(',').map(s => s.trim()).filter(s => s.length > 0)
+        : [];
+    // Build queries
     const queries = [];
-    for (const selector of selectorList) {
+    if (selectorList.length === 0) {
+        // No selectors provided - return just attribute selectors
         for (const attrName of attrNames) {
-            // Unprefixed version
-            queries.push(`${selector}[${attrName}]`);
-            // enh- prefixed version
-            queries.push(`${selector}[enh-${attrName}]`);
+            queries.push(`[${attrName}]`);
+            queries.push(`[enh-${attrName}]`);
+        }
+    }
+    else {
+        // Build cross-product of selectors × attributes × prefixes
+        for (const selector of selectorList) {
+            for (const attrName of attrNames) {
+                // Unprefixed version
+                queries.push(`${selector}[${attrName}]`);
+                // enh- prefixed version
+                queries.push(`${selector}[enh-${attrName}]`);
+            }
         }
     }
     // Deduplicate and join

package/buildCSSQuery.ts

@@ -83,6 +83,7 @@ function extractAttributeNames(withAttrs: AttrPatterns<any>): string[] {
  * 
  * @param config - Enhancement configuration with withAttrs
  * @param selectors - Comma-separated CSS selectors to match (e.g., 'template, script')
+ *                    If empty, returns just the attribute selectors without element prefix
  * @returns CSS query string with cross-product of selectors and attributes
  * 
  * @example
@@ -94,45 +95,54 @@ function extractAttributeNames(withAttrs: AttrPatterns<any>): string[] {
  *   }
  * };
  * 
+ * // With selectors
  * buildCSSQuery(config, 'div, span');
  * // Returns: 'div[my-attr], span[my-attr], div[enh-my-attr], span[enh-my-attr], 
  * //           div[my-attr-theme], span[my-attr-theme], div[enh-my-attr-theme], span[enh-my-attr-theme]'
+ * 
+ * // Without selectors (matches any element)
+ * buildCSSQuery(config, '');
+ * // Returns: '[my-attr], [enh-my-attr], [my-attr-theme], [enh-my-attr-theme]'
  */
 export function buildCSSQuery(
     config: EnhancementConfig,
     selectors: string
 ): string {
     // Validate inputs
-    if (!config.withAttrs || !selectors) {
+    if (!config.withAttrs) {
         return '';
     }
     
-    // Parse and normalize selectors
-    const selectorList = selectors
-        .split(',')
-        .map(s => s.trim())
-        .filter(s => s.length > 0);
-    
-    if (selectorList.length === 0) {
-        return '';
-    }
-    
-    // Extract and resolve attribute names
+    // Extract and resolve attribute names first
     const attrNames = extractAttributeNames(config.withAttrs);
     
     if (attrNames.length === 0) {
         return '';
     }
     
-    // Build cross-product of selectors × attributes × prefixes
+    // Parse and normalize selectors
+    const selectorList = selectors
+        ? selectors.split(',').map(s => s.trim()).filter(s => s.length > 0)
+        : [];
+    
+    // Build queries
     const queries: string[] = [];
     
-    for (const selector of selectorList) {
+    if (selectorList.length === 0) {
+        // No selectors provided - return just attribute selectors
         for (const attrName of attrNames) {
-            // Unprefixed version
-            queries.push(`${selector}[${attrName}]`);
-            // enh- prefixed version
-            queries.push(`${selector}[enh-${attrName}]`);
+            queries.push(`[${attrName}]`);
+            queries.push(`[enh-${attrName}]`);
+        }
+    } else {
+        // Build cross-product of selectors × attributes × prefixes
+        for (const selector of selectorList) {
+            for (const attrName of attrNames) {
+                // Unprefixed version
+                queries.push(`${selector}[${attrName}]`);
+                // enh- prefixed version
+                queries.push(`${selector}[enh-${attrName}]`);
+            }
         }
     }
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "assign-gingerly",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "This package provides a utility function for carefully merging one object into another.",
   "homepage": "https://github.com/bahrus/assign-gingerly#readme",
   "bugs": {