I've this issue `188:3 ✖ Insert "··" prettier/prettier` with `--fix` flag, but no error without `--fix` flag

[silversonicaxel]

What version of stylelint, prettier and stylelint-prettier are you using? I'm using:

"prettier": "^2.6.2",
"stylelint": "^14.8.4",
"stylelint-config-prettier": "^9.0.3",
"stylelint-prettier": "^2.0.0",

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

{
  "arrowParens": "avoid",
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "tabWidth": 2
}

and my .stylelintrc is

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-standard-scss",
    "stylelint-prettier/recommended"
  ],
  "plugins": [
    "stylelint-scss",
    "stylelint-selector-bem-pattern",
    "stylelint-order",
    "stylelint-prettier"
  ],
  "rules": {
    "alpha-value-notation": "number",
    "at-rule-allowed-list": null,
    "at-rule-disallowed-list": null,
    "at-rule-name-case": "lower",
    "at-rule-no-unknown": null,
    "at-rule-no-vendor-prefix": true,
    "at-rule-semicolon-newline-after": "always",
    "at-rule-semicolon-space-before": "never",
    "block-closing-brace-empty-line-before": "never",
    "block-closing-brace-newline-after": [
      "always",
      {
        "ignoreAtRules": [ "if", "else" ]
      }
    ],
    "block-closing-brace-newline-before": "always-multi-line",
    "block-closing-brace-space-after": null,
    "block-closing-brace-space-before": "always-single-line",
    "block-no-empty": true,
    "block-opening-brace-newline-after": "always-multi-line",
    "block-opening-brace-newline-before": "never-single-line",
    "block-opening-brace-space-after": "always-single-line",
    "block-opening-brace-space-before": "always",
    "color-function-notation": "legacy",
    "color-hex-case": "lower",
    "color-hex-length": "long",
    "color-named": null,
    "color-no-hex": null,
    "color-no-invalid-hex": true,
    "comment-empty-line-before": [
      "always",
      {
        "except": [ "first-nested" ],
        "ignore": [ "stylelint-commands" ]
      }
    ],
    "comment-no-empty": true,
    "comment-whitespace-inside": "always",
    "comment-word-disallowed-list": null,
    "custom-media-pattern": null,
    "custom-property-pattern": ".+",
    "custom-property-empty-line-before": [
      "always",
      {
        "except": [
          "after-custom-property",
          "first-nested"
        ],
        "ignore": [
          "after-comment",
          "inside-single-line-block"
        ]
      }
    ],
    "declaration-bang-space-after": "never",
    "declaration-bang-space-before": "always",
    "declaration-block-no-duplicate-properties": [
      true,
      {
        "ignore": [ "consecutive-duplicates-with-different-values" ]
      }
    ],
    "declaration-block-no-redundant-longhand-properties": true,
    "declaration-block-no-shorthand-property-overrides": true,
    "declaration-block-semicolon-newline-after": "always-multi-line",
    "declaration-block-semicolon-newline-before": "never-multi-line",
    "declaration-block-semicolon-space-after": "always-single-line",
    "declaration-block-semicolon-space-before": "never",
    "declaration-block-single-line-max-declarations": 1,
    "declaration-block-trailing-semicolon": "always",
    "declaration-colon-space-after": "always-single-line",
    "declaration-colon-space-before": "never",
    "declaration-empty-line-before": [
      "always",
      {
        "except": [
          "after-declaration",
          "first-nested"
        ],
        "ignore": [
          "after-comment",
          "inside-single-line-block"
        ]
      }
    ],
    "declaration-no-important": null,
    "declaration-property-unit-allowed-list": null,
    "declaration-property-unit-disallowed-list": null,
    "declaration-property-value-allowed-list": null,
    "declaration-property-value-disallowed-list": [
      {
        "/color/": ["none"]
      },
      {
        "message": "Color related properties do not support 'none'" 
      }
    ],
    "font-family-name-quotes": "always-where-recommended",
    "font-family-no-duplicate-names": true,
    "font-family-no-missing-generic-family-keyword": true,
    "font-weight-notation": [
      "numeric",
      {
        "ignore": [ "relative" ]
      }
    ],
    "function-allowed-list": null,
    "function-disallowed-list": null,
    "function-calc-no-unspaced-operator": true,
    "function-comma-newline-before": "never-multi-line",
    "function-comma-newline-after": "always-multi-line",
    "function-comma-space-after": "always-single-line",
    "function-comma-space-before": "never",
    "function-linear-gradient-no-nonstandard-direction": true,
    "function-max-empty-lines": 0,
    "function-name-case": "lower",
    "function-no-unknown": null,
    "function-parentheses-newline-inside": "always-multi-line",
    "function-parentheses-space-inside": "never-single-line",
    "function-url-no-scheme-relative": null,
    "function-url-quotes": "always",
    "function-url-scheme-allowed-list": null,
    "function-url-scheme-disallowed-list": null,
    "function-whitespace-after": "always",
    "indentation": 2,
    "keyframe-declaration-no-important": true,
    "keyframes-name-pattern": "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
    "length-zero-no-unit": true,
    "linebreaks": "unix",
    "max-empty-lines": 1,
    "max-nesting-depth": null,
    "media-feature-colon-space-after": "always",
    "media-feature-colon-space-before": "never",
    "media-feature-name-allowed-list": null,
    "media-feature-name-disallowed-list": null,
    "media-feature-name-case": "lower",
    "media-feature-name-no-unknown": true,
    "media-feature-name-no-vendor-prefix": true,
    "media-feature-name-value-allowed-list": null,
    "media-feature-parentheses-space-inside": "never",
    "media-feature-range-operator-space-after": "always",
    "media-feature-range-operator-space-before": "always",
    "media-query-list-comma-newline-after": "always-multi-line",
    "media-query-list-comma-newline-before": "never-multi-line",
    "media-query-list-comma-space-after": "always-single-line",
    "media-query-list-comma-space-before": "never",
    "no-descending-specificity": null,
    "no-duplicate-at-import-rules": true,
    "no-duplicate-selectors": null,
    "no-empty-first-line": true,
    "no-empty-source": true,
    "no-eol-whitespace": true,
    "no-extra-semicolons": true,
    "no-invalid-double-slash-comments": true,
    "no-missing-end-of-source-newline": true,
    "no-unknown-animations": true,
    "number-max-precision": 4,
    "number-no-trailing-zeros": true,
    "order/order": ["custom-properties", "declarations"],
    "order/properties-alphabetical-order": true,
    "plugin/selector-bem-pattern": {
      "componentName": "[A-Z]+",
      "componentSelectors": {
        "initial": "^\\.{componentName}(?:-[a-z]+)?$",
        "combined": "^\\.combined-{componentName}-[a-z]+$"
      },
      "utilitySelectors": "^\\.util-[a-z]+$"
    },
    "prettier/prettier": true,
    "property-allowed-list": null,
    "property-disallowed-list": null,
    "property-case": "lower",
    "property-no-unknown": true,
    "property-no-vendor-prefix": true,
    "scss/at-rule-no-unknown": true,
    "scss/at-else-closing-brace-newline-after": "always-last-in-chain",
    "scss/at-else-closing-brace-space-after": "always-intermediate",
    "scss/at-else-empty-line-before": "never",
    "scss/at-else-if-parentheses-space-before": "always",
    "scss/at-extend-no-missing-placeholder": null,
    "scss/at-function-named-arguments": null,
    "scss/at-function-parentheses-space-before": "never",
    "scss/at-function-pattern": null,
    "scss/at-if-closing-brace-newline-after": "always-last-in-chain",
    "scss/at-if-closing-brace-space-after": "always-intermediate",
    "scss/at-import-no-partial-leading-underscore": true,
    "scss/at-import-partial-extension-blacklist": [ "scss" ],
    "scss/at-import-partial-extension-whitelist": null,
    "scss/at-mixin-argumentless-call-parentheses": "always",
    "scss/at-mixin-named-arguments": null,
    "scss/at-mixin-parentheses-space-before": "never",
    "scss/at-mixin-pattern": null,
    "scss/at-rule-conditional-no-parentheses": null,
    "scss/declaration-nested-properties": null,
    "scss/declaration-nested-properties-no-divided-groups": null,
    "scss/dollar-variable-colon-newline-after": null,
    "scss/dollar-variable-colon-space-after": "always",
    "scss/dollar-variable-colon-space-before": "never",
    "scss/dollar-variable-default": null,
    "scss/dollar-variable-empty-line-before": [
      "always",
      {
        "except": [ "after-dollar-variable", "after-comment", "first-nested" ]
      }
    ],
    "scss/dollar-variable-no-missing-interpolation": true,
    "scss/dollar-variable-pattern": null,
    "scss/double-slash-comment-empty-line-before": [
      "always",
      {
        "except": [ "first-nested" ],
        "ignore": [ "between-comments", "stylelint-commands" ]
      }
    ],
    "scss/double-slash-comment-inline": null,
    "scss/double-slash-comment-whitespace-inside": "always",
    "scss/function-no-unknown": [
      true,
      {
        "ignoreFunctions": [
          "/^map-fetch/",
          "/^split-fontset-name/",
          "/^str-replace/"
        ]
      }
    ],
    "scss/media-feature-value-dollar-variable": null,
    "scss/no-dollar-variables": null,
    "scss/no-duplicate-dollar-variables": null,
    "scss/operator-no-newline-after": null,
    "scss/operator-no-newline-before": true,
    "scss/operator-no-unspaced": null,
    "scss/partial-no-import": null,
    "scss/percent-placeholder-pattern": null,
    "scss/selector-no-redundant-nesting-selector": true,
    "selector-attribute-brackets-space-inside": "never",
    "selector-attribute-operator-allowed-list": null,
    "selector-attribute-operator-disallowed-list": null,
    "selector-attribute-operator-space-after": "never",
    "selector-attribute-operator-space-before": "never",
    "selector-attribute-quotes": "always",
    "selector-class-pattern": null,
    "selector-combinator-space-after": "always",
    "selector-combinator-space-before": "always",
    "selector-combinator-allowed-list": null,
    "selector-combinator-disallowed-list": null,
    "selector-descendant-combinator-no-non-space": true,
    "selector-id-pattern": null,
    "selector-list-comma-newline-after": "always",
    "selector-list-comma-newline-before": "never-multi-line",
    "selector-list-comma-space-after": "always-single-line",
    "selector-list-comma-space-before": "never",
    "selector-max-attribute": null,
    "selector-max-class": null,
    "selector-max-combinators": null,
    "selector-max-compound-selectors": null,
    "selector-max-empty-lines": 0,
    "selector-max-id": 1,
    "selector-max-pseudo-class": 5,
    "selector-max-specificity": null,
    "selector-max-type": null,
    "selector-max-universal": 1,
    "selector-nested-pattern": null,
    "selector-no-qualifying-type": null,
    "selector-no-vendor-prefix": true,
    "selector-pseudo-class-allowed-list": null,
    "selector-pseudo-class-disallowed-list": null,
    "selector-pseudo-class-case": "lower",
    "selector-pseudo-class-no-unknown": true,
    "selector-pseudo-class-parentheses-space-inside": "never",
    "selector-pseudo-element-allowed-list": null,
    "selector-pseudo-element-disallowed-list": null,
    "selector-pseudo-element-case": "lower",
    "selector-pseudo-element-colon-notation": null,
    "selector-pseudo-element-no-unknown": true,
    "selector-type-case": "lower",
    "selector-type-no-unknown": true,
    "shorthand-property-no-redundant-values": true,
    "string-no-newline": true,
    "string-quotes": "single",
    "time-min-milliseconds": 100,
    "unit-allowed-list": null,
    "unit-disallowed-list": null,
    "unit-case": "lower",
    "unit-no-unknown": true,
    "value-keyword-case": null,
    "value-list-comma-newline-after": "always-multi-line",
    "value-list-comma-newline-before": "never-multi-line",
    "value-list-comma-space-after": "always-single-line",
    "value-list-comma-space-before": "never",
    "value-list-max-empty-lines": 0,
    "value-no-vendor-prefix": true
  }
}

