From 699de105ca498bdd1824cb04e0edab53f7b0b09c Mon Sep 17 00:00:00 2001 From: CreatorSiSo <64036709+CreatorSiSo@users.noreply.github.com> Date: Thu, 8 Jul 2021 20:11:19 +0200 Subject: [PATCH 1/4] add shell script for compiling scss + documentation --- src/styles/README.md | 44 +++++++++++++++++++++++++++ src/styles/compile.sh | 70 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 114 insertions(+) create mode 100644 src/styles/README.md create mode 100644 src/styles/compile.sh diff --git a/src/styles/README.md b/src/styles/README.md new file mode 100644 index 00000000..a8c26d11 --- /dev/null +++ b/src/styles/README.md @@ -0,0 +1,44 @@ +# How to use the compile.sh script + +The comiple.sh script compiles all .scss files without a _ in the beginning into .css files. + +These files will be compiled: + + scrollbar.scss --> scrollbar.css + main.scss --> main.css + +and these will be ignored: + + _lite.scss --! + _dark.scss --! + +## Windows +To run the script under Windows you need to have bash installed and added to the PATH. +If you have bash you can run the script by putting **bash** in front of the path to the .sh file you want to run. + + cd + bash ./compile.sh + +or: + + bash /compile.sh + +## Linux and MacOS +To run the + + cd + ./compile.sh + +or: + + /compile.sh + +## Usage + + ./compile.sh [] + +The following options are available: + + -c, --compile Compile all scss files. + -w, --watch Watch scss files and recompile when they change. + -h, -?, --help Print usage information. diff --git a/src/styles/compile.sh b/src/styles/compile.sh new file mode 100644 index 00000000..5685086b --- /dev/null +++ b/src/styles/compile.sh @@ -0,0 +1,70 @@ +scssdir=scss; +cssdir=css; + +blue="$(tput setaf 4)" +lblue="$(tput setaf 12)" +yellow="$(tput setaf 3)" +lyellow="$(tput setaf 11)" +red="$(tput setaf 1)" +lred="$(tput setaf 9)" +magenta="$(tput setaf 5)" +underline="$(tput smul)" +bold="$(tput bold)" +marked="$(tput smso)" +clear="$(tput rmul)$(tput rmso)$(tput sgr0)$(tput setaf 7)" + +function log() { + if [[ $1 == "inf" ]]; then + echo -e "${lblue}Info: $2" $clear + elif [[ $1 == "wrn" ]]; then + echo -e $yellow"Warn:" $lyellow "$2" $clear + elif [[ $1 == "err" ]]; then + echo -e $lred"Err : " $white "$2" $clear + fi +} + +function print_help() { + echo "$bold${magenta}Texturelab$clear SCSS Compiler Script"; + echo ""; + echo "This script compiles all .scss files into .css files and can continuously watch for changes. For more information read the README.md."; + echo ""; + echo "You need to have Dart Sass installed to use this script."; + echo ""; + echo "usage: $BASH_SOURCE []"; + echo ""; + echo "The following options are available:"; + echo "-c, --compile Compile all scss files."; + echo "-w, --watch Watch scss files and recompile when they change."; + echo "-h, -?, --help Print this usage information."; +} + +function check_exit_code() { + exit_code=$? + if (( $exit_code == 127 )); then + log wrn "You do not have the Dart Sass commandline tools installed or they are not available in the PATH"; + log inf "To install Dart Sass run:" + log inf " choco install sass - windows" + log inf " brew install sass/sass/sass - mac/linux" + log inf " npm install -g sass - js version" + elif (( $exit_code == 0 )); then + log inf "done"; + fi +} + +if (( $# == 0 )); +then + print_help; +else + if [ $1 == "-h" ] || [ $1 == "-?" ] || [ $1 == "--help" ]; then + print_help; + elif [ $1 == "-c" ] || [ $1 == "--compile" ]; then + log inf "compiling scss . . ."; + sass $scssdir:$cssdir --color --no-source-map; + check_exit_code; + elif [ $1 == "-w" ] || [ $1 == "--watch" ]; then + log inf "watching scss . . ." + sass $scssdir:$cssdir --color --no-source-map --watch; + else + log err "$1 is not an option" + fi +fi \ No newline at end of file From 94a59c4fd121477d4f4ba0bf852766f412c00865 Mon Sep 17 00:00:00 2001 From: CreatorSiSo <64036709+CreatorSiSo@users.noreply.github.com> Date: Mon, 12 Jul 2021 22:35:38 +0200 Subject: [PATCH 2/4] Remove unnecessary colors --- src/styles/compile.sh | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/styles/compile.sh b/src/styles/compile.sh index 5685086b..3416bd99 100644 --- a/src/styles/compile.sh +++ b/src/styles/compile.sh @@ -1,16 +1,12 @@ scssdir=scss; cssdir=css; -blue="$(tput setaf 4)" lblue="$(tput setaf 12)" yellow="$(tput setaf 3)" lyellow="$(tput setaf 11)" -red="$(tput setaf 1)" lred="$(tput setaf 9)" -magenta="$(tput setaf 5)" -underline="$(tput smul)" +purple="$(tput setaf 129)" bold="$(tput bold)" -marked="$(tput smso)" clear="$(tput rmul)$(tput rmso)$(tput sgr0)$(tput setaf 7)" function log() { @@ -24,7 +20,7 @@ function log() { } function print_help() { - echo "$bold${magenta}Texturelab$clear SCSS Compiler Script"; + echo "$bold${purple}Texturelab$clear SCSS Compiler Script"; echo ""; echo "This script compiles all .scss files into .css files and can continuously watch for changes. For more information read the README.md."; echo ""; From fbe076de9c93b5f1fb98efd50652235632ea578a Mon Sep 17 00:00:00 2001 From: CreatorSiSo <64036709+CreatorSiSo@users.noreply.github.com> Date: Mon, 12 Jul 2021 22:36:22 +0200 Subject: [PATCH 3/4] Cleanup scss compiler script --- src/styles/compile.sh | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/compile.sh b/src/styles/compile.sh index 3416bd99..f47198ec 100644 --- a/src/styles/compile.sh +++ b/src/styles/compile.sh @@ -11,11 +11,11 @@ clear="$(tput rmul)$(tput rmso)$(tput sgr0)$(tput setaf 7)" function log() { if [[ $1 == "inf" ]]; then - echo -e "${lblue}Info: $2" $clear + echo -e $lblue "Info: " "$2" $clear elif [[ $1 == "wrn" ]]; then - echo -e $yellow"Warn:" $lyellow "$2" $clear + echo -e $yellow "Warn: " $lyellow "$2" $clear elif [[ $1 == "err" ]]; then - echo -e $lred"Err : " $white "$2" $clear + echo -e $lred "Err : " $white "$2" $clear fi } @@ -37,7 +37,7 @@ function print_help() { function check_exit_code() { exit_code=$? if (( $exit_code == 127 )); then - log wrn "You do not have the Dart Sass commandline tools installed or they are not available in the PATH"; + log err "You do not have the Dart Sass commandline tools installed or they are not available in the PATH"; log inf "To install Dart Sass run:" log inf " choco install sass - windows" log inf " brew install sass/sass/sass - mac/linux" From 1b6bdbcb0ec8c11dbcc19ac163cde6f34ee5767f Mon Sep 17 00:00:00 2001 From: CreatorSiSo <64036709+CreatorSiSo@users.noreply.github.com> Date: Wed, 21 Jul 2021 16:45:27 +0200 Subject: [PATCH 4/4] Fix scss compiler script execution and add yarn commands Make scss compiler script executable from outside its folder Add yarn compscss, yarn watchscss --- .gitignore | 6 +++++- package.json | 6 ++++-- src/styles/compile.sh | 12 +++++++----- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/.gitignore b/.gitignore index 025b65c7..00d6cab3 100644 --- a/.gitignore +++ b/.gitignore @@ -20,6 +20,10 @@ yarn-error.log* *.sln *.sw? -#Electron-builder output +# SCSS compiler output +src/styles/css/*.css +src/styles/css/*.map + +# Electron-builder output /dist_electron /build/icons \ No newline at end of file diff --git a/package.json b/package.json index 22add689..9f15f9f3 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,9 @@ "postinstall": "electron-builder install-app-deps", "postuninstall": "electron-builder install-app-deps", "test:unit": "vue-cli-service test:unit", - "buildicons": "electron-icon-builder --input=./public/icon.png --output ./build" + "buildicons": "electron-icon-builder --input=./public/icon.png --output ./build", + "compscss": "bash src/styles/compile.sh --compile", + "watchscss": "bash src/styles/compile.sh --watch" }, "main": "background.js", "dependencies": { @@ -63,4 +65,4 @@ "vue-cli-plugin-electron-builder": "^1.4.0", "vue-template-compiler": "^2.6.10" } -} +} \ No newline at end of file diff --git a/src/styles/compile.sh b/src/styles/compile.sh index f47198ec..3f2aa512 100644 --- a/src/styles/compile.sh +++ b/src/styles/compile.sh @@ -1,5 +1,7 @@ -scssdir=scss; -cssdir=css; +scriptdir=$(dirname "$BASH_SOURCE"); + +scssdir=$scriptdir/scss; +cssdir=$scriptdir/css; lblue="$(tput setaf 12)" yellow="$(tput setaf 3)" @@ -8,7 +10,7 @@ lred="$(tput setaf 9)" purple="$(tput setaf 129)" bold="$(tput bold)" clear="$(tput rmul)$(tput rmso)$(tput sgr0)$(tput setaf 7)" - + function log() { if [[ $1 == "inf" ]]; then echo -e $lblue "Info: " "$2" $clear @@ -55,11 +57,11 @@ else print_help; elif [ $1 == "-c" ] || [ $1 == "--compile" ]; then log inf "compiling scss . . ."; - sass $scssdir:$cssdir --color --no-source-map; + sass $scssdir:$cssdir --color; check_exit_code; elif [ $1 == "-w" ] || [ $1 == "--watch" ]; then log inf "watching scss . . ." - sass $scssdir:$cssdir --color --no-source-map --watch; + sass $scssdir:$cssdir --color --watch; else log err "$1 is not an option" fi