esm-styles 0.1.2 → 0.1.5

package/dist/build.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/build.js

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+import { build } from './lib/build.js';
+async function main() {
+    const args = process.argv.slice(2);
+    const configPath = args.find((arg) => !arg.startsWith('-')) || 'esm-styles.config.js';
+    const watch = args.includes('--watch') || args.includes('-w');
+    if (watch) {
+        console.log('[esm-styles] Watch mode is not supported internally due to ESM module caching.');
+        console.log('[esm-styles] Please use nodemon or a similar tool to restart the build process on file changes.');
+        console.log('[esm-styles] Example:');
+        console.log("  npx nodemon --watch <source-dir> --ext mjs --exec 'node dist/build.js <config-file>'");
+        process.exit(0);
+    }
+    try {
+        console.log('Build v0.0.11');
+        await build(configPath);
+        console.log('Build completed successfully.');
+    }
+    catch (err) {
+        console.error('Build failed:', err);
+        process.exit(1);
+    }
+}
+main();

package/dist/index.d.ts

@@ -1,13 +1,8 @@
 /**
  * esm-styles
  *
- * A library for working with CSS styles in ESM
+ * A library for building CSS styles from ES modules
  */
-export * from './lib/types/index.js';
-export { default as getCss } from './lib/getCss.js';
-export { joinSelectors, cartesianSelectors } from './lib/utils/selectors.js';
-export { formatContentValue } from './lib/utils/content.js';
-export { jsKeyToCssKey, isEndValue } from './lib/utils/common.js';
-export { processMediaQueries } from './lib/utils/media.js';
-export { obj2css, prettifyCss } from './lib/utils/obj2css.js';
+export * from "./lib/types/index.js";
+export * from "./lib/index.js";
 export declare function greet(): string;

package/dist/index.js

@@ -1,18 +1,11 @@
 /**
  * esm-styles
  *
- * A library for working with CSS styles in ESM
+ * A library for building CSS styles from ES modules
  */
 // Export types
-export * from './lib/types/index.js';
-// Main function export
-export { default as getCss } from './lib/getCss.js';
-// Utils exports for advanced usage
-export { joinSelectors, cartesianSelectors } from './lib/utils/selectors.js';
-export { formatContentValue } from './lib/utils/content.js';
-export { jsKeyToCssKey, isEndValue } from './lib/utils/common.js';
-export { processMediaQueries } from './lib/utils/media.js';
-export { obj2css, prettifyCss } from './lib/utils/obj2css.js';
+export * from "./lib/types/index.js";
+export * from "./lib/index.js";
 export function greet() {
-    return 'esm-styles 0.1.2';
+    return "esm-styles 0.1.4";
 }

package/dist/lib/build.d.ts

@@ -0,0 +1 @@
+export declare function build(configPath?: string): Promise<void>;

package/dist/lib/build.js

