Improved compilation toolchain

.gitignore

@@ -1,7 +1,8 @@
-/assets/sass/*.css
+*.css
 *.map
-/OgreAlert
+ogre-alert.zip
-ogrealert.zip
 lib
 composer.lock
 vendor
+package-lock.json
+node_modules

.vscode/tasks.json

@@ -0,0 +1,35 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Compile",
+            "type": "shell",
+            "command": "gulp",
+            "group": "build",
+            "presentation": {
+                "reveal": "silent",
+                "panel": "shared",
+            }
+        },
+        {
+            "label": "Package",
+            "type": "shell",
+            "command": "gulp package",
+            "group": "build",
+            "presentation": {
+                "reveal": "silent",
+                "panel": "shared",
+            }
+        },
+        {
+            "label": "Install",
+            "type": "shell",
+            "command": "make install",
+            "group": "build",
+            "presentation": {
+                "reveal": "silent",
+                "panel": "shared",
+            }
+        }
+    ]
+}

Makefile

@@ -1,34 +1,23 @@
-PACKAGE	= OgreAlert
+all: install
-SLUG	= ogrealert
-DIR		= ./$(PACKAGE)
 
-all: $(SLUG).zip
+reinstall: clean install
 
-$(SLUG).zip: clean dir copy zip
+clean: clean-composer clean-npm
 
-dir:
+clean-composer:
-	mkdir $(DIR)
+	rm -rf acf || true
+	rm -rf vendor/* || true
+	rm -rf lib/* || true
+	rm composer.lock || true
+	composer clearcache
 
-copy:
+clean-npm:
-	cp -RT ./assets $(DIR)/assets
+	rm -rf node_modules/* || true
-	cp -RT ./inc $(DIR)/inc
+	rm package-lock.json || true
-	cp -RT ./lib $(DIR)/lib
-	cp -RT ./templates $(DIR)/templates
-	cp -f ./* $(DIR) || true
 
-	rm $(DIR)/Makefile
+install:
-	rm $(DIR)/composer.json
+	composer install
-	rm $(DIR)/composer.lock
+	npm install
-	rm $(DIR)/$(SLUG).zip || true
 
-	rm -r $(DIR)/assets/sass/lib
+package: install
-	rm $(DIR)/assets/sass/*.scss
+	gulp package
-	rm $(DIR)/assets/sass/*.map
-
-zip:
-	zip -r ./$(SLUG).zip $(DIR)
-	rm -r $(DIR) || true
-
-clean:
-	rm -r $(DIR) || true
-	rm ./$(SLUG).zip || true

composer.json

@@ -1,7 +1,7 @@
 {
     "$schema": "https://getcomposer.org/schema.json",
     "name": "cleverogre/ogre-alert",
-    "version": "0.2.0",
+    "version": "0.2.1",
 	"title": "OgreAlert",
 	"description": "OgreAlert is a plugin developed by CleverOgre in Pensacola, Florida.",
 	"author": "CleverOgre",

gulpfile.js

@@ -0,0 +1,84 @@
+const gulp = require('gulp'),
+	clean = require('gulp-clean'),
+	postcss = require('gulp-postcss'),
+	cssnano = require('cssnano'),
+	sass = require('gulp-sass')(require('sass')),
+	zip = require('gulp-zip').default;
+
+// Clean Tasks
+
+gulp.task('clean-style', () => {
+	return gulp.src('assets/css/*.css', {
+		read: false,
+		allowEmpty: true,
+	}).pipe(clean());
+});
+
+gulp.task('clean-package', () => {
+	return gulp.src('ogrealert.zip', {
+		read: false,
+		allowEmpty: true,
+	}).pipe(clean());
+});
+
+gulp.task(
+	'clean',
+	gulp.series(
+		'clean-style',
+		'clean-package'
+	)
+);
+
+// Compile Tasks
+
+gulp.task('compile-style', () => {
+	return gulp.src([
+		'assets/sass/*.scss',
+	])
+		.pipe(sass().on('error', sass.logError))
+		.pipe(postcss(cssnano()))
+		.pipe(gulp.dest('./assets/css/'));
+});
+
+gulp.task(
+	'compile',
+	gulp.series(
+		'compile-style'
+	)
+);
+
+// Package Tasks
+
+gulp.task('package-compress', () => {
+	return gulp.src([
+		'assets/css/*',
+		'assets/js/*',
+		'assets/*.png',
+		'inc/**/*',
+		'lib/**/*',
+		'templates/**/*',
+		'ogrealert.php',
+		'readme.txt'
+	], { base: './' })
+		.pipe(zip('ogrealert.zip'))
+		.pipe(gulp.dest('./'));
+});
+
+gulp.task(
+	'package',
+	gulp.series(
+		'clean',
+		'compile',
+		'package-compress'
+	)
+);
+
+// Default Tasks
+
+gulp.task(
+	'default',
+	gulp.series(
+		'clean',
+		'compile'
+	)
+);

