⚡ Erstattet pretty-quick med lint-staged (#2597)

* ⚡ Erstattet pretty-quick med lint-staged

* ⬇️ Bruker eldre versjon av prettier (cjs) for codemod-tester

* 🐛 Bruker nå root prettie-versjon for codemods, bruker-experimental-vm-modules for codemod-jest

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname $0)/_/husky.sh"
 
-yarn pretty-quick --staged && yarn lint-staged
+yarn lint-staged

@navikt/aksel/package.json

@@ -18,8 +18,8 @@
     "clean": "rimraf dist",
     "build": "yarn clean && tsc -p tsconfig.json",
     "dev": "tsc --watch -p tsconfig.json",
-    "test": "yarn build && jest",
-    "test:watch": "jest --watch"
+    "test": "yarn build && NODE_OPTIONS=--experimental-vm-modules yarn jest",
+    "test:watch": "NODE_OPTIONS=--experimental-vm-modules yarn jest --watch"
   },
   "bin": "./dist/index.js",
   "repository": {

@navikt/aksel/src/codemod/transforms/v2.0.0/update-css-tokens/update-css-tokens.ts

@@ -1,4 +1,4 @@
-import { tokens } from "../../../tokens-map.mjs";
+import { tokens } from "../../../tokens-map.js";
 
 /**
  * @param {import('jscodeshift').FileInfo} file

@navikt/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts

@@ -1,5 +1,5 @@
 import type { JSCodeshift } from "jscodeshift";
-import { tokens } from "../../../tokens-map.mjs";
+import { tokens } from "../../../tokens-map.js";
 import {
   getImportSpecifier,
   getImportSpecifierName,
@@ -21,7 +21,7 @@ export default function transformer(file: JSCodeshift, api) {
 
   const jsImport = root.find(j.ImportDeclaration).filter((x) => {
     return ["@navikt/ds-tokens/dist/tokens"].includes(
-      x.node.source.value as string
+      x.node.source.value as string,
     );
   });
 
@@ -36,7 +36,7 @@ export default function transformer(file: JSCodeshift, api) {
     let foundName: string = "";
 
     getImportSpecifier(j, root, name, "@navikt/ds-tokens/dist/tokens").forEach(
-      (x) => (foundName = x.node.imported.name)
+      (x) => (foundName = x.node.imported.name),
     );
 
     if (name === foundName) {
@@ -45,15 +45,15 @@ export default function transformer(file: JSCodeshift, api) {
           j,
           root,
           name,
-          "@navikt/ds-tokens/dist/tokens"
+          "@navikt/ds-tokens/dist/tokens",
         ) || name;
 
       renameImportSpecifier(
         j,
         root,
         name,
         out,
-        "@navikt/ds-tokens/dist/tokens"
+        "@navikt/ds-tokens/dist/tokens",
       );
 
       let code = root.toSource(getLineTerminator(file.source));

@navikt/aksel/src/codemod/transforms/v2.0.0/update-less-tokens/update-less-tokens.ts

@@ -1,5 +1,5 @@
 import { translateToken } from "../../../utils/translate-token";
-import { tokens } from "../../../tokens-map.mjs";
+import { tokens } from "../../../tokens-map.js";
 
 /**
  * @param {import('jscodeshift').FileInfo} file

@navikt/aksel/src/codemod/transforms/v2.0.0/update-sass-tokens/update-sass-tokens.ts

@@ -1,5 +1,5 @@
 import { translateToken } from "../../../utils/translate-token";
-import { tokens } from "../../../tokens-map.mjs";
+import { tokens } from "../../../tokens-map.js";
 
 /**
  * @param {import('jscodeshift').FileInfo} file

@navikt/aksel/src/codemod/utils/check.ts

@@ -14,7 +14,7 @@ interface TestT {
 
 export function check(
   dirName: string,
-  { fixture, migration, extension = "js", options = {} }: TestT
+  { fixture, migration, extension = "js", options = {} }: TestT,
 ) {
   describe(migration, () => {
     it(fixture, async () => {
@@ -24,7 +24,7 @@ export function check(
       const source = fs.readFileSync(inputPath, "utf8");
       const expected = fs.readFileSync(
         path.join(fixtureDir, `${fixture}.output.${extension}`),
-        "utf8"
+        "utf8",
       );
       // Assumes transform is one level up from tests directory
       const module = await import(path.join(dirName, "..", migration));
@@ -34,13 +34,13 @@ export function check(
 
       // Format output and expected with prettier for white spaces and line breaks consistency
       expect(
-        prettier.format(output, {
+        await prettier.format(output, {
           parser: parser === "js" ? "typescript" : parser,
-        })
+        }),
       ).toBe(
-        prettier.format(expected, {
+        await prettier.format(expected, {
           parser: parser === "js" ? "typescript" : parser,
-        })
+        }),
       );
     });
   });

aksel.nav.no/package.json

@@ -21,8 +21,5 @@
     "@navikt/ds-react": "^5.12.4",
     "@navikt/ds-tailwind": "^5.12.4",
     "@navikt/ds-tokens": "^5.12.4"
-  },
-  "devDependencies": {
-    "prettier-plugin-tailwindcss": "^0.2.3"
   }
 }

aksel.nav.no/website/components/layout/god-praksis-page/hero/Hero.tsx

@@ -18,15 +18,15 @@ function Hero({ tema, heroNav }: { tema: GpTemaT | null } & HeroNavT) {
       borderRadius="large"
       paddingInline={{ xs: "4", lg: "10" }}
       paddingBlock="10 6"
-      className="bg-gradient-to-tr isolate from-deepblue-200 via-deepblue-100 to-deepblue-100 relative overflow-clip transition-[height]"
+      className="relative isolate overflow-clip bg-gradient-to-tr from-deepblue-200 via-deepblue-100 to-deepblue-100 transition-[height]"
     >
       <Cube />
       <HeroSelect heroNav={heroNav} currentSlug={tema?.slug} />
-      <Heading level="1" size="xlarge" className="text-aksel-heading z-10 mt-2">
+      <Heading level="1" size="xlarge" className="z-10 mt-2 text-aksel-heading">
         {tema?.title ?? "Alle tema"}
       </Heading>
       {tema?.description && (
-        <BodyLong size="large" className="mt-4 z-10 relative">
+        <BodyLong size="large" className="relative z-10 mt-4">
           {tema.description}
         </BodyLong>
       )}

package.json

@@ -32,6 +32,15 @@
   ],
   "prettier": {
     "overrides": [
+      {
+        "files": "./aksel.nav.no/website/**",
+        "options": {
+          "tailwindConfig": "./aksel.nav.no/website/tailwind.config.js",
+          "plugins": [
+            "prettier-plugin-tailwindcss"
+          ]
+        }
+      },
       {
         "files": "**/*.css",
         "options": {
@@ -51,7 +60,8 @@
     "*.jsx": "eslint",
     "*.ts": "eslint",
     "*.tsx": "eslint",
-    "*.css": "stylelint"
+    "*.css": "stylelint",
+    "*": "prettier --write --ignore-unknown"
   },
   "stylelint": {
     "overrides": [
@@ -162,8 +172,8 @@
     "glob": "^7.1.6",
     "husky": "^8.0.0",
     "lint-staged": "13.0.3",
-    "prettier": "2.8.8",
-    "pretty-quick": "^3.1.3",
+    "prettier": "3.1.1",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "react": "^18.0.0",
     "react-docgen-typescript": "2.2.2",
     "react-dom": "^18.0.0",