style(biome): update biome to lint css code (#2025)

vtex · Oct 22, 2024 · 1b105ff · 1b105ff
2 parents b9b03fb + fcb36ec
commit 1b105ff
Show file tree

Hide file tree

Showing 68 changed files with 8,588 additions and 19,098 deletions.
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -37,9 +37,6 @@ jobs:
       - name: Code lint
         run: pnpm lint
 
-      - name: Stylelint
-        run: pnpm stylelint **/*.css
-
       - name: Test
         run: pnpm test:ci
 

diff --git a/biome.json b/biome.json
@@ -43,7 +43,8 @@
       "a11y": {
         "noSvgWithoutTitle": "off",
         "useButtonType": "off",
-        "useKeyWithClickEvents": "off"
+        "useKeyWithClickEvents": "off",
+        "noLabelWithoutControl": "off"
       },
       "suspicious": {
         "noExplicitAny": "off",

diff --git a/examples/next-14x/.eslintrc.json b/examples/next-14x/.eslintrc.json
diff --git a/examples/next-14x/package.json b/examples/next-14x/package.json
@@ -5,8 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "start": "next start"
   },
   "dependencies": {
     "@tanstack/react-table": "8.13.2",
@@ -21,8 +20,6 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.3",
     "typescript": "^5"
   }
 }
diff --git a/examples/shoreline-nextjs-integration/next-env.d.ts b/examples/shoreline-nextjs-integration/next-env.d.ts
diff --git a/package.json b/package.json
@@ -27,7 +27,6 @@
     "build:storybook": "pnpm build && pnpm storybook build",
     "test": "vitest",
     "version": "lerna run version",
-    "lint:css": "stylelint \"**/*.css\"",
     "chromatic": "chromatic --exit-zero-on-changes --build-script-name=build:storybook",
     "gen:component": "plop component",
     "create:icon": "plop icon",
@@ -37,12 +36,11 @@
     "test:ci": "pnpm test",
     "test:storybook": "pnpm run build:storybook:ci && pnpm dlx playwright install chromium --with-deps && test-storybook --browsers chromium",
     "test:storybook:ci": "concurrently -k -s first -n storybook@shoreline,test:storybook@shoreline -c magenta,blue \"http-server storybook-static --port 6006 --silent\" \"wait-on tcp:127.0.0.1:6006 && pnpm run test:storybook\"",
-    "lint:ci": "pnpm lint",
     "prepare": "husky install",
     "commitlint": "commitlint --edit"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
+    "@biomejs/biome": "1.9.4",
     "@chromatic-com/storybook": "^1",
     "@commitlint/cli": "^9.1.2",
     "@commitlint/config-conventional": "^9.1.2",
@@ -63,7 +61,6 @@
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "@vitejs/plugin-react": "4.1.0",
-    "@vtex/shoreline-stylelint": "workspace:*",
     "@vtex/shoreline-test-utils": "workspace:*",
     "chromatic": "^9.1.0",
     "commitizen": "^4.2.0",
@@ -81,9 +78,6 @@
     "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
     "storybook": "^8.0.9",
-    "stylelint": "^15.11.0",
-    "stylelint-config-recommended": "^13.0.0",
-    "stylelint-prettier": "^4.0.2",
     "tslib": "2.6.3",
     "tsup": "8.1.0",
     "turbo": "2.0.9",
@@ -93,8 +87,7 @@
     "wait-on": "7.2.0"
   },
   "lint-staged": {
-    "*.{ts,tsx,js,jsx,json}": "biome check --write .",
-    "*.css": "stylelint \"**/*.css\" --fix"
+    "*.{ts,tsx,js,jsx,json,css}": "biome check --write ."
   },
   "config": {
     "commitizen": {

diff --git a/packages/docs/components/decorative-box/decorative-box.module.css b/packages/docs/components/decorative-box/decorative-box.module.css
@@ -13,7 +13,7 @@
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
 }
 
-.decorativeBox[data-subtle='true'] {
+.decorativeBox[data-subtle="true"] {
   background-color: transparent;
   border: none;
   border-radius: 0;

diff --git a/packages/docs/components/img-card/img-card-grid.module.css b/packages/docs/components/img-card/img-card-grid.module.css
@@ -7,9 +7,9 @@
   display: grid;
   width: 100%;
   grid-template-columns: repeat(
-    auto-fill,
-    minmax(max(250px, calc((100% - 1.25rem * 2) / var(--rows))), 1fr)
-  );
+      auto-fill,
+      minmax(max(250px, calc((100% - 1.25rem * 2) / var(--rows))), 1fr)
+    );
   gap: var(--sl-space-5);
   margin: var(--mt) var(--mr) var(--mb) var(--ml);
 }
diff --git a/packages/docs/components/preview/preview.module.css b/packages/docs/components/preview/preview.module.css
@@ -7,11 +7,7 @@
 }
 
 .previewWrapper {
-  --sl-local-bg: color-mix(
-    in srgb,
-    var(--sl-color-gray-1) 50%,
-    transparent 50%
-  );
+  --sl-local-bg: color-mix(in srgb, var(--sl-color-gray-1) 50%, transparent 50%);
   padding: var(--space);
   min-height: var(--min-h);
   height: fit-content;
@@ -23,19 +19,15 @@
   transition: all 250ms cubic-bezier(0, 0.12, 0, 1.05);
 }
 
