ci: migrate from eslint/prettier to biome (#18)

* ci: migrate from eslint/prettier to biome

* ci: change prettier job name to biome

.changeset/thick-pens-applaud.md

@@ -0,0 +1,11 @@
+---
+'@amandaguthrie/panda-preset-framework-simplecss': patch
+'@amandaguthrie/panda-preset-font-modernfs': patch
+'@amandaguthrie/panda-preset-shared-utils': patch
+'@amandaguthrie/panda-plugin-type-extend': patch
+'@amandaguthrie/panda-preset-color-radix': patch
+'@amandaguthrie/panda-plugin-add-export': patch
+---
+
+Migrate from ESLint/Prettier to Biome.
+Change .forEach to for ... of loops and switch from != undefined to != null or !== undefined.

.github/workflows/quality.yml

@@ -7,14 +7,19 @@ on:
   pull_request:
     branches:
       - main
+    types:
+      - opened
+      - reopened
+      - edited
+      - synchronize
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
 
 jobs:
   prettier:
-    name: Prettier
+    name: Biome
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -23,8 +28,8 @@ jobs:
       - name: Install
         uses: ./.github/composite-actions/install
 
-      - name: Run Prettier
-        run: pnpm prettier
+      - name: Run Biome
+        run: pnpm format
 
   tests:
     name: Unit Tests
@@ -39,21 +44,6 @@ jobs:
       - name: Run test
         run: pnpm test
 
-  eslint:
-    name: ESLint
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Install
-        uses: ./.github/composite-actions/install
-
-      - name: Run ESLint
-        run: pnpm lint
-        env:
-          NODE_OPTIONS: "--max-old-space-size=4096"
-
   types:
     name: TypeScript
     runs-on: ubuntu-latest

.github/workflows/release.yml

@@ -5,6 +5,13 @@ on:
     paths:
       - '.changeset/**'
       - 'packages/**'
+      - '.npmrc'
+      - 'biome.json'
+      - 'bunfig.toml'
+      - 'package.json'
+      - 'tsconfig.build.json'
+      - 'tsconfig.json'
+      - 'tsup.config.ts'
     branches:
       - main
 

biome.json

@@ -0,0 +1,49 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+	"files": {
+		"ignore": ["build", "dist", "node_modules", "**/*.md", "pnpm-lock.yaml", "styled-system"]
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"formatter": {
+		"lineWidth": 120
+	},
+	"javascript": {
+		"formatter": {
+			"enabled": true,
+			"quoteStyle": "single",
+			"jsxQuoteStyle": "double",
+			"trailingCommas": "all",
+			"semicolons": "always",
+			"bracketSpacing": true
+		}
+	},
+	"json": {
+		"formatter": {
+			"enabled": true,
+			"indentWidth": 2
+		},
+		"parser": {
+			"allowComments": true
+		}
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+
+			"correctness": {
+				"noUnusedVariables": {
+					"level": "error"
+				}
+			},
+			"suspicious": {
+				"noExplicitAny": "off"
+			},
+			"style": {
+				"noNonNullAssertion": "off"
+			}
+		}
+	}
+}

package.json

@@ -18,36 +18,31 @@
     "build-fast": "pnpm -r --parallel --filter=./packages/** build-fast",
     "build": "pnpm -r --filter=./packages/** build",
     "reset": "pnpm -r --parallel exec rimraf node_modules dist && rimraf node_modules dist",
-    "lint": "eslint packages --ext .ts",
-    "prettier": "prettier --check packages",
-    "prettier-fix": "prettier --write packages",
+    "format": "biome lint packages",
+    "format-fix": "biome check --write packages",
     "test": "pnpm -r --parallel --filter=./packages/** test --if-present",
     "typecheck": "tsc --noEmit",
     "release": "changeset publish",
     "release:dev:version": "changeset version --snapshot dev",
     "release:dev:publish": "changeset publish --no-git-tag --tag dev"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.8.3",
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.1",
-    "@types/eslint": "^8.56.10",
-    "@types/node": "^20.12.7",
-    "@typescript-eslint/eslint-plugin": "^7.7.1",
-    "@typescript-eslint/parser": "^7.7.1",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "glob": "^10.3.12",
-    "prettier": "^3.2.5",
-    "rimraf": "^5.0.5",
-    "tsup": "^8.0.2",
-    "tsx": "^4.7.2",
-    "typescript": "^5.4.5"
+    "@changesets/cli": "^2.27.7",
+    "@types/node": "^22.0.0",
+    "glob": "^11.0.0",
+    "rimraf": "^5.0.9",
+    "tsup": "^8.2.3",
+    "tsx": "^4.16.2",
+    "typescript": "^5.5.4"
   },
