sasstools / sass-lint Goto Github PK

When you have include set to true, the rule incorrectly reports all non decimal numbers as issues.

Using v1.0.0

Currently the Space Before Bang and Space After Bang rules only consider the !important flag. It should consider the !default flag too.

Hey @Snugug!
Just tried installing this to a node project with:

npm install sass-lint --save-dev

And I got this error output:

> [email protected] install /Users/brianhan/ibm/prototypes/npm-sass/node_modules/sass-lint
> napa causes/scss-lint

sh: napa: command not found
npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "sass-lint" "--save-dev"
npm ERR! node v0.12.0
npm ERR! npm  v2.5.1
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `napa causes/scss-lint`
npm ERR! Exit status 127
npm ERR!
npm ERR! Failed at the [email protected] install script 'napa causes/scss-lint'.
npm ERR! This is most likely a problem with the sass-lint package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     napa causes/scss-lint
npm ERR! You can get their info via:
npm ERR!     npm owner ls sass-lint
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/brianhan/ibm/prototypes/npm-sass/npm-debug.log

Is this a known issue?

As per ESLint

Add a rule that flags up the use of !important 🔥

We're looking to build a proof-of-concept Node based Sass linter. Please let us know what your most wanted SCSS-Lint linters for us to work on converting first.

Using parens causes an issue with the indentation rule.

// Causes an error - 'Indentation of 2, expected 4'
@if (1 == 1) {
  content: 'foo';
}

// Is ok
@if 1 == 1 {
  content: 'foo';
}

// Is ok
@mixin bar($foo) {
  content: 'bar';
}

Using v1.0.0

As per SCSS Lint

I can't get any warning on top level selectors missing empty lines. Only selectors inside parent blocks are being detected.

// No warning thrown
.element {
  color: red;
}
.sibling {
  color: blue;
}

// This does correctly throw a warning
.block {

  .element {
    color: red;
  }
  .sibling {
    color: blue;
  }

}

I'm running it through the grunt plugin 0.1.0-beta.3 which is using sass-lint v1.0.0.

One of the features of SCSS Lint that I found useful was the ability to have the results written to a file, with the ability to specify the file path. This would be a really useful addition.

I think it would be useful to silence the console output if writing to a file is chosen.

Add Rule to check to see if properties are spelled correctly to help avoid errors

Named parameters cause issue with one declaration per line. Best example for these are the Other color functions with their optional parameters

The following tests currently fail:

// The following all cause issues
$foo: adjust-color(rgb(255, 0, 0), $lightness: -20%);

.bar {
  color: adjust-color(#102030, $blue: 5);
  background-color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
  border-color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: 0.8);
}

Using v1.0.0

http://blog.codeclimate.com/blog/2015/06/19/code-climate-platform/

It would be useful if an option could be passed to sass-lint that would let you change the path to the config file if you'd prefer not have another file in the project root, or have a dedicated folder containing all of your config files.

I originally posted this in the grunt-sass-lint repo but I realised it should actually be here.

The things I'd like to see this be able to do:

