Minify custom CSS

DEVELOPMENT.md

@@ -30,7 +30,7 @@ With the development environment initialized, follow these steps to create a new
 
 5. Update `themes/<theme-name>/<theme-name>-monaco.json` to customize the colors of the Monaco Editor. For details on the `monacoOptions` configuration, please refer to the [Node-RED documentation][theming-the-monaco-editor].
 
-6. ***OPTIONAL*** - If additional customizations are needed, create `themes/<theme-name>/<theme-name>-custom.css` and add them to that file. A minified version (`themes/<theme-name>/<theme-name>-custom.min.css`) is preferred.
+6. ***OPTIONAL*** - If additional customizations are needed, add them to `themes/<theme-name>/<theme-name>-custom.css`.
 
 7. Refresh Node-RED in the browser to preview the changes
 

package.json

@@ -39,6 +39,7 @@
     "homepage": "https://github.com/node-red-contrib-themes/theme-collection#readme",
     "devDependencies": {
         "command-line-args": "^5.2.1",
+        "csso": "5.0.5",
         "fs-extra": "10.1.0",
         "nodemon": "2.0.20",
         "nopt": "6.0.0",

scripts/build.js

@@ -1,7 +1,8 @@
 #!/usr/bin/env node
 const path = require('path')
-const { readdirSync } = require('fs')
+const { readFileSync, readdirSync, writeFileSync } = require('fs')
 const { exec } = require('child_process')
+const { minify } = require('csso')
 const themesPath = path.join(process.cwd(), 'themes')
 const themes = readdirSync(themesPath)
 
@@ -13,4 +14,9 @@ themes.forEach(themeName => {
     const buildSrc = './node-red'
 
     exec(`node ./scripts/build-theme.js --in=${buildIn} --out=${buildOut} --src=${buildSrc}`)
+
+    const themeCustomCss = readFileSync(path.resolve(themePath, themeName + '-custom.css'), 'utf-8')
+    const minifiedCss = minify(themeCustomCss).css
+
+    writeFileSync(path.resolve(themePath, themeName + '-custom.min.css'), minifiedCss)
 })

scripts/dev.js

@@ -2,11 +2,12 @@
 const commandLineArgs = require('command-line-args')
 const options = commandLineArgs([{ name: 'themeName', type: String, defaultOption: true }])
 const path = require('path')
-const { existsSync, watch } = require('fs')
+const { existsSync, readFileSync, watch, writeFileSync } = require('fs')
 const { exec } = require('child_process')
+const { minify } = require('csso')
 const nodemon = require('nodemon')
 const themeName = String(options.themeName.split('-scroll', 1))
-const themePath = options.themeName ? path.join('themes', themeName) : ''
+const themePath = path.join('themes', themeName)
 const buildIn = path.join(themePath, themeName + '.scss')
 const buildOut = path.join(themePath, themeName + '.min.css')
 const buildSrc = './node-red'
@@ -25,10 +26,16 @@ if (options.themeName && !existsSync(themePath)) {
     process.exit(2)
 }
 
-watch(path.resolve(themePath, themeName + '.scss'), () => {
+watch(path.join(themePath, themeName + '.scss'), () => {
     exec(`node ./scripts/build-theme.js --in=${buildIn} --out=${buildOut} --src=${buildSrc}`)
 })
 
+watch(path.join(themePath, themeName + '-custom.css'), () => {
+    const themeCustomCss = readFileSync(path.join(themePath, themeName + '-custom.css'), 'utf-8')
+    const minifiedCss = minify(themeCustomCss).css
+    writeFileSync(path.join(themePath, themeName + '-custom.min.css'), minifiedCss)
+})
+
 nodemon({
     exec: `node-red/packages/node_modules/node-red/red.js --port 41880 --userDir .node-red --define credentialSecret=false --define editorTheme.projects.enabled=true --define editorTheme.theme=${options.themeName} theme-dev-project`,
     ext: 'js,json,css',

themes.js

@@ -12,7 +12,7 @@ module.exports = function (RED) {
         const cssArray = []
         const css = { css: cssArray }
         const themeCSS = themeName + '.min.css'
-        const themeCustomCSS = existsSync(path.join(themePath, themeName + '-custom.min.css')) ? themeName + '-custom.min.css' : themeName + '-custom.css'
+        const themeCustomCSS = themeName + '-custom.min.css'
         const scrollbarsCSS = 'common/scrollbars.min.css'
         const monacoFile = path.join(themePath, themeName + '-monaco.json')
         const monacoOptions = existsSync(monacoFile) ? require(monacoFile) : {}