From 4df8940887ef162ed75c4c5496e9e286cfc934a1 Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Tue, 10 Oct 2023 10:24:04 +0200 Subject: [PATCH 1/4] build: Add ESLint Tailwind plugin It enforces a unique classname order and prevents contradicting classnames. All supported rules are described here: https://www.npmjs.com/package/eslint-plugin-tailwindcss --- .pre-commit-config.yaml | 1 + frontend/.eslintrc.js | 35 +++++++++++++------ frontend/package-lock.json | 17 +++++++++ frontend/package.json | 1 + .../app/general/header/header.component.html | 4 +-- .../create-project.component.html | 2 +- ...odel-diagram-preview-dialog.component.html | 2 +- .../manage-git-model.component.html | 2 +- .../project-details.component.html | 2 +- .../session-overview.component.html | 1 + .../active-sessions.component.html | 2 +- .../file-browser-dialog.component.html | 11 ++---- .../alert-settings.component.html | 2 +- .../pipelines-overview.component.html | 2 +- .../user-settings.component.html | 4 ++- .../git-settings/git-settings.component.html | 2 +- frontend/src/index.html | 1 + 17 files changed, 60 insertions(+), 31 deletions(-) diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index bc37ad78a..f8929f606 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -143,6 +143,7 @@ repos: - "@typescript-eslint/parser@^6.7.4" - "eslint-plugin-unused-imports@^3.0.0" - "eslint-plugin-deprecation@^2.0.0" + - "eslint-plugin-tailwindcss@^3.13.0" args: ["--fix"] types: [] exclude: '.+\.spec(-helper)?\.ts$' diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index 2ee6a05f4..f5fb2ed36 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -4,6 +4,18 @@ */ module.exports = { + settings: { + tailwindcss: { + config: "frontend/tailwind.config.js", + cssFiles: [ + "frontend/**/*.css", + "!**/node_modules", + "!**/.*", + "!**/dist", + "!**/build", + ], + }, + }, overrides: [ { files: ["*.ts"], @@ -27,15 +39,6 @@ module.exports = { style: "camelCase", }, ], - /* Find a proper naming strategy - "@angular-eslint/component-selector": [ - "error", - { - type: "element", - prefix: "app", - style: "kebab-case", - }, - ], */ "import/order": [ "error", { @@ -60,8 +63,18 @@ module.exports = { }, { files: ["*.html"], - extends: ["plugin:@angular-eslint/template/recommended"], - rules: {}, + extends: [ + "plugin:@angular-eslint/template/recommended", + "plugin:tailwindcss/recommended", + ], + parser: "@angular-eslint/template-parser", + rules: { + "tailwindcss/classnames-order": "off", + "tailwindcss/no-custom-classname": "error", + "tailwindcss/enforces-negative-arbitrary-values": "error", + "tailwindcss/enforces-shorthand": "error", + "tailwindcss/no-contradicting-classname": "error", + }, }, ], }; diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 5865ca344..d7a0fe264 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -56,6 +56,7 @@ "eslint-config-prettier": "^9.0.0", "eslint-plugin-deprecation": "^2.0.0", "eslint-plugin-import": "^2.28.1", + "eslint-plugin-tailwindcss": "^3.13.0", "eslint-plugin-unused-imports": "^3.0.0", "jasmine-core": "~5.1.1", "karma": "~6.4.2", @@ -8927,6 +8928,22 @@ "semver": "bin/semver.js" } }, + "node_modules/eslint-plugin-tailwindcss": { + "version": "3.13.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.13.0.tgz", + "integrity": "sha512-Fcep4KDRLWaK3KmkQbdyKHG0P4GdXFmXdDaweTIPcgOP60OOuWFbh1++dufRT28Q4zpKTKaHwTsXPJ4O/EjU2Q==", + "dev": true, + "dependencies": { + "fast-glob": "^3.2.5", + "postcss": "^8.4.4" + }, + "engines": { + "node": ">=12.13.0" + }, + "peerDependencies": { + "tailwindcss": "^3.3.2" + } + }, "node_modules/eslint-plugin-unused-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-3.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 3a73be8fb..31627512e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -61,6 +61,7 @@ "eslint-config-prettier": "^9.0.0", "eslint-plugin-deprecation": "^2.0.0", "eslint-plugin-import": "^2.28.1", + "eslint-plugin-tailwindcss": "^3.13.0", "eslint-plugin-unused-imports": "^3.0.0", "jasmine-core": "~5.1.1", "karma": "~6.4.2", diff --git a/frontend/src/app/general/header/header.component.html b/frontend/src/app/general/header/header.component.html index 26fbdd448..d4c4e3563 100644 --- a/frontend/src/app/general/header/header.component.html +++ b/frontend/src/app/general/header/header.component.html @@ -37,7 +37,7 @@
-