esm-styles 0.2.0 → 0.2.2

package/README.md

@@ -133,11 +133,12 @@ export default {
     },
   },
 
-  // Media query shorthands
+  // Media query shorthands (in addition to media.device and media.theme names)
   mediaQueries: {
-    mobile: '(max-width: 767px)',
-    tablet: '(min-width: 768px) and (max-width: 1024px)',
-    desktop: '(min-width: 1025px)',
+    'min-tablet': '(min-width: 768px)',
+    'max-tablet': '(max-width: 1024px)',
+    hover: '(hover: hover)',
+    // ...whatever you want
   },
 }
 ```

package/dist/lib/build.js

@@ -123,7 +123,10 @@ export async function build(configPath = 'esm-styles.config.js') {
                     if (key === '') {
                         // Only possible at non-root
                         const varName = '--' + path.map((k) => k.replace(/_/g, '-')).join('-');
-                        const leaf = { var: varName };
+                        const leaf = {
+                            var: `var(${varName})`,
+                            name: varName,
+                        };
                         for (let i = 0; i < sets.length; i++) {
                             const v = path.length === 0
                                 ? mergedSets[sets[i]]

package/dist/lib/index.js

@@ -1,19 +1,16 @@
 import * as utils from './utils/index.js';
+import { toCssValue } from './utils/to-css-value.js';
 function flatWalk(obj, selectorPath = [], result = { rules: [], media: {}, layers: {} }, options = {}, currentMedia = []) {
     const props = {};
     for (const key in obj) {
         const value = obj[key];
         if (utils.isEndValue(value)) {
             const cssKey = utils.jsKeyToCssKey(key);
-            if (typeof value === 'object' &&
-                value !== null &&
-                'var' in value &&
-                typeof value.var === 'string') {
-                // Use CSS variable reference
-                props[cssKey] = `var(${value.var})`;
+            if (cssKey === 'content') {
+                props[cssKey] = utils.contentValue(toCssValue(value));
             }
             else {
-                props[cssKey] = cssKey === 'content' ? utils.contentValue(value) : value;
+                props[cssKey] = toCssValue(value);
             }
         }
         else if (typeof value === 'object' && value !== null) {

package/dist/lib/utils/content.js

@@ -1,13 +1,33 @@
+const keywords = [
+    'normal',
+    'none',
+    'open-quote',
+    'close-quote',
+    'no-open-quote',
+    'no-close-quote',
+    'inherit',
+    'initial',
+    'revert',
+    'revert-layer',
+    'unset',
+];
 export const contentValue = (value) => {
     if (typeof value !== 'string')
         return value;
-    // If already quoted, return as is
-    if (/^'.*'$/.test(value) || /^".*"$/.test(value))
+    if (keywords.some((keyword) => {
+        const regex = new RegExp(`\\b${keyword}\\b`);
+        return regex.test(value);
+    }))
         return value;
-    // If all characters are printable ASCII, return as quoted string
-    if (/^[\x20-\x7E]*$/.test(value)) {
+    // If already contains quoted values, return as is
+    if (/'.*'/.test(value) || /".*"/.test(value))
+        return value;
+    // If contains functions, return as is
+    if (/[a-z]+\(.*\)/i.test(value))
+        return value; // url(...), attr(...), etc.
+    // If all characters are printable ASCII, wrap in single quotes
+    if (/^[\x20-\x7E]*$/.test(value))
         return `'${value}'`;
-    }
     // Otherwise, convert each character to CSS unicode escape: \00xxxx
     const unicode = value
         .split('')

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

@@ -6,3 +6,4 @@ export * from './format.js';
 export * from './end-value.js';
 export * from './get-css-variables.js';
 export * from './media-shorthand.js';
+export * from './to-css-value.js';

package/dist/lib/utils/index.js

@@ -6,3 +6,4 @@ export * from './format.js';
 export * from './end-value.js';
 export * from './get-css-variables.js';
 export * from './media-shorthand.js';
+export * from './to-css-value.js';

package/dist/lib/utils/to-css-value.d.ts

@@ -0,0 +1 @@
+export declare function toCssValue(value: any): string;

package/dist/lib/utils/to-css-value.js

@@ -0,0 +1,15 @@
+// Utility to convert a value to a CSS string, handling arrays, objects with 'var', and primitives
+export function toCssValue(value) {
+    if (Array.isArray(value)) {
+        // Join array parts, recursively converting each
+        return value.map(toCssValue).join(' ');
+    }
+    if (typeof value === 'object' &&
+        value !== null &&
+        'var' in value &&
+        typeof value.var === 'string') {
+        return value.var;
+    }
+    // For primitives (string, number), just return as string
+    return String(value);
+}

package/package.json

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