Remove requirement to import style.css

Author: amirafa

README.md

@@ -60,7 +60,7 @@ Here's an example of how to use the `vue3-pull-to-refresh` component in your Vue
 <script setup lang="ts">
 //@ts-ignore
 import Vue3PullToRefresh from '@amirafa/vue3-pull-to-refresh';
-import '@amirafa/vue3-pull-to-refresh/dist/style.css';
+//import '@amirafa/vue3-pull-to-refresh/dist/style.css'; deprecated
 </script>
 ```
 ### Note on `@ts-ignore`
@@ -78,6 +78,10 @@ body {
 
 ## Changelog
 
+### [Version 1.2.7] - 2024-11-06
+#### Updated
+- Remove requirement to import style.css
+
 ### [Version 1.2.2] - 2024-11-06
 #### Added
 - Github packages config

lib/Vue3PullToRefresh.vue

@@ -22,7 +22,6 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, PropType, ref } from "vue";
-import "./style.css";
 
 type OPTIONS = {
     color: string;
@@ -169,3 +168,38 @@ function normalizeDegrees(degrees: number) {
     return ((degrees % 360) + 360) % 360;
 }
 </script>
+
+<style>
+.container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    transition: all 70ms linear;
+}
+
+.icon-container {
+    position: absolute;
+    padding: 4px;
+    border-radius: 9999px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+</style>

lib/main.ts

@@ -1,4 +1,3 @@
-import "./style.css";
 import Vue3PullToRefresh from './Vue3PullToRefresh.vue';
 
 export default Vue3PullToRefresh;

lib/style.css

@@ -49,6 +49,7 @@
     "@vitejs/plugin-vue": "^3.1.0",
     "typescript": "^4.6.4",
     "vite": "^3.1.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
     "vue-tsc": "^0.40.4"
   }
 }

package-lock.json

@@ -1,23 +1,24 @@
 import { resolve } from "path";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import cssInjectedByJs from "vite-plugin-css-injected-by-js";
 
 export default defineConfig({
-    plugins: [vue()],
+    plugins: [vue(), cssInjectedByJs()],
     build: {
         lib: {
             entry: resolve(__dirname, "lib/main.ts"),
-            name: "Vue3PullToRefresh",
+            name: "Vue3PulToRefresh",
             fileName: "vue3-pull-to-refresh",
         },
+        cssCodeSplit: false,
         rollupOptions: {
             external: ["vue"],
             output: {
+                manualChunks: undefined,
                 globals: {
                     vue: "Vue",
                 },
-                // Ensure that the styles are bundled if needed
-                assetFileNames: "assets/[name]-[hash][extname]",
             },
         },
     },