esm-styles 0.1.8 → 0.1.10

package/dist/lib/utils/selector.js

@@ -155,7 +155,10 @@ 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) => {
+    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.startsWith('__')) {
             return acc + (acc ? ' ' : '') + '.' + part.slice(2);
         }
@@ -178,9 +181,18 @@ export const joinSelectorPath = (path) => {
         else if (isHtmlTag(part)) {
             return acc + (acc ? ' ' : '') + part;
         }
-        else {
-            // Not a tag, not a special selector: treat as class
-            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]*)\.(.+)/);
+            if (match && isHtmlTag(match[1])) {
+                return acc + (acc ? ' ' : '') + match[1] + '.' + match[2];
+            }
         }
+        // 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.8",
+  "version": "0.1.10",
   "description": "A library for working with ESM styles",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",