esm-styles 0.2.1 → 0.2.3

package/README.md

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

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

package/dist/lib/index.js

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

package/dist/lib/utils/content.js

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

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

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

package/dist/lib/utils/index.js

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

package/dist/lib/utils/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/dist/lib/utils/to-css-value.d.ts

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

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

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

package/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.1",
+  "version": "0.2.3",
   "description": "A library for working with ESM styles",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",