@vnejs/plugins.views.scenario.interface.fastforward 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/plugins.views.scenario.interface.fastforward",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/view/index.jsx

@@ -1,13 +1,9 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
 
-import { cn } from "@bem-react/classname";
-
 import { Icon, useIsForceHook, View } from "@vnejs/uis.react";
 
-import "./index.styl";
-
-const b = cn("InterfaceFastForward");
+import { b } from "./index.styles.js";
 
 const InterfaceFastForward = ({ store, onMount, ...props } = {}) => {
   const [state, setState] = useState({});

package/view/index.styles.js

@@ -0,0 +1,28 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+
+export const b = cn("InterfaceFastForward");
+
+const CSS = `
+@keyframes fastforward {
+  from {
+    transform: scale(1.1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  to {
+    transform: scale(1.1);
+  }
+}
+
+${sel(b({ isAnimated: true }))} {
+  animation-duration: 500ms;
+  animation-name: fastforward;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}
+`;
+
+injectStyles(CSS);

package/view/index.styl

@@ -1,19 +0,0 @@
-@keyframes fastforward
-    from
-        transform: scale(1.1)
-
-    50%
-        transform: scale(0.9)
-
-    to
-        transform: scale(1.1)
-
-.InterfaceFastForward
-    &_isAnimated
-        animation-duration: 500ms
-        animation-name: fastforward
-        animation-iteration-count: infinite
-        animation-timing-function: ease-in-out
-
-
-