-  "packageManager": "pnpm@9.0.5",
+  "packageManager": "pnpm@9.6.0",
   "pnpm": {
     "overrides": {
       "@pandacss/dev": "^0.37.2",
-      "@pandacss/types": "^0.37.2"
+      "@pandacss/types": "^0.37.2",
+      "typescript": "^5.5.4"
     }
   }
 }

packages/panda-plugin-add-export/src/exportTokens.ts

@@ -7,7 +7,7 @@ export function exportTokens(artifacts: Artifact[], options: AddExportsPluginOpt
     const artId = 'design-tokens';
     const artifactIndex = findArtifactIndex(artifacts, artId);
     const jsFileName = `index.${options.outExtension}`;
-    const tsFileName = `index.d.ts`;
+    const tsFileName = 'index.d.ts';
     const jsFile = findFile(artifacts, artId, jsFileName);
     const jsFileIndex = findFileIndex(artifacts, artId, jsFileName);
     const tsFile = findFile(artifacts, artId, tsFileName);

packages/panda-plugin-type-extend/src/extendTypeLayerStyleProperty.ts

@@ -12,9 +12,9 @@ export function extendLayerStylePropertyType(cssVars: CssProperty[]): PandaPlugi
           const codeArray = file?.code?.split('\n\n');
           const layerStylePropertyIndex = codeArray?.findIndex((line) => line.includes('type LayerStyleProperty '));
           if (layerStylePropertyIndex && layerStylePropertyIndex !== -1 && codeArray) {
-            cssVars.forEach((property) => {
+            for (const property of cssVars) {
               codeArray[layerStylePropertyIndex] += `\n  | '${property}'`;
-            });
+            }
           }
           file.code = codeArray?.join('\n\n');
         }

packages/panda-plugin-type-extend/src/extendTypeTextStyleProperty.ts

@@ -12,9 +12,9 @@ export function extendTextStylePropertyType(cssVars: CssProperty[]): PandaPlugin
           const codeArray = file?.code?.split('\n\n');
           const textStylePropertyIndex = codeArray?.findIndex((line) => line.includes('type TextStyleProperty '));
           if (textStylePropertyIndex && textStylePropertyIndex !== -1 && codeArray) {
-            cssVars.forEach((property) => {
+            for (const property of cssVars) {
               codeArray[textStylePropertyIndex] += `\n  | '${property}'`;
-            });
+            }
           }
           file.code = codeArray?.join('\n\n');
         }

packages/panda-preset-color-radix/src/preset.ts

