Merge pull request #1022 from Kit/build-minify-frontend-css

Build and Minify Frontend CSS

Author: n7studios

.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();
 
 	}