-.previewWrapper[data-theme='muted'] {
-  --sl-local-bg: color-mix(
-    in srgb,
-    var(--sl-color-gray-1) 50%,
-    transparent 50%
-  );
+.previewWrapper[data-theme="muted"] {
+  --sl-local-bg: color-mix(in srgb, var(--sl-color-gray-1) 50%, transparent 50%);
 }
 
-.previewWrapper[data-theme='base'] {
+.previewWrapper[data-theme="base"] {
   --sl-local-bg: var(--sl-bg-base);
 }
 
-.previewWrapper[data-fixed-height='true'] {
+.previewWrapper[data-fixed-height="true"] {
   height: var(--min-h);
 }
 

diff --git a/packages/docs/components/props-docs/props-docs.module.css b/packages/docs/components/props-docs/props-docs.module.css
@@ -24,12 +24,12 @@
   display: inline-flex;
 }
 
-.tag[data-color='purple'] {
+.tag[data-color="purple"] {
   --color: #6847ba;
   --background: #6847ba14;
 }
 
-.tag[data-color='green'] {
+.tag[data-color="green"] {
   --color: #458443;
   --background: #45844314;
 }
diff --git a/packages/docs/components/tokens-grid/cell.module.css b/packages/docs/components/tokens-grid/cell.module.css
@@ -9,6 +9,6 @@
   white-space: pre-line;
 }
 
-.cell[data-type='preview'] {
+.cell[data-type="preview"] {
   padding-right: var(--sl-space-0);
 }
diff --git a/packages/docs/components/tokens-grid/grid.module.css b/packages/docs/components/tokens-grid/grid.module.css
@@ -3,18 +3,18 @@
   grid-template-columns: 2fr 2fr 5rem;
 }
 
-.grid[data-foundation='breakpoint'] {
+.grid[data-foundation="breakpoint"] {
   grid-template-columns: 2fr 2fr 2fr;
 }
 
-.grid[data-foundation='elevation'] {
+.grid[data-foundation="elevation"] {
   grid-template-columns: 2fr 3fr 5rem;
 }
 
-.grid[data-foundation='space'] {
+.grid[data-foundation="space"] {
   grid-template-columns: 2fr 1fr 1fr;
 }
 
-.grid[data-foundation='radius'] {
+.grid[data-foundation="radius"] {
   grid-template-columns: 2fr 1fr 5rem;
 }
diff --git a/packages/docs/components/tokens-grid/preview-cell.module.css b/packages/docs/components/tokens-grid/preview-cell.module.css
@@ -7,81 +7,81 @@
   letter-spacing: var(--sl-text-body-letter-spacing);
 }
 
-.previewCell[data-foundation='color'],
-.previewCell[data-foundation='bg'],
-.previewCell[data-foundation='fg'] {
+.previewCell[data-foundation="color"],
+.previewCell[data-foundation="bg"],
+.previewCell[data-foundation="fg"] {
   background: var(--value);
   height: var(--cell-size);
   width: var(--cell-size);
   border-radius: var(--sl-radius-2);
 }
 
-.previewCell[data-foundation='border'] {
+.previewCell[data-foundation="border"] {
   border: var(--value);
   background: transparent;
   height: var(--cell-size);
   width: var(--cell-size);
   border-radius: var(--sl-radius-2);
 }
 
-.previewCell[data-foundation='radius'] {
+.previewCell[data-foundation="radius"] {
   background: var(--sl-color-gray-5);
   height: var(--cell-size);
   width: var(--cell-size);
   border-radius: var(--value);
 }
 
-.previewCell[data-foundation='space'] {
+.previewCell[data-foundation="space"] {
   background: var(--sl-color-gray-5);
   height: var(--cell-size);
   width: var(--value);
   border-radius: var(--sl-space-05);
 }
 
-.previewCell[data-foundation='letter-spacing'],
-.previewCell[data-foundation='font-size'],
-.previewCell[data-foundation='font-weight'],
-.previewCell[data-foundation='text'],
-.previewCell[data-foundation='line-height'] {
+.previewCell[data-foundation="letter-spacing"],
+.previewCell[data-foundation="font-size"],
+.previewCell[data-foundation="font-weight"],
+.previewCell[data-foundation="text"],
+.previewCell[data-foundation="line-height"] {
   display: flex;
   align-items: center;
   height: var(--cell-size);
 }
 
-.previewCell[data-foundation='letter-spacing']::after,
-.previewCell[data-foundation='font-size']::after,
-.previewCell[data-foundation='font-weight']::after,
-.previewCell[data-foundation='text']::after,
-.previewCell[data-foundation='line-height']::after {
-  content: 'Aa';
+.previewCell[data-foundation="letter-spacing"]::after,
+.previewCell[data-foundation="font-size"]::after,
+.previewCell[data-foundation="font-weight"]::after,
+.previewCell[data-foundation="text"]::after,
+.previewCell[data-foundation="line-height"]::after {
+  content: "Aa";
 }
 
-.previewCell[data-foundation='letter-spacing'] {
+.previewCell[data-foundation="letter-spacing"] {
   font-size: 0.875rem;
   letter-spacing: var(--value);
 }
 
-.previewCell[data-foundation='font-size'] {
+.previewCell[data-foundation="font-size"] {
   font-size: var(--value);
 }
 
-.previewCell[data-foundation='line-height'] {
+.previewCell[data-foundation="line-height"] {
   font-size: 0.875rem;
   line-height: var(--value);
 }
 
-.previewCell[data-foundation='font-weight'] {
+.previewCell[data-foundation="font-weight"] {
   font-size: 0.875rem;
   font-weight: var(--value);
 }
 
-.previewCell[data-foundation='text'] {
+.previewCell[data-foundation="text"] {
   font: var(--preview-cell-text-font);
   letter-spacing: var(--preview-cell-text-letter-spacing);
 }
 
-.previewCell[data-foundation='shadow'],
-.previewCell[data-foundation='focus-ring'] {
+.previewCell[data-foundation="shadow"],
+.previewCell[data-foundation="focus-ring"] {
   height: var(--cell-size);
   width: var(--cell-size);
   display: flex;

diff --git a/packages/docs/pages/global.css b/packages/docs/pages/global.css
@@ -1,6 +1,6 @@
 /**
-* Nextra Overrides
-*/
+ * Nextra Overrides
+ */
 
 h2.nx-border-b {
   border: none;

diff --git a/packages/shoreline/src/components/contextual-help/stories/stories.css b/packages/shoreline/src/components/contextual-help/stories/stories.css
@@ -1,24 +1,24 @@
 .ch-examples {
-    height: 100vh;
+  height: 100vh;
 }
 
 .ch-center {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .ch-decorative-box {
-    padding: 3rem;
-    background-clip: padding-box;
-    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
+  padding: 3rem;
+  background-clip: padding-box;
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
 }
 
 .ch-bg-purple {
-    background-color: var(--sl-color-purple-1);
+  background-color: var(--sl-color-purple-1);
 }
 
 .ch-bg-green {
-    background-color: var(--sl-color-green-1);
-} 
+  background-color: var(--sl-color-green-1);
+}
diff --git a/packages/shoreline/src/components/empty-state/stories/styles.css b/packages/shoreline/src/components/empty-state/stories/styles.css
@@ -1,5 +1,5 @@
 .screen-container {
   width: 80%;
   height: 80vh;
-  border: var(--sl-border-base)
+  border: var(--sl-border-base);
 }
diff --git a/packages/shoreline/src/components/label/stories/show.stories.tsx b/packages/shoreline/src/components/label/stories/show.stories.tsx
@@ -10,9 +10,11 @@ export function Show() {
     <Stack>
       <Label>Label</Label>
       <Label optional>Label</Label>
-      <Stack role="group" space="$space-1">
-        <Label htmlFor="example">Label for input</Label>
-        <input id="example" />
+      <Stack asChild space="$space-1">
+        <fieldset>
+          <Label htmlFor="example">Label for input</Label>
+          <input id="example" />
+        </fieldset>
       </Stack>
     </Stack>
   )