@@ -0,0 +1,184 @@
+import { getCss } from './index.js';
+import { getCssVariables } from './utils/index.js';
+import { getMediaShorthands } from './utils/media-shorthand.js';
+import { isEndValue } from './utils/index.js';
+import path from 'node:path';
+import fs from 'node:fs/promises';
+import { inspect } from 'node:util';
+import _ from 'lodash';
+export async function build(configPath = 'esm-styles.config.js') {
+    // --- Supporting module generation ---
+    // Debug: log mergedSets and sets
+    // console.log('[DEBUG] sets:', sets)
+    // console.log('[DEBUG] mergedSets:', inspect(mergedSets, { depth: 10 }))
+    // 1. Load config
+    const configFile = path.isAbsolute(configPath)
+        ? configPath
+        : path.resolve(process.cwd(), configPath);
+    const config = (await import(configFile)).default;
+    const basePath = path.resolve(process.cwd(), config.basePath || '.');
+    const sourcePath = path.join(basePath, config.sourcePath || '');
+    const outputPath = path.join(basePath, config.outputPath || '');
+    const suffix = config.sourceFilesSuffix || '.styles.mjs';
+    const layers = config.layers || [];
+    const mainCssFile = config.mainCssFile || 'styles.css';
+    // Merge media shorthands
+    const mediaShorthands = getMediaShorthands(config);
+    // Ensure output directory exists
+    await fs.mkdir(outputPath, { recursive: true });
+    const cssFiles = [];
+    // 2. Process globalVariables
+    if (config.globalVariables) {
+        const inputFile = path.join(sourcePath, `${config.globalVariables}${suffix}`);
+        const outputFile = path.join(outputPath, `global.css`);
+        const fileUrl = pathToFileUrl(inputFile).href + `?update=${Date.now()}`;
+        const varsObj = (await import(fileUrl)).default;
+        const cssVars = getCssVariables(varsObj);
+        const rootSelector = config.globalRootSelector || ':root';
+        const wrappedCss = `${rootSelector} {\n${cssVars}\n}`;
+        await fs.writeFile(outputFile, wrappedCss, 'utf8');
+        cssFiles.push({ type: 'global', file: 'global.css' });
+    }
+    // 3. Process media variable sets
+    if (config.media && config.mediaSelectors) {
+        for (const mediaType of Object.keys(config.media)) {
+            const sets = config.media[mediaType]; // e.g. ['light', 'twilight', 'dark']
+            let prevVarsObj = {};
+            // Collect all merged sets for supporting module
+            const mergedSets = {};
+            for (const setName of sets) {
+                // Inheritance: merge with previous
+                const inputFile = path.join(sourcePath, `${setName}${suffix}`);
+                const fileUrl = pathToFileUrl(inputFile).href + `?update=${Date.now()}`;
+                const varsObj = _.merge({}, prevVarsObj, (await import(fileUrl)).default);
+                prevVarsObj = varsObj;
+                mergedSets[setName] = _.cloneDeep(varsObj);
+                // For each selector config for this set
+                const selectorConfigs = config.mediaSelectors?.[mediaType]?.[setName] || [];
+                for (const selectorConfig of selectorConfigs) {
+                    const { selector, mediaQuery, prefix } = selectorConfig;
+                    // File name: {prefix.}{setName}.{mediaType}.css
+                    const prefixPart = prefix ? `${prefix}.` : '';
+                    const fileName = `${prefixPart}${setName}.${mediaType}.css`;
+                    const outputFile = path.join(outputPath, fileName);
+                    const cssVars = getCssVariables(varsObj);
+                    const rootSelector = config.globalRootSelector || ':root';
+                    let fullSelector = rootSelector;
+                    if (selector) {
+                        // If selector starts with combinator or pseudo, don't add space
+                        if (/^[.:#[]./.test(selector)) {
+                            fullSelector = `${rootSelector}${selector}`;
+                        }
+                        else {
+                            fullSelector = `${rootSelector} ${selector}`;
+                        }
+                    }
+                    const block = `${fullSelector} {\n${cssVars}\n}`;
+                    await fs.writeFile(outputFile, block, 'utf8');
+                    cssFiles.push({
+                        type: 'media',
+                        file: fileName,
+                        mediaType,
+                        setName,
+                        mediaQuery,
+                    });
+                }
+            }
+            // --- Supporting module generation ---
+            // Debug: log mergedSets and sets
+            console.log('[DEBUG] sets:', sets);
+            console.log('[DEBUG] mergedSets:', inspect(mergedSets, { depth: 10 }));
+            // Define the recursive function here so it has access to sets and mergedSets
+            const buildSupportingModule = (path, isRoot) => {
+                const allKeys = new Set();
+                for (const set of sets) {
+                    const v = path.length === 0 ? mergedSets[set] : _.get(mergedSets[set], path);
+                    if (v && typeof v === 'object' && !Array.isArray(v)) {
+                        Object.keys(v).forEach((k) => allKeys.add(k));
+                    }
+                    else if (v !== undefined && !isRoot) {
+                        allKeys.add(''); // placeholder for leaf, but only at non-root
+                    }
+                }
+                // Debug: show allKeys and values at this path
+                console.log('[DEBUG] path:', path.join('.'), 'allKeys:', Array.from(allKeys));
+                for (const set of sets) {
+                    const v = path.length === 0 ? mergedSets[set] : _.get(mergedSets[set], path);
+                    console.log('[DEBUG] set:', set, 'path:', path.join('.'), 'value:', JSON.stringify(v));
+                }
+                const result = {};
+                for (const key of allKeys) {
+                    if (key === '') {
+                        // Only possible at non-root
+                        const varName = '--' + path.map((k) => k.replace(/_/g, '-')).join('-');
+                        const leaf = { var: varName };
+                        for (let i = 0; i < sets.length; i++) {
+                            const v = path.length === 0
+                                ? mergedSets[sets[i]]
+                                : _.get(mergedSets[sets[i]], path);
+                            if (isEndValue(v)) {
+                                leaf[sets[i]] = v;
+                            }
+                        }
+                        if (Object.keys(leaf).length > 1) {
+                            return leaf;
+                        }
+                    }
+                    else {
+                        const child = buildSupportingModule([...path, key], false);
+                        if (child && Object.keys(child).length > 0) {
+                            result[key] = child;
+                        }
+                    }
+                }
+                // Debug log for each recursion
+                console.log('[DEBUG] path:', path.join('.'), 'result:', JSON.stringify(result, null, 2));
+                return result;
+            };
+            const supportingModuleObj = buildSupportingModule([], true);
+            const supportingModulePath = path.join(sourcePath, `$${mediaType}.mjs`);
+            const moduleContent = `export default ${JSON.stringify(supportingModuleObj, null, 2)}\n`;
+            await fs.writeFile(supportingModulePath, moduleContent, 'utf8');
+        }
+    }
+    // 4. Process each layer (legacy, keep for now)
+    for (const layer of layers) {
+        const inputFile = path.join(sourcePath, `${layer}${suffix}`);
+        const outputFile = path.join(outputPath, `${layer}.css`);
+        const fileUrl = pathToFileUrl(inputFile).href + `?update=${Date.now()}`;
+        const stylesObj = (await import(fileUrl)).default;
+        // Always call getCss for the layer object, so media queries are rendered
+        const css = getCss(stylesObj, {
+            ...mediaShorthands,
+            globalRootSelector: config.globalRootSelector,
+        });
+        const wrappedCss = `@layer ${layer} {\n${css}\n}`;
+        await fs.writeFile(outputFile, wrappedCss, 'utf8');
+        cssFiles.push({ layer, file: `${layer}.css` });
+    }
+    // 5. Create main CSS file
+    const mainCssPath = path.join(outputPath, mainCssFile);
+    // Compose imports for variable sets
+    const varImports = cssFiles
+        .filter((f) => f.type === 'global' || f.type === 'media')
+        .map((f) => {
+        if (f.mediaQuery) {
+            return `@import '${f.file}' ${f.mediaQuery};`;
+        }
+        return `@import '${f.file}';`;
+    })
+        .join('\n');
+    // Compose imports for layers
+    const layerFiles = cssFiles.filter((f) => f.layer).map((f) => f.file);
+    const layerNames = cssFiles
+        .filter((f) => f.layer)
+        .map((f) => f.layer)
+        .join(', ');
+    const layerImports = layerFiles.map((f) => `@import '${f}';`).join('\n');
+    const mainCss = [varImports, layerNames ? `@layer ${layerNames};` : '', layerImports]
+        .filter(Boolean)
+        .join('\n') + '\n';
+    await fs.writeFile(mainCssPath, mainCss, 'utf8');
+}
+// Helper for file URL import
+import { pathToFileURL as pathToFileUrl } from 'node:url';

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/index.d.ts

@@ -0,0 +1,3 @@
+import type { CssJsObject, GetCssOptions, CssString } from './types/index.js';
+export declare function getCss(styles: CssJsObject, options?: GetCssOptions): CssString;
+export * from './types/index.js';

package/dist/lib/index.js

@@ -0,0 +1,211 @@
+import * as utils from './utils/index.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})`;
+            }
+            else {
+                props[cssKey] = cssKey === 'content' ? utils.contentValue(value) : value;
+            }
+        }
+        else if (typeof value === 'object' && value !== null) {
+            if (key.startsWith('@media ')) {
+                // Recursively walk value, collecting rules for this media block
+                const nested = flatWalk(value, selectorPath, { rules: [], media: {}, layers: {} }, options, [...currentMedia, key]);
+                const mediaKey = [...currentMedia, key].join(' && ');
+                if (!result.media[mediaKey])
+                    result.media[mediaKey] = [];
+                result.media[mediaKey].push(...nested.rules);
+                // Also merge any nested media
+                for (const nestedMediaKey in nested.media) {
+                    if (!result.media[nestedMediaKey])
+                        result.media[nestedMediaKey] = [];
+                    result.media[nestedMediaKey].push(...nested.media[nestedMediaKey]);
+                }
+            }
+            else if (key.startsWith('@layer ')) {
+                if (!result.layers[key])
+                    result.layers[key] = { rules: [], media: {}, layers: {} };
+                flatWalk(value, selectorPath, result.layers[key], options, currentMedia);
+            }
+            else if (key.startsWith('@')) {
+                // Other special keys (shorthands, etc.)
+                const shorthand = key.slice(1);
+                let handled = false;
+                if (options.mediaQueries && options.mediaQueries[shorthand]) {
+                    const mediaKey = `@media ${options.mediaQueries[shorthand]}`;
+                    flatWalk(value, selectorPath, result, options, [
+                        ...currentMedia,
+                        mediaKey,
+                    ]);
+                    handled = true;
+                }
+                if (options.selectorShorthands &&
+                    options.selectorShorthands[shorthand]) {
+                    const root = options.globalRootSelector || ':root';
+                    for (const entry of options.selectorShorthands[shorthand]) {
+                        if (entry.selector && !entry.mediaQuery) {
+                            flatWalk(value, [[root + entry.selector], ...selectorPath], result, options, currentMedia);
+                            handled = true;
+                        }
+                        if (entry.selector && entry.mediaQuery) {
+                            const mediaKey = `@media ${entry.mediaQuery}`;
+                            flatWalk(value, [[root + entry.selector], ...selectorPath], result, options, [...currentMedia, mediaKey]);
+                            handled = true;
+                        }
+                        if (!entry.selector && entry.mediaQuery) {
+                            const mediaKey = `@media ${entry.mediaQuery}`;
+                            flatWalk(value, selectorPath, result, options, [
+                                ...currentMedia,
+                                mediaKey,
+                            ]);
+                            handled = true;
+                        }
+                    }
+                }
+                if (!handled) {
+                    if (key.startsWith('@media') || key.startsWith('@layer')) {
+                        // skip
+                    }
+                    else {
+                        const parts = key.split(',').map((k) => k.trim());
+                        flatWalk(value, [...selectorPath, parts], result, options, currentMedia);
+                    }
+                }
+            }
+            else {
+                // Always treat as selector segment if not a special key
+                const parts = key.split(',').map((k) => k.trim());
+                flatWalk(value, [...selectorPath, parts], result, options, currentMedia);
+            }
+        }
+    }
+    if (Object.keys(props).length > 0) {
+        const selectors = utils.joinSelectorPath(selectorPath);
+        for (const selector of selectors) {
+            if (currentMedia.length === 0) {
+                result.rules.push({ selector, declarations: { ...props } });
+            }
+            else {
+                const mediaKey = currentMedia.join(' && ');
+                if (!result.media[mediaKey])
+                    result.media[mediaKey] = [];
+                result.media[mediaKey].push({ selector, declarations: { ...props } });
+            }
+        }
+    }
+    return result;
+}
+function renderRules(rules) {
+    let css = '';
+    const groups = {};
+    for (const rule of rules) {
+        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 key in declarations) {
+            css += `  ${key}: ${declarations[key]};\n`;
+        }
+        css += '}\n';
+    }
+    return css;
+}
+function renderLayers(layers) {
+    let css = '';
+    for (const key in layers) {
+        css += `${key} {\n`;
+        css += renderRules(layers[key].rules);
+        css += renderFlatMedia(layers[key].media);
+        css += renderLayers(layers[key].layers);
+        css += '}\n';
+    }
+    return css;
+}
+function renderFlatMedia(media) {
+    let css = '';
+    for (const key in media) {
+        // If the key contains '&&', recursively nest the media blocks
+        const mediaParts = key.split(' && ');
+        if (mediaParts.length > 1) {
+            css += mediaParts.reduceRight((inner, part) => `${part} {\n${inner}\n}`, renderFlatMedia({ ['']: media[key] }));
+        }
+        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';
+            }
+        }
+        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 += '}\n';
+        }
+    }
+    return css;
+}
+function mergeMedia(target, source) {
+    for (const key in source) {
+        if (!target[key])
+            target[key] = [];
+        target[key].push(...source[key]);
+    }
+}
+export function getCss(styles, options = {}) {
+    const result = flatWalk(styles, [], { rules: [], media: {}, layers: {} }, options);
+    if (typeof console !== 'undefined') {
+        // console.log(
+        //   '[esm-styles] flatWalk result:',
+        //   JSON.stringify(result, null, 2)
+        // )
+    }
+    let css = '';
+    css += renderRules(result.rules);
+    css += renderFlatMedia(result.media);
+    css += renderLayers(result.layers);
+    return utils.prettifyCssString(css);
+}
+export * from './types/index.js';

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

