Enable CSS formatter in Biome config

wojtekmaj · Jul 9, 2024 · c06eed8 · c06eed8
1 parent 2ea9574
commit c06eed8
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 43 deletions.
diff --git a/biome.json b/biome.json
@@ -17,6 +17,15 @@
       }
     }
   },
+  "css": {
+    "formatter": {
+      "enabled": true,
+      "indentStyle": "space",
+      "indentWidth": 2,
+      "lineWidth": 100,
+      "quoteStyle": "single"
+    }
+  },
   "javascript": {
     "formatter": {
       "quoteStyle": "single"

diff --git a/packages/react-pdf/src/Page/AnnotationLayer.css b/packages/react-pdf/src/Page/AnnotationLayer.css
@@ -16,8 +16,8 @@
 :root {
   --react-pdf-annotation-layer: 1;
   --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
-  --input-focus-border-color: Highlight;
-  --input-focus-outline: 1px solid Canvas;
+  --input-focus-border-color: highlight;
+  --input-focus-outline: 1px solid canvas;
   --input-unfocused-border-color: transparent;
   --input-disabled-border-color: transparent;
   --input-hover-border-color: black;
@@ -26,16 +26,16 @@
 
 @media screen and (forced-colors: active) {
   :root {
-    --input-focus-border-color: CanvasText;
-    --input-unfocused-border-color: ActiveText;
-    --input-disabled-border-color: GrayText;
-    --input-hover-border-color: Highlight;
-    --link-outline: 1.5px solid LinkText;
+    --input-focus-border-color: canvastext;
+    --input-unfocused-border-color: activetext;
+    --input-disabled-border-color: graytext;
+    --input-hover-border-color: highlight;
+    --link-outline: 1.5px solid linktext;
   }
   .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
   .annotationLayer .choiceWidgetAnnotation select:required,
   .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
-    outline: 1.5px solid selectedItem;
+    outline: 1.5px solid selecteditem;
   }
 
   .annotationLayer .linkAnnotation:hover {
@@ -53,13 +53,13 @@
 }
 
 .annotationLayer[data-main-rotation='90'] .norotate {
-  transform: rotate(270deg) translateX(-100%);
+  transform: rotate(270deg) translatex(-100%);
 }
 .annotationLayer[data-main-rotation='180'] .norotate {
   transform: rotate(180deg) translate(-100%, -100%);
 }
 .annotationLayer[data-main-rotation='270'] .norotate {
-  transform: rotate(90deg) translateY(-100%);
+  transform: rotate(90deg) translatey(-100%);
 }
 
 .annotationLayer canvas {
@@ -182,7 +182,7 @@
 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
 .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
-  background-color: CanvasText;
+  background-color: canvastext;
   content: '';
   display: block;
   position: absolute;

diff --git a/packages/react-pdf/src/Page/TextLayer.css b/packages/react-pdf/src/Page/TextLayer.css
@@ -21,19 +21,19 @@
 
 @media screen and (forced-colors: active) {
   :root {
-    --highlight-bg-color: Highlight;
-    --highlight-selected-bg-color: ButtonText;
+    --highlight-bg-color: highlight;
+    --highlight-selected-bg-color: buttontext;
   }
 }
 
 [data-main-rotation='90'] {
-  transform: rotate(90deg) translateY(-100%);
+  transform: rotate(90deg) translatey(-100%);
 }
 [data-main-rotation='180'] {
   transform: rotate(180deg) translate(-100%, -100%);
 }
 [data-main-rotation='270'] {
-  transform: rotate(270deg) translateX(-100%);
+  transform: rotate(270deg) translatex(-100%);
 }
 
 .textLayer {

diff --git a/sample/create-react-app-5/src/Sample.css b/sample/create-react-app-5/src/Sample.css
@@ -1,10 +1,7 @@
 body {
   margin: 0;
   background-color: #525659;
-  font-family:
-    Segoe UI,
-    Tahoma,
-    sans-serif;
+  font-family: 'Segoe UI', 'Tahoma', sans-serif;
 }
 
 .Example input,

diff --git a/sample/next-app/app/Sample.css b/sample/next-app/app/Sample.css
@@ -1,10 +1,7 @@
 body {
   margin: 0;
   background-color: #525659;
-  font-family:
-    Segoe UI,
-    Tahoma,
-    sans-serif;
+  font-family: 'Segoe UI', 'Tahoma', sans-serif;
 }
 
 .Example input,

diff --git a/sample/next-pages/pages/Sample.css b/sample/next-pages/pages/Sample.css
@@ -1,10 +1,7 @@
 body {
   margin: 0;
   background-color: #525659;
-  font-family:
-    Segoe UI,
-    Tahoma,
-    sans-serif;
+  font-family: 'Segoe UI', 'Tahoma', sans-serif;
 }
 
 .Example input,

diff --git a/sample/parcel2/Sample.css b/sample/parcel2/Sample.css
@@ -1,10 +1,7 @@
 body {
   margin: 0;
   background-color: #525659;
-  font-family:
-    Segoe UI,
-    Tahoma,
-    sans-serif;
+  font-family: 'Segoe UI', 'Tahoma', sans-serif;
 }
 
 .Example input,

diff --git a/sample/vite/Sample.css b/sample/vite/Sample.css
@@ -1,10 +1,7 @@
 body {
   margin: 0;
   background-color: #525659;
-  font-family:
-    Segoe UI,
-    Tahoma,
-    sans-serif;
+  font-family: 'Segoe UI', 'Tahoma', sans-serif;
 }
 
 .Example input,

diff --git a/sample/webpack5/Sample.css b/sample/webpack5/Sample.css
@@ -1,10 +1,7 @@
 body {
   margin: 0;
   background-color: #525659;
-  font-family:
-    Segoe UI,
-    Tahoma,
-    sans-serif;
+  font-family: 'Segoe UI', 'Tahoma', sans-serif;
 }
 
 .Example input,

diff --git a/test/Test.css b/test/Test.css
@@ -1,9 +1,6 @@
 body {
   margin: 0;
-  font-family:
-    Segoe UI,
-    Tahoma,
-    sans-serif;
+  font-family: 'Segoe UI', 'Tahoma', sans-serif;
 }
 
 .Test header {