Rename classes to prevent conflicts with tailwindcss/user-defined cla…

…sses (#53) * Rename classes to prevent conflicts with tailwindcss/user-defined classes * better naming --------- Co-authored-by: Valentin Hervieu <[email protected]>
ValentinH · Jun 19, 2024 · 84c78d6 · 84c78d6
1 parent 99d8c1c
commit 84c78d6
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/src/lib/Cropper.svelte b/src/lib/Cropper.svelte
@@ -252,7 +252,7 @@
 
 <svelte:window on:resize={computeSizes} />
 <div
-  class="container"
+  class="svelte-easy-crop-container"
   bind:this={containerEl}
   on:mousedown|preventDefault={onMouseDown}
   on:touchstart|nonpassive|preventDefault={onTouchStart}
@@ -263,7 +263,7 @@
 >
   <img
     bind:this={imgEl}
-    class="image"
+    class="svelte-easy-crop-image"
     src={image}
     on:load={onImgLoad}
     alt=""
@@ -272,17 +272,17 @@
   />
   {#if cropperSize}
     <div
-      class="cropperArea"
-      class:round={cropShape === 'round'}
-      class:grid={showGrid}
+      class="svelte-easy-crop-area"
+      class:svelte-easy-crop-round={cropShape === 'round'}
+      class:svelte-easy-crop-grid={showGrid}
       style="width: {cropperSize.width}px; height: {cropperSize.height}px;"
       data-testid="cropper"
     />
   {/if}
 </div>
 
 <style>
-  .container {
+  .svelte-easy-crop-container {
     position: absolute;
     top: 0;
     left: 0;
@@ -294,7 +294,7 @@
     cursor: move;
   }
 
-  .image {
+  .svelte-easy-crop-image {
     max-width: 100%;
     max-height: 100%;
     margin: auto;
@@ -306,7 +306,7 @@
     will-change: transform;
   }
 
-  .cropperArea {
+  .svelte-easy-crop-area {
     position: absolute;
     left: 50%;
     top: 50%;
@@ -318,7 +318,7 @@
     overflow: hidden;
   }
 
-  .grid:before {
+  .svelte-easy-crop-grid:before {
     content: ' ';
     box-sizing: border-box;
     border: 1px solid rgba(255, 255, 255, 0.5);
@@ -331,7 +331,7 @@
     border-bottom: 0;
   }
 
-  .grid:after {
+  .svelte-easy-crop-grid:after {
     content: ' ';
     box-sizing: border-box;
     border: 1px solid rgba(255, 255, 255, 0.5);
@@ -344,7 +344,7 @@
     border-right: 0;
   }
 
-  .round {
+  .svelte-easy-crop-round {
     border-radius: 50%;
   }
 </style>