• Compatibility with SCSS-Lint (Config is kinda working, even defaults!)
• Ya know, lint all the things
• Work on globs/file paths
• Work on file streams (well, file buffers). This'll make it super easy to integrate with the Node ecosystem, especially Gulp which I ❤️
• Linter Plugins
• Full test suite
• .sass support (if it's not too much trouble, .scss first especially for Libsass)

Anything I'm missing?

It's not clear if rules not present in sass-lint.yml files are turned off automatically (ESLint 1.0 style) or not.

With early runs of gulp-sass-lint, that does not seem to be the case; for codebases that have both Sass & SCSS litn files, it seems there's issues propagating from gonzales-pe unless trailing-semicolon is explicitly set to 0 rather than merely omitting the rule altogether:

Seemingly any rule not listing in the sass-lint.yml should be turned off (severity of 0) since that's the clearest way for users of the plugin-in to communicate they are not concerned of that rule being applied to their codebase.

Overtime, it can be more work for them to apply rules they don't care about in their codebase than the rules they care about as rules become simultaneously more useful & complex.

Needs to be fully tested and run through CI. Lint tests as well as code tests.

With Sass, if a function or mixin doesn't have any arguments, the parenthesis can be left off of the definition and, in the case of mixins, the invocation as well

The Space Before Bang and Space After Bang rules consider both the !important and !default flag but should also consider the !global flag too.

This is currently blocked by the Gonzales-pe dependency.

If you're taking feature requests, I would love to be able to flag…

severity: warning

At a higher level than per linting rule, so that it doesn't throw Exit status 1, like the Ruby based scss-lint does.

One for a rainy day.. It would be great if we could have a few preset orders to chose from (biased for Recess) when configuring the property-sort-order, similar to scss-lint (https://github.com/brigade/scss-lint/tree/master/data/property-sort-orders) and the config (https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md#propertysortorder)

All rules need documentation

• Extends before mixins
• Extends before declarations
• Mixins before declarations
• Empty line between blocks
• No empty rulesets
• No extends
• Final Newline
• No IDs
• Indentation
• No Important
• Leading Zero
• Nesting Depth
• Placeholder in Extend
• Property Sort Order
• One Declaration per Line
• Single Line per Selector
• Space after Comma
• Space before colon
• Space after colon
• Space before brace
• Space between parens
• Trailing Semicolon
• Space before bang
• Space after bang

Make Sass Lint run-able via a command line command. The CLI Branch is where work is being done on this feature.

• Do not fail on error

Feedback Requested

What options should be available from the command line?

So, I have no idea how to write a linter, but I think this should probably be based off of ESLint, so I'm going to do that.

The readme shows rules with configuration options be set in example like the following code snippet, but does not does so in the sample .sass-lint.yml:

indentation:
  - 2
  -
    size: 2

It seems reasonable that rules such as quotes and indentation—rules commonly needed to be configured explicitly through options be done in the .sass-lint.yml file to reinforce this being done.

Noticed devs less experienced with YAML files & sass-lint I know were confused when they were getting output such as the following screenshot with their attempts of using gulp-sass-lint for the first time I've emulated:

It'd be rad if we could have rules that are interchangeable with ESLint.

If we do it right we could be able to share many style central rules i.e. like trailing commas, white space after commas etc..

These shouldn't require any Sass specific logic depending on the level of AST abstraction within the ESLint API.

Add rule to verify name format:

• Selectors
• Variables
• Functions
• Mixins

First off - great work! Super excited to adopt this so have had a play around!

Currently the empty-line-between-blocks rule doesn't allow a comment to precede a block. Is this intentional? If so, can we have a config parameter to allow this? Currently the following returns an error/warning.

// This is a comment
.block {

}

Looking forward to the release!

This issue will track the progress of the 1.0.0 release

1st Level Features

Features that must be launched with

• YAML config (partially complete)
• Work on globs/file paths as well as data streams
• Gulp plugin
• Grunt Plugin

Pluggable rules

2nd Level Features

Features that would be nice to have for initial release, but not blockers

• .sass support (dependent upon scssparse or other AST parser Gonzales)

CLI (being able to integrate with other tools higher priority)
Plugin compatibility with ESLint plugins (dependent upon scssparse AST)

Rules

These are the rules we're aiming to support for 1.0.0 as per the discussion in https://github.com/Snugug/sass-lint/issues/3#issuecomment-91764822. Reference

• Extends before Mixins
• Extends before Declarations
• Mixins before Declarations
• EmptyLineBetweenBlocks
• EmptyRule
• FinalNewline
• IdSelector
• Indentation
• LeadingZero
• NestingDepth
• PlaceholderInExtend
• PropertySortOrder
• SelectorDepth
• SingleLinePerProperty
• SingleLinePerSelector
• SpaceAfterComma
• SpaceAfterPropertyColon
• SpaceAfterPropertyName
• SpaceBetweenParens
• SpaceBeforeBrace
• TrailingSemicolon

When I turn on space-between-parens, I get the following error:

/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/sass-lint/lib/rules/space-between-parens.js:40
        if (first.type === 'space') {
                 ^
TypeError: Cannot read property 'type' of undefined
    at /Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/sass-lint/lib/rules/space-between-parens.js:40:18
    at RootNode.traverseByType (/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/sass-lint/node_modules/gonzales-pe/lib/node/root-node.js:1:1739)
    at Object.module.exports.detect (/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/sass-lint/lib/rules/space-between-parens.js:15:9)
    at /Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/sass-lint/index.js:50:25
    at Array.forEach (native)
    at Function.sassLint.lintText (/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/sass-lint/index.js:49:9)
    at DestroyableTransform._transform (/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/index.js:32:27)
    at DestroyableTransform.Transform._read (/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:10)
    at DestroyableTransform.Transform._write (/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:160:12)
    at doWrite (/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:326:12)

and the linter exits without doing any checks.

As Per SCSS Lint

Ensure all rules follow the add unique pattern

The following examples all compile fine with libsass via gulp-sass. However, they cause a parse error in sass-lint (run via gulp-sass-lint).

Original case:

$list-item-spacing: #{$baseline-ratio * 0.25}em;

Reduced case:

li {
    margin-top: #{1}em;
}

@extend is bad, mmkay?

As per SCSS Lint

As per SCSS Lint

Probably want a more descriptive name

Property Sort Order throws the following error:

/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/sass-lint/lib/rules/property-sort-order.js:73
              name = prop.first('ident').content;
                                        ^
TypeError: Cannot read property 'content' of undefined
    at /Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/sass-lint/lib/rules/property-sort-order.js:73:41
    at Node.forEach (/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/sass-lint/node_modules/gonzales-pe/lib/node/basic-node.js:1:2053)
    at /Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/sass-lint/lib/rules/property-sort-order.js:71:15
    at RootNode.traverseByType (/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/sass-lint/node_modules/gonzales-pe/lib/node/root-node.js:1:1739)
    at Object.module.exports.detect (/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/sass-lint/lib/rules/property-sort-order.js:63:9)
    at /Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/sass-lint/index.js:50:25
    at Array.forEach (native)
    at Function.sassLint.lintText (/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/sass-lint/index.js:49:9)
    at DestroyableTransform._transform (/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/index.js:32:27)
    at DestroyableTransform.Transform._read (/Users/minamarkham/fooBar/node_modules/gulp-sass-lint/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:10)

It seems to finish linting, but throws this error at the end.

Ensure maps are indented when defined in variables

As per SCSS Lint

Allow us to lint the spacing around a bang (before and after).

Scsslint currently do this with one rule, bangFormat, but I feel we should continue in the current style of whitespace rules and have two, space-before-bang and space-after-bang. Thoughts?

Happy to do this either way if it gets the thumbs up.

Given the following scss file

.selector {
  color: $header;

  @include breakpoint($tab1) {
    &:after {
      content: '|';
      padding-left: 12px;
    }
  }
}

I get

test.scss
  5:4  warning  Space expected between blocks  empty-line-between-blocks

Is this the correct behavior? I tought it should be ok?

As per SCSS Lint

I have tried both global and local installs. In either case, invoking the sass-lint command produces the following:

C:\project-path>sass-lint
module.js:338
    throw err;
          ^
Error: Cannot find module '../lib/sass-lint'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (C:\Users\jclanton\AppData\Roaming\npm\node_modules\sass-lint\bin\sass-lint.js:5:12)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)

I do not have this problem with any other packages.

Currently, the Developer Certificate of Origin section references the "Watson Design Guideline".

https://github.com/sasstools/sass-lint/blob/master/CONTRIBUTING.md#developer-certificate-of-origin

Add test if a property's value should be written as shorthand

Two rules, one for debug, one for warn

Check to see if selectors can be merged together

As per SCSS Lint

For example:

sass-lint *.scss ~/project/**/*.scss /www/stylesheets/*.scss

As per SCSS Lint