diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index bde1e41..3bffe33 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -30,7 +30,7 @@ With the development environment initialized, follow these steps to create a new 5. Update `themes//-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//-custom.css` and add them to that file. A minified version (`themes//-custom.min.css`) is preferred. +6. ***OPTIONAL*** - If additional customizations are needed, add them to `themes//-custom.css`. 7. Refresh Node-RED in the browser to preview the changes diff --git a/package.json b/package.json index 7530158..b6c9f60 100644 --- a/package.json +++ b/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", diff --git a/scripts/build.js b/scripts/build.js index e4ef78c..b323bc1 100644 --- a/scripts/build.js +++ b/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) }) \ No newline at end of file diff --git a/scripts/dev.js b/scripts/dev.js index 8b0a793..dc8d32c 100644 --- a/scripts/dev.js +++ b/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', diff --git a/themes.js b/themes.js index 27e5874..18ed3f8 100644 --- a/themes.js +++ b/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) : {}