prettier/stylelint-prettier

Invalid errors when linting Vue.js SFCs.

jpickwell opened this issue · 8 comments

jpickwell commented

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 commented

@jpickwell - have you resolved this?

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

jpickwell commented

@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 commented

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 commented

#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 commented

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?

khrome83 commented

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 commented

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

  • 👍1