What source code are you linting? This is the code with 0, 2, 4, 4, 4 tabs from first to fifth line.

.my-class
  transition: color var(--designtoken-motion-duration-textcolor)
    var(--designtoken-motion-easing-textcolor),
    background-color var(--designtoken-motion-duration-backgroundcolor)
    var(--designtoken-motion-easing-backgroundcolor);

What did you expect to happen? stylelint --fix '**/*.scss' development command gives me good result! stylelint '**/*.scss' production command gives me good result!

What actually happened? stylelint --fix '**/*.scss' development command gives me indeed good result! stylelint '**/*.scss' production command gives me the following error

myfile.scss
 32:5  ✖  Insert "··"  prettier/prettier
 34:1  ✖  Insert "··"  prettier/prettier

And, it is a blocking issue for deploying.

Am I setting some prettier property wrong?

[patrickcate]

I've run into this same issue.

[silversonicaxel]

@patrickcate fyi, I made it work setting CSS variables into SCSS variables

[shivarajnaidu]

I've a similar issue..

How to fix it

[dartess]

@BPScott hello again

I was able to reproduce this case. Minimal config for this:

{
  "customSyntax": "postcss-scss",
  "plugins": ["stylelint-prettier"],
  "rules": {
    "indentation": 2,
    "prettier/prettier": true
  }
}

Apparently there was a conflict between two rules.

But indentation was removed in stylelint@16, so it can be closed as not actual.

[BPScott]

Thanks @dartess!

When using stylelint v14, you should use https://github.com/prettier/stylelint-config-prettier to disable all rules that conflict with prettier - including indentation. This is because prettier's ethos is that prettier should handle code formatting, while linters should handle code quality. That package also provides a helper tool that lets you identify any rules that you currently have enabled that would conflict with prettier's styling.

As noted, stylelint v15 removed all formatting rules that would conflict with prettier so this is impossible to be an issue as of stylelint v15.

[dartess]

So, the initial problem is just a configuration error :) There indentation is enabled manually.