chore: update biome, remove prettier and stylelint (#2594)

resolves #2411

.github/workflows/checks.yml

@@ -13,7 +13,5 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/gh-setup
-      - name: Biome CI
+      - name: Lint code
         run: yarn biome ci .
-      - name: Lint CSS
-        run: yarn lint-style

.vscode/extensions.json

@@ -1,11 +1,9 @@
 {
   "recommendations": [
-    "esbenp.prettier-vscode",
     "unifiedjs.vscode-mdx",
     "christian-kohler.npm-intellisense",
     "techer.open-in-browser",
     "ionutvmi.path-autocomplete",
-    "stylelint.vscode-stylelint",
     "jock.svg",
     "naumovs.color-highlight",
     "clinyong.vscode-css-modules",

.vscode/settings.json

@@ -9,9 +9,8 @@
   "editor.defaultFormatter": "biomejs.biome",
   "css.customData": ["./.vscode/css-data.json"],
   "[css]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "biomejs.biome"
   },
-  "prettier.prettierPath": "./node_modules/prettier",
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "cssvar.files": [
@@ -21,9 +20,9 @@
   ],
   "html-css-class-completion.includeGlobPattern": "packages/css/**/*.{css,html}",
   "[github-actions-workflow]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "biomejs.biome"
   }
 }

apps/_components/package.json

@@ -24,6 +24,7 @@
     "@navikt/aksel-icons": "^6.14.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "clsx": "^2.1.1",
+    "prettier": "^3.3.3",
     "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {

apps/storefront/app/bloggen/_components/Card/BlogCard.module.css

@@ -1,5 +1,5 @@
 .image {
-  aspect-ratio: 16/9;
+  aspect-ratio: 16 / 9;
 }
 
 @media screen and (min-width: 1024px) {

apps/storefront/components/ComponentCard/ComponentCard.module.css

@@ -6,9 +6,7 @@
   border-radius: var(--ds-border-radius-md);
   box-shadow: var(--ds-shadow-xs);
   text-decoration: none;
-  transition:
-    0.2s transform ease-in-out,
-    0.2s box-shadow ease-in-out;
+  transition: 0.2s transform ease-in-out, 0.2s box-shadow ease-in-out;
 }
 
 .card:hover {

apps/storefront/components/NavigationCard/NavigationCard.module.css

@@ -6,9 +6,7 @@
   text-decoration: none;
   box-shadow: var(--ds-shadow-sm);
   border-radius: 8px;
-  transition:
-    0.2s transform,
-    0.2s box-shadow;
+  transition: 0.2s transform, 0.2s box-shadow;
   position: relative;
   z-index: 2;
   height: 100%;

apps/storefront/components/Tokens/TokenColor/TokenColor.module.css

@@ -25,9 +25,7 @@
   opacity: 1;
   background-image: repeating-linear-gradient(45deg, var(--color) 25%, transparent 25%, transparent 75%, var(--color) 75%, var(--color)),
     repeating-linear-gradient(45deg, var(--color) 25%, #e5e5f7 25%, #e5e5f7 75%, var(--color) 75%, var(--color));
-  background-position:
-    0 0,
-    10px 10px;
+  background-position: 0 0, 10px 10px;
   border-radius: var(--ds-border-radius-md);
   background-size: 20px 20px;
   height: 64px;

apps/storefront/components/Tokens/TokenList/TokenList.tsx

@@ -257,31 +257,30 @@ const TokenList = ({
           )}
         </div>
       )}
