Update: Prettier setup and ad Makefile

.gitattributes

@@ -1,10 +1,11 @@
 /.editorconfig export-ignore
 /.gitattributes export-ignore
-/.gitignore export-ignore
 /.github export-ignore
+/.gitignore export-ignore
 /.nvmrc export-ignore
 /.prettierignore export-ignore
-/.stylelintrc export-ignore
+/.prettierrc export-ignore
 /CODE_OF_CONDUCT.md export-ignore
+/Makfile export-ignore
 /package.json export-ignore
 /pnpm-lock.yaml export-ignore

.prettierignore

@@ -1,2 +1,5 @@
 composer.json
 *.noLinter.*
+LICENSE
+pnpm-lock.yaml
+Resources/Private/Templates/InlineAssets

.prettierrc

@@ -0,0 +1,24 @@
+{
+  "overrides": [
+    {
+      "files": ["*.yaml", "*.yml"],
+      "options": {
+        "singleQuote": true
+      }
+    },
+    {
+      "files": ["*.md"],
+      "options": {
+        "tabWidth": 2,
+        "singleQuote": true
+      }
+    },
+    {
+      "files": ["*.php"],
+      "options": {
+        "singleQuote": true
+      }
+    }
+  ],
+  "plugins": ["@prettier/plugin-php"]
+}

Makefile

@@ -0,0 +1,55 @@
+.PHONY: help install watch dev production build prettier
+
+.DEFAULT_GOAL := build
+
+## Prettier files
+prettier:
+	pnpm prettier --write --no-error-on-unmatched-pattern '{*,**/*}.{mjs,php,yaml,pcss,js,json,md}'
+
+## Install dependencies and build production version
+build: install prettier production
+
+## Install dependencies
+install:
+	pnpm install
+
+## Watch for changes in JS and CSS files
+watch:
+	pnpm watch
+
+## Build development version
+dev:
+	pnpm dev
+
+## Build production version
+production:
+	pnpm build
+
+# Define colors
+GREEN  := $(shell tput -Txterm setaf 2)
+YELLOW := $(shell tput -Txterm setaf 3)
+WHITE  := $(shell tput -Txterm setaf 7)
+RESET  := $(shell tput -Txterm sgr0)
+
+# define indention for descriptions
+TARGET_MAX_CHAR_NUM=15
+
+## Show help
+help:
+	@echo ''
+	@echo '${GREEN}CLI command list:${RESET}'
+	@echo ''
+	@echo 'Usage:'
+	@echo '  ${YELLOW}make${RESET} ${GREEN}<target>${RESET}'
+	@echo ''
+	@echo 'Targets:'
+	@awk '/^[a-zA-Z\-\_0-9]+:/ { \
+		helpMessage = match(lastLine, /^## (.*)/); \
+		if (helpMessage) { \
+			helpCommand = substr($$1, 0, index($$1, ":")-1); \
+			helpMessage = substr(lastLine, RSTART + 3, RLENGTH); \
+			printf "  ${YELLOW}%-$(TARGET_MAX_CHAR_NUM)s${RESET} ${GREEN}%s${RESET}\n", helpCommand, helpMessage; \
+		} \
+	} \
+	{ lastLine = $$0 }' $(MAKEFILE_LIST)
+	@echo ''

package.json

@@ -8,38 +8,19 @@
     "url": "git://github.com/jonnitto/Jonnitto.ImagesInARow.git"
   },
   "author": "Jon Uhlmann <[email protected]> (https://www.uhlmann.pro)",
-  "browserslist": [
-    "> 0.5%",
-    "last 2 versions",
-    "Firefox ESR",
-    "not ie <= 10",
-    "not ie_mob <= 10",
-    "not bb <= 10",
-    "not op_mob <= 12.1"
-  ],
-  "prettier": {
-    "overrides": [
-      {
-        "files": [
-          "*.yaml",
-          "*.yml"
-        ],
-        "options": {
-          "singleQuote": true
-        }
-      }
-    ]
-  },
   "scripts": {
     "build": "postcss Resources/Private/Assets/*.pcss --use postcss-nested postcss-assets autoprefixer cssnano --no-map --ext css --dir Resources/Private/Templates/InlineAssets",
-    "start": "pnpm install && pnpm build"
+    "dev": "postcss Resources/Private/Assets/*.pcss --use postcss-nested postcss-assets autoprefixer --no-map --ext css --dir Resources/Private/Templates/InlineAssets",
+    "watch": "postcss Resources/Private/Assets/*.pcss --use postcss-nested postcss-assets autoprefixer cssnano --no-map --ext css --dir Resources/Private/Templates/InlineAssets --watch"
   },
   "devDependencies": {
+    "@prettier/plugin-php": "^0.22.1",
     "autoprefixer": "^10.4.0",
     "cssnano": "^6.0.2",
     "postcss": "^8.3.11",
     "postcss-assets": "^6.0.0",
     "postcss-cli": "^11.0.0",
-    "postcss-nested": "^6.0.1"
+    "postcss-nested": "^6.0.1",
+    "prettier": "^3.1.1"
   }
 }