I've this issue `188:3 ✖ Insert "··" prettier/prettier` with `--fix` flag, but no error without `--fix` flag
silversonicaxel opened this issue · 6 comments
silversonicaxel commented
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 commented
I've run into this same issue.
silversonicaxel commented
@patrickcate fyi, I made it work setting CSS variables into SCSS variables
shivarajnaidu commented
I've a similar issue..
How to fix it
dartess commented
@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 commented
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 commented
So, the initial problem is just a configuration error :) There indentation is enabled manually.