Add experimental SASS parser support

[ai]

Guys, I have a good news. PostCSS got postcss-sass parser.

We made it specially for Stylelint to bring more users to our warm and welcome ecosystem 👿

Could we add this parser to docs? But this parser is on early alpha version.

This parser will help me to convince CSSComb team to send all their users to Stylelint (they decide to close project and now choosing linter for recommendation).

/cc @jeddy3 @davidtheclark @evilebottnawi

[ai]

If you have any question, you can ask @AleshaOleg

[alexander-akait]

@stylelint/core Theoretically we can add a system test and see how compatible it is with our rules

[AleshaOleg]

@evilebottnawi i can write system test, to make this plugin compatible with stylelint. Please, show me examples of this test, and I will make a try

[alexander-akait]

@AleshaOleg examples https://github.com/stylelint/stylelint/tree/master/system-tests

[jeddy3]

@AleshaOleg You might want to base your system test on the existing 005 one as, I believe, that config covers all stylelint's core rules. Of course, you'll need to adapt the stylesheet to be SASS-compatible. You might also want to make use of the Node API's custom syntax option to use your SASS parser.

[jeddy3]

@AleshaOleg How did you get on? Were you able to check if SASS syntax is broadly compatible with stylelint?

[AleshaOleg]

@jeddy3 sorry, thinking that I answered to you:) Actually, didn't started yet, but will have a try on next couple of days. Thanks, for deep explanation, what and how I should do!

[AleshaOleg]

@jeddy3 decided to do it right now.
Here is a result - https://github.com/AleshaOleg/stylelint or see pr
I make all tests, like for scss syntax, but not actually understood how make tests for standalone-syntax, because I have a parser not a syntax, as in the previous cases (scss, sss, less). May be @ai will help me?

Also, found issues on which I need work in postcss-sass:

• Variables/ nested variables
• Comments
• List / nested list
• Custom sass properties
• Nested sass map
• Nested properties
  Could you tell me, what would we need done asap from this list, to run sass support? And in which priority? I think, I should start from variables.

Now, let's talk about disabling row, from stylelint using comment // stylelint-disable
In sass there is no comments, after declaration like in CSS:

.foo {
    bar: baz; // stylelint-disable
}

Most likely it will be impossible to implement this feature for sass?
Thanks!

[ai]

What is “standalone-syntax”?

[ai]

I think we should disable rules by this syntax:

.foo
  bar: baz // stylelint-disable

[AleshaOleg]

@ai my mistake that I didn't explain about standalone-syntax. It's a test suite, here.

For example here, I can't make a test for sass, I tried and have the error like: no opts defined, so I started thinking is it connected with fact that postcss-css it's a parser, not a syntax like postcss-scss, and when I call it throw postcss, I should make it in this way:

postcss(plugins).process(sass, { parser: postcssSass }), and not in this:
postcss(plugins).process(sass, { syntax: postcssSass }). That's why I think, I can't write tests for this case, is it not?

[AleshaOleg]

@ai hm, my bad too.
Thought that it is impossible to write comments on this way, according to Sass doc

[ai]

@AleshaOleg

1.You can ignore all syntax features for now.
2. Or you can write stringifier. For Sass case it will be very easy. Check SugarSS stringifier.

[AleshaOleg]

@ai I missed to check gpe, if it compatible with comments in Sass. Yes, it is. So, I don't need stringifier in this case. Will wait a response, from stylelint guys. Thanks!

[davidtheclark]

The comment for disabling a line is /* stylelint-disable-line */ (https://stylelint.io/user-guide/configuration/#turning-rules-off-from-within-your-css). I guess maybe that doesn't matter anymore, since it looks like you figured this out.

Could you tell me, what would we need done asap from this list, to run sass support? And in which priority? I think, I should start from variables.

Honestly, soon after we release support for Sass people are going to run into all of these problems. So they all need to be addressed, really --- don't you think?

Will wait a response, from stylelint guys.

Was there any more information you need?

[ntwb]

postcss-sass v0.2.0 has been released 🎉

https://github.com/AleshaOleg/postcss-sass/releases/tag/0.2.0

[Grawl]

I just updated my testing sandbox for .sass and Stylelint and it's working https://github.com/Grawl/stylelint-sass-test

[AleshaOleg]

Released postcss-sass@0.3.0.

[ntwb]

@AleshaOleg The checklist in #2486 (comment), are all the items in that list now implemented in postcss-sass@0.3.0 (i.e. List / nested list and Nested sass map)?

I've added this to the 9.0.0 milestone and if everything is complete we can release stylelint 9.0.0 with SASS support

[AleshaOleg]

@ntwb I hope, yes. It's not possible to test everything, but we have test cases for lists/maps.

[ntwb]

Thanks @AleshaOleg, marking this issue as fixed via #2503

For any issues that arise using sass and stylelint please create a new issue and include as much information as you can in the appropriate issue template to help us up you 😄

[MarcelRittershaus]

example

npm i
"node-sass": "4.11.0",
"stylelint": "9.10.1",
"stylelint-config-standard": "18.2.0",
"stylelint-config-sass-guidelines": "5.3.0",
"stylelint-declaration-use-variable": "1.7.0",
"stylelint-no-unsupported-browser-features": "3.0.2",
"stylelint-order": "2.0.0",
"stylelint-scss": "3.5.4",
"stylelint-webpack-plugin": "0.10.5",

.stylelintrc.json

{
"ignoreFiles": [
" /public/",
"/dist/",
"/coverage/",
"/docs/",
"/tests/",
"/tmp/",
"/node_modules/**"
],
"plugins": [
"stylelint-declaration-use-variable",
"stylelint-no-unsupported-browser-features",
"stylelint-order",
"stylelint-scss"
],
"extends": [
"stylelint-config-standard",
"stylelint-config-sass-guidelines"
],
"rules": {
"scss/at-import-no-partial-leading-underscore": true,
"scss/at-mixin-argumentless-call-parentheses": "always",
"order/order": [
"custom-properties",
"declarations",
"at-rules",
"rules"
],

"sh-waqar/declaration-use-variable": [
  "/color/",
  "font-size"
],
"indentation": [2, {
  "severity": "warning"
}],
"max-nesting-depth": 5,
"at-rule-no-unknown": [
  true,{
  "ignoreAtRules": [
    "include",
    "extend",
    "mixin",
    "return",
    "function",
    "each",
    "for",
    "debug",
    "if",
    "else",
    "content"
  ]
}
],
"unit-blacklist": [
  "em",
  "ex",
  "cm",
  "mm",
  "in",
  "pt",
  "pc"
],
"value-no-vendor-prefix": true,
"selector-pseudo-class-blacklist": [
  "nth-of-type",
  "first-of-type",
  "last-of-type",
  "nth-last-of-type"
],
"property-case": "lower",
"unit-case": "lower",
"value-keyword-case": "lower",
"color-named": "never",
"number-max-precision": 2,
"declaration-no-important": true,
"selector-max-id": 0,
"selector-max-type": 0,
"selector-max-universal": 0,
"string-quotes": "single",
"declaration-block-trailing-semicolon": "never",
"no-eol-whitespace": [true, {
  "ignore": ["empty-lines"]
}],
"number-leading-zero": "always"

}
}

[Grawl]

@MarcelRittershaus cannot understand your question