Fix Sass compilation and add a test (#222)

Fixes Sass compilation for npm, yarn classic, and yarn modern - as well as adding a test for all 3
Lullabot · Jul 5, 2023 · b8be2d2 · b8be2d2
1 parent e1f9e87
commit b8be2d2
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 2 deletions.
diff --git a/.github/workflows/TestSass.yml b/.github/workflows/TestSass.yml
@@ -0,0 +1,168 @@
+name: Test Sass Compilation
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  Build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Create a Drupal project
+        run: composer create-project drupal/recommended-project . --ignore-platform-req=ext-gd
+
+      - uses: actions/checkout@v3
+        with:
+          path: drainpipe
+
+      - name: Setup drainpipe-dev
+        run: mv drainpipe/drainpipe-dev .
+
+      - uses: ./drainpipe/scaffold/github/actions/common/set-env
+
+      - name: Install DDEV
+        uses: ./drainpipe/scaffold/github/actions/common/ddev
+        with:
+          git-name: Drainpipe Bot
+          git-email: no-reply@example.com
+
+      - name: Setup Project
+        run: |
+          ddev config --auto
+          ddev config --nodejs-version "18"
+          ddev start
+          ddev composer config extra.drupal-scaffold.gitignore true
+          ddev composer config --json extra.drupal-scaffold.allowed-packages '["lullabot/drainpipe-dev", "lullabot/drainpipe"]'
+          ddev composer config --no-plugins allow-plugins.composer/installers true
+          ddev composer config --no-plugins allow-plugins.drupal/core-composer-scaffold true
+          ddev composer config --no-plugins allow-plugins.lullabot/drainpipe true
+          ddev composer config --no-plugins allow-plugins.lullabot/drainpipe-dev true
+          ddev composer config repositories.drainpipe --json '{"type": "path", "url": "drainpipe", "options": {"symlink": false}}'
+          ddev composer config repositories.drainpipe-dev --json '{"type": "path", "url": "drainpipe-dev", "options": {"symlink": false}}'
+          ddev composer config minimum-stability dev
+          ddev composer require "lullabot/drainpipe @dev" --with-all-dependencies
+          ddev composer require "lullabot/drainpipe-dev @dev" --dev --with-all-dependencies
+
+      - name: Setup Test Files
+        run: |
+          cp drainpipe/tests/fixtures/sass/Taskfile.yml .
+          cp drainpipe/tests/fixtures/sass/style.scss .
+
+      - name: Create Artifact
+        run: zip -r /tmp/drainpipe.zip ./
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: test-sass-build
+          path: /tmp/drainpipe.zip
+
+  Test-Sass-NPM:
+    runs-on: ubuntu-latest
+    needs: Build
+    steps:
+      - uses: actions/download-artifact@v3
+        with:
+          name: test-sass-build
+
+      - name: Restore Workspace
+        run: |
+          cd ../
+          mv ${{ github.workspace }}/drainpipe.zip /tmp/drainpipe.zip
+          unzip -o /tmp/drainpipe.zip -d ${{ github.workspace }}
+          cd ${{ github.workspace }}
+
+      - uses: ./drainpipe/scaffold/github/actions/common/set-env
+
+      - name: Install DDEV
+        uses: ./drainpipe/scaffold/github/actions/common/ddev
+        with:
+          git-name: Drainpipe Bot
+          git-email: no-reply@example.com#
+
+      - name: Start DDEV
+        run: ddev start
+
+      - name: Setup Sass
+        run: |
+          ddev npm init -y
+          ddev npm install @lullabot/drainpipe-sass --save-dev
+
+      - name: Compile Sass
+        run: ddev task assets
+
+  Test-Yarn-Classic:
+    runs-on: ubuntu-latest
+    needs: Build
+    steps:
+      - uses: actions/download-artifact@v3
+        with:
+          name: test-sass-build
+
+      - name: Restore Workspace
+        run: |
+          cd ../
+          mv ${{ github.workspace }}/drainpipe.zip /tmp/drainpipe.zip
+          unzip -o /tmp/drainpipe.zip -d ${{ github.workspace }}
+          cd ${{ github.workspace }}
+
+      - uses: ./drainpipe/scaffold/github/actions/common/set-env
+
+      - name: Install DDEV
+        uses: ./drainpipe/scaffold/github/actions/common/ddev
+        with:
+          git-name: Drainpipe Bot
+          git-email: no-reply@example.com#
+
+      - name: Start DDEV
+        run: ddev start
+
+      - name: Setup Sass
+        run: |
+          ddev yarn set version classic
+          ddev yarn init -y
+          ddev yarn add @lullabot/drainpipe-sass --dev
+
+      - name: Compile Sass
+        run: ddev task assets
+
+  Test-Yarn-Berry:
+     runs-on: ubuntu-latest
+     needs: Build
+     steps:
+       - uses: actions/download-artifact@v3
+         with:
+           name: test-sass-build
+
+       - name: Restore Workspace
+         run: |
+           cd ../
+           mv ${{ github.workspace }}/drainpipe.zip /tmp/drainpipe.zip
+           unzip -o /tmp/drainpipe.zip -d ${{ github.workspace }}
+           cd ${{ github.workspace }}
+
+       - uses: ./drainpipe/scaffold/github/actions/common/set-env
+
+       - name: Install DDEV
+         uses: ./drainpipe/scaffold/github/actions/common/ddev
+         with:
+           git-name: Drainpipe Bot
+           git-email: no-reply@example.com#
+
+       - name: Start DDEV
+         run: ddev start
+
+       - name: Setup Sass
+         run: |
+           ddev yarn set version berry
+           ddev yarn init -y
+           ddev yarn add @lullabot/drainpipe-sass --dev
+
+       - name: Compile Sass
+         run: ddev task assets
diff --git a/tasks/sass.yml b/tasks/sass.yml
@@ -27,8 +27,8 @@ tasks:
         if [ "{{.DRAINPIPE_SASS}}" == "" ]; then echo "🪠 Nothing provided for Sass to compile"; exit 0; fi
         FILES="{{if .DRAINPIPE_SASS}}{{.DRAINPIPE_SASS | catLines | trim}}{{end}}"
         COMMAND="node ./node_modules/.bin/drainpipe-sass"
-        if [ -f "yarn.lock" ]; then
-          COMMAND="yarn $COMMAND"
+        if [ -f "yarn.lock" ] && [ ! -d "node_modules" ]; then
+          COMMAND="yarn drainpipe-sass"
         fi
         $COMMAND --files="$FILES"{{.args}}
   watch:

diff --git a/tests/fixtures/sass/Taskfile.yml b/tests/fixtures/sass/Taskfile.yml
@@ -0,0 +1,20 @@
+version: '3'
+
+dotenv: ['.env', '.env.defaults']
+
+includes:
+  sass: ./vendor/lullabot/drainpipe/tasks/sass.yml
+
+output: prefixed
+silent: true
+
+vars:
+  DRAINPIPE_SASS: |
+    style.scss:style.css
+
+tasks:
+  assets:
+    desc: "Builds assets such as CSS & JS"
+    cmds:
+      - if [ -f "yarn.lock" ]; then yarn; else npm install; fi
+      - task: sass:compile
diff --git a/tests/fixtures/sass/style.scss b/tests/fixtures/sass/style.scss
@@ -0,0 +1,5 @@
+body {
+  h1 {
+    color: red;
+  }
+}