sasstools / sass-lint Goto Github PK
View Code? Open in Web Editor NEWPure Node.js Sass linting
License: MIT License
Pure Node.js Sass linting
License: MIT License
@extend
is bad, mmkay?
As per SCSS Lint
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
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.
Two rules, one for debug, one for warn
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.
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)
Ensure all rules follow the add unique pattern
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?
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
As per SCSS Lint
As per ESLint
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.
Make Sass Lint run-able via a command line command. The CLI Branch is where work is being done on this feature.
What options should be available from the command line?
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.
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.
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!
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 things I'd like to see this be able to do:
.sass
support (if it's not too much trouble, .scss
first especially for Libsass)Anything I'm missing?
Currently the Space Before Bang and Space After Bang rules only consider the !important
flag. It should consider the !default
flag too.
When you have include set to true, the rule incorrectly reports all non decimal numbers as issues.
Using v1.0.0
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;
}
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.
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.
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.
All rules need documentation
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.
Check to see if selectors can be merged together
Add a rule that flags up the use of !important
🔥
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.
Add Rule to check to see if properties are spelled correctly to help avoid errors
As per SCSS Lint
Probably want a more descriptive name
As Per SCSS Lint
Needs to be fully tested and run through CI. Lint tests as well as code tests.
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.
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.
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:
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?
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.
Add test if a property's value should be written as shorthand
This issue will track the progress of the 1.0.0 release
Features that must be launched with
Pluggable rules
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)
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
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
Ensure maps are indented when defined in variables
Add rule to verify name format:
As per SCSS Lint
As per SCSS Lint
For example:
sass-lint *.scss ~/project/**/*.scss /www/stylesheets/*.scss
As per SCSS Lint
As per SCSS Lint
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.