From 84c78d60686fd56d69f9aa4392aa02fb031e7b6c Mon Sep 17 00:00:00 2001
From: Bastien Tagliaro <37577064+btglr@users.noreply.github.com>
Date: Wed, 19 Jun 2024 22:24:42 +0200
Subject: [PATCH] Rename classes to prevent conflicts with
 tailwindcss/user-defined classes (#53)

* Rename classes to prevent conflicts with tailwindcss/user-defined classes

* better naming

---------

Co-authored-by: Valentin Hervieu <valentin@hervi.eu>
---
 src/lib/Cropper.svelte | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/lib/Cropper.svelte b/src/lib/Cropper.svelte
index 6d84cfc..b199fb6 100644
--- 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,9 +272,9 @@
   />
   {#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"
     />
@@ -282,7 +282,7 @@
 </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>