Skip to content

Commit 0eed4fb

Browse files
OEvgenyOEvgeny
authored
Add biome for linting and formatting CSS (#5316)
* Add biome for formatting CSS * Format CSS
1 parent ea7a875 commit 0eed4fb

20 files changed

+371
-95
lines changed

‎.husky/pre-commit

-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1 @@
1-
#!/bin/sh
2-
. "$(dirname "$0")/_/husky.sh"
3-
41
npm run lint-staged

‎biome.json

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
3+
"vcs": {
4+
"enabled": true,
5+
"clientKind": "git",
6+
"useIgnoreFile": true
7+
},
8+
"files": {
9+
"ignoreUnknown": false,
10+
"ignore": []
11+
},
12+
"formatter": {
13+
"indentStyle": "space",
14+
"indentWidth": 2
15+
},
16+
"organizeImports": {
17+
"enabled": false
18+
},
19+
"javascript": {
20+
"formatter": {
21+
"enabled": false
22+
},
23+
"linter": {
24+
"enabled": false
25+
}
26+
},
27+
"json": {
28+
"formatter": {
29+
"enabled": false
30+
},
31+
"linter": {
32+
"enabled": false
33+
}
34+
},
35+
"css": {
36+
"parser": {
37+
"cssModules": true
38+
},
39+
"formatter": {
40+
"enabled": true,
41+
"quoteStyle": "single",
42+
"lineWidth": 120
43+
},
44+
"linter": {
45+
"enabled": true
46+
}
47+
}
48+
}

‎lint-staged.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ function prettierMarkdown(filenames) {
1010
module.exports = {
1111
'{docs,samples}/**/*.{html,js,jsx,ts,tsx}': prettierCode,
1212
'**/*.md': prettierMarkdown,
13+
'packages/**/*.css': ['npm run precommit:biome'],
1314
'packages/api/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:api'],
1415
'packages/bundle/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:bundle'],
1516
'packages/component/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:component'],

‎package-lock.json

+166
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"./packages/test/fluent-bundle"
3434
],
3535
"scripts": {
36+
"biome": "biome check ./packages",
3637
"browser": "node ./packages/test/harness/src/host/dev/index http://localhost:5001/__tests__/html/",
3738
"browser:watch": "node-dev --no-notify --respawn ./packages/test/harness/src/host/dev/index http://localhost:5001/__tests__/html/",
3839
"build": "npm run build --if-present --workspaces",
@@ -47,6 +48,7 @@
4748
"eslint": "npm run precommit",
4849
"lint-staged": "lint-staged",
4950
"precommit": "npm run precommit --if-present --workspaces",
51+
"precommit:biome": "npm run biome -- --no-errors-on-unmatched",
5052
"precommit:eslint:api": "cd packages && cd api && npm run precommit:eslint",
5153
"precommit:eslint:bundle": "cd packages && cd bundle && npm run precommit:eslint",
5254
"precommit:eslint:component": "cd packages && cd component && npm run precommit:eslint",
@@ -165,6 +167,7 @@
165167
"@babel/preset-react": "^7.18.6",
166168
"@babel/preset-typescript": "^7.18.6",
167169
"@babel/runtime": "^7.19.0",
170+
"@biomejs/biome": "1.9.3",
168171
"@testing-library/react": "^12.1.5",
169172
"@types/jest": "^28.1.8",
170173
"@types/react": "^16.14.60",

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

+26-14
Original file line numberDiff line numberDiff line change
@@ -98,10 +98,12 @@
9898

9999
/* Helper variables */
100100
--webchat-decorator-borderFlair-backgroundSize: calc(100% + (2 * var(--webchat-decorator-borderFlair-borderSize)));
101-
--webchat-decorator-borderFlair-borderGradient: linear-gradient(calc(var(--webchat-decorator-borderFlair-animated-angle) * 180deg + 45deg),
102-
var(--webchat-decorator-borderFlair-animated-color1),
103-
var(--webchat-decorator-borderFlair-animated-color2),
104-
var(--webchat-decorator-borderFlair-animated-color3));
101+
--webchat-decorator-borderFlair-borderGradient: linear-gradient(
102+
calc(var(--webchat-decorator-borderFlair-animated-angle) * 180deg + 45deg),
103+
var(--webchat-decorator-borderFlair-animated-color1),
104+
var(--webchat-decorator-borderFlair-animated-color2),
105+
var(--webchat-decorator-borderFlair-animated-color3)
106+
);
105107
--webchat-decorator-borderFlair-borderMask: linear-gradient(hsl(0 0% 100% / 0), hsl(0 0% 100% / 0)) padding-box,
106108
linear-gradient(hsl(0 0% 100%), hsl(0 0% 100%)) border-box;
107109

@@ -110,7 +112,8 @@
110112
borderAnimation-color1 1200ms linear 0ms forwards,
111113
borderAnimation-color2 1200ms linear 200ms forwards,
112114
borderAnimation-color3 1200ms linear 400ms forwards;
113-
background: var(--webchat-decorator-borderFlair-borderGradient) center center / var(--webchat-decorator-borderFlair-backgroundSize) var(--webchat-decorator-borderFlair-backgroundSize);
115+
background: var(--webchat-decorator-borderFlair-borderGradient) center center /
116+
var(--webchat-decorator-borderFlair-backgroundSize) var(--webchat-decorator-borderFlair-backgroundSize);
114117
border: var(--webchat-decorator-borderFlair-borderSize) solid transparent;
115118
border-radius: inherit;
116119
inset: 0;
@@ -537,15 +540,24 @@
537540

538541
:global(.webchat) .border-flair {
539542
--webchat-decorator-borderFlair-animated-angle: calc(0.75 + 2 * var(--webchat-decorator-borderFlair-animated));
540-
--webchat-decorator-borderFlair-animated-color1: color-mix(in srgb,
541-
var(--webchat-decorator-borderFlair-color1) calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 1.5)) * 100%),
542-
var(--webchat-decorator-borderFlair-color1Fade));
543-
--webchat-decorator-borderFlair-animated-color2: color-mix(in srgb,
544-
var(--webchat-decorator-borderFlair-color2) calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 1.75)) * 100%),
545-
var(--webchat-decorator-borderFlair-color2Fade));
546-
--webchat-decorator-borderFlair-animated-color3: color-mix(in srgb,
547-
var(--webchat-decorator-borderFlair-color3) calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 2)) * 100%),
548-
var(--webchat-decorator-borderFlair-color3Fade));
543+
--webchat-decorator-borderFlair-animated-color1: color-mix(
544+
in srgb,
545+
var(--webchat-decorator-borderFlair-color1)
546+
calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 1.5)) * 100%),
547+
var(--webchat-decorator-borderFlair-color1Fade)
548+
);
549+
--webchat-decorator-borderFlair-animated-color2: color-mix(
550+
in srgb,
551+
var(--webchat-decorator-borderFlair-color2)
552+
calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 1.75)) * 100%),
553+
var(--webchat-decorator-borderFlair-color2Fade)
554+
);
555+
--webchat-decorator-borderFlair-animated-color3: color-mix(
556+
in srgb,
557+
var(--webchat-decorator-borderFlair-color3)
558+
calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 2)) * 100%),
559+
var(--webchat-decorator-borderFlair-color3Fade)
560+
);
549561

