Build and Minify Frontend CSS

.distignore

@@ -5,6 +5,7 @@
 /.wordpress-org
 /log
 /node_modules
+/resources/frontend/css/*.map
 /tests
 /vendor/autoload.php
 /vendor/composer

.gitignore

@@ -8,6 +8,7 @@ log.txt
 package-lock.json
 phpstan.neon
 node_modules
+resources/frontend/css/*.map
 tests/_output
 tests/_wordpress
 tests/Support/_generated

.stylelintrc.json

@@ -1,8 +1,12 @@
 {
     "extends": "@wordpress/stylelint-config",
+    "plugins": ["stylelint-scss"],
     "rules": {
         "font-family-no-missing-generic-family-keyword": null,
         "selector-class-pattern": null,
-        "declaration-property-unit-allowed-list": null
+        "declaration-property-unit-allowed-list": null,
+        "at-rule-no-unknown": [true, {
+            "ignoreAtRules": ["use", "forward", "mixin", "include", "extend"]
+        }]
     }
 }

DEVELOPMENT.md

@@ -60,6 +60,18 @@ Typically, packages listed in this section would be internal development tools f
 - PHPStan
 - Codeception
 
+### Build
+
+Run `npm run build` to compile frontend CSS and JS in one step.
+
+### CSS
+
+Run `npm run watch:css` to compile frontend CSS to `resources/frontend/css/frontend.css` when working on SCSS in the `resources/frontend/scss` folder.
+
+### JS
+
+Run `npm run watch:js` to compile frontend JS to `resources/frontend/js/dist/frontend-min.js` when working on JS in the `resources/frontend/js` folder.
+
 ## Committing Work
 
 Remember to commit your changes to your branch relatively frequently, with a meaningful, short summary that explains what the change(s) do.

SETUP.md

@@ -93,7 +93,9 @@ In the Plugin's directory, at the command line, run `npm install`.
 
 This sets up:
 - JS linting / coding standards using WordPress recommended configurations (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#lint-js)
-- CSS linting / coding standards using WordPress recommended configurations (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#lint-style)
+- SCSS and CSS linting / coding standards using WordPress recommended configurations (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#lint-style)
+- JS compilation and minification
+- SASS compilation and minification
 
 ### Configure wp-config.php
 

TESTING.md

@@ -26,14 +26,29 @@ The following Composer commands can be used:
 | `composer fix-php-coding-standards` | `composer phpcbf` | Fix PHP files to meet WordPress and PHP Coding Standards |
 | `composer php-coding-standards-on-tests` | `composer phpcs-tests` | Runs PHP Coding Standards on the /tests folder |
 | `composer fix-php-coding-standards-on-tests` | `composer phpcbf-tests` | Fix PHP files to meet PHP Coding Standards on the /tests folder |
-| `composer css-coding-standards` | `composer lint-css` | Runs WordPress CSS Coding Standards on the entire plugin codebase |
+| `composer css-coding-standards` | `composer lint-css` | Runs WordPress CSS Coding Standards on CSS and SCSS files |
 | `composer fix-css-coding-standards` | `composer fix-css` | Fixes CSS files to meet WordPress CSS Coding Standards |
-| `composer js-coding-standards` | `composer lint-js` | Runs WordPress JS Coding Standards on the entire plugin codebase |
+| `composer build-css` | `composer build-css` | Builds the frontend CSS file |
+| `composer watch-css` | `composer watch-css` | Builds the frontend CSS file when changes are made to SCSS files |
+| `composer js-coding-standards` | `composer lint-js` | Runs WordPress JS Coding Standards on JS files |
 | `composer fix-js-coding-standards` | `composer fix-js` | Fixes JS files to meet WordPress JS Coding Standards |
+| `composer build-js` | `composer build-js` | Builds the frontend JS file |
+| `composer watch-js` | `composer watch-js` | Builds the frontend JS file when changes are made to frontend JS files |
+| `composer build` | `composer build` | Builds frontend CSS and JS |
 | `composer static-analysis` | `composer phpstan` | Runs PHPStan static analysis with increased memory limit |
 | `composer test` | `composer test` | Builds and runs end-to-end tests with `fail-fast` enabled |
 | `composer test-integration` | `composer test-integration` | Builds and runs integration tests with `fail-fast` enabled |
 
+The following npm commands can be used, if preferred:
+
+| Command | Description |
+|---------|-------------|
+| `npm run build:css` | Builds the frontend CSS file |
+| `npm run watch:css` | Builds the frontend CSS file when changes are made to SCSS files |
+| `npm run build:js` | Builds the frontend JS file |
+| `npm run watch:js` | Builds the frontend JS file when changes are made to frontend JS files |
+| `npm run build` | Builds frontend CSS and JS |
+
 ## Write (or modify) a test
 
 If your work creates new functionality, write a test.

composer.json

@@ -27,10 +27,18 @@
         "phpcbf": "vendor/bin/phpcbf ./ -s -v",
         "phpcs-tests": "vendor/bin/phpcs ./tests --standard=phpcs.tests.xml -s -v",
         "phpcbf-tests": "vendor/bin/phpcbf ./tests --standard=phpcs.tests.xml -s -v",
+        "build-css": "npm run build:css",
+        "watch-css": "npm run watch:css",
         "lint-css": "npm run lint:css",
         "fix-css": "npm run fix:css",
+        "build-js": "npm run build:js",
+        "watch-js": "npm run watch:js",
         "lint-js": "npm run lint:js",
         "fix-js": "npm run fix:js",
+        "build": [
+            "npm run build:css",
+            "npm run build:js"
+        ],
         "phpstan": "vendor/bin/phpstan analyse --memory-limit=1250M",
         "php-coding-standards": "vendor/bin/phpcs ./ -s -v",
         "fix-php-coding-standards": "vendor/bin/phpcbf ./ -s -v",

includes/blocks/class-convertkit-block-broadcasts.php

@@ -115,9 +115,12 @@ public function enqueue_scripts() {
 		// Get ConvertKit Settings.
 		$settings = new ConvertKit_Settings();
 
-		wp_enqueue_script( 'convertkit-' . $this->get_name(), CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/broadcasts.js', array(), CONVERTKIT_PLUGIN_VERSION, true );
+		// Enqueue frontend JS.
+		convertkit_enqueue_frontend_js();
+
+		// Define variables.
 		wp_localize_script(
-			'convertkit-' . $this->get_name(),
+			'convertkit-js',
 			'convertkit_broadcasts',
 			array(
 				// REST API URL endpoint.
@@ -127,6 +130,7 @@ public function enqueue_scripts() {
 				'debug'    => $settings->debug_enabled(),
 			)
 		);
+
 	}
 
 	/**
@@ -136,7 +140,7 @@ public function enqueue_scripts() {
 	 */
 	public function enqueue_styles() {
 
-		wp_enqueue_style( 'convertkit-' . $this->get_name(), CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/broadcasts.css', array(), CONVERTKIT_PLUGIN_VERSION );
+		convertkit_enqueue_frontend_css();
 
 	}
 

includes/blocks/class-convertkit-block-form-builder-field.php

@@ -89,7 +89,7 @@ public function enqueue_styles_editor() {
 	 */
 	public function enqueue_styles() {
 
-		wp_enqueue_style( 'convertkit-form-builder', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/form-builder.css', array(), CONVERTKIT_PLUGIN_VERSION );
+		convertkit_enqueue_frontend_css();
 
 	}
 

includes/blocks/class-convertkit-block-form-builder.php

@@ -288,7 +288,7 @@ public function enqueue_styles_editor() {
 	 */
 	public function enqueue_styles() {
 
-		wp_enqueue_style( 'convertkit-form-builder-field', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/form-builder.css', array(), CONVERTKIT_PLUGIN_VERSION );
+		convertkit_enqueue_frontend_css();
 
 	}
 

includes/blocks/class-convertkit-block-form-trigger.php

@@ -39,7 +39,7 @@ public function __construct() {
 	 */
 	public function enqueue_styles() {
 
-		wp_enqueue_style( 'convertkit-button', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/button.css', array(), CONVERTKIT_PLUGIN_VERSION );
+		convertkit_enqueue_frontend_css();
 
 		// Enqueue the block button CSS.
 		wp_enqueue_style( 'wp-block-button' );

includes/blocks/class-convertkit-block-form.php

@@ -67,7 +67,7 @@ public function enqueue_styles_editor() {
 	 */
 	public function enqueue_styles() {
 
-		wp_enqueue_style( 'convertkit-form', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/form.css', array(), CONVERTKIT_PLUGIN_VERSION );
+		convertkit_enqueue_frontend_css();
 
 	}
 

includes/blocks/class-convertkit-block-product.php

@@ -61,7 +61,7 @@ public function enqueue_scripts() {
 	 */
 	public function enqueue_styles() {
 
-		wp_enqueue_style( 'convertkit-button', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/button.css', array(), CONVERTKIT_PLUGIN_VERSION );
+		convertkit_enqueue_frontend_css();
 
 		// Enqueue the block button CSS.
 		wp_enqueue_style( 'wp-block-button' );

includes/class-convertkit-output-restrict-content.php

@@ -1425,15 +1425,17 @@ private function get_call_to_action( $post_id ) { // phpcs:ignore Generic.CodeAn
 		// Only load styles if the Disable CSS option is off.
 		if ( ! $this->settings->css_disabled() ) {
 			// Enqueue styles.
-			wp_enqueue_style( 'convertkit-restrict-content', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/restrict-content.css', array(), CONVERTKIT_PLUGIN_VERSION );
+			convertkit_enqueue_frontend_css();
 		}
 
 		// Only load scripts if the Disable Scripts option is off.
 		if ( ! $this->settings->scripts_disabled() ) {
 			// Enqueue scripts.
-			wp_enqueue_script( 'convertkit-restrict-content', CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/restrict-content.js', array(), CONVERTKIT_PLUGIN_VERSION, true );
+			convertkit_enqueue_frontend_js();
+
+			// Define variables.
 			wp_localize_script(
-				'convertkit-restrict-content',
+				'convertkit-js',
 				'convertkit_restrict_content',
 				array(
 					'nonce'                         => wp_create_nonce( 'wp_rest' ),
@@ -1442,7 +1444,6 @@ private function get_call_to_action( $post_id ) { // phpcs:ignore Generic.CodeAn
 					'debug'                         => $this->settings->debug_enabled(),
 				)
 			);
-
 		}
 
 		// Output code form if this request is after the user entered their email address,

includes/class-convertkit-output.php

@@ -801,14 +801,10 @@ public function enqueue_scripts() {
 			return;
 		}
 
-		// Register scripts that we might use.
-		wp_register_script(
-			'convertkit-js',
-			CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/convertkit.js',
-			array(),
-			CONVERTKIT_PLUGIN_VERSION,
-			true
-		);
+		// Enqueue frontend JS.
+		convertkit_enqueue_frontend_js();
+
+		// Define variables.
 		wp_localize_script(
 			'convertkit-js',
 			'convertkit',
@@ -820,9 +816,6 @@ public function enqueue_scripts() {
 			)
 		);
 
-		// Enqueue.
-		wp_enqueue_script( 'convertkit-js' );
-
 	}
 
 	/**

includes/functions.php

@@ -529,6 +529,34 @@ function convertkit_get_new_product_url() {
 
 }
 
+/**
+ * Helper method to enqueue the frontend CSS file.
+ *
+ * @since   3.2.0
+ */
+function convertkit_enqueue_frontend_css() {
+
+	wp_enqueue_style( 'convertkit-frontend', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/frontend.css', array(), CONVERTKIT_PLUGIN_VERSION );
+
+}
+
+/**
+ * Helper method to enqueue the frontend JS file.
+ *
+ * @since   3.2.0
+ */
+function convertkit_enqueue_frontend_js() {
+
+	wp_enqueue_script(
+		'convertkit-js',
+		CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/dist/frontend.min.js',
+		array(),
+		CONVERTKIT_PLUGIN_VERSION,
+		true
+	);
+
+}
+
 /**
  * Helper method to enqueue Select2 scripts for use within the ConvertKit Plugin.
  *

package.json

@@ -2,15 +2,22 @@
   "name": "wordpress-linting-setup",
   "private": true,
   "scripts": {
-    "lint:css": "wp-scripts lint-style --max-warnings=0",
-    "fix:css": "wp-scripts lint-style --fix",
-    "lint:js": "wp-scripts lint-js --max-warnings=0",
-    "fix:js": "wp-scripts lint-js --fix"
+    "build:css": "sass resources/frontend/scss/frontend.scss resources/frontend/css/frontend.css --no-source-map --style=compressed",
+    "watch:css": "sass resources/frontend/scss/frontend.scss resources/frontend/css/frontend.css --watch --style=compressed",
+    "lint:css": "wp-scripts lint-style 'resources/frontend/scss/**/*.scss' 'resources/backend/css/**/*.css' --max-warnings=0",
+    "fix:css": "prettier --write 'resources/frontend/scss/**/*.scss' && wp-scripts lint-style 'resources/frontend/scss/**/*.scss' 'resources/backend/css/**/*.css' --fix",
+    "build:js": "wp-scripts build resources/frontend/js/frontend.js --output-path=resources/frontend/js/dist --output-filename=frontend.min.js",
+    "watch:js": "wp-scripts start resources/frontend/js/frontend.js --output-path=resources/frontend/js/dist --output-filename=frontend.min.js",
+    "lint:js": "wp-scripts lint-js 'resources/frontend/js/*.js' --max-warnings=0",
+    "fix:js": "wp-scripts lint-js 'resources/frontend/js/*.js' --fix",
+    "build": "npm run build:css && npm run build:js"
   },
   "prettier": "@wordpress/prettier-config",
   "devDependencies": {
     "@wordpress/prettier-config": "^4.30.0",
     "@wordpress/scripts": "^30.23.0",
-    "eslint-config-prettier": "^10.1.8"
+    "eslint-config-prettier": "^10.1.8",
+    "sass": "^1.97.3",
+    "stylelint-scss": "^6.14.0"
   }
 }