feat(front): add css processing to asset pipeline (#452)

## 📝 Description

- Implemented a modern CSS build pipeline using PostCSS for better CSS
processing and optimization
- Consolidated CSS output to a single file for improved performance
- Aligned with Phoenix 1.6+ asset management best practices
- Updated the security toolbox to properly display JS dependency scan
results

## ✅ Checklist
- [x] I have tested this change
- [ ] This change requires documentation update

Author: skipi

.semaphore/daily-builds.yml

@@ -725,11 +725,11 @@ blocks:
       jobs:
         - name: JS - dependencies
           commands:
-            - make check.js.deps APP_DIRECTORY=assets
+            - make check.js.deps APP_DIRECTORY=assets SCAN_RESULT_DIR=../out
         - name: JS - code
           commands:
             - export PATH=$PATH:/home/semaphore/.local/bin
-            - make check.js.code APP_DIRECTORY=assets
+            - make check.js.code APP_DIRECTORY=assets SCAN_RESULT_DIR=../out
         - name: Elixir - dependencies
           commands:
             - make check.ex.deps CHECK_DEPS_OPTS='--ignore-packages phoenix'

.semaphore/semaphore.yml

@@ -789,11 +789,11 @@ blocks:
       jobs:
         - name: JS - dependencies
           commands:
-            - make check.js.deps APP_DIRECTORY=assets
+            - make check.js.deps APP_DIRECTORY=assets SCAN_RESULT_DIR=../out
         - name: JS - code
           commands:
             - export PATH=$PATH:/home/semaphore/.local/bin
-            - make check.js.code APP_DIRECTORY=assets
+            - make check.js.code APP_DIRECTORY=assets SCAN_RESULT_DIR=../out
         - name: Elixir - dependencies
           commands:
             - make check.ex.deps CHECK_DEPS_OPTS='--ignore-packages phoenix'

Makefile

@@ -76,6 +76,7 @@ DOCKER_BUILD_PATH=.
 EX_CATCH_WARRNINGS_FLAG=--warnings-as-errors
 CHECK_DEPS_EXTRA_OPTS?=-w feature_provider,grpc_health_check,tentacat,util,watchman,fun_registry,sentry_grpc,traceman,cacheman,log_tee,spec,proto,sys2app,looper,job_matrix,definition_validator,gofer_client,open_api_spex,when,uuid,esaml,openid_connect,block
 ROOT_MAKEFILE_PATH := $(shell dirname $(abspath $(lastword $(MAKEFILE_LIST))))
+SCAN_RESULT_DIR?=out
 
 #
 # Security checks
@@ -111,10 +112,10 @@ ifeq ($(CI),)
 		-v $$(pwd):/app \
 		-v $(ROOT_MAKEFILE_PATH)/security-toolbox:$(SECURITY_TOOLBOX_TMP_DIR) \
 		registry.semaphoreci.com/ruby:3 \
-		bash -c 'cd $(APP_DIRECTORY) && $(SECURITY_TOOLBOX_TMP_DIR)/dependencies --language $(LANGUAGE) -d $(CHECK_DEPS_OPTS)'
+		bash -c 'cd $(APP_DIRECTORY) && $(SECURITY_TOOLBOX_TMP_DIR)/dependencies --language $(LANGUAGE) -d --output-dir $(SCAN_RESULT_DIR) $(CHECK_DEPS_OPTS)'
 else
 	# ruby version is set in prologue
-	cd $(APP_DIRECTORY) && $(ROOT_MAKEFILE_PATH)/security-toolbox/dependencies --language $(LANGUAGE) -d $(CHECK_DEPS_OPTS)
+	cd $(APP_DIRECTORY) && $(ROOT_MAKEFILE_PATH)/security-toolbox/dependencies --language $(LANGUAGE) -d --output-dir $(SCAN_RESULT_DIR) $(CHECK_DEPS_OPTS)
 endif
 
 check.ex.deps:

front/assets/build.js

@@ -1,26 +1,55 @@
 const esbuild = require('esbuild')
 const fs = require('fs-extra')
 const path = require('path')
+const { exec } = require('child_process')
+const { promisify } = require('util')
 
+const execAsync = promisify(exec)
 const bundle = true
 const logLevel = process.env.ESBUILD_LOG_LEVEL || 'silent'
 const watch = !!process.env.ESBUILD_WATCH
+const isProd = process.env.MIX_ENV === 'prod' || process.env.NODE_ENV === 'production'
 
 const plugins = [
   // Add and configure plugins here
 ]
 
 const outputDir = '../priv/static/assets'
 
+// Function to process CSS files
+const processCss = async () => {
+  console.log('Processing CSS files...')
+
+  try {
+    // Process main.css which imports all other CSS files
+    const inputFile = 'css/main.css'
+    const outputFile = path.join(outputDir, 'css/app.css')
+
+    // Set NODE_ENV for PostCSS to handle minification
+    const env = isProd ? 'NODE_ENV=production' : 'NODE_ENV=development'
+    const postcssCmd = `${env} npx postcss ${inputFile} -o ${outputFile}`
+
+    await execAsync(postcssCmd)
+    console.log(`CSS processed successfully (${isProd ? 'production' : 'development'} mode)`)
+
+  } catch (error) {
+    console.error('Error processing CSS:', error)
+    throw error
+  }
+}
+
 // Function to copy static assets
-const copyAssets = () => {
-  console.log('Copying original assets to output directory...')
+const copyAssets = async () => {
+  console.log('Copying static assets to output directory...')
 
   fs.ensureDirSync(path.join(outputDir, 'css'))
   fs.ensureDirSync(path.join(outputDir, 'fonts'))
   fs.ensureDirSync(path.join(outputDir, 'images'))
 
-  fs.copySync('css', path.join(outputDir, 'css'), { overwrite: true })
+  // Process CSS files
+  await processCss()
+
+  // Copy fonts and images
   fs.copySync('fonts', path.join(outputDir, 'fonts'), { overwrite: true })
   fs.copySync('images', path.join(outputDir, 'images'), { overwrite: true })
 
@@ -53,18 +82,53 @@ const buildOptions = {
 }
 
 if (watch) {
-  esbuild.context(buildOptions).then(context => {
+  esbuild.context(buildOptions).then(async context => {
     context.watch()
-    copyAssets()
+    await copyAssets()
+
+    const chokidar = require('chokidar')
+    const cssDir = path.join(__dirname, 'css')
+
+    const cssWatcher = chokidar.watch(cssDir, {
+      persistent: true,
+      ignoreInitial: true,
+      usePolling: true, // REQUIRED for macOS Docker
+      interval: 1000,
+      binaryInterval: 1000,
+      awaitWriteFinish: {
+        stabilityThreshold: 500,
+        pollInterval: 100
+      },
+      useFsEvents: false,
+      alwaysStat: true,
+      depth: 99,
+      atomic: false
+    })
+
+    cssWatcher
+      .on('change', async (path) => {
+        // Only process CSS files
+        if (path.endsWith('.css')) {
+          console.log('CSS file changed, reprocessing...')
+          try {
+            await processCss()
+          } catch (error) {
+            console.error('Error processing CSS:', error)
+          }
+        }
+      })
+      .on('ready', () => console.log('CSS watcher ready'))
+
     process.stdin.on('close', () => {
+      cssWatcher.close()
       context.dispose()
       process.exit(0)
     })
     process.stdin.resume()
   })
 } else {
-  esbuild.build(buildOptions).then(() => {
-    copyAssets()
+  esbuild.build(buildOptions).then(async () => {
+    await copyAssets()
   }).catch(error => {
     console.error('Build error:', error)
     process.exit(1)

front/assets/css/app-semaphore-min.css

@@ -2624,7 +2624,7 @@ template {
 }
 /* Modules */
 /*
- 
+
   BOX SIZING
 
 */
@@ -2656,7 +2656,7 @@ blockquote,
 figcaption,
 figure,
 textarea,
-table, 
+table,
 td,
 th,
 tr,
@@ -2895,7 +2895,7 @@ img { max-width: 100%; }
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
   }
-/* 
+/*
 @media (--breakpoint-not-small) {
   .br0-ns {     border-radius: 0; }
   .br1-ns {     border-radius: .125rem; }
@@ -3000,7 +3000,7 @@ img { max-width: 100%; }
 .b--dashed { border-style: dashed; }
 .b--solid {  border-style: solid; }
 .b--none {   border-style: none; }
-/* 
+/*
 @media (--breakpoint-not-small) {
   .b--dotted-ns { border-style: dotted; }
   .b--dashed-ns { border-style: dashed; }
@@ -3192,7 +3192,7 @@ img { max-width: 100%; }
   bottom: 0;
   left: 0;
 }
-/* 
+/*
 @media (--breakpoint-not-small) {
   .top-0-ns     { top:   0; }
   .left-0-ns    { left:  0; }
@@ -3798,7 +3798,7 @@ code, .code, pre {
 */
 .i         { font-style: italic; }
 .fs-normal { font-style: normal; }
-/* 
+/*
 @media (--breakpoint-not-small) {
   .i-ns       { font-style: italic; }
   .fs-normal-ns     { font-style: normal; }
@@ -3850,7 +3850,7 @@ code, .code, pre {
 .fw7    { font-weight: 700; }
 .fw8    { font-weight: 800; }
 .fw9    { font-weight: 900; }
-/* 
+/*
 @media (--breakpoint-not-small) {
   .normal-ns { font-weight: normal; }
   .b-ns      { font-weight: bold; }
@@ -3896,7 +3896,7 @@ code, .code, pre {
 /*
 
    FORMS
-   
+
 */
 .input-reset {
   -webkit-appearance: none;
@@ -4037,7 +4037,7 @@ code, .code, pre {
 .tracked       { letter-spacing:  .1em; }
 .tracked-tight { letter-spacing: -.05em; }
 .tracked-mega  { letter-spacing:  .25em; }
-/* 
+/*
 @media (--breakpoint-not-small) {
   .tracked-ns       { letter-spacing:  .1em; }
   .tracked-tight-ns { letter-spacing: -.05em; }
@@ -6326,7 +6326,7 @@ code, .code, pre {
 .ttl { text-transform: lowercase; }
 .ttu { text-transform: uppercase; }
 .ttn { text-transform: none; }
-/* 
+/*
 @media (--breakpoint-not-small) {
   .ttc-ns { text-transform: capitalize; }
   .ttl-ns { text-transform: lowercase; }
@@ -7063,4 +7063,4 @@ kbd {
   line-height: 1;
   padding: 2px 6px;
   white-space: nowrap;
-}
+}

front/assets/css/app-semaphore.css

@@ -464,4 +464,23 @@ sem-popover {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-}
+}
+
+.material-symbols-outlined {
+  font-variation-settings:
+  'FILL' 0,
+  'wght' 300,
+  'GRAD' 0,
+  'opsz' 20
+}
+.material-symbols-outlined.fill {
+  font-variation-settings:
+  'FILL' 1,
+  'wght' 300,
+  'GRAD' 0,
+  'opsz' 20
+}
+.material-symbols-outlined.md-18 { font-size: 18px; }
+.material-symbols-outlined.md-24 { font-size: 24px; }
+.material-symbols-outlined.md-36 { font-size: 36px; }
+.material-symbols-outlined.md-48 { font-size: 48px; }

front/assets/css/app.css

@@ -0,0 +1,3 @@
+/* Main CSS entry point - combines all CSS files */
+@import "./app-semaphore.css";
+@import "./app.css";

front/assets/css/main.css

@@ -1,5 +1,4 @@
 import "phoenix_html";
-import "../css/app.css";
 
 import $ from "jquery";
 import { install } from '@github/hotkey';