Running Stylelint (SCSS) within github/super-linter ignores configuration

2k views Asked by At

hope someone can help me out with a weird bug/issue i've been having with styleling + github/super-linter. I've also added a issue to the repo as I think I've tried many things and it seems to be a bug but perhaps it's a configuration issue on my end.

I've been trying to migrate multiple of our projects over to V14 for some time now but I can't seem to get it to fit into our Github PR Actions workflow anymore. It worked great in V13 before.

Locally it works great when running a command like: npm run stylelint it returns the expected errors but when run trough Github's Super-linter Action the results seem to ignore our custom rules and complains it needs a customSyntax. I've added those as a test but no luck thus far.

I've set up a demo repository with a PR that triggers stylelint to simulate the issue here: https://github.com/mutschelknauss/lintertest/runs/4818424661?check_suite_focus=true

What Stylelint configuration is needed to reproduce the bug?

{
  "extends": ["stylelint-config-standard-scss"],
  "customSyntax": "postcss-scss",
  "rules": {
    "selector-class-pattern": null
  }
}

Also tried without the "customSyntax" but it doesn't seem to change anything.

My super-linter config:

name: PR Linter

#############################
# Start the job on all push #
#############################
on:
  push:
    branches-ignore: [main]
    # Remove the line above to run when pushing to master

###############
# Set the Job #
###############
jobs:
  build:
    # Name the Job
    name: Lint Code Base
    # Set the agent to run on
    runs-on: ubuntu-latest

    ##################
    # Load all steps #
    ##################
    steps:
      ##########################
      # Checkout the code base #
      ##########################
      - name: Checkout Code
        uses: actions/checkout@v2
        with:
          # Full git history is needed to get a proper list of changed files within `super-linter`
          fetch-depth: 0

      ################################
      # Run Linter against code base #
      ################################
      - name: Lint Code Base
        uses: docker://github/super-linter:v4
        env:
          VALIDATE_ALL_CODEBASE: false
          VALIDATE_CSS: true
          DEFAULT_BRANCH: main
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

How did you run Stylelint?

running trough github/super-linter as a github action

Which version of Stylelint are you using?

'^14.2.0'

What did you expect to happen?

I would expect my custom rules to apply and the Expected class selector to be kebab-case selector-class-pattern to not come up similar to how my locally ran stylelint output.

What actually happened?

If i run npm run stylelint I get:

> [email protected] stylelint
> stylelint "**/*.scss"

scss/test.scss
 4:3  ✖  Expected shorthand property "flex-flow"  declaration-block-no-redundant-longhand-properties

But when it's run on inside GitHub super-linter the same command gives me:

2022-01-14 14:36:24 [ERROR]   Found errors in [stylelint] linter!
2022-01-14 14:36:24 [ERROR]   Error code: 2. Command output:
------
/github/workspace/scss/test.scss: When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-scss", and use the "customSyntax" option

scss/test.scss
1:1  ✖  Expected class selector to be kebab-case  selector-class-pattern                            
5:1  ✖  Expected class selector to be kebab-case  selector-class-pattern                            
8:3  ✖  Expected shorthand property "flex-flow"   declaration-block-no-redundant-longhand-properties
------

Hope anyone has a similar behaviour when applying SCSS linting trough stylelint & github/super-linter

1

There are 1 answers

0
Emily Teegarden On

This was plaguing me as well.

In my case it was because I had the Stylelint config (.stylelintrc.json) at the repo root. GitHub Actions expects this to be in .github/linters/.stylelintrc.json.

If you want to specify where the config lives, you can set it via the Environmental Variable LINTER_RULES_PATH.

See more details here.