fix(tasty): keyframes syntax (#994)

tenphi · web-flow · commit 3516a129658f · 2026-02-03T19:39:30.000+01:00
diff --git a/.changeset/blue-scissors-compare.md b/.changeset/blue-scissors-compare.md
@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Export tasty.config.ts
diff --git a/.changeset/keyframes-object-format.md b/.changeset/keyframes-object-format.md
@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Migrate all `@keyframes` definitions to use object format for style values instead of raw CSS strings. This ensures consistent token processing and better type safety.
diff --git a/eslint.config.js b/eslint.config.js
@@ -112,7 +112,7 @@ export default [
   // TypeScript files
   {
     files: ['**/*.{ts,tsx}'],
-    ignores: ['vite.config.ts'],
+    ignores: ['vite.config.ts', 'tasty.config.ts'],
     languageOptions: {
       parser,
       parserOptions: {
diff --git a/scripts/copy-files.cjs b/scripts/copy-files.cjs
@@ -3,7 +3,7 @@ const path = require('path');
 
 function copyRequiredFiles() {
   copyPackageJson();
-  ['./README.md', './CHANGELOG.md'].forEach((file) => includeFileInBuild(file));
+  ['./README.md', './CHANGELOG.md', './tasty.config.ts'].forEach((file) => includeFileInBuild(file));
 }
 
 function copyPackageJson() {
@@ -54,6 +54,7 @@ function copyPackageJson() {
         import: './es/tasty/zero/babel.js',
         types: './types/tasty/zero/babel.d.ts',
       },
+      './tasty.config': './tasty.config.ts',
     },
     private: false,
   };
diff --git a/src/components/navigation/Tabs/TabButton.tsx b/src/components/navigation/Tabs/TabButton.tsx
@@ -416,7 +416,7 @@ export function TabButton({ item, tabData, isLastTab }: TabButtonProps) {
     <ItemAction
       tabIndex={-1}
       icon={<CloseIcon />}
-      tooltip="Delete tab"
+      tooltip="Close"
       onPress={handleDelete}
     />
   ) : null;
diff --git a/src/components/navigation/Tabs/TabPicker.tsx b/src/components/navigation/Tabs/TabPicker.tsx
@@ -89,7 +89,7 @@ export function TabPicker({
               <ItemAction
                 icon={<CloseIcon />}
                 theme="danger"
-                aria-label="Delete tab"
+                aria-label="Close"
                 onPress={() => {
                   onDelete(tab.key);
                 }}
diff --git a/src/components/navigation/Tabs/Tabs.test.tsx b/src/components/navigation/Tabs/Tabs.test.tsx
@@ -323,7 +323,7 @@ describe('<Tabs />', () => {
         </Tabs>,
       );
 
-      expect(getByLabelText('Delete tab')).toBeInTheDocument();
+      expect(getByLabelText('Close')).toBeInTheDocument();
     });
 
     it('should call onDelete when delete button is clicked', async () => {
@@ -336,7 +336,7 @@ describe('<Tabs />', () => {
         </Tabs>,
       );
 
-      await userEvent.click(getByLabelText('Delete tab'));
+      await userEvent.click(getByLabelText('Close'));
 
       expect(onDelete).toHaveBeenCalledWith('tab1');
     });
diff --git a/src/components/navigation/Tabs/styled.ts b/src/components/navigation/Tabs/styled.ts
@@ -337,9 +337,8 @@ export const TabIndicatorElement = tasty({
     left: 0,
     height: '$tab-indicator-size',
     fill: '#purple',
-    transition: 'left, width',
-    transitionDuration: '.2s',
-    transitionTimingFunction: 'ease-out',
+    transition:
+      'left $tab-transition ease-in-out, width $tab-transition ease-in-out',
     pointerEvents: 'none',
   },
 });
diff --git a/src/components/status/LoadingAnimation/LoadingAnimation.tsx b/src/components/status/LoadingAnimation/LoadingAnimation.tsx
@@ -37,24 +37,24 @@ const CubeElement = tasty({
 
     '@keyframes': {
       dice0: {
-        from: 'transform: translate(49%, 0.5%); z-index: 0;',
-        '25%': 'transform: translate(49%, 0.5%); z-index: 0;',
-        '50%': 'transform: translate(0%, 25%); z-index: 0;',
-        '51%': 'z-index: 1;',
-        '75%': 'z-index: 1;',
-        to: 'transform: translate(0%, 25%); z-index: 1;',
+        from: { transform: 'translate(49%, 0.5%)', zIndex: 0 },
+        '25%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },
+        '50%': { transform: 'translate(0%, 25%)', zIndex: 0 },
+        '51%': { zIndex: 1 },
+        '75%': { zIndex: 1 },
+        to: { transform: 'translate(0%, 25%)', zIndex: 1 },
       },
       dice1: {
-        from: 'transform: translate(0%, 25%); z-index: 3;',
-        '25%': 'transform: translate(49%, 49%); z-index: 3;',
-        '75%': 'transform: translate(49%, 49%); z-index: 2;',
-        to: 'transform: translate(98%, 25%); z-index: 1;',
+        from: { transform: 'translate(0%, 25%)', zIndex: 3 },
+        '25%': { transform: 'translate(49%, 49%)', zIndex: 3 },
+        '75%': { transform: 'translate(49%, 49%)', zIndex: 2 },
+        to: { transform: 'translate(98%, 25%)', zIndex: 1 },
       },
       dice2: {
-        from: 'transform: translate(98%, 25%); z-index: 1;',
-        '50%': 'transform: translate(98%, 25%); z-index: 0;',
-        '75%': 'transform: translate(49%, 0.5%); z-index: 0;',
-        to: 'transform: translate(49%, 0.5%); z-index: 0;',
+        from: { transform: 'translate(98%, 25%)', zIndex: 1 },
+        '50%': { transform: 'translate(98%, 25%)', zIndex: 0 },
+        '75%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },
+        to: { transform: 'translate(49%, 0.5%)', zIndex: 0 },
       },
     },
   },
diff --git a/src/components/status/Spin/Cube.tsx b/src/components/status/Spin/Cube.tsx
@@ -52,49 +52,49 @@ const CubeElement = tasty({
 
     '@keyframes': {
       'cube-spin-top': {
-        '0%': 'transform: translate(0%, 0);',
-        '8%': 'transform: translate(100%, 0);',
-        '17%': 'transform: translate(100%, 0);',
-        '25%': 'transform: translate(100%, 0);',
-        '33%': 'transform: translate(100%, 100%);',
-        '42%': 'transform: translate(100%, 100%);',
-        '50%': 'transform: translate(100%, 100%);',
-        '58%': 'transform: translate(0, 100%);',
-        '67%': 'transform: translate(0, 100%);',
-        '75%': 'transform: translate(0, 100%);',
-        '83%': 'transform: translate(0, 0);',
-        '92%': 'transform: translate(0, 0);',
-        '100%': 'transform: translate(0, 0);',
+        '0%': { transform: 'translate(0%, 0)' },
+        '8%': { transform: 'translate(100%, 0)' },
+        '17%': { transform: 'translate(100%, 0)' },
+        '25%': { transform: 'translate(100%, 0)' },
+        '33%': { transform: 'translate(100%, 100%)' },
+        '42%': { transform: 'translate(100%, 100%)' },
+        '50%': { transform: 'translate(100%, 100%)' },
+        '58%': { transform: 'translate(0, 100%)' },
+        '67%': { transform: 'translate(0, 100%)' },
+        '75%': { transform: 'translate(0, 100%)' },
+        '83%': { transform: 'translate(0, 0)' },
+        '92%': { transform: 'translate(0, 0)' },
+        '100%': { transform: 'translate(0, 0)' },
       },
       'cube-spin-right': {
-        '0%': 'transform: translate(100%, 100%);',
-        '8%': 'transform: translate(100%, 100%);',
-        '17%': 'transform: translate(100%, 100%);',
-        '25%': 'transform: translate(0, 100%);',
-        '33%': 'transform: translate(0, 100%);',
-        '42%': 'transform: translate(0, 100%);',
-        '50%': 'transform: translate(0, 0);',
-        '58%': 'transform: translate(0, 0);',
-        '67%': 'transform: translate(0, 0);',
-        '75%': 'transform: translate(100%, 0);',
-        '83%': 'transform: translate(100%, 0);',
-        '92%': 'transform: translate(100%, 0);',
-        '100%': 'transform: translate(100%, 100%);',
+        '0%': { transform: 'translate(100%, 100%)' },
+        '8%': { transform: 'translate(100%, 100%)' },
+        '17%': { transform: 'translate(100%, 100%)' },
+        '25%': { transform: 'translate(0, 100%)' },
+        '33%': { transform: 'translate(0, 100%)' },
+        '42%': { transform: 'translate(0, 100%)' },
+        '50%': { transform: 'translate(0, 0)' },
+        '58%': { transform: 'translate(0, 0)' },
+        '67%': { transform: 'translate(0, 0)' },
+        '75%': { transform: 'translate(100%, 0)' },
+        '83%': { transform: 'translate(100%, 0)' },
+        '92%': { transform: 'translate(100%, 0)' },
+        '100%': { transform: 'translate(100%, 100%)' },
       },
       'cube-spin-bottom': {
-        '0%': 'transform: translate(0, 100%);',
-        '8%': 'transform: translate(0, 100%);',
-        '17%': 'transform: translate(0, 0);',
-        '25%': 'transform: translate(0, 0);',
-        '33%': 'transform: translate(0, 0);',
-        '42%': 'transform: translate(100%, 0);',
-        '50%': 'transform: translate(100%, 0);',
-        '58%': 'transform: translate(100%, 0);',
-        '67%': 'transform: translate(100%, 100%);',
-        '75%': 'transform: translate(100%, 100%);',
-        '83%': 'transform: translate(100%, 100%);',
-        '92%': 'transform: translate(0, 100%);',
-        '100%': 'transform: translate(0, 100%);',
+        '0%': { transform: 'translate(0, 100%)' },
+        '8%': { transform: 'translate(0, 100%)' },
+        '17%': { transform: 'translate(0, 0)' },
+        '25%': { transform: 'translate(0, 0)' },
+        '33%': { transform: 'translate(0, 0)' },
+        '42%': { transform: 'translate(100%, 0)' },
+        '50%': { transform: 'translate(100%, 0)' },
+        '58%': { transform: 'translate(100%, 0)' },
+        '67%': { transform: 'translate(100%, 100%)' },
+        '75%': { transform: 'translate(100%, 100%)' },
+        '83%': { transform: 'translate(100%, 100%)' },
+        '92%': { transform: 'translate(0, 100%)' },
+        '100%': { transform: 'translate(0, 100%)' },
       },
     },
   },
diff --git a/src/stories/StyleInjector.docs.mdx b/src/stories/StyleInjector.docs.mdx
@@ -179,8 +179,8 @@ const fadeIn = keyframes({
 
 // Custom name
 const slideIn = keyframes({
-  '0%': 'transform: translateX(-100%)',
-  '100%': 'transform: translateX(0)',
+  '0%': { transform: 'translateX(-100%)' },
+  '100%': { transform: 'translateX(0)' },
 }, 'slideInAnimation');
 
 // Use in tasty styles (recommended)
diff --git a/src/stories/Tasty.docs.mdx b/src/stories/Tasty.docs.mdx
@@ -1310,8 +1310,8 @@ const Pulse = tasty({
     animation: 'pulse 2s infinite',
     '@keyframes': {
       pulse: {
-        '0%, 100%': 'transform: scale(1);',
-        '50%': 'transform: scale(1.05);',
+        '0%, 100%': { transform: 'scale(1)' },
+        '50%': { transform: 'scale(1.05)' },
       },
     },
   },
@@ -1323,7 +1323,7 @@ Global keyframes via `configure()`:
 ```jsx
 configure({
   keyframes: {
-    fadeIn: { from: 'opacity: 0;', to: 'opacity: 1;' },
+    fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } },
   },
 });
 ```
@@ -1343,8 +1343,8 @@ const Spinner = tasty({
     },
     '@keyframes': {
       spin: {
-        '0%': 'transform: rotate(0deg);',
-        '100%': 'transform: rotate(360deg);',
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' },
       },
     },
   },
diff --git a/src/tasty/index.ts b/src/tasty/index.ts
@@ -92,6 +92,7 @@ export type {
   ModValue,
   Tokens,
   TokenValue,
+  TastyExtensionConfig,
 } from './types';
 export type {
   StylesInterface,
diff --git a/src/tasty/injector/index.test.ts b/src/tasty/injector/index.test.ts
diff --git a/src/tasty/keyframes/keyframes.test.ts b/src/tasty/keyframes/keyframes.test.ts
diff --git a/src/tasty/styles/types.ts b/src/tasty/styles/types.ts
diff --git a/src/tasty/types.ts b/src/tasty/types.ts
diff --git a/src/tasty/zero/extractor.test.ts b/src/tasty/zero/extractor.test.ts
diff --git a/tasty.config.ts b/tasty.config.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@cube-dev/ui-kit": patch
 +---
++
 +Export tasty.config.ts
Original file line number	Diff line number	Diff line change
`@@ -112,7 +112,7 @@ export default [`
`112`	`112`	`// TypeScript files`
`113`	`113`	`{`
`114`	`114`	`files: ['*/.{ts,tsx}'],`
`115`		`- ignores: ['vite.config.ts'],`
	`115`	`+ ignores: ['vite.config.ts', 'tasty.config.ts'],`
`116`	`116`	`languageOptions: {`
`117`	`117`	`parser,`
`118`	`118`	`parserOptions: {`