550562
animation: borderFlair-animation 2000ms linear forwards;
551563
}

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

+8-9
Original file line numberDiff line numberDiff line change
@@ -23,24 +23,23 @@
2323
width: 100%;
2424
}
2525

26-
2726
:global(.webchat) .border-loader__loader {
28-
--webchat-decorator-borderLoader-color1: var(--webchat-borderLoader-color1,
29-
var(--webchat__border-animation--color-1));
30-
--webchat-decorator-borderLoader-color2: var(--webchat-borderLoader-color2,
31-
var(--webchat__border-animation--color-2));
32-
--webchat-decorator-borderLoader-color3: var(--webchat-borderLoader-color3,
33-
var(--webchat__border-animation--color-3));
27+
--webchat-decorator-borderLoader-color1: var(--webchat-borderLoader-color1, var(--webchat__border-animation--color-1));
28+
--webchat-decorator-borderLoader-color2: var(--webchat-borderLoader-color2, var(--webchat__border-animation--color-2));
29+
--webchat-decorator-borderLoader-color3: var(--webchat-borderLoader-color3, var(--webchat__border-animation--color-3));
3430
--webchat-decorator-borderLoader-color1Fade: var(--webchat-borderLoader-color1Fade, transparent);
3531
--webchat-decorator-borderLoader-color3Fade: var(--webchat-borderLoader-color1Fade, transparent);
3632

3733
animation: borderAnimation-position 3s linear infinite;
38-
background: linear-gradient(90deg,
34+
background: linear-gradient(
35+
90deg,
3936
var(--webchat-decorator-borderLoader-color1Fade) 0%,
4037
var(--webchat-decorator-borderLoader-color1) 35%,
4138
var(--webchat-decorator-borderLoader-color2) 70%,
4239
var(--webchat-decorator-borderLoader-color3) 92%,
43-
var(--webchat-decorator-borderLoader-color3Fade)) no-repeat;
40+
var(--webchat-decorator-borderLoader-color3Fade)
41+
)
42+
no-repeat;
4443
height: var(--webchat-decorator-borderLoader-borderSize);
4544
inset: 0;
4645
isolation: isolate;

0 commit comments

Comments
 (0)