@@ -1,43 +1,45 @@
 /**
  * Type definitions for the CSS in JS library
  */
-/**
- * CSS property value - can be string, number, or boolean
- */
-export type CssValue = string | number | boolean | null;
-/**
- * CSS selector or CSS property name
- */
-export type CssKey = string;
-/**
- * CSS styles object that can contain nested selectors or properties
- */
-export interface CssStyles {
-    [key: CssKey]: CssValue | CssStyles;
-}
-/**
- * Named media queries configuration
- */
-export interface MediaQueries {
-    [name: string]: string;
-}
-/**
- * Media prefixes configuration
- */
-export interface MediaPrefixes {
-    [name: string]: string;
-}
-/**
- * Auto mode configuration for color schemes
- */
-export interface AutoConfig {
-    [mode: string]: [string, string];
-}
-/**
- * Configuration for the CSS generator
- */
-export interface CssConfig {
-    mediaQueries?: MediaQueries;
-    mediaPrefixes?: MediaPrefixes;
-    auto?: AutoConfig;
+export type CssJsObject = Record<string, any>;
+export interface GetCssOptions {
+    mediaQueries?: Record<string, string>;
+    mediaPrefixes?: Record<string, string>;
+    auto?: Record<string, string[]>;
+    globalRootSelector?: string;
+    selectorShorthands?: Record<string, {
+        selector?: string;
+        mediaQuery?: string;
+        prefix?: string;
+    }[]>;
 }
+export type CssString = string;
+export type CssPropertyValue = string | number;
+export type CssRuleObject = Record<string, CssPropertyValue>;
+export type CssAstNode = {
+    type: 'rule';
+    selector: string;
+    declarations: CssRuleObject;
+} | {
+    type: 'group';
+    children: CssAstNode[];
+} | {
+    type: 'at-rule';
+    name: string;
+    params: string;
+    children: CssAstNode[];
+};
+export type SelectorPath = string[][];
+export type WalkCallback = (node: any, path: SelectorPath) => void;
+export type JsKeyToCssKey = (key: string) => string;
+export type IsEndValue = (value: any) => boolean;
+export type JoinSelectorPath = (path: SelectorPath) => string;
+export type ContentValue = (value: string) => string;
+export type CartesianProduct = <T>(arrays: T[][]) => T[][];
+export type PrettifyCssString = (css: string) => string;
+export type MediaQueryHandler = (name: string, node: any, path: SelectorPath, options: GetCssOptions) => string;
+export type LayerHandler = (name: string, node: any, path: SelectorPath, options: GetCssOptions) => string;
+export type ContainerQueryHandler = (name: string, node: any, path: SelectorPath, options: GetCssOptions) => string;
+export type IsHtmlTag = (key: string) => boolean;
+export type IsSpecialSelector = (key: string) => boolean;
+export type IsClassSelector = (key: string) => boolean;

package/dist/lib/types/index.js

@@ -2,3 +2,4 @@
  * Type definitions for the CSS in JS library
  */
 export {};
+// End values can be string, number, array of such, or an object with a 'var' property and variable set keys.

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

@@ -0,0 +1 @@
+export declare function cartesianProduct<T>(arrays: T[][]): T[][];

package/dist/lib/utils/cartesian.js

@@ -0,0 +1,7 @@
+export function cartesianProduct(arrays) {
+    if (!arrays.length)
+        return [];
+    return arrays.reduce((a, b) => a.flatMap((d) => b.map((e) => [...d, e])), [
+        [],
+    ]);
+}

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

@@ -1,9 +1,2 @@
-/**
- * Utilities for handling CSS content property values
- */
-/**
- * Converts a JavaScript string value to a valid CSS content property value
- * @param value - String value to convert for CSS content property
- * @returns CSS-compatible content value
- */
-export declare function formatContentValue(value: string | number | boolean | null): string;
+import type { ContentValue } from '../types/index.js';
+export declare const contentValue: ContentValue;

package/dist/lib/utils/content.js

@@ -1,33 +1,19 @@
-/**
- * Utilities for handling CSS content property values
- */
-/**
- * Converts a JavaScript string value to a valid CSS content property value
- * @param value - String value to convert for CSS content property
- * @returns CSS-compatible content value
- */
-export function formatContentValue(value) {
-    if (value === null)
-        return 'none';
-    const stringValue = String(value);
-    // If it's already wrapped in quotes, return as is
-    if (/^['"].*['"]$/.test(stringValue)) {
-        return stringValue;
-    }
-    // Handle unicode and emoji characters
-    const formattedValue = Array.from(stringValue)
-        .map((char) => {
-        const codePoint = char.codePointAt(0);
-        if (!codePoint)
-            return char;
-        // Convert emoji and special characters to unicode escape sequences
-        // Control characters and non-ASCII characters need escaping
-        if (codePoint > 127 || codePoint < 32) {
-            return `\\${codePoint.toString(16).padStart(6, '0')}`;
-        }
-        return char;
+export const contentValue = value => {
+    if (typeof value !== 'string')
+        return value;
+    // If already quoted, return as is
+    if (/^'.*'$/.test(value) || /^".*"$/.test(value))
+        return value;
+    // Convert each character to CSS unicode escape: \00xxxx
+    const unicode = value
+        .split('')
+        .map(ch => {
+        const code = ch.codePointAt(0);
+        if (!code)
+            return '';
+        // CSS unicode escape: \00xxxx (4 hex digits, single backslash)
+        return '\\00' + code.toString(16).padStart(4, '0');
     })
         .join('');
-    // Wrap in single quotes if not already wrapped
-    return `'${formattedValue}'`;
-}
+    return `'${unicode}'`;
+};

package/dist/lib/utils/end-value.d.ts

@@ -0,0 +1,2 @@
+import type { IsEndValue } from '../types/index.js';
+export declare const isEndValue: IsEndValue;

package/dist/lib/utils/end-value.js

@@ -0,0 +1,16 @@
+export const isEndValue = (value) => {
+    if (value == null)
+        return false;
+    if (typeof value === 'string' || typeof value === 'number')
+        return true;
+    if (Array.isArray(value)) {
+        return value.every((v) => typeof v === 'string' || typeof v === 'number');
+    }
+    if (typeof value === 'object' &&
+        value !== null &&
+        'var' in value &&
+        typeof value.var === 'string') {
+        return true;
+    }
+    return false;
+};

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

@@ -0,0 +1,2 @@
+import type { IsEndValue } from '../types/index.js';
+export declare const isEndValue: IsEndValue;

package/dist/lib/utils/endValue.js

@@ -0,0 +1,10 @@
+export const isEndValue = (value) => {
+    if (value == null)
+        return false;
+    if (typeof value === 'string' || typeof value === 'number')
+        return true;
+    if (Array.isArray(value)) {
+        return value.every((v) => typeof v === 'string' || typeof v === 'number');
+    }
+    return false;
+};

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

@@ -0,0 +1,2 @@
+import type { PrettifyCssString } from '../types/index.js';
+export declare const prettifyCssString: PrettifyCssString;

package/dist/lib/utils/format.js

@@ -0,0 +1,15 @@
+// CSS formatting utility for getCss
+import beautify from 'js-beautify';
+export const prettifyCssString = (cssString) => {
+    // Simple pretty-print: trim and collapse extra whitespace
+    // return css
+    //   .replace(/\s+/g, ' ')
+    //   .replace(/\s*{\s*/g, ' {\n  ')
+    //   .replace(/;\s*/g, ';\n  ')
+    //   .replace(/}\s*/g, '\n}\n')
+    //   .trim()
+    return beautify.css(cssString, {
+        indent_size: 2,
+        end_with_newline: true,
+    });
+};

package/dist/lib/utils/get-css-variables.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Flattens a nested JS object into CSS variable declarations.
+ * Example:
+ *   { colors: { paper: { normal: '#212121' } } }
+ *   => [ '--colors-paper-normal: #212121;' ]
+ */
+export declare function getCssVariables(obj: Record<string, any>, options?: {
+    prefix?: string;
+}): string;

package/dist/lib/utils/get-css-variables.js

@@ -0,0 +1,24 @@
+import _ from 'lodash';
+/**
+ * Flattens a nested JS object into CSS variable declarations.
+ * Example:
+ *   { colors: { paper: { normal: '#212121' } } }
+ *   => [ '--colors-paper-normal: #212121;' ]
+ */
+export function getCssVariables(obj, options = {}) {
+    const result = [];
+    function walk(current, path = []) {
+        if (_.isPlainObject(current)) {
+            for (const key in current) {
+                walk(current[key], [...path, key]);
+            }
+        }
+        else {
+            // Leaf value: build variable name
+            const varName = '--' + path.map(k => k.replace(/_/g, '-')).join('-');
+            result.push(`${varName}: ${current};`);
+        }
+    }
+    walk(obj);
+    return result.join('\n');
+}

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

@@ -0,0 +1,8 @@
+export * from './selector.js';
+export * from './key.js';
+export * from './content.js';
+export * from './cartesian.js';
+export * from './format.js';
+export * from './end-value.js';
+export * from './get-css-variables.js';
+export * from './media-shorthand.js';

package/dist/lib/utils/index.js

@@ -0,0 +1,8 @@
+export * from './selector.js';
+export * from './key.js';
+export * from './content.js';
+export * from './cartesian.js';
+export * from './format.js';
+export * from './end-value.js';
+export * from './get-css-variables.js';
+export * from './media-shorthand.js';

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

@@ -0,0 +1,2 @@
+import type { JsKeyToCssKey } from '../types/index.js';
+export declare const jsKeyToCssKey: JsKeyToCssKey;

package/dist/lib/utils/key.js

@@ -0,0 +1,7 @@
+export const jsKeyToCssKey = (key) => {
+    // Convert camelCase or PascalCase to kebab-case
+    return key
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+        .toLowerCase();
+};

package/dist/lib/utils/media-shorthand.d.ts

@@ -0,0 +1,12 @@
+interface MediaShorthand {
+    selector?: string;
+    mediaQuery?: string;
+    prefix?: string;
+}
+export interface MediaShorthandResult {
+    mediaQueries: Record<string, string>;
+    selectorShorthands: Record<string, MediaShorthand[]>;
+    allShorthands: Record<string, MediaShorthand[]>;
+}
+export declare function getMediaShorthands(config: any): MediaShorthandResult;
+export {};

package/dist/lib/utils/media-shorthand.js

@@ -0,0 +1,56 @@
+export function getMediaShorthands(config) {
+    const mediaQueries = { ...config.mediaQueries };
+    const selectorShorthands = {};
+    const allShorthands = {};
+    const usedNames = new Set();
+    // 1. From mediaSelectors
+    if (config.mediaSelectors) {
+        for (const mediaType of Object.keys(config.mediaSelectors)) {
+            const variants = config.mediaSelectors[mediaType];
+            for (const variantName of Object.keys(variants)) {
+                const entries = variants[variantName];
+                for (const entry of entries) {
+                    // If has mediaQuery and no selector: treat as media query
+                    if (entry.mediaQuery && !entry.selector) {
+                        if (mediaQueries[variantName]) {
+                            console.warn(`[esm-styles] Warning: Duplicate media shorthand '${variantName}' in both mediaQueries and mediaSelectors. Using value from mediaQueries.`);
+                            continue;
+                        }
+                        mediaQueries[variantName] = entry.mediaQuery;
+                        usedNames.add(variantName);
+                        allShorthands[variantName] = allShorthands[variantName] || [];
+                        allShorthands[variantName].push({ mediaQuery: entry.mediaQuery });
+                    }
+                    // If has selector: treat as selector shorthand
+                    if (entry.selector) {
+                        selectorShorthands[variantName] =
+                            selectorShorthands[variantName] || [];
+                        selectorShorthands[variantName].push({
+                            selector: entry.selector,
+                            mediaQuery: entry.mediaQuery,
+                            prefix: entry.prefix,
+                        });
+                        usedNames.add(variantName);
+                        allShorthands[variantName] = allShorthands[variantName] || [];
+                        allShorthands[variantName].push({
+                            selector: entry.selector,
+                            mediaQuery: entry.mediaQuery,
+                            prefix: entry.prefix,
+                        });
+                    }
+                }
+            }
+        }
+    }
+    // 2. From mediaQueries (overrides)
+    if (config.mediaQueries) {
+        for (const name of Object.keys(config.mediaQueries)) {
+            if (usedNames.has(name)) {
+                console.warn(`[esm-styles] Warning: Duplicate media shorthand '${name}' in both mediaQueries and mediaSelectors. Using value from mediaQueries.`);
+            }
+            mediaQueries[name] = config.mediaQueries[name];
+            allShorthands[name] = [{ mediaQuery: config.mediaQueries[name] }];
+        }
+    }
+    return { mediaQueries, selectorShorthands, allShorthands };
+}

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/dist/lib/utils/selector.d.ts

@@ -0,0 +1,4 @@
+import type { IsSpecialSelector, IsClassSelector } from '../types/index.js';
+export declare const isSpecialSelector: IsSpecialSelector;
+export declare const isClassSelector: IsClassSelector;
+export declare const joinSelectorPath: (path: string[][]) => string[];

package/dist/lib/utils/selector.js

@@ -0,0 +1,186 @@
+import * as utils from './cartesian.js';
+// List of standard HTML tags (not exhaustive, but covers common cases)
+const HTML_TAGS = new Set([
+    'html',
+    'body',
+    'div',
+    'span',
+    'p',
+    'a',
+    'ul',
+    'ol',
+    'li',
+    'img',
+    'input',
+    'textarea',
+    'button',
+    'form',
+    'label',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'th',
+    'td',
+    'section',
+    'article',
+    'nav',
+    'header',
+    'footer',
+    'main',
+    'aside',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'video',
+    'audio',
+    'canvas',
+    'svg',
+    'select',
+    'option',
+    'blockquote',
+    'pre',
+    'code',
+    'figure',
+    'figcaption',
+    'dl',
+    'dt',
+    'dd',
+    'fieldset',
+    'legend',
+    'details',
+    'summary',
+    'iframe',
+    'picture',
+    'source',
+    'map',
+    'area',
+    'meta',
+    'link',
+    'style',
+    'script',
+    'noscript',
+    'b',
+    'i',
+    'u',
+    's',
+    'em',
+    'strong',
+    'small',
+    'cite',
+    'q',
+    'dfn',
+    'abbr',
+    'data',
+    'time',
+    'mark',
+    'ruby',
+    'rt',
+    'rp',
+    'bdi',
+    'bdo',
+    'span',
+    'br',
+    'wbr',
+    'ins',
+    'del',
+    'sub',
+    'sup',
+    'hr',
+    'progress',
+    'meter',
+    'output',
+    'details',
+    'dialog',
+    'menu',
+    'menuitem',
+    'fieldset',
+    'legend',
+    'datalist',
+    'optgroup',
+    'keygen',
+    'command',
+    'track',
+    'embed',
+    'object',
+    'param',
+    'col',
+    'colgroup',
+    'caption',
+    'address',
+    'applet',
+    'base',
+    'basefont',
+    'big',
+    'center',
+    'dir',
+    'font',
+    'frame',
+    'frameset',
+    'isindex',
+    'listing',
+    'marquee',
+    'multicol',
+    'nextid',
+    'nobr',
+    'noembed',
+    'noframes',
+    'plaintext',
+    'rb',
+    'rtc',
+    'strike',
+    'tt',
+    'xmp',
+]);
+const isHtmlTag = (key) => {
+    // Only match if the key is a plain tag name (no underscores, no special chars)
+    return HTML_TAGS.has(key);
+};
+export const isSpecialSelector = (key) => {
+    // Pseudo-classes/elements, id, attribute selectors
+    return (key.startsWith(':') ||
+        key.startsWith('::') ||
+        key.startsWith('#') ||
+        key.startsWith('['));
+};
+export const isClassSelector = (key) => {
+    // _foo = class, __foo = descendant class
+    return key.startsWith('_');
+};
+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) => {
+        if (part.startsWith('__')) {
+            return acc + (acc ? ' ' : '') + '.' + part.slice(2);
+        }
+        else if (part.startsWith('_')) {
+            return acc + (acc ? ' ' : '') + '.' + part.slice(1);
+        }
+        else if (part.startsWith('>') ||
+            part.startsWith('+') ||
+            part.startsWith('~')) {
+            // Combinators: always join with a space
+            return acc + ' ' + part;
+        }
+        else if (part.startsWith(':') ||
+            part.startsWith('::') ||
+            part.startsWith('#') ||
+            part.startsWith('[') ||
+            part.startsWith('.')) {
+            return acc + part;
+        }
+        else if (isHtmlTag(part)) {
+            return acc + (acc ? ' ' : '') + part;
+        }
+        else {
+            // Not a tag, not a special selector: treat as class
+            return acc + (acc ? '' : '') + '.' + part;
+        }
+    }, ''));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esm-styles",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "description": "A library for working with ESM styles",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,7 +15,8 @@
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "test:watch": "node --experimental-vm-modules node_modules/jest/bin/jest.js --watch",
     "test:coverage": "node --experimental-vm-modules node_modules/jest/bin/jest.js --coverage",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "watch": "node watch.js"
   },
   "keywords": [
     "esm",
@@ -27,14 +28,24 @@
   "engines": {
     "node": ">=14.16"
   },
+  "bin": {
+    "build": "dist/build.js"
+  },
   "devDependencies": {
-    "@types/jest": "^29.5.11",
+    "@types/jest": "^29.5.14",
+    "@types/js-beautify": "^1.14.3",
+    "@types/lodash": "^4.17.16",
     "@types/node": "^20.11.0",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "@typescript-eslint/parser": "^6.18.1",
     "eslint": "^8.56.0",
     "jest": "^29.7.0",
-    "ts-jest": "^29.1.1",
-    "typescript": "^5.3.3"
+    "lodash": "^4.17.21",
+    "nodemon": "^3.1.9",
+    "ts-jest": "^29.3.2",
+    "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "js-beautify": "^1.15.4"
   }
 }