esm-styles 0.1.9 → 0.1.11

package/dist/lib/utils/selector.d.ts

@@ -1,4 +1,5 @@
 import type { IsSpecialSelector, IsClassSelector } from '../types/index.js';
+export declare const startsWithHtmlTag: (selector: string) => boolean;
 export declare const isSpecialSelector: IsSpecialSelector;
 export declare const isClassSelector: IsClassSelector;
 export declare const joinSelectorPath: (path: string[][]) => string[];

package/dist/lib/utils/selector.js

@@ -140,6 +140,22 @@ const isHtmlTag = (key) => {
     // Only match if the key is a plain tag name (no underscores, no special chars)
     return HTML_TAGS.has(key);
 };
+// Check if selector starts with an HTML tag followed by a combinator or other selector parts
+export const startsWithHtmlTag = (selector) => {
+    // Common combinators and selector parts that might follow a tag
+    const combinators = [' ', '>', '+', '~', ':', '[', '.'];
+    // Check if the selector starts with an HTML tag followed by a combinator
+    for (const tag of HTML_TAGS) {
+        if (selector === tag)
+            return true;
+        for (const combinator of combinators) {
+            if (selector.startsWith(tag + combinator)) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
 export const isSpecialSelector = (key) => {
     // Pseudo-classes/elements, id, attribute selectors
     return (key.startsWith(':') ||
@@ -155,8 +171,15 @@ export const joinSelectorPath = (path) => {
     // Compute cartesian product of all segments
     const combos = utils.cartesianProduct(path);
     // Join each combination into a selector string
-    return combos.map((parts) => parts.reduce((acc, part) => {
-        if (part.startsWith('__')) {
+    return combos.map((parts) => parts.reduce((acc, part, idx) => {
+        // Check if previous part is a root selector
+        const prev = idx > 0 ? parts[idx - 1] : null;
+        const isPrevRoot = prev && (prev === ':root' || prev.startsWith(':root.'));
+        if (part === '*') {
+            // Universal selector
+            return acc + (acc ? ' ' : '') + '*';
+        }
+        else if (part.startsWith('__')) {
             return acc + (acc ? ' ' : '') + '.' + part.slice(2);
         }
         else if (part.startsWith('_')) {
@@ -178,6 +201,10 @@ export const joinSelectorPath = (path) => {
         else if (isHtmlTag(part)) {
             return acc + (acc ? ' ' : '') + part;
         }
+        else if (startsWithHtmlTag(part)) {
+            // Handle compound selectors that start with HTML tags (e.g., 'div > *')
+            return acc + (acc ? ' ' : '') + part;
+        }
         else if (/^([a-z][a-z0-9]*)\.(.+)/.test(part)) {
             // If part matches 'tag.class...' and tag is an HTML tag
             const match = part.match(/^([a-z][a-z0-9]*)\.(.+)/);
@@ -185,7 +212,11 @@ export const joinSelectorPath = (path) => {
                 return acc + (acc ? ' ' : '') + match[1] + '.' + match[2];
             }
         }
-        // Not a tag, not a special selector: treat as class
+        // Not a tag, not a special selector: treat as class or custom element
+        // If previous part is a root selector, insert a space
+        if (isPrevRoot) {
+            return acc + ' ' + '.' + part;
+        }
         return acc + (acc ? '' : '') + '.' + part;
     }, ''));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esm-styles",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "A library for working with ESM styles",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",