Invalid errors when linting Vue.js SFCs.

[jpickwell]

What version of stylelint, prettier and stylelint-prettier are you using?

prettier: 1.16.3
stylelint: 9.10.1
stylelint-config-prettier: 5.0.0
stylelint-prettier: 1.0.6

Please paste any applicable config files that you're using (e.g. .prettierrc or .stylelintrc files)

// prettier.config.js
module.exports = {
  arrowParens: 'always',
  endOfLine: 'lf',
  semi: false,
  singleQuote: true
}

// stylelint.config.js
module.exports = { extends: ['stylelint-prettier/recommended'] }

What source code are you linting?

// stylelint_prettier_issue.scss
$variants: (
  error: $danger,
  info: $info,
  success: $success,
  warning: $warning
);

@each $variant, $color in $variants {
  .message-box--#{$variant} {
    .message-box__icon {
      color: $color;
    }
  }
}

<!-- stylelint_prettier_issue.vue -->
<script>
export default {
  name: 'StylelintPrettierIssue'
}
</script>

<template>
  <div />
</template>

<style lang="scss" scoped>
$variants: (
  error: $danger,
  info: $info,
  success: $success,
  warning: $warning
);

@each $variant, $color in $variants {
  .message-box--#{$variant} {
    .message-box__icon {
      color: $color;
    }
  }
}
</style>

What did you expect to happen?

No errors.

What actually happened?

$ npx stylelint stylelint_issue.scss stylelint_prettier_issue.vue

stylelint_prettier_issue.vue
 13:13  ✖  Replace "⏎··error:·$danger,⏎··info:·$info,⏎··success:·$success,⏎·" with "·error:·$danger,·info:·$info,·success:·$success,"   prettier/prettier
 18:3   ✖  Replace "⏎⏎@each·$variant,·$color·in·$variants·{⏎·" with "·@each·$variant,·$color·in·$variants·{"                            prettier/prettier
 22:1   ✖  Replace "····.message-box__icon·{⏎······color:·$color;⏎····}⏎··}⏎" with ".message-box__icon·{·color:·$color;·}·}·"           prettier/prettier

[khrome83]

@jpickwell - have you resolved this?

Can you check out #19 - it seems I am having a similar issue.

[jpickwell]

@khrome83, no I have not solved this. I'm now using Prettier v1.17.0 and Stylelint v10.0.1. I'm still experiencing this issue.

[dmnrmr]

I pretty much have the same problems.

<style lang="scss" scoped>
.foo {
  color: red;
}
</style>

Replace "⏎··color:·red;⏎" with "·color:·red;·"

If you do replace that transforming the code to

<style lang="scss" scoped>
.foo { color: red; }
</style>

You get Replace "·color:·red;"· with "⏎··color:·red;⏎"

This is on

"prettier": "1.17.0",
"stylelint": "10.0.1",
"stylelint-config-prettier": "5.1.0",
"stylelint-prettier": "1.0.6"

[BPScott]

#18 offers a reproduction in plain css that suggests it isn't the scss lang being a pain

<style scoped>
.header {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.cards {
  display: flex;
  flex-wrap: wrap;
}
</style>

[BPScott]

Hi @jpickwell, @khrome83 and @dmnrmr,

Thank you for putting up with my silence over the past few weeks (ok fine 2 months). Life got a bit hectic for a while there :)

---

Unfortunatly stylelint's css-in-js stuff is pretty opaque to me as I've never used it. Would one of you be able to set up a repo that reproduces this issue that I can clone and go into debugging it without wondering how to setup the css-in-js stuff?

[dmnrmr]

Here you go: https://github.com/dmnrmr/webpack-prettier-stylelint

[khrome83]

This does seem to be related to scss or any other lang property on the style. The big issue is it flags new lines, and then removes them. It seems to be the root cause.

[BPScott]

@dmnrmr, thanks that was exactly what I was after and allowed me to find the root cause pretty quickly.

#22 will fix this. I've just published v1.1.0 which contains that PR.

Basically the issue was stylelint 9.10.x changed how vue files got passed into rules, which meant stylelint-prettier run prettier's vue parser over a block of CSS.

While I could make it format the chunks of the file using prettier it doesn't actually feel worth it - it'll only prettify the contents of your <style> tag and you're almost certainly about to run the whole file through prettier anyway (as you want the rest of the file formatted) so it's extra work for no good reason.