fix(tasty): selector generation

Author: tenphi

src/components/overlays/Modal/Modal.tsx

@@ -59,7 +59,7 @@ const ModalElement = tasty({
     transform: {
       '': 'initial',
       'type=modal & !open': 'translate(0, -3x) scale(1, 1)',
-      '([data-type^="fullscreen"] | type=panel) & !open':
+      '(type^=fullscreen | type=panel) & !open':
         'translate(0, 0) scale(1.02, 1.02)',
     },
     opacity: {

src/tasty/utils/styles.ts

@@ -120,11 +120,15 @@ export function getModSelector(modName: string): string {
   if (!MOD_NAME_CACHE.has(modName)) {
     let selector: string;
 
-    // Check if it's a shorthand value mod: key=value, key="value", or key='value'
-    const valueModMatch = modName.match(/^([a-z][a-z0-9-]*)=(.+)$/i);
+    // Check if it's a shorthand value mod: key=value, key^=value, key$=value, key*=value
+    // Supports: key=value, key="value", key='value', and with ^=, $=, *= operators
+    const valueModMatch = modName.match(
+      /^([a-z][a-z0-9-]*)(\^=|\$=|\*=|=)(.+)$/i,
+    );
     if (valueModMatch) {
       const key = valueModMatch[1];
-      let value = valueModMatch[2];
+      const operator = valueModMatch[2];
+      let value = valueModMatch[3];
 
       // Remove quotes if present
       if (
@@ -134,8 +138,8 @@ export function getModSelector(modName: string): string {
         value = value.slice(1, -1);
       }
 
-      // Convert to full attribute selector
-      selector = `[data-${camelToKebab(key)}="${value}"]`;
+      // Convert to full attribute selector with the appropriate operator
+      selector = `[data-${camelToKebab(key)}${operator}"${value}"]`;
     } else if (modName.match(/^[a-z]/)) {
       // Boolean mod: convert camelCase to kebab-case
       selector = `[data-${camelToKebab(modName)}]`;

src/tasty/value-mods.test.tsx

@@ -492,6 +492,40 @@ describe('Value Mods', () => {
 
         consoleErrorSpy.mockRestore();
       });
+
+      it('should transform type^=fullscreen to [data-type^="fullscreen"]', () => {
+        expect(getModSelector('type^=fullscreen')).toBe(
+          '[data-type^="fullscreen"]',
+        );
+      });
+
+      it('should transform type$=screen to [data-type$="screen"]', () => {
+        expect(getModSelector('type$=screen')).toBe('[data-type$="screen"]');
+      });
+
+      it('should transform type*=full to [data-type*="full"]', () => {
+        expect(getModSelector('type*=full')).toBe('[data-type*="full"]');
+      });
+
+      it('should handle quoted values with ^= operator', () => {
+        expect(getModSelector('type^="fullscreen"')).toBe(
+          '[data-type^="fullscreen"]',
+        );
+      });
+
+      it('should handle single-quoted values with $= operator', () => {
+        expect(getModSelector("type$='screen'")).toBe('[data-type$="screen"]');
+      });
+
+      it('should handle quoted values with *= operator', () => {
+        expect(getModSelector('name*="test"')).toBe('[data-name*="test"]');
+      });
+
+      it('should convert camelCase keys with operators', () => {
+        expect(getModSelector('dataType^=fullscreen')).toBe(
+          '[data-data-type^="fullscreen"]',
+        );
+      });
     });
 
     it('should transform :has(Item) to :has([data-element="Item"]) in component', () => {