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

Question

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

akoidan opened this issue 5 years ago · 14 comments

akoidan commented 5 years ago

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

Answer 1 · 2019-10-23T20:12:23.000Z

@akoidan sorry, @for is not supported yet 🤷‍♂️
#53

Answer 2 · 2019-10-23T20:40:41.000Z

@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

Answer 3 · 2019-11-11T09:04:35.000Z

Released in 0.4.2

Answer 4 · 2019-11-11T09:51:31.000Z

stylelint/stylelint#4408

Answer 5 · 2019-11-11T15:18:07.000Z

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

: npm ls |grep postcss-sass
│ ├─┬ postcss-sass@0.4.2

✖ ｢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",

Answer 6 · 2019-11-11T15:42:34.000Z

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!

Answer 7 · 2019-11-11T15:43:35.000Z

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

Answer 8 · 2019-11-16T19:32:11.000Z

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

Answer 9 · 2019-11-16T19:37:50.000Z

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

Answer 10 · 2020-09-02T07:58:50.000Z

<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.

Answer 11 · 2021-01-21T15:54:43.000Z

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!

Answer 12 · 2021-04-24T19:12:21.000Z

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

Answer 13 · 2021-06-17T12:42:27.000Z

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>

Answer 14 · 2021-06-21T16:37:06.000Z

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.