-      <>
-        {sectionedTokens.map(([section, tokens]) => {
-          const tokens_ = tokens as [string, Token[]][];
-          const List = () => {
-            if (type === 'dimension') {
-              return <TokensTable tokens={tokens_} />;
-            }
 
-            return (
-              <TokenCards
-                type={type}
-                cols={cardColumns}
-                tokens={tokens_}
-                hideValue={hideValue}
-              />
-            );
-          };
+      {sectionedTokens.map(([section, tokens]) => {
+        const tokens_ = tokens as [string, Token[]][];
+        const List = () => {
+          if (type === 'dimension') {
+            return <TokensTable tokens={tokens_} />;
+          }
+
           return (
-            <div key={section as string} className={classes.section}>
-              <h3>{capitalizeString(section as string)}</h3>
-              <List />
-            </div>
+            <TokenCards
+              type={type}
+              cols={cardColumns}
+              tokens={tokens_}
+              hideValue={hideValue}
+            />
           );
-        })}
-      </>
+        };
+        return (
+          <div key={section as string} className={classes.section}>
+            <h3>{capitalizeString(section as string)}</h3>
+            <List />
+          </div>
+        );
+      })}
     </div>
   );
 };

apps/theme/components/ColorPicker/ColorPicker.module.css

@@ -11,9 +11,7 @@
   height: 48px;
   width: 150px;
   padding-left: 12px;
-  transition:
-    0.04s border,
-    0.04s outline;
+  transition: 0.04s border, 0.04s outline;
   border: solid 1px var(--ds-color-neutral-border-default);
   border-radius: var(--ds-border-radius-md);
   background-color: var(--ds-color-neutral-background-default);

biome.jsonc

@@ -14,8 +14,9 @@
       ".changeset/**",
       "./package.json", // yarn and biome disagrees on package.json formatting
       "design-tokens/**/*",
-      "packages/theme/brand/**/*",
-      "apps/storefront/tokens/**"
+      "apps/storefront/tokens/**",
+      "**/dist/**/*",
+      "packages/theme/**/*.css"
     ]
   },
   "formatter": {
@@ -80,6 +81,13 @@
     "ignore": []
   },
 
