Add biome for linting and formatting CSS (#5316)

* Add biome for formatting CSS

* Format CSS

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npm run lint-staged

biome.json

@@ -0,0 +1,48 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"ignore": []
+	},
+  "formatter": {
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "organizeImports": {
+    "enabled": false
+  },
+  "javascript": {
+    "formatter": {
+      "enabled": false
+    },
+    "linter": {
+      "enabled": false
+    }
+  },
+  "json": {
+    "formatter": {
+      "enabled": false
+    },
+    "linter": {
+      "enabled": false
+    }
+  },
+	"css": {
+    "parser": {
+      "cssModules": true
+    },
+		"formatter": {
+			"enabled": true,
+      "quoteStyle": "single",
+      "lineWidth": 120
+		},
+		"linter": {
+			"enabled": true
+		}
+	}
+}

lint-staged.config.js

@@ -10,6 +10,7 @@ function prettierMarkdown(filenames) {
 module.exports = {
   '{docs,samples}/**/*.{html,js,jsx,ts,tsx}': prettierCode,
   '**/*.md': prettierMarkdown,
+  'packages/**/*.css': ['npm run precommit:biome'],
   'packages/api/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:api'],
   'packages/bundle/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:bundle'],
   'packages/component/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:component'],

package.json

@@ -33,6 +33,7 @@
     "./packages/test/fluent-bundle"
   ],
   "scripts": {
+    "biome": "biome check ./packages",
     "browser": "node ./packages/test/harness/src/host/dev/index http://localhost:5001/__tests__/html/",
     "browser:watch": "node-dev --no-notify --respawn ./packages/test/harness/src/host/dev/index http://localhost:5001/__tests__/html/",
     "build": "npm run build --if-present --workspaces",
@@ -47,6 +48,7 @@
     "eslint": "npm run precommit",
     "lint-staged": "lint-staged",
     "precommit": "npm run precommit --if-present --workspaces",
+    "precommit:biome": "npm run biome -- --no-errors-on-unmatched",
     "precommit:eslint:api": "cd packages && cd api && npm run precommit:eslint",
     "precommit:eslint:bundle": "cd packages && cd bundle && npm run precommit:eslint",
     "precommit:eslint:component": "cd packages && cd component && npm run precommit:eslint",
@@ -165,6 +167,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@babel/runtime": "^7.19.0",
+    "@biomejs/biome": "1.9.3",
     "@testing-library/react": "^12.1.5",
     "@types/jest": "^28.1.8",
     "@types/react": "^16.14.60",

packages/component/src/decorator/private/BorderFlair.module.css

@@ -98,10 +98,12 @@
 
   /* Helper variables */
   --webchat-decorator-borderFlair-backgroundSize: calc(100% + (2 * var(--webchat-decorator-borderFlair-borderSize)));
-  --webchat-decorator-borderFlair-borderGradient: linear-gradient(calc(var(--webchat-decorator-borderFlair-animated-angle) * 180deg + 45deg),
-      var(--webchat-decorator-borderFlair-animated-color1),
-      var(--webchat-decorator-borderFlair-animated-color2),
-      var(--webchat-decorator-borderFlair-animated-color3));
+  --webchat-decorator-borderFlair-borderGradient: linear-gradient(
+    calc(var(--webchat-decorator-borderFlair-animated-angle) * 180deg + 45deg),
+    var(--webchat-decorator-borderFlair-animated-color1),
+    var(--webchat-decorator-borderFlair-animated-color2),
+    var(--webchat-decorator-borderFlair-animated-color3)
+  );
   --webchat-decorator-borderFlair-borderMask: linear-gradient(hsl(0 0% 100% / 0), hsl(0 0% 100% / 0)) padding-box,
     linear-gradient(hsl(0 0% 100%), hsl(0 0% 100%)) border-box;
 
@@ -110,7 +112,8 @@
     borderAnimation-color1 1200ms linear 0ms forwards,
     borderAnimation-color2 1200ms linear 200ms forwards,
     borderAnimation-color3 1200ms linear 400ms forwards;
-  background: var(--webchat-decorator-borderFlair-borderGradient) center center / var(--webchat-decorator-borderFlair-backgroundSize) var(--webchat-decorator-borderFlair-backgroundSize);
+  background: var(--webchat-decorator-borderFlair-borderGradient) center center /
+    var(--webchat-decorator-borderFlair-backgroundSize) var(--webchat-decorator-borderFlair-backgroundSize);
   border: var(--webchat-decorator-borderFlair-borderSize) solid transparent;
   border-radius: inherit;
   inset: 0;
@@ -537,15 +540,24 @@
 
   :global(.webchat) .border-flair {
     --webchat-decorator-borderFlair-animated-angle: calc(0.75 + 2 * var(--webchat-decorator-borderFlair-animated));
-    --webchat-decorator-borderFlair-animated-color1: color-mix(in srgb,
-        var(--webchat-decorator-borderFlair-color1) calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 1.5)) * 100%),
-        var(--webchat-decorator-borderFlair-color1Fade));
-    --webchat-decorator-borderFlair-animated-color2: color-mix(in srgb,
-        var(--webchat-decorator-borderFlair-color2) calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 1.75)) * 100%),
-        var(--webchat-decorator-borderFlair-color2Fade));
-    --webchat-decorator-borderFlair-animated-color3: color-mix(in srgb,
-        var(--webchat-decorator-borderFlair-color3) calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 2)) * 100%),
-        var(--webchat-decorator-borderFlair-color3Fade));
+    --webchat-decorator-borderFlair-animated-color1: color-mix(
+      in srgb,
+      var(--webchat-decorator-borderFlair-color1)
+        calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 1.5)) * 100%),
+      var(--webchat-decorator-borderFlair-color1Fade)
+    );
+    --webchat-decorator-borderFlair-animated-color2: color-mix(
+      in srgb,
+      var(--webchat-decorator-borderFlair-color2)
+        calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 1.75)) * 100%),
+      var(--webchat-decorator-borderFlair-color2Fade)
+    );
+    --webchat-decorator-borderFlair-animated-color3: color-mix(
+      in srgb,
+      var(--webchat-decorator-borderFlair-color3)
+        calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 2)) * 100%),
+      var(--webchat-decorator-borderFlair-color3Fade)
+    );
 
     animation: borderFlair-animation 2000ms linear forwards;
   }

