esm-styles 0.2.2 → 0.2.3

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