esm-styles 0.2.2 → 0.2.4

package/README.md

@@ -185,16 +185,18 @@ p strong {
 
 ```js
 {
-  // Class selectors for non-HTML tag names
-  header: {
-    backgroundColor: '#f5f5f5',
-    padding: '20px'
-  },
-
-  // Class on HTML tag using underscore prefix
-  p: {
-    _highlight: {
-      backgroundColor: 'yellow'
+  div: {
+    highlighted: {
+      // highlighted is not a tag
+      border: '1px solid red',
+    },
+    p: {
+      // p is a tag
+      fontSize: '16px',
+    },
+    _video: {
+      // video is a tag, but the class is meant, use single underscore prefix
+      aspectRatio: 1.77,
     }
   }
 }
@@ -203,13 +205,16 @@ p strong {
 Compiles to:
 
 ```css
-.header {
-  background-color: #f5f5f5;
-  padding: 20px;
+div.highlighted {
+  border: 1px solid red;
+}
+
+div p {
+  font-size: 16px;
 }
 
-p.highlight {
-  background-color: yellow;
+div.video {
+  aspect-ratio: 1.77;
 }
 ```
 

package/dist/lib/index.js

@@ -1,6 +1,6 @@
 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 = []) {
+function flatWalk(obj, selectorPath = [], result = { rules: [], media: {}, layers: {}, containers: {} }, options = {}, currentMedia = [], currentContainers = []) {
     const props = {};
     for (const key in obj) {
         const value = obj[key];
@@ -16,7 +16,7 @@ function flatWalk(obj, selectorPath = [], result = { rules: [], media: {}, layer
         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 nested = flatWalk(value, selectorPath, { rules: [], media: {}, layers: {}, containers: {} }, options, [...currentMedia, key], currentContainers);
                 const mediaKey = [...currentMedia, key].join(' && ');
                 if (!result.media[mediaKey])
                     result.media[mediaKey] = [];
@@ -27,11 +27,42 @@ function flatWalk(obj, selectorPath = [], result = { rules: [], media: {}, layer
                         result.media[nestedMediaKey] = [];
                     result.media[nestedMediaKey].push(...nested.media[nestedMediaKey]);
                 }
+                // Merge nested containers
+                for (const nestedContainerKey in nested.containers) {
+                    if (!result.containers[nestedContainerKey])
+                        result.containers[nestedContainerKey] = [];
+                    result.containers[nestedContainerKey].push(...nested.containers[nestedContainerKey]);
+                }
+            }
+            else if (key.startsWith('@container')) {
+                // Recursively walk value, collecting rules for this container block
+                const nested = flatWalk(value, selectorPath, { rules: [], media: {}, layers: {}, containers: {} }, options, currentMedia, [...currentContainers, key]);
+                const containerKey = [...currentContainers, key].join(' && ');
+                if (!result.containers[containerKey])
+                    result.containers[containerKey] = [];
+                result.containers[containerKey].push(...nested.rules);
+                // Also merge any nested containers
+                for (const nestedContainerKey in nested.containers) {
+                    if (!result.containers[nestedContainerKey])
+                        result.containers[nestedContainerKey] = [];
+                    result.containers[nestedContainerKey].push(...nested.containers[nestedContainerKey]);
+                }
+                // Merge 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);
+                    result.layers[key] = {
+                        rules: [],
+                        media: {},
+                        layers: {},
+                        containers: {},
+                    };
+                flatWalk(value, selectorPath, result.layers[key], options, currentMedia, currentContainers);
             }
             else if (key.startsWith('@')) {
                 // Other special keys (shorthands, etc.)
@@ -39,10 +70,7 @@ function flatWalk(obj, selectorPath = [], result = { rules: [], media: {}, layer
                 let handled = false;
                 if (options.mediaQueries && options.mediaQueries[shorthand]) {
                     const mediaKey = `@media ${options.mediaQueries[shorthand]}`;
-                    flatWalk(value, selectorPath, result, options, [
-                        ...currentMedia,
-                        mediaKey,
-                    ]);
+                    flatWalk(value, selectorPath, result, options, [...currentMedia, mediaKey], currentContainers);
                     handled = true;
                 }
                 if (options.selectorShorthands &&
@@ -50,20 +78,17 @@ function flatWalk(obj, selectorPath = [], result = { rules: [], media: {}, layer
                     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);
+                            flatWalk(value, [[root + entry.selector], ...selectorPath], result, options, currentMedia, currentContainers);
                             handled = true;
                         }
                         if (entry.selector && entry.mediaQuery) {
                             const mediaKey = `@media ${entry.mediaQuery}`;
-                            flatWalk(value, [[root + entry.selector], ...selectorPath], result, options, [...currentMedia, mediaKey]);
+                            flatWalk(value, [[root + entry.selector], ...selectorPath], result, options, [...currentMedia, mediaKey], currentContainers);
                             handled = true;
                         }
                         if (!entry.selector && entry.mediaQuery) {
                             const mediaKey = `@media ${entry.mediaQuery}`;
-                            flatWalk(value, selectorPath, result, options, [
-                                ...currentMedia,
-                                mediaKey,
-                            ]);
+                            flatWalk(value, selectorPath, result, options, [...currentMedia, mediaKey], currentContainers);
                             handled = true;
                         }
                     }
@@ -74,14 +99,14 @@ function flatWalk(obj, selectorPath = [], result = { rules: [], media: {}, layer
                     }
                     else {
                         const parts = key.split(',').map((k) => k.trim());
-                        flatWalk(value, [...selectorPath, parts], result, options, currentMedia);
+                        flatWalk(value, [...selectorPath, parts], result, options, currentMedia, currentContainers);
                     }
                 }
             }
             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);
+                flatWalk(value, [...selectorPath, parts], result, options, currentMedia, currentContainers);
             }
         }
     }
@@ -184,6 +209,58 @@ function renderFlatMedia(media) {
     }
     return css;
 }
+function renderFlatContainers(containers) {
+    let css = '';
+    for (const key in containers) {
+        // If the key contains '&&', recursively nest the container blocks
+        const containerParts = key.split(' && ');
+        if (containerParts.length > 1) {
+            css += containerParts.reduceRight((inner, part) => `${part} {\n${inner}\n}`, renderFlatContainers({ ['']: containers[key] }));
+        }
+        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';
+            }
+        }
+        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 += '}\n';
+        }
+    }
+    return css;
+}
 function mergeMedia(target, source) {
     for (const key in source) {
         if (!target[key])
@@ -192,7 +269,7 @@ function mergeMedia(target, source) {
     }
 }
 export function getCss(styles, options = {}) {
-    const result = flatWalk(styles, [], { rules: [], media: {}, layers: {} }, options);
+    const result = flatWalk(styles, [], { rules: [], media: {}, layers: {}, containers: {} }, options);
     if (typeof console !== 'undefined') {
         // console.log(
         //   '[esm-styles] flatWalk result:',
@@ -202,6 +279,7 @@ export function getCss(styles, options = {}) {
     let css = '';
     css += renderRules(result.rules);
     css += renderFlatMedia(result.media);
+    css += renderFlatContainers(result.containers);
     css += renderLayers(result.layers);
     return utils.prettifyCssString(css);
 }

package/dist/lib/utils/selector.js

@@ -195,7 +195,16 @@ export const joinSelectorPath = (path) => {
             return acc + (acc ? ' ' : '') + '.' + part.slice(2);
         }
         else if (part.startsWith('_')) {
-            return acc + (acc ? ' ' : '') + '.' + part.slice(1);
+            // Attach class directly to previous part unless prev is combinator or root
+            const combinators = ['>', '+', '~'];
+            const isPrevCombinator = prev && combinators.some((c) => prev.startsWith(c));
+            if (isPrevRoot || isPrevCombinator || !acc) {
+                return acc + (acc ? ' ' : '') + '.' + part.slice(1);
+            }
+            else {
+                // Attach directly (no space)
+                return acc + '.' + part.slice(1);
+            }
         }
         else if (part.startsWith('>') ||
             part.startsWith('+') ||
@@ -224,6 +233,13 @@ export const joinSelectorPath = (path) => {
                 return acc + (acc ? ' ' : '') + match[1] + '.' + match[2];
             }
         }
+        else if (/^([a-z][a-z0-9]*)#([\w-]+)$/.test(part)) {
+            // If part matches 'tag#id' and tag is an HTML tag
+            const match = part.match(/^([a-z][a-z0-9]*)#([\w-]+)$/);
+            if (match && isHtmlTag(match[1])) {
+                return acc + (acc ? ' ' : '') + match[1] + '#' + match[2];
+            }
+        }
         // Not a tag, not a special selector: treat as class or custom element
         // If previous part is a root selector, insert a space
         if (isPrevRoot) {

package/doc/usage-guide.md

@@ -307,21 +307,9 @@ Use commas to target multiple selectors:
 }
 ```
 
-### T9: Content Property
-
-For the `content` property, use JavaScript unicode notation for special characters:
-
-```js
-{
-  '::before': {
-    content: '\u2022',  // Bullet character
-  }
-}
-```
-
 ## Layers
 
-CSS layers help manage specificity and provide better organization of styles. ESM Styles supports @layer directives:
+ESM Styles supports @layer directives:
 
 ```js
 {
@@ -551,12 +539,14 @@ The build process automatically generates modules like `$theme.mjs`:
 export default {
   colors: {
     background: {
-      var: '--colors-background',
+      var: 'var(--colors-background)',
+      name: '--colors-background',
       light: '#ffffff',
       dark: '#121212',
     },
     surface: {
-      var: '--colors-surface',
+      var: 'var(--colors-surface)',
+      name: '--colors-surface',
       light: '#f5f5f5',
       dark: '#222222',
     },
@@ -575,10 +565,11 @@ import $theme from './$theme.mjs'
 
 export default {
   button: {
-    backgroundColor: $theme.colors.primary,
+    backgroundColor: $theme.colors.primary, // automatically replaced with var(--colors-primary) by compiler
     color: $theme.colors.background,
     padding: '10px 20px',
     borderRadius: '4px',
+    border: `1px solid ${$theme.colors.surface.var}`, // in case of concatenation, use .var property, otherwise it will be [object Object], sorry
   },
 }
 ```
@@ -591,6 +582,7 @@ button {
   color: var(--colors-background);
   padding: 10px 20px;
   border-radius: 4px;
+  border: 1px solid var(--colors-surface);
 }
 ```
 

package/package.json

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