From 38029c123179b3dbccc12fb01dc558b3dcb01292 Mon Sep 17 00:00:00 2001
From: "Queen Vinyl Da.i'gyu-Kazotetsu" <vinyldarkscratch@gmail.com>
Date: Fri, 28 Jul 2023 23:41:58 -0700
Subject: [PATCH] feat(ci): Add Reviewdog for Prettier formatting (#28228)

* feat(ci): Add Reviewdog for Prettier formatting

* Apply bad formatting to test Reviewdog

* Use reviewdog/action-suggester@v1 instead

* Remove redundant step

* Update .github/workflows/reviewdog.yml

Co-authored-by: Brian Thomas Smith <brian@smith.berlin>

* Fix Reviewdog workflow

* Apply bad formatting to test workflow

* Try with different bad formatting

* Update .github/workflows/reviewdog.yml

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update CONTRIBUTING.md

* Add an unrelated change to mitigate non-running tests issue

* Pipe modified files list to xargs

* Test workflow one last time

* Update .github/workflows/reviewdog.yml

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Fix placement of xargs pipe

---------

Co-authored-by: Brian Thomas Smith <brian@smith.berlin>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .github/workflows/reviewdog.yml               | 45 +++++++++++++++++++
 CONTRIBUTING.md                               |  2 +-
 .../building_blocks/cascade_layers/index.md   |  2 +-
 3 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 .github/workflows/reviewdog.yml

diff --git a/.github/workflows/reviewdog.yml b/.github/workflows/reviewdog.yml
new file mode 100644
index 000000000000000..731b9cbc21ff765
--- /dev/null
+++ b/.github/workflows/reviewdog.yml
@@ -0,0 +1,45 @@
+name: reviewdog
+
+on:
+  - pull_request
+
+jobs:
+  prettier:
+    # do not run on forks
+    if: github.repository == 'mdn/content'
+    name: prettier
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Get changed files
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BASE_SHA: ${{ github.event.pull_request.base.sha }}
+          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+        run: |
+          # Use the GitHub API to get the list of changed files
+          # documenation: https://docs.github.com/rest/commits/commits#compare-two-commits
+          DIFF_DOCUMENTS=$(gh api repos/{owner}/{repo}/compare/${{ env.BASE_SHA }}...${{ env.HEAD_SHA }} --jq '.files | .[] | select(.status|IN("added", "modified", "renamed", "copied", "changed")) | .filename' | xargs)
+          echo "DIFF_DOCUMENTS=${DIFF_DOCUMENTS}" >> $GITHUB_ENV
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install all yarn packages
+        run: yarn --frozen-lockfile
+        env:
+          # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Perform linting
+        run: yarn prettier --ignore-unknown --write ${{ env.DIFF_DOCUMENTS }}
+
+      - name: Submit suggestion
+        uses: reviewdog/action-suggester@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          tool_name: prettier
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 95ba16c0ae0a053..00fa0be0c16d987 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -223,7 +223,7 @@ To ensure that all MDN documents follow the same formatting, we use both [Pretti
 
 If you have a [local checkout](#forking-and-cloning-the-repository) of the repository and have [installed the dependencies](#preparing-the-project), or you are using [github.dev](https://github.dev), a pre-commit hook will be installed which automatically runs while making a commit. To save some headache and improve your work flow while authoring, you may wish to [configure your editor to automatically run Prettier](https://prettier.io/docs/en/editors.html). Alternatively, you may run `yarn fix:md` in the command line to manually format all Markdown files.
 
-> **Note:** Automatically formatting changes does not work for pull requests opened using the GitHub Web UI as described in the ["Simple changes" section](#simple-changes). This may result in failed status checks on pull requests. If you're not sure about how to fix this, [get in touch with us](/en-US/docs/MDN/Community/Communication_channels) for help.
+> **Note:** An automatic review bot will submit a review with code suggestions if modified files don't match Prettier formatting. This was primarily implemented for contributors using the GitHub Web UI as described in the ["Simple changes" section](#simple-changes).
 
 ### Adding a new document
 
diff --git a/files/en-us/learn/css/building_blocks/cascade_layers/index.md b/files/en-us/learn/css/building_blocks/cascade_layers/index.md
index 3b70fc3d068b8c9..f8d93ad719c2497 100644
--- a/files/en-us/learn/css/building_blocks/cascade_layers/index.md
+++ b/files/en-us/learn/css/building_blocks/cascade_layers/index.md
@@ -279,7 +279,7 @@ If you nest a block `@layer` at-rule inside another block `@layer` at-rule, with
 
 Let's look at the following example:
 
-```
+```css
 @import url("components-lib.css") layer(components);
 @import url("narrowtheme.css") layer(components.narrow);
 ```