Build unminified css (#276)

* add gulp-rename
for renaming the minified css file

* update the build workflow to create two css files

* explicitly enqueue the minified css file

* define the path

* full path to workspace?

* add an npm install step
to generate the lockfile
might be ignored by .gitattributes

* re-add path

* don't fail if the test fails

* temporarily don't ignore package-lock.json files

* remove path

* run workflow when the workflow itself is changed
so we can see the effects of our changes

* pass path

* remove unnecessary params
the defaults cover these

* comment out the npm package diff and add description why

* don't run on package-lock updates

.gitattributes

@@ -20,7 +20,7 @@
 /composer.lock export-ignore
 /CONTRIBUTING.md export-ignore
 /gulpfile.mjs export-ignore
-/package-lock.json export-ignore
+#/package-lock.json export-ignore
 /package.json export-ignore
 /phpcs.xml.dist export-ignore
 /phpunit.xml.dist export-ignore

.github/workflows/composer-npm-diff.yml

@@ -3,7 +3,7 @@ on:
   pull_request:
     paths:
       - 'composer.lock'
-      - 'package-lock.json'
+    #  - 'package-lock.json'
 permissions:
   contents: write
   pull-requests: write
@@ -27,16 +27,20 @@ jobs:
             <strong>Composer Changes</strong>
 
             ${{ steps.composer_diff.outputs.composer_diff }}
-  npm-diff:
-    name: NPM Lockfile Diff
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: NPM Lockfile Changes
-        uses: codepunkt/npm-lockfile-changes@main
-        with:
-          token: ${{ github.token }}
-          updateComment: true
+  # Removing because the workflow fails for some unknown reason, see https://github.com/pantheon-systems/pantheon-advanced-page-cache/actions/runs/9228002744/job/25391128483
+  # There's no support for this action, so we might need to build something new.
+            # npm-diff:
+  #   name: NPM Lockfile Diff
+  #   runs-on: ubuntu-latest
+  #   continue-on-error: true
+  #   steps:
+  #     - name: Checkout
+  #       uses: actions/checkout@v4
+  #       with:
+  #         fetch-depth: 0
+  #     - name: Compile NPM packages
+  #       run: npm ci
+  #     - name: NPM Lockfile Changes
+  #       uses: codepunkt/npm-lockfile-changes@main
+  #       with:
+  #         token: ${{ github.token }}

gulpfile.mjs

@@ -3,14 +3,17 @@ import gulp from 'gulp';
 import csso from 'gulp-csso';
 import * as sassCompiler from 'sass';
 import gulpSass from 'gulp-sass';
+import rename from 'gulp-rename'
 
 const sass = gulpSass(sassCompiler);
 
 gulp.task('styles', () => {
   return gulp.src('assets/sass/styles.scss') // Only compile the main file
     .pipe(sass().on('error', sass.logError)) // Compile SASS to CSS
+	.pipe(gulp.dest('assets/css')) // Save unminified CSS
     .pipe(csso()) // Minify CSS
-    .pipe(gulp.dest('assets/css')); // Save the CSS file
+	.pipe(rename({suffix: '.min'})) // Rename to styles.min.css
+    .pipe(gulp.dest('assets/css')); // Save the minified CSS file
 });
 
 gulp.task('clean', () => {

inc/admin-interface.php

@@ -59,7 +59,9 @@ function enqueue_admin_assets() {
 
 	// If WP_DEBUG is true, append a timestamp to the end of the path so we get a fresh copy of the css.
 	$debug = defined( 'WP_DEBUG' ) && WP_DEBUG ? '-' . time() : '';
-	wp_enqueue_style( 'papc-admin', plugin_dir_url( __DIR__ ) . 'assets/css/styles.css', [], '2.0.0' . $debug );
+	// Use minified css unless SCRIPT_DEBUG is true.
+	$min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
+	wp_enqueue_style( 'papc-admin', plugin_dir_url( __DIR__ ) . "assets/css/styles$min.css", [], '2.0.0' . $debug );
 }
 
 /**

package.json

@@ -12,6 +12,7 @@
     "gulp-autoprefixer": "^9.0.0",
     "gulp-concat": "^2.6.1",
     "gulp-csso": "^4.0.1",
+    "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "node-sass": "^9.0.0",
     "sass": "^1.77.1"