keyframes (#13)

packages/example/app/keyframes/page.tsx

@@ -0,0 +1,24 @@
+import { styled, keyframes } from "next-yak";
+import styles from "../page.module.css";
+
+
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+  `;
+
+const Headline = styled.h1`
+  animation: ${rotate} 3s linear infinite;
+`;
+
+export default function Home() {
+  return (
+    <main className={styles.main}>
+      <Headline>Hello world</Headline>
+    </main>
+  );
+}

packages/next-yak/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { css } from "./cssLiteral";
 export { styled } from "./styled";
 export { atoms } from "./atoms";
+export { keyframes } from "./keyframes";
 //# sourceMappingURL=index.d.ts.map

packages/next-yak/dist/keyframes.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Allows to use CSS keyframe animations in a styled or css block
+ *
+ * @usage
+ *
+ * ```tsx
+ * import { styled, keyframes } from "next-yak";
+ *
+ * const rotate = keyframes`
+ *  from {
+ *   transform: rotate(0deg);
+ *  }
+ *  to {
+ *   transform: rotate(360deg);
+ *  }
+ * `;
+ *
+ * const Spinner = styled.div`
+ *   animation: ${rotate} 1s linear infinite;
+ * `;
+ * ```
+ */
+export declare const keyframes: (styles: TemplateStringsArray, ...dynamic: never[]) => string;
+//# sourceMappingURL=keyframes.d.ts.map

packages/next-yak/loaders/__tests__/cssloader.test.ts

@@ -43,15 +43,15 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-".style0 { 
-  font-size: 2rem;
-  font-weight: bold;
-  color: red;
-  &:hover {
-    color: red;
-  }
-       }"
-`);
+      ".yak-0 { 
+        font-size: 2rem;
+        font-weight: bold;
+        color: red;
+        &:hover {
+          color: red;
+        }
+             }"
+    `);
   });
 
   it("should support nested css code", async () => {
@@ -80,25 +80,25 @@ const headline = css\`
 `
   )
 ).toMatchInlineSnapshot(`
-".style0 { 
-  font-size: 2rem;
-  font-weight: bold;
-  color: red;
-   }
+  ".yak-0 { 
+    font-size: 2rem;
+    font-weight: bold;
+    color: red;
+     }
 
-.style1 { 
-    color: blue;
-   }
+  .yak-1 { 
+      color: blue;
+     }
 
-.style2 { 
-    color: blue;
-   }
+  .yak-2 { 
+      color: blue;
+     }
 
-.style0 { 
-  &:hover {
-    color: var(--🦬18fi82j0);
-  }
- }"
+  .yak-0 { 
+    &:hover {
+      color: var(--🦬18fi82j0);
+    }
+   }"
 `);
   });
 
@@ -120,10 +120,10 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-".style1 { 
-    color: blue;
-   }"
-`);
+      ".yak-1 { 
+          color: blue;
+         }"
+    `);
   });
 });
 
@@ -143,11 +143,11 @@ const headline = css\`
 `
   )
 ).toMatchInlineSnapshot(`
-".style0 { 
-  &:hover {
-    color: var(--🦬18fi82j0);
-  }
-   }"
+  ".yak-0 { 
+    &:hover {
+      color: var(--🦬18fi82j0);
+    }
+     }"
 `);
 });
 
@@ -167,12 +167,12 @@ const headline = css\`
 `
   )
 ).toMatchInlineSnapshot(`
-".style0 { 
-  transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
-  display: block;
-   }
+  ".yak-0 { 
+    transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
+    display: block;
+     }
 
-.style1 { color: orange }"
+  .yak-1 { color: orange }"
 `);
 });
 
@@ -196,16 +196,16 @@ const headline = css\`
 `
   )
 ).toMatchInlineSnapshot(`
-".style0 { 
-  color: blue;
-  @media (min-width: 640px) {
-    color: red;
-  }
-  transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
-  display: block;
-   }
+  ".yak-0 { 
+    color: blue;
+    @media (min-width: 640px) {
+      color: red;
+    }
+    transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
+    display: block;
+     }
 
-.style1 { color: orange }"
+  .yak-1 { color: orange }"
 `);
 });
 
