esm-styles 0.1.2 → 0.1.3

package/dist/index.js

@@ -14,5 +14,5 @@ export { jsKeyToCssKey, isEndValue } from './lib/utils/common.js';
 export { processMediaQueries } from './lib/utils/media.js';
 export { obj2css, prettifyCss } from './lib/utils/obj2css.js';
 export function greet() {
-    return 'esm-styles 0.1.2';
+    return 'esm-styles 0.1.3';
 }

package/dist/lib/getCss.js

@@ -31,8 +31,17 @@ export function getCss(object, mediaQueries = {}, mediaPrefixes = {}, auto) {
         const nodeType = determineNodeType(node, path);
         const pathParts = path.split('\\');
         const key = pathParts.pop() || '';
+        // Skip processing media query nodes that are nested within selectors
+        // as they will be handled separately in the media query section
+        const isNestedMediaQuery = pathParts.some((part) => part.startsWith('@media ') ||
+            (part.startsWith('@') &&
+                mediaQueries[part.replace(/^@\s*/, '')] !== undefined));
         switch (nodeType) {
             case 'selector': {
+                // Skip if this is inside a media query - it will be handled separately
+                if (isNestedMediaQuery) {
+                    break;
+                }
                 // Handle CSS property-value pairs
                 const selector = joinSelectors(pathParts);
                 // Create cartesian product of selectors for comma-separated parts

package/dist/lib/utils/media.js

@@ -1,7 +1,7 @@
 /**
  * Utilities for handling media queries
  */
-import { indent } from './common.js';
+import { indent, jsKeyToCssKey } from './common.js';
 import { obj2css } from './obj2css.js';
 import { isEndValue } from './common.js';
 /**
@@ -36,7 +36,9 @@ export function processMediaQueries(mediaObject, mediaQueries = {}) {
         if (isEndValue(styles)) {
             return '';
         }
-        const stylesCss = obj2css(styles);
+        // Process the styles to convert camelCase properties to kebab-case
+        const processedStyles = processStylesForMedia(styles);
+        const stylesCss = obj2css(processedStyles);
         if (!stylesCss.trim()) {
             return '';
         }
@@ -46,6 +48,31 @@ export function processMediaQueries(mediaObject, mediaQueries = {}) {
     // Join all media query blocks with newlines
     return mediaCssStrings.filter((css) => css).join('\n\n');
 }
+/**
+ * Processes styles for media queries to ensure camelCase is converted to kebab-case
+ * @param styles - Style object to process
+ * @returns Processed style object with converted property names
+ */
+function processStylesForMedia(styles) {
+    const result = {};
+    // Process each selector in the styles
+    Object.keys(styles).forEach((selector) => {
+        const selectorStyles = styles[selector];
+        // Skip if not an object
+        if (isEndValue(selectorStyles)) {
+            result[selector] = selectorStyles;
+            return;
+        }
+        const processedProps = {};
+        // Convert each property name to kebab-case
+        Object.keys(selectorStyles).forEach((prop) => {
+            const cssKey = jsKeyToCssKey(prop);
+            processedProps[cssKey] = selectorStyles[prop];
+        });
+        result[selector] = processedProps;
+    });
+    return result;
+}
 /**
  * Checks if a key represents a media query
  * @param key - Key to check

package/package.json

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