TypeError: Cannot read property 'start' of undefined for Sass for insude Vue

[akoidan]

Clearly describe the bug

The sass loops inside of VUE files cause linter to crash

Which rule, if any, is the bug related to?

not related to any rule

What CSS is needed to reproduce the bug?

Any rule that has @for loop in sass

  $class-slug: for !default

  @for $i from 1 through 4
    .#{$class-slug}-#{$i}
      width: 60px + $i
      color: black

What stylelint configuration is needed to reproduce the bug?

Any rule, is not rule specific. Put something to tigger the linter.

{
  "rules": {
    "color-named": "never"
  }
}

Which version of stylelint are you using?

11.1.1

How are you running stylelint: CLI, PostCSS plugin, Node.js API?

./node_modules/.bin/stylelint Sass.vue

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

Yes, it's related to SASS loops

What did you expect to happen?

stylelint would work instead of failing with an error

What actually happened (e.g. what warnings or errors did you get)?

An error occured

TypeError: Cannot read property 'start' of undefined
    at LocalFixer.node (/home/andrew/sass-for/node_modules/postcss-syntax/parse-style.js:35:27)
    at /home/andrew/sass-for/node_modules/postcss-syntax/parse-style.js:41:9
    at /home/andrew/sass-for/node_modules/postcss/lib/container.js:135:18
    at Root.each (/home/andrew/sass-for/node_modules/postcss/lib/container.js:101:16)
    at Root.walk (/home/andrew/sass-for/node_modules/postcss/lib/container.js:131:17)
    at LocalFixer.root (/home/andrew/sass-for/node_modules/postcss-syntax/parse-style.js:40:8)
    at LocalFixer.parse (/home/andrew/sass-for/node_modules/postcss-syntax/parse-style.js:69:9)
    at parseStyle (/home/andrew/sass-for/node_modules/postcss-syntax/parse-style.js:88:39)
    at /home/andrew/sass-for/node_modules/postcss-syntax/parse-style.js:103:17
    at Array.forEach (<anonymous>)

To reproduce the issue:

• git clone https://github.com/akoidan/style-sass-for-issue
• cd style-sass-for-issue
• yarn install
• yarn run works
• yarn run fails

Also here's the demo

[AleshaOleg]

@akoidan sorry, @for is not supported yet 🤷‍♂️ https://github.com/AleshaOleg/postcss-sass/issues/53

[akoidan]

@akoidan sorry, @for is not supported yet

Any ETA, cause it seems to be for 1.5 years already. Maybe we can ship the package that just skips fors loops? Simple check string.indexof('@for') is already better than nothing

[AleshaOleg]

Released in 0.4.2

[AleshaOleg]

https://github.com/stylelint/stylelint/pull/4408

[akoidan]

@AleshaOleg still doesn't work. The example above provides this error. Please mind the extension is 'vue' not 'sass'

: npm ls |grep postcss-sass
│ ├─┬ [email protected]

✖ ｢wdm｣: TypeError: Cannot read property 'syntax' of undefined
    at /home/andrew/WebstormProjects/vue-webpack-typescript/src/assets/sass/mixins.sass:27:5
    at Declaration.toString (/home/andrew/WebstormProjects/vue-webpack-typescript/node_modules/postcss-syntax/patch-postcss.js:38:67)
    at /home/andrew/WebstormProjects/vue-webpack-typescript/node_modules/stylelint/lib/rules/color-hex-case/index.js:27:50
    at /home/andrew/WebstormProjects/vue-webpack-typescript/node_modules/postcss-sass/node_modules/postcss/lib/container.js:190:18
    at /home/andrew/WebstormProjects/vue-webpack-typescript/node_modules/postcss-sass/node_modules/postcss/lib/container.js:135:18
    at Rule.each (/home/andrew/WebstormProjects/vue-webpack-typescript/node_modules/postcss-sass/node_modules/postcss/lib/container.js:101:16)
    at Rule.walk (/home/andrew/WebstormProjects/vue-webpack-typescript/node_modules/postcss-sass/node_modules/postcss/lib/container.js:131:17)
    at /home/andrew/WebstormProjects/vue-webpack-typescript/node_modules/postcss-sass/node_modules/postcss/lib/container.js:148:24
    at Rule.each (/home/andrew/WebstormProjects/vue-webpack-typescript/node_modules/postcss-sass/node_modules/postcss/lib/container.js:101:16)
    at Rule.walk (/home/andrew/WebstormProjects/vue-webpack-typescript/node_modules/postcss-sass/node_modules/postcss/lib/container.js:131:17)
    at /home/andrew/WebstormProjects/vue-webpack-typescript/node_modules/postcss-sass/node_modules/postcss/lib/container.js:148:24

: cat ./node_modules/postcss-sass/package.json  |grep version
  "version": "0.4.2",

[AleshaOleg]

Probably an extension might be an issue, unfortunately. Error on this line - https://github.com/gucong3000/postcss-syntax/blob/master/patch-postcss.js#L38.

Hello, @gucong3000. Can you please help us to figure out, what's wrong here? And how we can skip unsupported rules? Thanks!

[AleshaOleg]

@alpaca-tc did you already try new version somewhere? Is it working for you?

[akoidan]

@AleshaOleg seems like @for works now with freshly-released stylelint:12.0.0. Needs more testing though... Example is here

[akoidan]

Nah, wrong still crases in some cases mind the branch crash

[50rayn]

<style lang="scss" scoped>
  .ip-ranges {
    grid-template: 'ipInput addButton' / 1fr auto;
    display: grid;
    grid-gap: 10px;
    align-items: center;

    $areas: ipInput addButton;

    @each $area in $areas {
      .#{$area} { grid-area: $area; }
    }

    .ipInput { margin-bottom: 0; }
  }
</style>

Packge	Version
stylelint	^13.7.0
stylelint-config-recess-order	^2.1.0
stylelint-config-standard	^20.0.0
stylelint-scss	^3.18.0
stylelint-webpack-plugin	^2.1.0

Having the same issue: Stylelint: Unknown word (CssSyntaxError). When trying to use @each it shows me the error and doesn't lint anymore.

[mbinet]

Hi guys,

this issue makes stylelint unusable with SASS.

Have you had the chance to make some progress fixing it? Even only skipping the error would be great, because for now the only workaround is to disable stylelint entirely... 😞

I'm happy to help, write a PR or anything but I have to idea how to fix this!

[valentinoli]

I'm getting the same error when applying a media query in Vuetify with map-get like this

<style lang="sass">
  @import '~vuetify/src/styles/styles.sass'

  @media #{map-get($display-breakpoints, 'md-and-down')}
    .custom-class
      display: none
</style>

I don't know what's happening but I suspect that internally @each is called to resolve the media query

[Fischer-L]

There is a similar issue with a simple @media rule, like below

<style lang="sass">
.page
  &-box
     width: 456px
  @media screen and (max-width: 123px)
    &-box
      width: 123px
<style>

[mktcode]

I just ran into the same problem now and then realized that I already used a workaround months ago:

=fix-postcss-bug
  @media screen and (max-width: 1000px)
    .about
      border: solid 100px red
+fix-postcss-bug

Not sure where I found that though or why it works and what this syntax really is but it works.