packages/component/src/decorator/private/BorderLoader.module.css

@@ -23,24 +23,23 @@
   width: 100%;
 }
 
-
 :global(.webchat) .border-loader__loader {
-  --webchat-decorator-borderLoader-color1: var(--webchat-borderLoader-color1,
-      var(--webchat__border-animation--color-1));
-  --webchat-decorator-borderLoader-color2: var(--webchat-borderLoader-color2,
-      var(--webchat__border-animation--color-2));
-  --webchat-decorator-borderLoader-color3: var(--webchat-borderLoader-color3,
-      var(--webchat__border-animation--color-3));
+  --webchat-decorator-borderLoader-color1: var(--webchat-borderLoader-color1, var(--webchat__border-animation--color-1));
+  --webchat-decorator-borderLoader-color2: var(--webchat-borderLoader-color2, var(--webchat__border-animation--color-2));
+  --webchat-decorator-borderLoader-color3: var(--webchat-borderLoader-color3, var(--webchat__border-animation--color-3));
   --webchat-decorator-borderLoader-color1Fade: var(--webchat-borderLoader-color1Fade, transparent);
   --webchat-decorator-borderLoader-color3Fade: var(--webchat-borderLoader-color1Fade, transparent);
 
   animation: borderAnimation-position 3s linear infinite;
-  background: linear-gradient(90deg,
+  background: linear-gradient(
+      90deg,
       var(--webchat-decorator-borderLoader-color1Fade) 0%,
       var(--webchat-decorator-borderLoader-color1) 35%,
       var(--webchat-decorator-borderLoader-color2) 70%,
       var(--webchat-decorator-borderLoader-color3) 92%,
-      var(--webchat-decorator-borderLoader-color3Fade)) no-repeat;
+      var(--webchat-decorator-borderLoader-color3Fade)
+    )
+    no-repeat;
   height: var(--webchat-decorator-borderLoader-borderSize);
   inset: 0;
   isolation: isolate;