Switching to pnpm & Streamline css.mk

.github/workflows/deploy.yaml

@@ -18,7 +18,7 @@ jobs:
       - name: Cache
         uses: actions/cache@v2
         with:
-          path: ~/.npm
+          path: ~/.pnpm
           key: ${{ runner.os }}-node-${{ hashFiles('package.json') }}
 
       - name: Build

.gitignore

@@ -4,7 +4,7 @@ dist/
 
 # NPM
 node_modules/
-package-lock.json
+pnpm-lock.yaml
 
 # Misc
 .DS_Store

README.md

@@ -18,7 +18,7 @@ See a preview without the Sigma-9 here: https://scptestwiki.wikidot.com/
 On a UNIX-like environment with GNU Makefile, you can build Black Highlighter from its source files using the following:
 
 ```
-npm install
+pnpm install
 make
 ```
 

build/css.mk

@@ -15,13 +15,13 @@ dist/css/parts/%: src/css/parts/%
 
 # CSS rules
 dist/css/black-highlighter.css: src/css/black-highlighter.css $(BUILD_SOURCES) $(CSS_SOURCES) node_modules
-	build/install.sh 644 $< $@ &&	npm run postcss -- $@ --config build --env development -r
+	build/install.sh 644 $< $@ &&	pnpm css $@ --config build --env development -r
 
 dist/css/min/black-highlighter.min.css: dist/css/black-highlighter.css node_modules
-	npm run postcss -- $< --config build --env production -o $@
+	pnpm css $< --config build --env production -o $@
 
 dist/css/normalize.css: src/css/normalize.css $(BUILD_SOURCES) node_modules
-	build/install.sh 644 $< $@ &&	npm run postcss -- $@ --config build --env development -r
+	build/install.sh 644 $< $@ &&	pnpm css $@ --config build --env development -r
 
 dist/css/min/normalize.min.css: dist/css/normalize.css node_modules
-	npm run postcss -- $< --config build --env production -o $@
+	pnpm css $< --config build --env production -o $@

build/images.mk

@@ -16,5 +16,8 @@ dist/img/social-icons/%: src/img/social-icons/%
 	build/install.sh 644 $< $@
 
 # Images to optimize
+dist/img/%.png: src/img/%.png node_modules
+	pnpm optimize png $< $@
+
 dist/img/%.svg: src/img/%.svg node_modules
-	npm run svgo -- $< --config ./build/svgo.config.js -o $@
+	pnpm optimize svg $< $@

build/meta.mk

@@ -24,7 +24,7 @@ DIRECTORIES := \
 $(DIRECTORIES):
 	mkdir -p $@
 
-# npm rules
+# pnpm rules
 node_modules: package.json package-lock.json
-	npm install --force
+	pnpm install
 	touch node_modules

package.json

@@ -8,8 +8,13 @@
 		"type": "git",
 		"url": "https://github.com/Nu-SCPTheme/Black-Highlighter"
 	},
+	"engines": {
+		"node": ">=19",
+		"pnpm": ">=7"
+	},
 	"devDependencies": {
 		"autoprefixer": "^10.4.13",
+		"eslint": "^8.34.0",
 		"eslint-config-prettier": "^8.6.0",
 		"eslint-plugin-prettier": "^4.2.1",
 		"lightningcss": "^1.19.0",
@@ -35,6 +40,10 @@
 		"svgo": "node node_modules/svgo/bin/svgo",
 		"base": "postcss $npm_config_bhl_i --config build/postcss.config.js -o $npm_config_bhl_o -w --env $npm_config_bhl_env --verbose",
 		"watch": "npm run base --bhl-i=src/css/black-highlighter.css --bhl-o=dist/css/black-highlighter.css --bhl-env=development & npm run base --bhl-i=src/css/normalize.css --bhl-o=dist/css/normalize.css --bhl-env=development & npm run base --bhl-i=src/css/black-highlighter.css --bhl-o=dist/css/min/black-highlighter.min.css --bhl-env=production & npm run base --bhl-i=src/css/normalize.css --bhl-o=dist/css/min/normalize.min.css --bhl-env=production"
+		"css": "postcss",
+		"optimize": "node build/optimize.mjs",
+		"watchbase": "postcss $npm_config_bhl_i --config build/postcss.config.js -o $npm_config_bhl_o -w --env $npm_config_bhl_env --verbose",
+		"watch": "pnpm watchbase --bhl-i=src/css/black-highlighter.css --bhl-o=dist/css/black-highlighter.css --bhl-env=development & pnpm watchbase --bhl-i=src/css/normalize.css --bhl-o=dist/css/normalize.css --bhl-env=development & pnpm watchbase --bhl-i=src/css/black-highlighter.css --bhl-o=dist/css/min/black-highlighter.min.css --bhl-env=production & pnpm watchbase --bhl-i=src/css/normalize.css --bhl-o=dist/css/min/normalize.min.css --bhl-env=production"
 	},
 	"browserslist": "defaults and not op_mini all"
 }