Merge pull request #1026 from Kit/github-action-build-css-js

GitHub Actions: Build CSS and JS

Author: n7studios

.github/docs/npm-run-build-errors.png

@@ -26,17 +26,39 @@ jobs:
       - name: Run Composer
         run: composer install --no-dev
 
-      # Confirm that expected files exist, to prevent deployment to wordpress.org
-      # if e.g. composer install fails.
-      - name: Check ConvertKit Library Exists
-        id: check_files
-        uses: andstor/file-existence-action@v1
-        with:
-          files: "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-api-traits.php, vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-api-v4.php, vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-log.php, vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-resource-v4.php, vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-review-request.php"
+      # Build the frontend CSS and JS assets
+      - name: Run npm
+        run: |
+          npm install
+          npm run build
+
+      # Confirm that expected files exist
+      # if e.g. `composer install` or `npm run build` fails
+      - name: Check Kit WordPress Libraries and Assets Exists
+        working-directory: ${{ env.PLUGIN_DIR }}
+        run: |
+          set -e
+
+          files=(
+            "resources/frontend/css/frontend.css"
+            "resources/frontend/js/dist/frontend.min.asset.php"
+            "resources/frontend/js/dist/frontend.min.js"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-api-traits.php"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-api-v4.php"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-log.php"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-resource-v4.php"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-review-request.php"
+          )
+
+          for file in "${files[@]}"; do
+            echo "Checking: $file"
+            test -f "$file" || { echo "❌ Missing required file: $file"; exit 1; }
+          done
+
+          echo "✅ All required files exist."
 
       # Deploy to wordpress.org, if expected files exist.
       - name: WordPress Plugin Deploy
-        if: steps.check_files.outputs.files_exists == 'true'
         id: deploy
         uses: 10up/action-wordpress-plugin-deploy@stable
         with:

.github/workflows/deploy.yml

@@ -270,6 +270,38 @@ jobs:
         working-directory: ${{ env.PLUGIN_DIR }}
         run: composer update
 
+      # Build the frontend CSS and JS assets
+      - name: Run npm
+        working-directory: ${{ env.PLUGIN_DIR }}
+        run: |
+          npm install
+          npm run build
+
+      # Confirm that expected files exist
+      # if e.g. `composer install` or `npm run build` fails
+      - name: Check Kit WordPress Libraries and Assets Exists
+        working-directory: ${{ env.PLUGIN_DIR }}
+        run: |
+          set -e
+
+          files=(
+            "resources/frontend/css/frontend.css"
+            "resources/frontend/js/dist/frontend.min.asset.php"
+            "resources/frontend/js/dist/frontend.min.js"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-api-traits.php"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-api-v4.php"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-log.php"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-resource-v4.php"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-review-request.php"
+          )
+
+          for file in "${files[@]}"; do
+            echo "Checking: $file"
+            test -f "$file" || { echo "❌ Missing required file: $file"; exit 1; }
+          done
+
+          echo "✅ All required files exist."
+
       - name: Build PHP Autoloader
         working-directory: ${{ env.PLUGIN_DIR }}
         run: composer dump-autoload

.github/workflows/tests-backward-compat.yml

@@ -292,6 +292,38 @@ jobs:
         working-directory: ${{ env.PLUGIN_DIR }}
         run: composer update
 
+      # Build the frontend CSS and JS assets
+      - name: Run npm
+        working-directory: ${{ env.PLUGIN_DIR }}
+        run: |
+          npm install
+          npm run build
+
+      # Confirm that expected files exist
+      # if e.g. `composer install` or `npm run build` fails
+      - name: Check Kit WordPress Libraries and Assets Exists
+        working-directory: ${{ env.PLUGIN_DIR }}
+        run: |
+          set -e
+
+          files=(
+            "resources/frontend/css/frontend.css"
+            "resources/frontend/js/dist/frontend.min.asset.php"
+            "resources/frontend/js/dist/frontend.min.js"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-api-traits.php"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-api-v4.php"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-log.php"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-resource-v4.php"
+            "vendor/convertkit/convertkit-wordpress-libraries/src/class-convertkit-review-request.php"
+          )
+
+          for file in "${files[@]}"; do
+            echo "Checking: $file"
+            test -f "$file" || { echo "❌ Missing required file: $file"; exit 1; }
+          done
+
+          echo "✅ All required files exist."
+
       - name: Build PHP Autoloader
         working-directory: ${{ env.PLUGIN_DIR }}
         run: composer dump-autoload
