From 45603296fc7862c35fb4b036045b03b72c977fda Mon Sep 17 00:00:00 2001
From: Bastien Tagliaro <37577064+btglr@users.noreply.github.com>
Date: Sun, 19 May 2024 13:24:00 +0200
Subject: [PATCH 1/2] Rename classes to prevent conflicts with
 tailwindcss/user-defined classes

---
 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..234177b 100644
--- a/src/lib/Cropper.svelte
+++ b/src/lib/Cropper.svelte
@@ -252,7 +252,7 @@
 
 <svelte:window on:resize={computeSizes} />
 <div
-  class="container"
+  class="cropper-container"
   bind:this={containerEl}
   on:mousedown|preventDefault={onMouseDown}
   on:touchstart|nonpassive|preventDefault={onTouchStart}
@@ -263,7 +263,7 @@
 >
   <img
     bind:this={imgEl}
-    class="image"
+    class="cropper-image"
     src={image}
     on:load={onImgLoad}
     alt=""
@@ -272,9 +272,9 @@
   />
   {#if cropperSize}
     <div
-      class="cropperArea"
-      class:round={cropShape === 'round'}
-      class:grid={showGrid}
+      class="cropper-area"
+      class:cropper-round={cropShape === 'round'}
+      class:cropper-grid={showGrid}
       style="width: {cropperSize.width}px; height: {cropperSize.height}px;"
       data-testid="cropper"
     />
@@ -282,7 +282,7 @@
 </div>
 
 <style>
-  .container {
+  .cropper-container {
     position: absolute;
     top: 0;
     left: 0;
@@ -294,7 +294,7 @@
     cursor: move;
   }
 
-  .image {
+  .cropper-image {
     max-width: 100%;
     max-height: 100%;
     margin: auto;
@@ -306,7 +306,7 @@
     will-change: transform;
   }
 
-  .cropperArea {
+  .cropper-area {
     position: absolute;
     left: 50%;
     top: 50%;
@@ -318,7 +318,7 @@
     overflow: hidden;
   }
 
-  .grid:before {
+  .cropper-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 {
+  .cropper-grid:after {
     content: ' ';
     box-sizing: border-box;
     border: 1px solid rgba(255, 255, 255, 0.5);
@@ -344,7 +344,7 @@
     border-right: 0;
   }
 
-  .round {
+  .cropper-round {
     border-radius: 50%;
   }
 </style>

From c14e0cf29cfd71bb54162c9dd9525738ff6d9ea0 Mon Sep 17 00:00:00 2001
From: Valentin Hervieu <valentin@hervi.eu>
Date: Wed, 19 Jun 2024 22:22:39 +0200
Subject: [PATCH 2/2] better naming

---
 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 234177b..b199fb6 100644
--- a/src/lib/Cropper.svelte
+++ b/src/lib/Cropper.svelte
@@ -252,7 +252,7 @@
 
 <svelte:window on:resize={computeSizes} />
 <div
-  class="cropper-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="cropper-image"
+    class="svelte-easy-crop-image"
     src={image}
     on:load={onImgLoad}
     alt=""
@@ -272,9 +272,9 @@
   />
   {#if cropperSize}
     <div
-      class="cropper-area"
-      class:cropper-round={cropShape === 'round'}
-      class:cropper-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>
-  .cropper-container {
+  .svelte-easy-crop-container {
     position: absolute;
     top: 0;
     left: 0;
@@ -294,7 +294,7 @@
     cursor: move;
   }
 
-  .cropper-image {
+  .svelte-easy-crop-image {
     max-width: 100%;
     max-height: 100%;
     margin: auto;
@@ -306,7 +306,7 @@
     will-change: transform;
   }
 
-  .cropper-area {
+  .svelte-easy-crop-area {
     position: absolute;
     left: 50%;
     top: 50%;
@@ -318,7 +318,7 @@
     overflow: hidden;
   }
 
-  .cropper-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;
   }
 
-  .cropper-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;
   }
 
-  .cropper-round {
+  .svelte-easy-crop-round {
     border-radius: 50%;
   }
 </style>