Add TailwindCSS plugin for Prettier & ESLint (#611)

.pre-commit-config.yaml

@@ -54,17 +54,24 @@ repos:
           - "types-requests"
           - "types-waitress"
         files: ^src/
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.0.1
-    hooks:
-      - id: prettier
-        name: Format other code (CSS, HTML, JS, MD, TOML, YAML)
-        additional_dependencies:
-          - "[email protected]"
-          - "prettier-plugin-toml"
-        types: [file]
-        files: \.(css|html|js|markdown|md|toml|yaml|yml)$
-        exclude: |
-          (?x)^(
-            src/ui/static/dist
-          )
+
+  # Prettier 3.0.0 does not work with pre-commit with its new plugin architecture.
+
+  #  - repo: https://github.com/pre-commit/mirrors-prettier
+  #    rev: v3.0.1
+  #    hooks:
+  #      - id: prettier
+  #        name: Format other code (CSS, HTML, JS, MD, TOML, YAML)
+  #        additional_dependencies:
+  #          - [email protected]
+  #          - prettier-plugin-packagejson
+  #          - prettier-plugin-tailwindcss
+  #        types_or:
+  #          - css
+  #          - html
+  #          - javascript
+  #          - json
+  #        files: ^src/ui/
+  #        args:
+  #          - --config src/ui/prettier.config.js
+  #          - --ignore-path src/ui/.prettierignore

src/ui/.prettierignore

@@ -0,0 +1,6 @@
+# .prettierignore
+
+.cache
+pnpm-lock.yaml
+pyproject.toml
+static

src/ui/eslint.config.js

@@ -0,0 +1,31 @@
+// ESLint Config
+
+import js from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import globals from "globals";
+import jquery from "eslint-config-jquery";
+
+const config = [
+  {
+    ignores: ["**/static"],
+  },
+
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+        ...globals.jquery,
+        ...globals.node,
+      },
+    },
+  },
+
+  js.configs.recommended,
+
+  jquery,
+
+  eslintConfigPrettier,
+];
+
+export default config;

src/ui/package.json

@@ -1,16 +1,21 @@
 {
+  "type": "module",
+  "browser": true,
   "scripts": {
-    "watch": "concurrently \"npm:*:watch\"",
     "build:dev": "concurrently \"npm:*:build:dev\"",
     "build:prod": "concurrently \"npm:*:build:prod\"",
-    "css:build:dev": "TAILWIND_MODE=build NODE_ENV=development postcss ./src/css/style.css -o ./static/dist/css/style.min.css",
-    "css:build:prod": "TAILWIND_MODE=build NODE_ENV=production postcss ./src/css/style.css -o ./static/dist/css/style.min.css",
-    "css:watch": "TAILWIND_MODE=watch NODE_ENV=development postcss ./src/css/style.css -o ./static/dist/css/style.min.css --watch --verbose",
-    "js:build:dev": "NODE_ENV=development esbuild src/js/projects.js --bundle --outfile=static/dist/js/projects.min.js --sourcemap",
-    "js:build:prod": "NODE_ENV=production esbuild src/js/projects.js --bundle --outfile=static/dist/js/projects.min.js --minify",
-    "js:watch": "NODE_ENV=development esbuild src/js/projects.js --bundle --outfile=static/dist/js/projects.min.js --sourcemap --watch",
-    "prettier-format": "prettier **/* --ignore-unknown  --list-different",
-    "clean": "rm -fr static/dist/{css,js}"
+    "clean": "rm -fr static/dist/{css,js}",
+    "css:build:dev": "postcss ./src/css/style.css -o ./static/dist/css/style.min.css",
+    "css:build:prod": "postcss ./src/css/style.css -o ./static/dist/css/style.min.css --env production ",
+    "css:watch": "postcss ./src/css/style.css -o ./static/dist/css/style.min.css --watch --verbose",
+    "eslint": "eslint --cache --cache-location .cache/eslint .",
+    "eslint-fix": "eslint --cache --cache-location .cache/eslint --fix .",
+    "js:build:dev": "esbuild src/js/projects.js --bundle --outfile=static/dist/js/projects.min.js --sourcemap",
+    "js:build:prod": "esbuild src/js/projects.js --bundle --outfile=static/dist/js/projects.min.js --minify",
+    "js:watch": "esbuild src/js/projects.js --bundle --outfile=static/dist/js/projects.min.js --sourcemap --watch",
+    "prettier": "prettier --cache --cache-location .cache/prettier --check .",
+    "prettier-fix": "prettier --cache --cache-location .cache/prettier --write .",
+    "watch": "concurrently \"npm:*:watch\""
   },
   "dependencies": {
     "@types/jquery": "^3.5.16",
@@ -24,15 +29,24 @@
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.4",
+    "@types/eslint": "^8.44.2",
     "autoprefixer": "^10.4.15",
     "concurrently": "^8.2.0",
     "cssnano": "^6.0.1",
     "esbuild": "^0.19.2",
+    "eslint": "^8.47.0",
+    "eslint-config-jquery": "^3.0.1",
+    "eslint-config-prettier": "^9.0.0",
+    "globals": "^13.21.0",
     "postcss": "^8.4.27",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "postcss-nesting": "^12.0.1",
     "postcss-url": "^10.1.3",
+    "prettier": "^3.0.1",
+    "prettier-plugin-packagejson": "^2.4.5",
+    "prettier-plugin-tailwindcss": "^0.5.2",
     "tailwindcss": "^3.3.3"
-  }
+  },
+  "packageManager": "[email protected]"
 }