Added necessary code for PostCSS/Tailwind compilation

package.json

@@ -39,13 +39,16 @@
   "dependencies": {
     "@tsconfig/node14": "^1.0.1",
     "@tycrek/express-nofavicon": "^1.0.3",
+    "@tycrek/express-postcss": "^0.1.0",
     "@tycrek/isprod": "^2.0.2",
     "@tycrek/log": "^0.5.9",
     "@tycrek/papito": "^0.3.4",
     "any-shell-escape": "^0.1.1",
+    "autoprefixer": "^10.3.7",
     "aws-sdk": "^2.1008.0",
     "check-node-version": "^4.1.0",
     "crypto-random-string": "3.3.1",
+    "cssnano": "^5.0.8",
     "discord-webhook-node": "^1.1.8",
     "escape-html": "^1.0.3",
     "express": "^4.17.1",
@@ -59,11 +62,13 @@
     "marked": "^3.0.7",
     "node-fetch": "^2.6.5",
     "node-vibrant": "^3.1.6",
+    "postcss-font-magician": "^3.0.0",
     "prompt": "^1.2.0",
     "pug": "^3.0.2",
     "sanitize-filename": "^1.6.3",
     "stream-to-array": "^2.3.0",
     "submodule": "^1.2.1",
+    "tailwindcss": "^2.2.17",
     "typescript": "^4.4.4",
     "uuid": "^8.3.2"
   },
@@ -78,6 +83,7 @@
     "@types/node": "^16.9.0",
     "@types/node-fetch": "^2.5.12",
     "@types/stream-to-array": "^2.3.0",
+    "@types/tailwindcss": "^2.2.1",
     "@types/uuid": "^8.3.1",
     "@types/ws": "^7.4.7"
   }

src/ass.ts

@@ -22,6 +22,8 @@ const { host, port, useSsl, isProxied, s3enabled, frontendName, indexFile } = re
 import fs from 'fs-extra';
 import express from 'express';
 const nofavicon = require('@tycrek/express-nofavicon');
+const epcss = require('@tycrek/express-postcss');
+import tailwindcss from 'tailwindcss';
 import helmet from 'helmet';
 import marked from 'marked';
 import uploadRouter from './routers/upload';
@@ -86,6 +88,18 @@ ASS_FRONTEND.enabled && app.use(ASS_FRONTEND.endpoint, ASS_FRONTEND.router); //
 // Upload router (has to come after custom frontends as express-busboy interferes with all POST calls)
 app.use('/', ROUTERS.upload);
 
+// CSS
+app.use('/css', epcss({
+	cssPath: path('tailwind.css'),
+	plugins: [
+		tailwindcss,
+		require('autoprefixer')(),
+		require('cssnano')(),
+		require('postcss-font-magician')(),
+	],
+	warn: (warning: Error) => log.warn('PostCSS', warning.toString())
+}));
+
 // '/:resouceId' always needs to be LAST since it's a catch-all route
 app.use('/:resourceId', (req: AssRequest, _res, next) => (req.resourceId = req.params.resourceId, next()), ROUTERS.resource); // skipcq: JS-0086, JS-0090
 

tailwind.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+	mode: 'jit',
+	separator: '_',
+	darkMode: 'class',
+	plugins: [
+		//require('tailwindcss-textshadow')
+	],
+	purge: {
+		enabled: false,
+		content: ['./views/**/*.pug']
+	},
+	theme: {
+		extend: {
+			colors: {
+				'border': '#323232'
+			}
+		}
+	}
+};

tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;