@@ -231,7 +231,7 @@ const headline = css\`
 `
   )
 ).toMatchInlineSnapshot(`
-  ".style0 { 
+  ".yak-0 { 
     :before {
       content: \\"\\\\2022\\";
     }
@@ -242,3 +242,41 @@ const headline = css\`
    }"
 `);
 });
+
+it("should convert keyframes", async () => {
+  expect(
+  await cssloader.call(
+    loaderContext,
+    `
+import styles from "./page.module.css";
+import { styled, keyframes } from "next-yak";
+
+const fadeIn = keyframes\`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+\`
+
+const FadeInButton = styled.button\`
+  animation: 1s \${fadeIn} ease-out;
+\`
+`
+  )
+).toMatchInlineSnapshot(`
+  "@keyframes yak-animation-0 { 
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+   }
+
+  .yak-1 { 
+    animation: 1s var(--🦬18fi82j0) ease-out;
+   }"
+`);
+});

packages/next-yak/loaders/__tests__/tsloader.test.ts

@@ -60,7 +60,7 @@ export const Main = () => <h1 className={headline({}).className}>Hello World</h1
       import { css } from \\"next-yak\\";
       import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
       type x = number;
-      const headline = css(__styleYak.style0);
+      const headline = css(__styleYak.yak-0);
       export const Main = () => <h1 className={headline({}).className}>Hello World</h1>;"
     `);
   });
@@ -91,7 +91,7 @@ const headline = css\`
       import { css } from \\"next-yak\\";
       import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
       const x = Math.random();
-      const headline = css(__styleYak.style0, x > 0.5 && css(__styleYak.style1));"
+      const headline = css(__styleYak.yak-0, x > 0.5 && css(__styleYak.yak-1));"
     `);
   });
 
@@ -125,8 +125,8 @@ const FancyButton = styled(Button)\`
       import { styled, css } from \\"next-yak\\";
       import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
       const x = Math.random();
-      const Button = styled.button(__styleYak.style0, x > 0.5 && css(__styleYak.style1));
-      const FancyButton = styled(Button)(__styleYak.style2);"
+      const Button = styled.button(__styleYak.yak-0, x > 0.5 && css(__styleYak.yak-1));
+      const FancyButton = styled(Button)(__styleYak.yak-2);"
     `);
   });
 });
@@ -153,7 +153,7 @@ const headline = css\`
   import { css } from \\"next-yak\\";
   import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
   import { easing } from \\"styleguide\\";
-  const headline = css(__styleYak.style0, css(__styleYak.style1), css(__styleYak.style2), {
+  const headline = css(__styleYak.yak-0, css(__styleYak.yak-1), css(__styleYak.yak-2), {
     \\"style\\": {
       \\"--\\\\uD83E\\\\uDDAC18fi82j0\\": ({
         i
@@ -163,3 +163,38 @@ const headline = css\`
   });"
 `);
 });
+
+it("should convert keyframes", async () => {
+  expect(
+  await tsloader.call(
+    loaderContext,
+    `
+import styles from "./page.module.css";
+import { styled, keyframes } from "next-yak";
+
+const fadeIn = keyframes\`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+\`
+
+const FadeInButton = styled.button\`
+  animation: 1s \${fadeIn} ease-out;
+\`
+`
+  )
+).toMatchInlineSnapshot(`
+  "import styles from \\"./page.module.css\\";
+  import { styled, keyframes } from \\"next-yak\\";
+  import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
+  const fadeIn = keyframes(__styleYak.yak-animation-0);
+  const FadeInButton = styled.button(__styleYak.yak-1, {
+    \\"style\\": {
+      \\"--\\\\uD83E\\\\uDDAC18fi82j0\\": fadeIn
+    }
+  });"
+`);
+});