TypeScript (client) + PostCSS + Serve with Concurrently

readme.md

• create file package.json.
• copy json and postcss.config.js in this gist to your package.json.
• npm install to install all modules as listed in package.json:devDependencies.
• npm run develop for watch modes on pcss, ts, running server simultaneously.
• npm run build for building source to result once.

package.json

{
  "name": "postcss-ts-serve-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "src/ts/main.ts",
  "scripts": {
    "postinstall": "npm run build",
    "postcss": "postcss src/pcss/main.pcss --output dist/css/style.css --verbose",
    "postcss:watch": "postcss src/pcss/main.pcss --output dist/css/style.css --verbose --watch",
    "esbuild": "esbuild ./src/ts/*.ts --splitting --bundle --minify --format=esm --log-level=info --outdir=dist/js",
    "esbuild:watch": "esbuild ./src/ts/*.ts --splitting --bundle --minify --format=esm --log-level=info --outdir=dist/js --watch",
    "serve": "serve dist",
    "develop": "concurrently \"npm run postcss:watch\" \"npm run esbuild:watch\" \"npm run serve\"",
    "build": "concurrently \"npm run postcss\" \"npm run esbuild\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "concurrently": "^7.2.0",
    "cssnano": "^5.1.8",
    "dotenv": "^16.0.1",
    "esbuild": "^0.14.1",
    "postcss": "^8.4.12",
    "postcss-cli": "^9.1.0",
    "postcss-import": "^14.1.0",
    "postcss-nested": "^5.0.6",
    "serve": "13.0.2"
  }
}

postcss.config.js

/**
 * PostCSS configuration file. This cfg is read by the postcss-cli command
 * to build the command running all plugins and configs to keep the executable
 * command as short and clear as possible.
 *
 * example used: https://www.sitepoint.com/postcss-sass-configurable-alternative/
 */
const { env } = require('dotenv').config();

module.exports = cfg => {

  const dev = (process.env === 'develop');

  return {
    map: dev ? { inline: false } : false,
    plugins: [
      require('autoprefixer')(),
      require('postcss-import')(),
      require('postcss-nested')(),
      dev ? null : require('cssnano')()
    ]
  }
}