+  "css": {
+    "formatter": {
+      "enabled": true,
+      "quoteStyle": "single"
+    }
+  },
+
   "overrides": [
     { "include": ["**/*.css"], "formatter": { "lineWidth": 160 } },
     {

package.json

@@ -28,7 +28,6 @@
     "build:storybook": "yarn workspace @designsystemet/storybook build",
     "build:storefront": "yarn workspace storefront build",
     "start:storefront": "yarn workspace storefront start",
-    "lint-style": "stylelint  \"**/*.css\"",
     "types": "yarn workspaces foreach -Ap --topological-dev --no-private run types",
     "types:react": "yarn workspace @digdir/designsystemet-react types",
     "types:storefront": "yarn workspace storefront types",
@@ -37,26 +36,21 @@
     "chromatic": "yarn workspace @designsystemet/storybook chromatic"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
+    "@biomejs/biome": "1.9.3",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.7",
-    "@prettier/sync": "^0.5.2",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@types/node": "^22.1.0",
-    "@types/prettier": "^3.0.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "@vitest/coverage-v8": "^2.0.5",
-    "@vitest/expect": "^2.0.5",
     "chromatic": "^11.11.0",
     "copyfiles": "^2.4.1",
-    "prettier": "^3.3.3",
     "storybook-addon-pseudo-states": "^4.0.2",
-    "stylelint": "^16.8.1",
-    "stylelint-config-standard": "^36.0.1",
     "typescript": "^5.5.4",
     "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^5.3.6",
-    "vitest": "^2.0.5"
+    "vitest": "^2.0.5",
+    "@vitest/expect": "^2.0.5"
   },
   "engines": {
     "node": ">=18.12.0"

packages/css/accordion.css

@@ -87,9 +87,7 @@
       mask: 50% / contain no-repeat
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
       position: absolute;
-      margin-inline: calc(
-        (var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) * -1
-      ); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
+      margin-inline: calc((var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
 
       width: var(--dsc-accordion-chevron-size);
     }
@@ -119,15 +117,14 @@
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    interpolate-size: allow-keywords; /* stylelint-disable-line property-no-unknown */
+    /* biome-ignore lint/correctness/noUnknownProperty: biome does not know about this property yet */
+    interpolate-size: allow-keywords;
   }
 
   &::part(details-content) {
     block-size: 0;
     overflow-y: clip;
-    transition:
-      content-visibility 400ms allow-discrete,
-      height 400ms;
+    transition: content-visibility 400ms allow-discrete, height 400ms;
   }
 
   &[open]::part(details-content) {

packages/css/alert.css

@@ -19,25 +19,23 @@
 
   @composes ds-body-text--md from './base/base.css';
 
-  & > :is(h1,h2,h3,h4,h5,h6):first-child::before, /* If Alert starts with Heading, align icon to this */
-  &:not(:has(> :is(h1,h2,h3,h4,h5,h6):first-child))::before /* If there is no Heading, align icon to Alert itself */ {
+  & > :is(h1, h2, h3, h4, h5, h6):first-child::before /* If Alert starts with Heading, align icon to this */,
+  &:not(:has(> :is(h1, h2, h3, h4, h5, h6):first-child))::before /* If there is no Heading, align icon to Alert itself */ {
     background-color: var(--dsc-alert-icon-color);
     content: '';
     display: block;
     height: var(--dsc-alert-icon-size);
-    margin-inline: calc(
-      (var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) * -1
-    ); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
+    margin-inline: calc((var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
 
-    mask: var(--dsc-alert-icon-url) center/contain no-repeat;
+    mask: var(--dsc-alert-icon-url) center / contain no-repeat;
     position: absolute;
     translate: 0 calc((1lh - var(--dsc-alert-icon-size)) / 2); /* Center icon to line height */
     width: var(--dsc-alert-icon-size);
   }
 
   /**
-    * Colors
-    */
+   * Colors
+   */
   &[data-color='warning'] {
     --dsc-alert-border-color: var(--ds-color-warning-border-default);
     --dsc-alert-icon-color: var(--ds-color-warning-text-subtle);
@@ -60,8 +58,8 @@
   }
 
   /**
-    * Sizes
-    */
+   * Sizes
+   */
   &[data-size='sm'] {
     --dsc-alert-icon-size: var(--ds-sizing-6);
     --dsc-alert-padding: var(--ds-spacing-5);

packages/css/base/base.css

@@ -30,13 +30,13 @@
 }
 
 /**
-* Focus outline that can be composed if it needs a specific selector
-*/
+ * Focus outline that can be composed if it needs a specific selector
+ */
 .ds-focus--visible {
   /**
-  * We use both box-shadow and outline to ensure that the focus style is visible,
-  * in case box-shadow is overridden.
-  */
+   * We use both box-shadow and outline to ensure that the focus style is visible,
+   * in case box-shadow is overridden.
+   */
   box-shadow: var(--dsc-focus-boxShadow);
   outline: var(--dsc-focus-outline);
   outline-offset: var(--dsc-focus-border-width);

packages/css/button.css

@@ -64,8 +64,8 @@
   }
 
   /**
-    * Variants
-    */
+   * Variants
+   */
   &[data-variant='secondary'] {
     --dsc-button-background--active: var(--ds-color-accent-surface-hover);
     --dsc-button-background--hover: var(--ds-color-accent-surface-default);
@@ -87,8 +87,8 @@
   }
 
   /**
-    * Colors
-    */
+   * Colors
+   */
   &[data-color='neutral'] {
     --dsc-button-background--active: var(--ds-color-neutral-base-active);
     --dsc-button-background--hover: var(--ds-color-neutral-base-hover);
@@ -142,8 +142,8 @@
   }
 
   /**
-    * States
-    */
+   * States
+   */
 
   @media (hover: hover) and (pointer: fine) {
     /* Only use hover for non-touch devices to prevent sticky-hovering, using :where to prevent adding specificity */

packages/css/card.css

@@ -21,7 +21,7 @@
   @composes ds-paragraph from './paragraph.css'; /* Must be after all: unset */
 
   /* Style link in heading, or heading when Card is anchor */
-  :is(h1, h2, h3, h4, h5, h6) a:any-link, /* Using :any-link to target both a and a:visited */
+  :is(h1, h2, h3, h4, h5, h6) a:any-link /* Using :any-link to target both a and a:visited */,
   &:is(a:any-link, button, [role='button']) :is(h1, h2, h3, h4, h5, h6) {
     color: inherit;
     outline: 0;