@@ -20,7 +20,7 @@ const defaultOptions: ColorRadixPresetDefaults = {
 };
 
 export function pandaPresetColorRadix(options?: ColorRadixPresetOptions) {
-  const mergedOptions = options != undefined ? Object.assign({}, defaultOptions, options) : defaultOptions;
+  const mergedOptions = options != null ? Object.assign({}, defaultOptions, options) : defaultOptions;
   const { colors, colorModeConditions, coreColorPrefix, semanticColorMap, semanticColorPrefix } = mergedOptions;
 
   // If an array of colors is passed, filter the array to valid Radix color names. If the array has no valid color names, return all Radix colors.
@@ -32,13 +32,12 @@ export function pandaPresetColorRadix(options?: ColorRadixPresetOptions) {
   let semanticTokens: RecursiveToken<string, any> | undefined = undefined;
   if (Object.keys(semanticColorMap).length > 0) {
     // If this semantic color wasn't included in the colors array, add it.
-    Object.values(semanticColorMap).forEach(
-      (mapDetail) =>
-        radixAllColorsArray.includes(mapDetail.color) &&
-        Array.isArray(validColors) &&
-        !validColors.includes(mapDetail.color) &&
-        validColors.push(mapDetail.color),
-    );
+    for (const mapDetail of Object.values(semanticColorMap)) {
+      radixAllColorsArray.includes(mapDetail.color) &&
+      Array.isArray(validColors) &&
+      !validColors.includes(mapDetail.color) &&
+      validColors.push(mapDetail.color);
+    }
     semanticTokens = generateRadixSemanticTokens({
       coreColorPrefix,
       semanticColorPrefix,
@@ -61,7 +60,7 @@ export function pandaPresetColorRadix(options?: ColorRadixPresetOptions) {
     },
   };
 
-  if (semanticTokens != undefined) {
+  if (semanticTokens !== undefined) {
     // @ts-ignore This is undefined but we can set it.
     preset.theme.extend.semanticTokens = { colors: semanticTokens };
   }
@@ -135,7 +134,9 @@ function generateRadixSemanticTokens({
     if (conditions === undefined || conditions.length <= 0) {
       return source;
     }
-    conditions.forEach((condition) => (newValue[condition] = conditionValue));
+    for (const condition of conditions) {
+      newValue[condition] = conditionValue;
+    }
     return newValue;
   }
 

packages/panda-preset-font-modernfs/src/modern-font-stacks.ts

@@ -1,5 +1,5 @@
 import { defineTokens } from '@pandacss/dev';
-import { type FontKeyModernFontStack } from './types';
+import type { FontKeyModernFontStack } from './types';
 
 /**
  * Modern Font Stacks - System font stack CSS organized by typeface classification for every modern operating system

packages/panda-preset-framework-simplecss/src/conditions.ts

@@ -1,4 +1,4 @@
-import { type Preset } from '@pandacss/dev';
+import type { Preset } from '@pandacss/dev';
 
 export const conditions = (prefix: string): Preset['conditions'] => {
   return {

packages/panda-preset-framework-simplecss/test/default-tokens.ts

@@ -144,7 +144,7 @@ const defaultTokens = fromEntries(
   entries(tokens).map(([token, detail]) => [
     token,
     {
-      value: detail.value.startsWith(`var(`)
+      value: detail.value.startsWith('var(')
         ? detail.value.slice(6, detail.value.length - 1).replace(/-/g, '.')
         : detail.value,
       variable: detail.variable,
@@ -159,29 +159,26 @@ const tokensByCategory: Record<string, Record<string, Record<string, string>>> =
   radii: {},
 };
 
-entries(defaultTokens).forEach(([token, variable]) => {
+for (const [token, variable] of entries(defaultTokens)) {
   const category = token.split('.')[0];
   if (category && category in tokensByCategory) {
     const tokensByCatCat = tokensByCategory[category];
     if (tokensByCatCat) {
       tokensByCatCat[token] = variable;
     }
   }
-});
+}
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 let categoryTables = '';
 
-entries(tokensByCategory).forEach(([category, t]) => {
+for (const [category, t] of entries(tokensByCategory)) {
   let categoryTable = `### ${category.slice(0, 1).toUpperCase() + category.slice(1)}\n| Token | Type | CSS Variable | Value |\n| ----- | ------------ | --- | --- |\n`;
-  entries(t)
-    .sort()
-    .forEach(
-      ([t, detail]) =>
-        (categoryTable += `| \`${t}\` | \`${detail.type}\`| \`${detail.variable}\` | \`${detail.value}\`|\n`),
-    );
+  for (const [t1, detail] of entries(t)
+    .sort()) {
+    categoryTable += `| \`${t1}\` | \`${detail.type}\`| \`${detail.variable}\` | \`${detail.value}\`|\n`;
+  }
 
   categoryTables += categoryTable += '\n';
-});
+}
 
 console.log(categoryTables);

packages/panda-preset-shared-utils/src/entries.ts

@@ -10,8 +10,8 @@ export function entries<K extends RecordKeyDefault, V>(obj: Record<K, V>): [K, V
 
 export function fromEntries<K extends RecordKeyDefault, V>(entries: [K, V][]): Record<K, V> {
   const result: Record<K, V> = {} as Record<K, V>;
-  entries.forEach((entry) => {
+  for (const entry of entries) {
     result[entry[0]] = entry[1];
-  });
+  }
   return result;
 }