inc/display.php

@@ -38,7 +38,7 @@ class Display {
     }
 
     static function enqueue_scripts() {
-        wp_enqueue_style('ogrealert', \OgreAlert\Settings::get('dir') . 'assets/sass/style.css', [], \OgreAlert\Settings::get('version'), 'all');
+        wp_enqueue_style('ogrealert', \OgreAlert\Settings::get('dir') . 'assets/css/style.css', [], \OgreAlert\Settings::get('version'), 'all');
         wp_enqueue_script('ogrealert', \OgreAlert\Settings::get('dir') . 'assets/js/frontend.js', ['jquery'], \OgreAlert\Settings::get('version'), true);
         wp_localize_script('ogrealert', 'ogrealert', [
             'text_color' => \OgreAlert\Settings::get('message_text_color'),

ogrealert.php

@@ -3,7 +3,7 @@
 Plugin Name: OgreAlert
 Plugin URI: https://plugins.cleverogre.com/plugin/ogrealert/
 Description: OgreAlert is a plugin developed by CleverOgre in Pensacola, Florida.
-Version: 0.2.0
+Version: 0.2.1
 Author: CleverOgre
 Author URI: https://cleverogre.com/
 Icon1x: https://plugins.cleverogre.com/plugin/ogrealert/?asset=icon-sm
@@ -31,7 +31,7 @@ class Plugin {
 
         // Default Settings
         \OgreAlert\Settings::set('name', 'OgreAlert');
-        \OgreAlert\Settings::set('version', '0.2.0');
+        \OgreAlert\Settings::set('version', '0.2.1');
         \OgreAlert\Settings::set('capability', 'edit_posts');
         \OgreAlert\Settings::set('path', $path);
         \OgreAlert\Settings::set('dir', self::get_dir(__FILE__));

package.json

@@ -0,0 +1,33 @@
+{
+	"$schema": "https://www.schemastore.org/package.json",
+    "name": "cleverogre/ogre-alert",
+    "version": "0.2.1",
+    "title": "OgreAlert",
+	"description": "OgreAlert is a plugin developed by CleverOgre in Pensacola, Florida.",
+    "author": "CleverOgre",
+	"license": "GPL-2.0+",
+	"keywords": [
+        "WordPress",
+		"Plugin",
+        "Alert",
+        "Banner"
+	],
+	"homepage": "https://cleverogre.com",
+	"engines": {
+		"node": ">=21.1.0",
+		"npm": ">=10.2.3"
+	},
+	"devDependencies": {
+		"autoprefixer": "^10.4.21",
+		"cssnano": "^6.0.3",
+		"gulp": "^5.0.0",
+		"gulp-clean": "^0.4.0",
+		"gulp-cli": "^2.3.0",
+		"gulp-postcss": "^9.1.0",
+		"gulp-sass": "^5.1.0",
+		"gulp-zip": "^6.1.0",
+		"postcss": "^8.4.33",
+		"postcss-cli": "^11.0.0",
+		"sass": "^1.89.0"
+	}
+}

postcss.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer')({
+            overrideBrowserslist: [
+                "ie 10",
+                "> 0.3%",
+                "last 7 versions",
+                "Android >= 4",
+                "Firefox >= 20",
+                "iOS >= 8"
+            ],
+            flexbox: true
+        }),
+        require('cssnano')({
+            preset: 'default',
+        })
+    ]
+};

readme.txt

@@ -4,7 +4,7 @@ Donate link: https://cleverogre.com/
 Tags: development, warning, modal, dismissable
 Requires at least: 4.8.0
 Tested up to: 5.7.1
-Stable tag: 0.2.0
+Stable tag: 0.2.1
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
@@ -62,6 +62,12 @@ By default, the OgreAlert plugin will be able to update without an activated lic
 
 == Changelog ==
 
+= 0.2.1 - 07-22-2025 =
+* DEV: Added gulp sass compilation
+* DEV: Removed Bourbon dependency
+* DEV: Removed FontAwesome depedency
+* DEV: Added CSS3 variables
+
 = 0.2.0 - 07-22-2025 =
 * DEV: Updated plugin updater libraries.