@@ -396,6 +428,12 @@ jobs:
       - name: Run Composer
         run: composer install --no-dev
 
+      # Build the frontend CSS and JS assets.
+      - name: Run npm
+        run: |
+          npm install
+          npm run build
+
       # Configure AWS Credentials
       - name: Configure AWS credentials
         id: credentials
@@ -408,7 +446,7 @@ jobs:
       # Create ZIP file
       - name: Create ZIP File
         run: |
-          zip -r ${{ env.PLUGIN_SLUG }}.zip . -x ".git/*" ".github/*" ".scripts/*" ".wordpress-org/*" "log/*" "tests/*" "*.md" "*.yml" "*.json" "*.neon" "*.lock" "*.xml" "*.dist" "*.example" "*.testing" "vendor/convertkit/convertkit-wordpress-libraries/.git/*"
+          zip -r ${{ env.PLUGIN_SLUG }}.zip . -x ".git/*" ".github/*" ".scripts/*" ".wordpress-org/*" "log/*" "node_modules/*" "tests/*" "*.md" "*.yml" "*.json" "*.neon" "*.lock" "*.xml" "*.dist" ".eslintrc.js" "*.example" "*.testing" "vendor/convertkit/convertkit-wordpress-libraries/.git/*"
 
       # Exchange API Keys and Secrets for OAuth Tokens.
       - name: Exchange API Key and Secret for OAuth Tokens

.github/workflows/tests.yml

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

.gitignore

@@ -60,10 +60,6 @@ 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.
@@ -72,6 +68,22 @@ Run `npm run watch:css` to compile frontend CSS to `resources/frontend/css/front
 
 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.
 
+### Build
+
+Run `npm run build` to:
+- fix CSS to WordPress Coding Standards (`npm run fix:css`)
+- lint CSS to check WordPress Coding Standards met after any fixes (`npm run lint:css`)
+- fix JS to WordPress Coding Standards (`npm run fix:js`)
+- lint JS to check WordPress Coding Standards met after any fixes (`npm run lint:js`)
+- compile frontend CSS from `resources/frontend/scss` to `resources/frontend/css/frontend.css` (`npm run build:css`)
+- compile frontend JS from `resources/frontend/js` to `resources/frontend/js/dist` (`npm run build:js`)
+
+If the build process fails, review the terminal and make applicable changes:
+
+![npm run build errors](/.github/docs/npm-run-build-errors.png?raw=true)
+
+GitHub actions will run this step for you on testing and deployment, but it's a useful command in development if you need a single command to cover CSS + JS.
+
 ## Committing Work
 
 Remember to commit your changes to your branch relatively frequently, with a meaningful, short summary that explains what the change(s) do.

DEVELOPMENT.md

@@ -97,6 +97,10 @@ This sets up:
 - JS compilation and minification
 - SASS compilation and minification
 
+### Build JS and CSS
+
+Run `npm run build` to build the frontend CSS and JS.
+
 ### Configure wp-config.php
 
 In the root of your WordPress installation, find the `wp-config.php` file.

SETUP.md

@@ -34,7 +34,7 @@ The following Composer commands can be used:
 | `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 build` | `composer build` | Fixes, lints and 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 |
@@ -47,7 +47,7 @@ The following npm commands can be used, if preferred:
 | `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 |
+| `npm run build` | Fixes, lints and builds frontend CSS and JS |
 
 ## Write (or modify) a test
 

TESTING.md

@@ -36,6 +36,10 @@
         "lint-js": "npm run lint:js",
         "fix-js": "npm run fix:js",
         "build": [
+            "npm run fix:css",
+            "npm run lint:css",
+            "npm run fix:js",
+            "npm run lint:js",
             "npm run build:css",
             "npm run build:js"
         ],

composer.json

@@ -10,7 +10,7 @@
     "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"
+    "build": "npm run fix:css && npm run lint:css && npm run fix:js && npm run lint:js && npm run build:css && npm run build:js"
   },
   "prettier": "@wordpress/prettier-config",
   "devDependencies": {