sass-build

sass-build copied to clipboard

GHA Sass Build

GitHub Action JavaScript wrapper runs Sass build with provided Inputs

Table of Contents

• :arrow_up: Top of ReadMe File

• :building_construction: Requirements

• :zap: Quick Start

• 🗒 Notes

• :card_index: Attribution

• :balance_scale: License

Requirements

Access to GitHub Actions if using on GitHub, or manually assigning environment variables prior to running npm test.

Quick Start

Reference the code of this repository within your own workflow...

on:
  push:
    branches:
      - src-pages


jobs:
  build_css:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source Git branch
        uses: actions/checkout@v2
        with:
            ref: src-pages
            fetch-depth: 10
            submodules: true

      - name: Make destination directory for compiled CSS
        run: mkdir -vp /tmp/repo-name/assets/css

      - name: Compile CSS from SCSS files
        uses: gha-utilities/[email protected]
        with:
          source: _scss/main.scss
          destination: /tmp/repo-name/assets/css/main.css

      - name: Checkout destination Git branch
        uses: actions/checkout@v2
        with:
            ref: pr-pages
            fetch-depth: 1

      - name: Move compiled CSS to path within pr-pages branch
        run: mv /tmp/repo-name/assets/css assets/

      - name: Add and Commit changes to pr-pages branch
        run: |
          git config --local user.email '[email protected]'
          git config --local user.name 'GitHub Action'
          git add assets/css/*
          git commit -m 'Updates compiled CSS files'

      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: pr-pages

      - name: Initialize Pull Request
        uses: gha-utilities/[email protected]
        with:
          pull_request_token: ${{ secrets.GITHUB_TOKEN }}
          head: pr-pages
          base: gh-pages
          title: 'Updates site files from latest Actions build'
          body: >
            Perhaps a multi-line description
            about latest features and such.

Notes

To compile multiple files, define source and destination similarly to how you would assign run multiple commands. Make sure each file in source and destination are lined up.

    - name: Compile main.css from main.scss
      uses: gha-utilities/[email protected]
      with:
        source: |
          _scss/main.scss
          _scss/global.scss
          _scss/articles/post.scss
        destination: |
          /tmp/repo-name/assets/css/main.css
          /tmp/repo-name/assets/css/global.css
          /tmp/repo-name/assets/css/articles/post.css

To pass compiled CSS to another workflow utilize the Upload and Download Actions from GitHub...

.github/workflows/build_css.yml

on:
  push:
    branches:
      - src-pages


jobs:
  build_css:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source Git branch
        uses: actions/checkout@v2
        with:
            ref: src-pages
            fetch-depth: 10
            submodules: true

      - name: Make destination directory for compiled CSS
        run: mkdir -vp /tmp/assets/css

      - name: Compile CSS from SCSS files
        uses: gha-utilities/[email protected]
        with:
          source: _scss/main.scss
          destination: /tmp/assets/css/main.css

      - name: Upload Complied CSS
        uses: actions/[email protected]
        with:
          name: Compiled-CSS
          path: /tmp/assets/css

.github/workflows/open_pull_request.yml

on:
  push:
    branches:
      - src-pages


jobs:
  open_pull_request:
    needs: [build_css]
    runs-on: ubuntu-latest

    steps:
      - name: Checkout destination Git branch
        uses: actions/checkout@v2
        with:
            ref: gh-pages
            fetch-depth: 1
            submodules: true

      - name: Download Compiled CSS
        uses: actions/[email protected]
        with:
          name: Compiled-CSS
          path: assets/css

      - name: Add and Commit changes to pr-pages branch
        run: |
          git config --local user.email '[email protected]'
          git config --local user.name 'GitHub Action'
          git add assets/css/*
          git commit -m 'Updates compiled CSS files'

      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: pr-pages

      - name: Initialize Pull Request
        uses: gha-utilities/[email protected]
        with:
          pull_request_token: ${{ secrets.GITHUB_TOKEN }}
          head: pr-pages
          base: gh-pages
          title: 'Updates site files from latest Actions build'
          body: >
            Perhaps a multi-line description
            about latest features and such.

This repository is influenced by tests preformed by sass-utilities/gha-sass which uses Docker powered GitHub Actions to achieve similar results. What differs are that this repository will start faster and enables configuring the build process further, see the action.yml for currently available configurations.

Attribution

Individuals

• @wendigo Fork, so far fixed bugs and added sane defaults

Resources

• GitHub -- Actions Create Pull Request

• GitHub -- Creating a JavaScript Action, specifically the commit-and-push-your-action-to-github section that states dependencies need to be checked into Git tracking.

• GitHub -- Node Sass outfile

• GitHub -- Workflow syntax for GitHub actions

• Sass Language -- JS API Documentation

• StackOverflow -- GitHub Actions share Workspace Artifacts between jobs

• StackOverflow -- Node.js check if path is file or directory

• StackOverflow -- nodejs get file name from absolute path?

License

Legal bits of Open Source software. Note the following license does not necessarily apply to any dependencies of this repository, see licensing and documentation for those within there respective sub-directories under node_modules/.

Sass Build GitHub Actions documentation
Copyright (C) 2023  S0AndS0

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation; version 3 of the License.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.