feat(tasty): sub-element selector

Author: tenphi

.changeset/witty-dolls-rest.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+A new property for sub-element styles `$`. Set `$: '>'` for sub-elements styles so they will only apply to the direct child of the root element.

src/components/actions/ItemAction/ItemAction.tsx

@@ -81,11 +81,13 @@ const ItemActionElement = tasty({
     '$local-icon-size': 'var(--icon-size)',
 
     Icon: {
+      $: '>',
       ...(ITEM_ACTION_BASE_STYLES.Icon as Styles),
       '$icon-size': 'min($local-icon-size, ($action-size - .25x))',
     },
 
     RightIcon: {
+      $: '>',
       ...(ITEM_ACTION_BASE_STYLES.Icon as Styles),
       '$icon-size': 'min($local-icon-size, ($action-size - .25x))',
     },

src/components/actions/ItemButton/ItemButton.tsx

@@ -59,7 +59,8 @@ const ActionsWrapper = tasty({
       '[data-size="xlarge"]': '$size-xl',
     },
 
-    '& > [data-element="Actions"]': {
+    Actions: {
+      $: '>',
       position: 'absolute',
       inset: '1bw 1bw auto auto',
       display: 'flex',

src/components/content/Item/Item.tsx

@@ -154,6 +154,7 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
 }
 
 const DEFAULT_ICON_STYLES: Styles = {
+  $: '>',
   display: 'grid',
   placeItems: 'center',
   placeContent: 'stretch',
@@ -169,6 +170,7 @@ const DEFAULT_ICON_STYLES: Styles = {
 };
 
 const ADDITION_STYLES: Styles = {
+  $: '>',
   display: 'grid',
   flow: 'column',
   placeItems: 'center',
@@ -289,6 +291,7 @@ const ItemElement = tasty({
     RightIcon: DEFAULT_ICON_STYLES,
 
     Label: {
+      $: '>',
       display: 'block',
       placeSelf: 'center start',
       boxSizing: 'border-box',
@@ -322,6 +325,7 @@ const ItemElement = tasty({
     },
 
     Description: {
+      $: '>',
       preset: 't4',
       color: 'inherit',
       opacity: 0.75,
@@ -375,6 +379,7 @@ const ItemElement = tasty({
     },
 
     Actions: {
+      $: '>',
       display: 'flex',
       gap: '1bw',
       placeItems: 'center',

src/data/item-themes.ts

@@ -44,6 +44,7 @@ export const ITEM_ACTION_BASE_STYLES: Styles = {
 
   // Icon styles
   Icon: {
+    $: '>',
     display: 'grid',
     placeItems: 'center',
     height: '($action-size - 2bw) ($action-size - 2bw)',

src/tasty/tasty.test.tsx

@@ -1132,6 +1132,44 @@ describe('tastyGlobal() API', () => {
     expect(styleContent).toContain('background-color: var(--surface-color)');
   });
 
+  it('should support direct child selector for sub-elements with $: ">"', () => {
+    const Card = tasty({
+      styles: {
+        padding: '2x',
+        Actions: {
+          $: '>',
+          display: 'flex',
+          gap: '1x',
+        },
+        Content: {
+          color: '#text',
+        },
+      },
+    });
+
+    const { container } = render(
+      <Card>
+        <div data-element="Actions">
+          <button>Action 1</button>
+        </div>
+        <div data-element="Content">Content text</div>
+      </Card>,
+    );
+
+    // Verify direct child selector is used for Actions
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+
+    // Should have direct child selector for Actions
+    expect(styleContent).toMatch(/>\s*\[data-element="Actions"\]/);
+    // Should have descendant selector for Content (backward compatibility)
+    expect(styleContent).toMatch(/\s+\[data-element="Content"\]/);
+    // Should not match "> [data-element="Content"]"
+    expect(styleContent).not.toMatch(/>\s*\[data-element="Content"\]/);
+  });
+
   it('should support multiple global style components with different selectors', () => {
     const GlobalHeading = tasty('h1.special', {
       preset: 'h1',

src/tasty/utils/renderStyles.ts

@@ -75,7 +75,7 @@ export function isSelector(key: string): boolean {
 /**
  * Get the selector suffix for a key
  */
-function getSelector(key: string): string | null {
+function getSelector(key: string, styles?: Styles): string | null {
   if (key.startsWith('&')) {
     return key.slice(1);
   }
@@ -85,7 +85,9 @@ function getSelector(key: string): string | null {
   }
 
   if (key.match(/^[A-Z]/)) {
-    return ` [data-element="${key}"]`;
+    // Check if styles object has $: '>' for direct child selector
+    const combinator = styles && (styles as any).$ === '>' ? ' > ' : ' ';
+    return `${combinator}[data-element="${key}"]`;
   }
 
   return null;
@@ -613,9 +615,11 @@ function generateLogicalRules(
 
     // Recurse into nested selectors first to compute proper suffix chaining
     for (const key of selectorKeys) {
-      const suffix = getSelector(key);
+      const suffix = getSelector(key, currentStyles[key] as Styles);
       if (suffix && currentStyles[key]) {
-        processStyles(currentStyles[key] as Styles, `${parentSuffix}${suffix}`);
+        // Remove $ key to prevent it from being processed as a style property
+        const { $: _omit, ...cleanedStyles } = currentStyles[key] as any;
+        processStyles(cleanedStyles as Styles, `${parentSuffix}${suffix}`);
       }
     }