esm-styles 0.1.10 → 0.1.12

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

@@ -1,4 +1,15 @@
 import * as utils from './cartesian.js';
+const svgTags = [
+    'circle',
+    'ellipse',
+    'g',
+    'line',
+    'polygon',
+    'polyline',
+    'path',
+    'rect',
+    'text',
+];
 // List of standard HTML tags (not exhaustive, but covers common cases)
 const HTML_TAGS = new Set([
     'html',
@@ -135,11 +146,28 @@ const HTML_TAGS = new Set([
     'strike',
     'tt',
     'xmp',
+    ...svgTags,
 ]);
 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(':') ||
@@ -159,7 +187,11 @@ export const joinSelectorPath = (path) => {
         // 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('__')) {
+        if (part === '*') {
+            // Universal selector
+            return acc + (acc ? ' ' : '') + '*';
+        }
+        else if (part.startsWith('__')) {
             return acc + (acc ? ' ' : '') + '.' + part.slice(2);
         }
         else if (part.startsWith('_')) {
@@ -181,6 +213,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]*)\.(.+)/);

package/package.json

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