esm-styles 0.1.0

package/README.md

@@ -0,0 +1,155 @@
+# ESM Styles
+
+A TypeScript library for converting JavaScript objects to CSS strings, allowing for a cleaner syntax when writing CSS-in-JS.
+
+## Installation
+
+```bash
+npm install esm-styles
+```
+
+## Usage
+
+### Basic Usage
+
+```javascript
+import { getCss } from 'esm-styles'
+
+const styles = {
+  body: {
+    margin: 0,
+    padding: 0,
+    fontFamily: 'sans-serif',
+
+    header: {
+      backgroundColor: '#333',
+      color: 'white',
+      padding: '1rem',
+    },
+
+    'main, article': {
+      maxWidth: '800px',
+      margin: '0 auto',
+      padding: '1rem',
+    },
+
+    footer: {
+      textAlign: 'center',
+      padding: '1rem',
+      backgroundColor: '#f5f5f5',
+    },
+  },
+}
+
+const css = getCss(styles)
+console.log(css)
+```
+
+This will output CSS with nested selectors properly expanded:
+
+```css
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+body header {
+  background-color: #333;
+  color: white;
+  padding: 1rem;
+}
+
+body main,
+body article {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+body footer {
+  text-align: center;
+  padding: 1rem;
+  background-color: #f5f5f5;
+}
+```
+
+### Advanced Features
+
+#### Media Queries
+
+```javascript
+import { getCss } from 'esm-styles'
+
+const styles = {
+  body: {
+    fontSize: '16px',
+
+    '@media (max-width: 768px)': {
+      fontSize: '14px',
+    },
+  },
+}
+
+const css = getCss(styles)
+```
+
+#### Named Media Queries
+
+```javascript
+import { getCss } from 'esm-styles'
+
+const styles = {
+  container: {
+    width: '1200px',
+    '@tablet': {
+      width: '100%',
+      padding: '0 20px',
+    },
+    '@mobile': {
+      padding: '0 10px',
+    },
+  },
+}
+
+const mediaQueries = {
+  tablet: '(max-width: 1024px)',
+  mobile: '(max-width: 480px)',
+}
+
+const css = getCss(styles, mediaQueries)
+```
+
+#### Class and Tag Selectors
+
+```javascript
+import { getCss } from 'esm-styles'
+
+const styles = {
+  // Tag selector (div)
+  div: {
+    margin: '10px',
+
+    // Nested tag selector (p inside div)
+    p: {
+      lineHeight: 1.5,
+    },
+
+    // Class selector (with underscore prefix)
+    _highlight: {
+      backgroundColor: 'yellow',
+    },
+
+    // Descendant class selector (with double underscore)
+    __text: {
+      color: 'blue',
+    },
+  },
+}
+
+const css = getCss(styles)
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * esm-styles
+ *
+ * A library for working with CSS styles in ESM
+ */
+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 declare function greet(): string;

package/dist/index.js

@@ -0,0 +1,18 @@
+/**
+ * esm-styles
+ *
+ * A library for working with CSS styles in ESM
+ */
+// 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 function greet() {
+    return 'Hello from esm-styles!';
+}

package/dist/lib/getCss.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Main function for converting JavaScript objects to CSS
+ */
+import { CssStyles, MediaQueries, MediaPrefixes, AutoConfig } from './types/index.js';
+/**
+ * Converts a JavaScript style object to CSS string
+ * @param object - The JavaScript object to convert to CSS
+ * @param mediaQueries - Media query definitions (e.g., { 'phone': '(max-width: 499px)' })
+ * @param mediaPrefixes - Media prefix definitions (e.g., { 'dark': ':root.dark' })
+ * @param auto - Auto mode configuration (e.g., { 'dark': [':root.auto', 'screen and (prefers-color-scheme: dark)'] })
+ * @returns CSS string
+ */
+export declare function getCss(object: CssStyles, mediaQueries?: MediaQueries, mediaPrefixes?: MediaPrefixes, auto?: AutoConfig): string;
+export default getCss;

package/dist/lib/getCss.js

@@ -0,0 +1,247 @@
+/**
+ * Main function for converting JavaScript objects to CSS
+ */
+import { traverseObject, determineNodeType } from './utils/traversal.js';
+import { indent } from './utils/common.js';
+import { obj2css, prettifyCss } from './utils/obj2css.js';
+import { joinSelectors, cartesianSelectors } from './utils/selectors.js';
+import { formatContentValue } from './utils/content.js';
+import { jsKeyToCssKey } from './utils/common.js';
+import { processMediaQueries } from './utils/media.js';
+/**
+ * Converts a JavaScript style object to CSS string
+ * @param object - The JavaScript object to convert to CSS
+ * @param mediaQueries - Media query definitions (e.g., { 'phone': '(max-width: 499px)' })
+ * @param mediaPrefixes - Media prefix definitions (e.g., { 'dark': ':root.dark' })
+ * @param auto - Auto mode configuration (e.g., { 'dark': [':root.auto', 'screen and (prefers-color-scheme: dark)'] })
+ * @returns CSS string
+ */
+export function getCss(object, mediaQueries = {}, mediaPrefixes = {}, auto) {
+    // Initialize various objects to collect different types of CSS rules
+    let cssStyle = {};
+    const layerStatements = [];
+    let layerObject = {};
+    let containerObject = {};
+    let mediaObject = {};
+    let prefixObject = {};
+    // Process the object by traversing it and handling different node types
+    traverseObject(object, (node, path, _, __) => {
+        if (!path)
+            return node;
+        const nodeType = determineNodeType(node, path);
+        const pathParts = path.split('\\');
+        const key = pathParts.pop() || '';
+        switch (nodeType) {
+            case 'selector': {
+                // Handle CSS property-value pairs
+                const selector = joinSelectors(pathParts);
+                // Create cartesian product of selectors for comma-separated parts
+                if (pathParts.some((part) => part.includes(','))) {
+                    const classPaths = pathParts.map((part) => part.split(',').map((p) => p.trim()));
+                    const allPaths = cartesianSelectors(classPaths);
+                    // Apply the property-value to each selector
+                    allPaths.forEach((selectorPath) => {
+                        const cssKey = jsKeyToCssKey(key);
+                        let value = node;
+                        // Special handling for content property
+                        if (cssKey === 'content') {
+                            value = formatContentValue(value);
+                        }
+                        // Create the CSS object and merge it
+                        const cssObject = {
+                            [selectorPath]: { [cssKey]: value },
+                        };
+                        cssStyle = mergeDeep(cssStyle, cssObject);
+                    });
+                }
+                else {
+                    // Simple case - no commas in selectors
+                    const cssKey = jsKeyToCssKey(key);
+                    let value = node;
+                    // Special handling for content property
+                    if (cssKey === 'content') {
+                        value = formatContentValue(value);
+                    }
+                    // Create the CSS object and merge it
+                    const cssObject = {
+                        [selector]: { [cssKey]: value },
+                    };
+                    cssStyle = mergeDeep(cssStyle, cssObject);
+                }
+                break;
+            }
+            case 'layer statement': {
+                // Handle @layer statements
+                const statement = `${key}${node ? ' ' + node : ''};`;
+                if (!layerStatements.includes(statement)) {
+                    layerStatements.push(statement);
+                }
+                break;
+            }
+            case 'layer block': {
+                // Handle @layer blocks
+                const selector = joinSelectors(pathParts);
+                const object = { [key]: { [selector]: node } };
+                layerObject = mergeDeep(layerObject, object);
+                break;
+            }
+            case 'container query block': {
+                // Handle @container queries
+                const selector = joinSelectors(pathParts);
+                const object = { [key]: { [selector]: node } };
+                containerObject = mergeDeep(containerObject, object);
+                break;
+            }
+            case 'media query or prefix': {
+                // Handle media queries and prefixes
+                const selector = joinSelectors(pathParts);
+                const name = key.replace(/^@\s*/, '');
+                if (mediaPrefixes[name]) {
+                    // Handle media prefix
+                    const prefix = mediaPrefixes[name];
+                    const rules = selector ? { ['& ' + selector]: node } : node;
+                    const mediaPrefixObject = { [prefix]: rules };
+                    prefixObject = mergeDeep(prefixObject, mediaPrefixObject);
+                }
+                else {
+                    // Handle media query
+                    let mediaQuery = key;
+                    if (key.startsWith('@media ')) {
+                        // Use the media query as is, just remove @media prefix
+                        mediaQuery = key.replace(/^@media\s+/, '');
+                    }
+                    else if (mediaQueries[name]) {
+                        // Use the named media query from configuration
+                        mediaQuery = mediaQueries[name];
+                    }
+                    else {
+                        // Unknown media query type
+                        console.warn(`Warning: Media query type ${key} is unknown`);
+                        break;
+                    }
+                    const mediaQueryObject = {
+                        ['@media ' + mediaQuery]: { [selector]: node },
+                    };
+                    mediaObject = mergeDeep(mediaObject, mediaQueryObject);
+                }
+                break;
+            }
+        }
+        return node;
+    });
+    // Convert the main CSS style object to string
+    let cssString = obj2css(cssStyle);
+    // Add layer statements if any
+    if (layerStatements.length > 0) {
+        cssString = layerStatements.join('\n') + '\n\n' + cssString;
+    }
+    // Process and add layer blocks if any
+    if (Object.keys(layerObject).length > 0) {
+        const layers = Object.keys(layerObject);
+        const layerCssString = layers
+            .map((layer) => {
+            // Type guard for object values
+            const layerStyles = layerObject[layer];
+            if (!isObject(layerStyles))
+                return '';
+            const layerContent = getCss(layerStyles, mediaQueries, mediaPrefixes, auto);
+            return layerContent ? `${layer} {\n${indent(layerContent)}\n}` : '';
+        })
+            .filter(Boolean)
+            .join('\n\n');
+        if (layerCssString) {
+            cssString += '\n\n' + layerCssString;
+        }
+    }
+    // Process and add container queries if any
+    if (Object.keys(containerObject).length > 0) {
+        const containerQueries = Object.keys(containerObject);
+        const containerCssString = containerQueries
+            .map((containerQuery) => {
+            // Type guard for object values
+            const containerStyles = containerObject[containerQuery];
+            if (!isObject(containerStyles))
+                return '';
+            const containerContent = getCss(containerStyles, mediaQueries, mediaPrefixes, auto);
+            return containerContent
+                ? `${containerQuery} {\n${indent(containerContent)}\n}`
+                : '';
+        })
+            .filter(Boolean)
+            .join('\n\n');
+        if (containerCssString) {
+            cssString += '\n\n' + containerCssString;
+        }
+    }
+    // Process and add media queries if any
+    if (Object.keys(mediaObject).length > 0) {
+        const mediaCssString = processMediaQueries(mediaObject, mediaQueries);
+        if (mediaCssString) {
+            cssString += '\n\n' + mediaCssString;
+        }
+    }
+    // Process and add media prefixes if any
+    if (Object.keys(prefixObject).length > 0) {
+        // First, process the prefix object as normal CSS
+        const mediaPrefixedCssString = getCss(prefixObject, mediaQueries, mediaPrefixes);
+        cssString += '\n\n' + mediaPrefixedCssString;
+        // Handle auto mode if configured
+        if (auto) {
+            // Create a modified prefix object for auto mode
+            const autoPrefixObject = {};
+            for (const key of Object.keys(auto)) {
+                const selector = mediaPrefixes[key];
+                if (!selector || !prefixObject[selector])
+                    continue;
+                const [autoSelector, mediaQuery] = auto[key];
+                // Create media query for auto mode
+                autoPrefixObject[`@media ${mediaQuery}`] = {
+                    [autoSelector]: prefixObject[selector],
+                };
+            }
+            // Process the auto prefix object if not empty
+            if (Object.keys(autoPrefixObject).length > 0) {
+                const autoCssString = processMediaQueries(autoPrefixObject, mediaQueries);
+                if (autoCssString) {
+                    cssString += '\n\n' + autoCssString;
+                }
+            }
+        }
+    }
+    // Prettify the final CSS string
+    return prettifyCss(cssString.replace(/__bs__/g, '\\'));
+}
+/**
+ * Deep merge two objects
+ * @param target - Target object to merge into
+ * @param source - Source object to merge from
+ * @returns Merged object
+ */
+function mergeDeep(target, source) {
+    const output = { ...target };
+    if (isObject(target) && isObject(source)) {
+        Object.keys(source).forEach((key) => {
+            if (isObject(source[key])) {
+                if (!(key in target)) {
+                    output[key] = source[key];
+                }
+                else {
+                    output[key] = mergeDeep(target[key], source[key]);
+                }
+            }
+            else {
+                output[key] = source[key];
+            }
+        });
+    }
+    return output;
+}
+/**
+ * Checks if value is a non-null object
+ * @param item - Value to check
+ * @returns True if the value is a non-null object
+ */
+function isObject(item) {
+    return item && typeof item === 'object' && !Array.isArray(item);
+}
+export default getCss;

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

@@ -0,0 +1,43 @@
+/**
+ * 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;
+}

package/dist/lib/types/index.js

@@ -0,0 +1,4 @@
+/**
+ * Type definitions for the CSS in JS library
+ */
+export {};

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

@@ -0,0 +1,28 @@
+/**
+ * Utility functions for CSS processing
+ */
+/**
+ * Determines the object type in a more precise way than typeof
+ * @param obj - Any value to check type
+ * @returns The lowercase string representing the object type
+ */
+export declare function getObjectType(obj: any): string;
+/**
+ * Checks if a value is a primitive end value (string, number, boolean, null)
+ * @param value - Value to check
+ * @returns True if the value is a primitive end value
+ */
+export declare function isEndValue(value: any): boolean;
+/**
+ * Indents a string with spaces
+ * @param str - String to indent
+ * @param spaces - Number of spaces to indent with
+ * @returns Indented string
+ */
+export declare function indent(str: string, spaces?: number): string;
+/**
+ * Converts a JavaScript property name in camelCase to CSS kebab-case
+ * @param key - Property name in camelCase
+ * @returns Property name in kebab-case
+ */
+export declare function jsKeyToCssKey(key: string): string;

package/dist/lib/utils/common.js

@@ -0,0 +1,47 @@
+/**
+ * Utility functions for CSS processing
+ */
+/**
+ * Determines the object type in a more precise way than typeof
+ * @param obj - Any value to check type
+ * @returns The lowercase string representing the object type
+ */
+export function getObjectType(obj) {
+    return (Object.prototype.toString
+        .call(obj)
+        .match(/^\[object (\w+)\]$/)?.[1]
+        .toLowerCase() || 'unknown');
+}
+/**
+ * Checks if a value is a primitive end value (string, number, boolean, null)
+ * @param value - Value to check
+ * @returns True if the value is a primitive end value
+ */
+export function isEndValue(value) {
+    return ['string', 'number', 'boolean', 'null'].includes(getObjectType(value));
+}
+/**
+ * Indents a string with spaces
+ * @param str - String to indent
+ * @param spaces - Number of spaces to indent with
+ * @returns Indented string
+ */
+export function indent(str, spaces = 2) {
+    return str
+        .split('\n')
+        .map((s) => ' '.repeat(spaces) + s)
+        .join('\n');
+}
+/**
+ * Converts a JavaScript property name in camelCase to CSS kebab-case
+ * @param key - Property name in camelCase
+ * @returns Property name in kebab-case
+ */
+export function jsKeyToCssKey(key) {
+    // Keep vendor prefixes intact
+    const prefix = key.match(/^[-]+/)?.[0] || '';
+    const baseKey = key.replace(/^[-]+/, '');
+    // Convert camelCase to kebab-case
+    const kebabKey = baseKey.replace(/([A-Z])/g, '-$1').toLowerCase();
+    return prefix + kebabKey;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * 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;

package/dist/lib/utils/content.js

@@ -0,0 +1,33 @@
+/**
+ * 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;
+    })
+        .join('');
+    // Wrap in single quotes if not already wrapped
+    return `'${formattedValue}'`;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Utilities for handling media queries
+ */
+import { CssStyles, MediaQueries } from '../types/index.js';
+/**
+ * Processes media query objects and converts them to CSS
+ * @param mediaObject - Object containing media queries and their styles
+ * @param mediaQueries - Named media query definitions
+ * @returns CSS string with processed media queries
+ */
+export declare function processMediaQueries(mediaObject: CssStyles, mediaQueries?: MediaQueries): string;
+/**
+ * Checks if a key represents a media query
+ * @param key - Key to check
+ * @returns True if the key is a media query
+ */
+export declare function isMediaQuery(key: string): boolean;
+/**
+ * Checks if a key is a named media query that needs to be resolved
+ * @param key - Key to check
+ * @param mediaQueries - Named media query definitions
+ * @returns True if the key is a named media query
+ */
+export declare function isNamedMediaQuery(key: string, mediaQueries: MediaQueries): boolean;

package/dist/lib/utils/media.js

@@ -0,0 +1,66 @@
+/**
+ * Utilities for handling media queries
+ */
+import { indent } from './common.js';
+import { obj2css } from './obj2css.js';
+import { isEndValue } from './common.js';
+/**
+ * Processes media query objects and converts them to CSS
+ * @param mediaObject - Object containing media queries and their styles
+ * @param mediaQueries - Named media query definitions
+ * @returns CSS string with processed media queries
+ */
+export function processMediaQueries(mediaObject, mediaQueries = {}) {
+    if (!mediaObject || Object.keys(mediaObject).length === 0) {
+        return '';
+    }
+    const mediaQueriesToProcess = Object.keys(mediaObject);
+    // Process each media query and convert to CSS
+    const mediaCssStrings = mediaQueriesToProcess.map((queryKey) => {
+        // Handle named media queries (using @name syntax)
+        const mediaQueryMatch = queryKey.match(/^@(\w+)$/);
+        let actualQuery = queryKey;
+        if (mediaQueryMatch &&
+            mediaQueryMatch[1] &&
+            mediaQueries[mediaQueryMatch[1]]) {
+            // Replace named query with actual query definition
+            actualQuery = mediaQueries[mediaQueryMatch[1]];
+        }
+        else if (queryKey.startsWith('@media ')) {
+            // Strip @media prefix if present
+            actualQuery = queryKey.replace(/^@media\s+/, '');
+        }
+        // Convert the styles for this media query to CSS
+        const styles = mediaObject[queryKey];
+        // Skip if the styles aren't an object
+        if (isEndValue(styles)) {
+            return '';
+        }
+        const stylesCss = obj2css(styles);
+        if (!stylesCss.trim()) {
+            return '';
+        }
+        // Wrap the styles in a media query block
+        return `@media ${actualQuery} {\n${indent(stylesCss)}\n}`;
+    });
+    // Join all media query blocks with newlines
+    return mediaCssStrings.filter((css) => css).join('\n\n');
+}
+/**
+ * Checks if a key represents a media query
+ * @param key - Key to check
+ * @returns True if the key is a media query
+ */
+export function isMediaQuery(key) {
+    return key.startsWith('@media') || key.startsWith('@');
+}
+/**
+ * Checks if a key is a named media query that needs to be resolved
+ * @param key - Key to check
+ * @param mediaQueries - Named media query definitions
+ * @returns True if the key is a named media query
+ */
+export function isNamedMediaQuery(key, mediaQueries) {
+    const match = key.match(/^@(\w+)$/);
+    return Boolean(match && match[1] && mediaQueries[match[1]]);
+}

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

@@ -0,0 +1,15 @@
+/**
+ * Utilities for converting JavaScript objects to CSS strings
+ */
+/**
+ * Converts a CSS object to a string representation
+ * @param cssObject - Object with CSS selectors and properties
+ * @returns CSS string
+ */
+export declare function obj2css(cssObject: Record<string, any>): string;
+/**
+ * Prettifies a CSS string by ensuring consistent spacing and formatting
+ * @param cssString - CSS string to prettify
+ * @returns Prettified CSS string
+ */
+export declare function prettifyCss(cssString: string): string;

package/dist/lib/utils/obj2css.js

@@ -0,0 +1,79 @@
+/**
+ * Utilities for converting JavaScript objects to CSS strings
+ */
+/**
+ * Converts a CSS object to a string representation
+ * @param cssObject - Object with CSS selectors and properties
+ * @returns CSS string
+ */
+export function obj2css(cssObject) {
+    // Convert object to JSON string with indentation
+    const json = JSON.stringify(cssObject, null, 2);
+    // Process the JSON string to convert to valid CSS
+    const css = json
+        // Replace double quotes with single quotes for strings
+        .replace(/\\"/g, "'")
+        // Convert object keys to CSS selectors
+        .replace(/"([^"]+)":\s*{/g, '$1 {')
+        // Remove commas between rule sets and add empty line
+        .replace(/},/g, '}')
+        // Remove remaining double quotes
+        .replace(/"/g, '')
+        // Restore quotes for inlined URLs
+        .replace(/url\('(.+)'\)/g, 'url("$1")')
+        // Convert property-value commas to semicolons
+        .replace(/,(\s*})/g, ';$1')
+        // Remove the outermost curly braces
+        .replace(/^{|}$/g, '')
+        // Convert commas between property values to semicolons
+        .replace(/,\s*(?=[a-z-]+:)/g, ';\n  ')
+        // Remove indentation from the start of lines
+        .replace(/^( {2})/gm, '')
+        // Add semicolons before closing brackets if missing
+        .replace(/([^;])\s*}/g, '$1;\n}')
+        // Ensure space between property name and value
+        .replace(/:\s*/g, ': ')
+        // Clean up extra spaces
+        .replace(/\s+/g, ' ')
+        // Fix colon spacing in selectors
+        .replace(/([:#]) /g, '$1');
+    // Split into lines for additional processing
+    const lines = css.split('\n');
+    const result = [];
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Handle property lines
+        if (line.includes(': ')) {
+            result.push('  ' + line.trim());
+        }
+        // Handle selector lines
+        else if (line.includes('{')) {
+            result.push(line.trim());
+        }
+        // Handle closing bracket lines
+        else if (line.includes('}')) {
+            result.push('}');
+        }
+        // Other lines
+        else {
+            result.push(line);
+        }
+    }
+    return result.join('\n');
+}
+/**
+ * Prettifies a CSS string by ensuring consistent spacing and formatting
+ * @param cssString - CSS string to prettify
+ * @returns Prettified CSS string
+ */
+export function prettifyCss(cssString) {
+    return (cssString
+        // Ensure consistent newlines between rule sets
+        .replace(/}\s*/g, '}\n\n')
+        // Fix spacing inside brackets
+        .replace(/{\s*/g, ' {\n')
+        // Clean up extra newlines
+        .replace(/\n{3,}/g, '\n\n')
+        // Trim the string
+        .trim());
+}

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

@@ -0,0 +1,15 @@
+/**
+ * Utilities for working with CSS selectors
+ */
+/**
+ * Joins selector parts into a valid CSS selector
+ * @param path - Array of selector parts or a single selector
+ * @returns Combined CSS selector
+ */
+export declare function joinSelectors(path: string | string[]): string;
+/**
+ * Creates a Cartesian product of selector parts and joins them
+ * @param parts - Array of selector parts arrays
+ * @returns Array of all possible combined selectors
+ */
+export declare function cartesianSelectors(parts: string[][]): string[];

package/dist/lib/utils/selectors.js

@@ -0,0 +1,87 @@
+/**
+ * Utilities for working with CSS selectors
+ */
+import { isHtmlTag } from './tags.js';
+/**
+ * Joins selector parts into a valid CSS selector
+ * @param path - Array of selector parts or a single selector
+ * @returns Combined CSS selector
+ */
+export function joinSelectors(path) {
+    const array = typeof path === 'string' ? [path] : path;
+    let result = '';
+    for (const keyStr of array) {
+        // Skip empty key strings
+        if (!keyStr.trim())
+            continue;
+        const key = keyStr.replace(/&/g, '').trim();
+        if (isHtmlTag(key)) {
+            // If it's an HTML tag, just add it with a space
+            result += ` ${key}`;
+        }
+        else {
+            let prefix = '';
+            let selector = key;
+            // Handle reference to parent selector with &
+            if (/^&/.test(keyStr)) {
+                prefix += ' ';
+            }
+            // Handle double underscore for descendant of any level (T6)
+            if (/^__/.test(key)) {
+                prefix += ' ';
+                selector = selector.replace(/^__/, '');
+            }
+            // Handle single underscore for class selector (T5)
+            if (/^_/.test(key)) {
+                selector = selector.replace(/^_/, '');
+                if (!isHtmlTag(selector)) {
+                    // If not a tag, increase level
+                    prefix += ' ';
+                }
+            }
+            // Add dot for class selectors if needed
+            if (!/^[.:#*[~+>]/.test(selector)) {
+                if (!/\./.test(prefix))
+                    prefix += '.';
+            }
+            // Special handling for universal selector
+            if (/^\*/.test(selector)) {
+                prefix = ' ' + prefix;
+            }
+            result += prefix + selector;
+        }
+    }
+    // Fix any double dots that might have been created
+    result = result.replace(/\.\s*\./g, '.');
+    // Clean up whitespace
+    result = result
+        // Remove extra spaces
+        .replace(/\s+/g, ' ')
+        // Preserve proper spacing around combinators
+        .replace(/\s*([>+~])\s*/g, ' $1 ')
+        // Fix pseudo-classes and pseudo-elements
+        .replace(/\s+:/g, ':')
+        // Fix attribute selectors
+        .replace(/\s+\[/g, '[')
+        // Trim whitespace
+        .trim();
+    return result;
+}
+/**
+ * Creates a Cartesian product of selector parts and joins them
+ * @param parts - Array of selector parts arrays
+ * @returns Array of all possible combined selectors
+ */
+export function cartesianSelectors(parts) {
+    // Base case: If empty or just one part, return it flattened
+    if (parts.length === 0)
+        return [];
+    if (parts.length === 1)
+        return parts[0];
+    // Implementation of cartesian product
+    const result = parts.reduce((acc, curr) => acc.flatMap((x) => curr.map((y) => [...x, y])), [[]]);
+    return result.map((selectors) => {
+        // Handle comma-separated selectors by creating real CSS selector lists
+        return joinSelectors(selectors.filter(Boolean));
+    });
+}

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

@@ -0,0 +1,10 @@
+/**
+ * List of all HTML tags used to identify selectors
+ */
+export declare const htmlTags: string[];
+/**
+ * Checks if a string is an HTML tag name
+ * @param key - String to check
+ * @returns True if the string is an HTML tag name
+ */
+export declare function isHtmlTag(key: string): boolean;

package/dist/lib/utils/tags.js

@@ -0,0 +1,128 @@
+/**
+ * List of all HTML tags used to identify selectors
+ */
+export const htmlTags = [
+    'a',
+    'abbr',
+    'address',
+    'area',
+    'article',
+    'aside',
+    'audio',
+    'b',
+    'base',
+    'bdi',
+    'bdo',
+    'blockquote',
+    'body',
+    'br',
+    'button',
+    'canvas',
+    'caption',
+    'cite',
+    'code',
+    'col',
+    'colgroup',
+    'data',
+    'datalist',
+    'dd',
+    'del',
+    'details',
+    'dfn',
+    'dialog',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'embed',
+    'fieldset',
+    'figcaption',
+    'figure',
+    'footer',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'head',
+    'header',
+    'hgroup',
+    'hr',
+    'html',
+    'i',
+    'iframe',
+    'img',
+    'input',
+    'ins',
+    'kbd',
+    'label',
+    'legend',
+    'li',
+    'link',
+    'main',
+    'map',
+    'mark',
+    'meta',
+    'meter',
+    'nav',
+    'noscript',
+    'object',
+    'ol',
+    'optgroup',
+    'option',
+    'output',
+    'p',
+    'param',
+    'picture',
+    'pre',
+    'progress',
+    'q',
+    'rp',
+    'rt',
+    'ruby',
+    's',
+    'samp',
+    'script',
+    'section',
+    'select',
+    'slot',
+    'small',
+    'source',
+    'span',
+    'strong',
+    'style',
+    'sub',
+    'summary',
+    'sup',
+    'svg',
+    'table',
+    'tbody',
+    'td',
+    'template',
+    'textarea',
+    'tfoot',
+    'th',
+    'thead',
+    'time',
+    'title',
+    'tr',
+    'track',
+    'u',
+    'ul',
+    'var',
+    'video',
+    'wbr',
+];
+/**
+ * Checks if a string is an HTML tag name
+ * @param key - String to check
+ * @returns True if the string is an HTML tag name
+ */
+export function isHtmlTag(key) {
+    if (/^\w+[.#:[~+ ]/.test(key)) {
+        return htmlTags.includes(key.split(/[.#:[~+ ]/)[0]);
+    }
+    return htmlTags.includes(key);
+}

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

@@ -0,0 +1,25 @@
+/**
+ * Utility for traversing and transforming nested objects
+ */
+/**
+ * Type for node visitor functions
+ */
+export type NodeVisitor<T> = (node: any, path: string, root: any, index: number) => T;
+/**
+ * Traverses a nested object and applies a visitor function to each node
+ * @param node - The object to traverse
+ * @param visitor - Function to call for each node
+ * @param path - Current path in the object (for tracking)
+ * @param root - Root object (for reference)
+ * @param index - Current index in array (if applicable)
+ * @param separator - Path separator character
+ * @returns The result of the visitor function on the current node
+ */
+export declare function traverseObject<T>(node: any, visitor: NodeVisitor<T>, path?: string, root?: any, index?: number, separator?: string): T;
+/**
+ * Determines the type of a node in the CSS object
+ * @param node - The node to check
+ * @param path - Current path in the object
+ * @returns The identified node type as a string
+ */
+export declare function determineNodeType(node: any, path?: string): string;

package/dist/lib/utils/traversal.js

@@ -0,0 +1,78 @@
+/**
+ * Utility for traversing and transforming nested objects
+ */
+/**
+ * Traverses a nested object and applies a visitor function to each node
+ * @param node - The object to traverse
+ * @param visitor - Function to call for each node
+ * @param path - Current path in the object (for tracking)
+ * @param root - Root object (for reference)
+ * @param index - Current index in array (if applicable)
+ * @param separator - Path separator character
+ * @returns The result of the visitor function on the current node
+ */
+export function traverseObject(node, visitor, path = '', root, index = -1, separator = '\\') {
+    const realRoot = root || node;
+    // Handle arrays
+    if (Array.isArray(node)) {
+        const processedItems = node.map((item, idx) => traverseObject(item, visitor, path, realRoot, idx, separator));
+        return visitor(processedItems, path, realRoot, index);
+    }
+    // Handle objects (but not null)
+    if (node !== null && typeof node === 'object') {
+        const processedObject = Object.keys(node).reduce((result, key) => {
+            const newPath = path ? `${path}${separator}${key}` : key;
+            const processedValue = traverseObject(node[key], visitor, newPath, realRoot, index, separator);
+            result[key] = processedValue;
+            return result;
+        }, {});
+        return visitor(processedObject, path, realRoot, index);
+    }
+    // Handle primitive values
+    return visitor(node, path, realRoot, index);
+}
+/**
+ * Determines the type of a node in the CSS object
+ * @param node - The node to check
+ * @param path - Current path in the object
+ * @returns The identified node type as a string
+ */
+export function determineNodeType(node, path) {
+    if (!path)
+        return 'unknown';
+    const lastKey = path.split('\\').pop() || '';
+    // Layer statement
+    if (/^@layer/.test(lastKey) && typeof node === 'string') {
+        return 'layer statement';
+    }
+    // Layer block
+    if (/^@layer/.test(lastKey) && typeof node === 'object' && node !== null) {
+        return 'layer block';
+    }
+    // Container query
+    if (/^@container/.test(lastKey) &&
+        typeof node === 'object' &&
+        node !== null) {
+        return 'container query block';
+    }
+    // Media query or prefix
+    if (/^@/.test(lastKey)) {
+        return 'media query or prefix';
+    }
+    // CSS property-value pair (end value)
+    if (isPrimitiveValue(node)) {
+        return 'selector';
+    }
+    return 'unknown';
+}
+/**
+ * Checks if a value is a primitive that can be used as a CSS property value
+ * @param value - Value to check
+ * @returns True if the value is a primitive
+ */
+function isPrimitiveValue(value) {
+    return (value === null ||
+        typeof value === 'string' ||
+        typeof value === 'number' ||
+        typeof value === 'boolean');
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "esm-styles",
+  "version": "0.1.0",
+  "description": "A library for working with ESM styles",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "lint": "eslint src --ext .ts",
+    "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"
+  },
+  "keywords": [
+    "esm",
+    "styles",
+    "css"
+  ],
+  "author": "romochka@gmail.com",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14.16"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.11",
+    "@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"
+  }
+}