Error: Cannot find module 'postcss-sass' while launching the scan from github action

SonarQube Server / Community Build
1

Must-share information (formatted with Markdown):

  • which versions are you using SonarQube 10.2.1.78527
  • how is SonarQube deployed: zip
  • what are you trying to achieve: scan VueJS/Typescript/SASS app from github action.
  • what have you tried so far to achieve this

While running sonar-scan as github action, the scan fail with error:
Error: Cannot find module ‘postcss-sass’

INFO: 602/602 source files have been analyzed
[97](https://github.com/********/actions/runs/********/job/********#step:6:98)INFO: Hit the cache for 0 out of 602
[98](https://github.com/********/actions/runs/********/job/********#step:6:99)INFO: Miss the cache for 602 out of 602: ANALYSIS_MODE_INELIGIBLE [602/602]
[99](https://github.com/********/actions/runs/********/job/********#step:6:100)INFO: Sensor JavaScript/TypeScript analysis [javascript] (done) | time=49467ms
[100](https://github.com/********/actions/runs/********/job/********#step:6:101)INFO: Sensor CSS Rules [javascript]
[101](https://github.com/********/actions/runs/********/job/********#step:6:102)INFO: 134 source files to be analyzed
[102](https://github.com/********/actions/runs/********/job/********#step:6:103)ERROR: Error: Cannot find module 'postcss-sass'

Our workflow is pretty simple


name: SonarQube Scan
on:
  push:
    branches:
      - main
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    permissions: read-all
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
          sparse-checkout: |
            .github
            backend
            frontend/src
            tools
      - name: install frontend for quasar app-vite tsconfig-preset.json
        run: npm install
        working-directory: frontend
      - name: install postcss-sass
        run: npm install -g postcss @csstools/postcss-sass
      - name: sonarqube scan
        uses: sonarsource/sonarqube-scan-action@master
        env:
          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}

Tried to install postcss @csstools/postcss-sass locally, globally or as dev dependencies but nothing works.

Running the scanner from my local is working fine.

Do I miss something to scan SASS files?

3

A quick update, I use VueJS with <template> <script> and <style>, and those styles were <style lang="sass"> ; That is the reason why it requires postcss-sass.

I rewrite those inline SFC SASS to vanilla CSS and the postcss-sass was no more required.

The build is still not working due to Missing blob error but I don’t know if it’s related.

4

Missing blob was indeed unrelated, triggered by Azure WAF rules.
SonarQube needs a lot of exclusion to works behind a WAF but that is all solved for me.

For now, our SASS files are just ignored. If anyone have a solution for those files to be scanned, I’ll be happy to hear about.

6

Hello @jraez,

Many thanks for your feedback, and welcome to Sonar community!

As mentioned (or not mentioned :slight_smile:) in SonarQube 10.2’s documentation, the CSS analyzer does not support the Sass syntax for the moment.

Having said that, since it’s a pretty popular CSS’s extension, I created this ticket to add the support for Sass syntax as well.

Hope this helps,
Yassin

9

Thanks for your reply.

TBH, SASS is a bit in a grey area, as some apps consider it as SCSS and don’t mention it thoroughly on their docs. Seeing SCSS support was enough for me, but apparently not :smiley:

You can ignore .sass files in your project settings, but for VueJS component style, it breaks in any case, even if you don’t want your sass to be scanned.

Fortunately, we already scoped out most of our sass code out of components. Remove the few bits remaining was not an huge work.