sasstools / sass-lint

Pure Node.js Sass linting
MIT License
1.77k stars 532 forks source link

Unable to use YAML or JSON config files from Sublime Text 3, and unexpected lint errors from CLI #1201

Open basher opened 6 years ago

basher commented 6 years ago

What version of Sass Lint are you using?

v1.12.1

Sublime Text 3.1.1 build 3176 SublimeLinter-contrib-sass-lint v1.2.1

Please include any relevant parts of your configuration

Sample "package.json" showing path to JSON config file, which is in repo root folder:

{
  "sasslintConfig": "./.sasslintrc",
  "dependencies": {},
  "scripts": {},
  "devDependencies": {
    "sass-lint": "^1.12.1"
  }
}

Sample "sass-lint.yml" showing my 1 custom rule and path to Sass files:

options:
files:
  include: 'src/styles/**/*.s+(a|c)ss'
rules:
  class-name-format:
    - 1
    -
      convention: ^[-_A-Za-z0-9]+$
      convention-explanation: 'Class must contain only lower & uppercase letters, integers, hyphens & underscores'

Sample "sasslintrc" showing my 1 custom rule and path to Sass files:

{
  "options": {},
  "files": {
    "include": "src/styles/**/*.s+(a|c)ss"
  },
  "rules": {
    "class-name-format": [
      1,
      {
        "convention": "^[-_A-Za-z0-9]+$",
        "convention-explanation": "Class must contain only lower & uppercase letters, integers, hyphens & underscores"
      }
    ]
  }
}

What did you do? Please include the actual source code causing the issue.

The Sass snippet below uses modified BEM class naming, with Pascal case for component name to match React component naming convention in the project:

.Masonry {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: minmax(220px, auto);
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin: 0 auto;
}

.MasonryItem-colspan2 {
  grid-column: auto / span 2;
}

.MasonryItem-rowspan2 {
  grid-row: auto / span 2;
}

What did you expect to happen?

  1. "Masonry" and "MasonryItem-" should both pass the regex defined in either the YAML or JSON config files when editing Sass file in ST3.

  2. Using CLI, these class names should pass linting.

What actually happened? Please include any error messages given to you by Sass Lint.

  1. ST3 is always flagging errors with the class names in (1) above - e.g.

sass: warning - Class 'Masonry' should be written in lowercase with hyphens. (class-name-format)

  1. With CLI, I get no lint errors to do with class names... but I get 2 (random) errors which I believe to be incorrect - so I'm losing confidence in the linter:

sass-lint-report

If you're using a IDE plugin have you tried the CLI too?

Yes. See (2) above.

basher commented 6 years ago

Further to the issues above, my colleague is using latest VSCode.

The linter reports the 2 errors shown in the CLI screenshot above... i.e. VSCode appears to be reading my config file for Pascal case class names correctly, but those 2 errors above (especially the one about margin: 0 auto;) must be spurious.