esm-styles 0.3.9 → 0.3.11

package/dist/lib/index.js

@@ -4,6 +4,19 @@ function flatWalk(obj, selectorPath = [], result = { rules: [], media: {}, layer
     const props = {};
     for (const key in obj) {
         const value = obj[key];
+        if (key === '@layer' && typeof value === 'string') {
+            const directive = `@layer ${value};`;
+            if (currentMedia.length > 0) {
+                const mediaKey = currentMedia.join(' && ');
+                if (!result.media[mediaKey])
+                    result.media[mediaKey] = [];
+                result.media[mediaKey].push(directive);
+            }
+            else {
+                result.rules.push(directive);
+            }
+            continue;
+        }
         if (utils.isEndValue(value)) {
             const cssKey = utils.jsKeyToCssKey(key);
             if (cssKey === 'content') {
@@ -128,8 +141,13 @@ function flatWalk(obj, selectorPath = [], result = { rules: [], media: {}, layer
 }
 function renderRules(rules) {
     let css = '';
+    const directives = rules.filter((r) => typeof r === 'string');
+    const normalRules = rules.filter((r) => typeof r !== 'string');
+    if (directives.length > 0) {
+        css += directives.join('\n') + '\n';
+    }
     const groups = {};
-    for (const rule of rules) {
+    for (const rule of normalRules) {
         const declKey = JSON.stringify(rule.declarations);
         if (!groups[declKey])
             groups[declKey] = [];
@@ -167,43 +185,11 @@ function renderFlatMedia(media) {
         }
         else if (key === '') {
             // Render rules directly, no block
-            // Group rules by their declarations (stringified)
-            const groups = {};
-            for (const rule of media[key]) {
-                const declKey = JSON.stringify(rule.declarations);
-                if (!groups[declKey])
-                    groups[declKey] = [];
-                groups[declKey].push(rule.selector);
-            }
-            for (const declKey in groups) {
-                const selectors = groups[declKey].join(', ');
-                const declarations = JSON.parse(declKey);
-                css += `${selectors} {\n`;
-                for (const k in declarations) {
-                    css += `  ${k}: ${declarations[k]};\n`;
-                }
-                css += '}\n';
-            }
+            css += renderRules(media[key]);
         }
         else {
             css += `${key} {\n`;
-            // Group rules by their declarations (stringified)
-            const groups = {};
-            for (const rule of media[key]) {
-                const declKey = JSON.stringify(rule.declarations);
-                if (!groups[declKey])
-                    groups[declKey] = [];
-                groups[declKey].push(rule.selector);
-            }
-            for (const declKey in groups) {
-                const selectors = groups[declKey].join(', ');
-                const declarations = JSON.parse(declKey);
-                css += `${selectors} {\n`;
-                for (const k in declarations) {
-                    css += `  ${k}: ${declarations[k]};\n`;
-                }
-                css += '}\n';
-            }
+            css += renderRules(media[key]);
             css += '}\n';
         }
     }
@@ -219,43 +205,11 @@ function renderFlatContainers(containers) {
         }
         else if (key === '') {
             // Render rules directly, no block
-            // Group rules by their declarations (stringified)
-            const groups = {};
-            for (const rule of containers[key]) {
-                const declKey = JSON.stringify(rule.declarations);
-                if (!groups[declKey])
-                    groups[declKey] = [];
-                groups[declKey].push(rule.selector);
-            }
-            for (const declKey in groups) {
-                const selectors = groups[declKey].join(', ');
-                const declarations = JSON.parse(declKey);
-                css += `${selectors} {\n`;
-                for (const k in declarations) {
-                    css += `  ${k}: ${declarations[k]};\n`;
-                }
-                css += '}\n';
-            }
+            css += renderRules(containers[key]);
         }
         else {
             css += `${key} {\n`;
-            // Group rules by their declarations (stringified)
-            const groups = {};
-            for (const rule of containers[key]) {
-                const declKey = JSON.stringify(rule.declarations);
-                if (!groups[declKey])
-                    groups[declKey] = [];
-                groups[declKey].push(rule.selector);
-            }
-            for (const declKey in groups) {
-                const selectors = groups[declKey].join(', ');
-                const declarations = JSON.parse(declKey);
-                css += `${selectors} {\n`;
-                for (const k in declarations) {
-                    css += `  ${k}: ${declarations[k]};\n`;
-                }
-                css += '}\n';
-            }
+            css += renderRules(containers[key]);
             css += '}\n';
         }
     }

package/dist/lib/utils/selector.js

@@ -247,7 +247,7 @@ export const joinSelectorPath = (path) => {
                 part.startsWith('+') ||
                 part.startsWith('~'):
                 // Combinators: always join with a space
-                return acc + ' ' + part;
+                return acc + ' ' + transformExplicitClasses(part);
             case part.startsWith(':') ||
                 part.startsWith('::') ||
                 part.startsWith('#') ||

package/doc/usage-guide.md

@@ -321,7 +321,7 @@ Use commas to target multiple selectors:
 
 ### T9: Automatic Kebab-case Conversion
 
-Class names in selectors are automatically converted from camelCase to kebab-case, unless they are PascalCase (starting with an uppercase letter), in which case they are preserved as-is.
+Class names in selectors are automatically converted from camelCase and snake_case to kebab-case. The PascalCase class names (starting with an uppercase letter) are preserved as-is.
 
 ```js
 {

package/package.json

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